awwwards 首页设计学习

本文仅用户个人学习记录使用,意在提高自己的交互设计,仅此而已,欢迎指正. 背景介绍: Awwwards 是一个评选和展示全球顶级网站设计的平台。你可以在这里找到许多令人惊叹的网站设计,了解最新的设计趋势和创新的界面交互方式。

参考设计截图

优点

  • header 的 search 比平常的网站设计更宽的原因是因为搜索的内容较多,聚焦搜索框的时候会有一个页面遮罩层,突出搜索的内容,搜索框大和搜索弹框等宽方便展示更丰富的内容,颜色的搭配让 header 看起来也简洁大方 搜索框中还有限定搜索的范围 / Best Tags,让搜索内容更准确,能让用户快速跳转或者搜索到自己想要的内容
  • 接着 是展示今天的网站设计,设计图上会轮播设计团队的姓名,为了方便能快速了解到设计作者,还依次展示了设计作者
  • 网页快速定位栏和其他的网页设计不同,该网站将快速定位栏直接固定在了页面的底部,我猜想这样的设计是为了让页面能够有足够的空间来展示更多的内容吧
  • 快速定位栏的 Home Menu Item,可以筛选出更多有关 该网站的作品其他大类,这样的设计很炫酷!
  • 因为 SOTD(Site Of The day) 每日网站 是设计的作品,所以在 hover 的时候会出现交互的按钮,让用户可以通过交互去探索该 SOTD
  • Login 和 Sign Up 均是弹框,弹框的好处就是避免用户离开当前上下文,避免造成不同的上下文切换。

自我感悟

  • 当 Sign Up 流程不多的时候通常弹框或者抽屉的设计会避免用户在不同的页面上切换,减少页面之间的跳转次数,但是当 Sign 需要收集用户更多信息且一个非滚动页面装不下这么多内容的时候建议分步让用户填写,为了有更好的体验,可以让用户跳过某些不必要的页面
  • 网页一定要干净简洁!
相关推荐
anOnion3 天前
构建无障碍组件之Toolbar Pattern
前端·html·交互设计
anOnion18 天前
构建无障碍组件之Table Pattern
前端·html·交互设计
OpenTiny社区21 天前
生成式 UI 藏大招!看似露营案例,实则电商集成 GenUI SDK 干货
前端·ai编程·交互设计
anOnion23 天前
构建无障碍组件之Tooltip Pattern
前端·html·交互设计
Kim.Li1 个月前
什么是包容性设计?从跨文化、性别到种族多样性的 UX 设计实战
人机交互·产品经理·视觉设计·交互设计·软技能·ui设计
anOnion1 个月前
构建无障碍组件之Spinbutton Pattern
前端·html·交互设计
程序员海军1 个月前
设计圈真的要变天了:ChatGPT Image 2 不只是会生图了
aigc·设计师·交互设计
anOnion1 个月前
构建无障碍组件之Window Splitter Pattern
前端·html·交互设计
ouzz1 个月前
我在 React Canvas 里做了一个液态玻璃透镜效果
canvas·视觉设计
sinat_333518871 个月前
从用户体验视角看太极重命名软件的界面设计
交互设计·用户体验·界面设计