awwwards 首页设计学习

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

参考设计截图

优点

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

自我感悟

  • 当 Sign Up 流程不多的时候通常弹框或者抽屉的设计会避免用户在不同的页面上切换,减少页面之间的跳转次数,但是当 Sign 需要收集用户更多信息且一个非滚动页面装不下这么多内容的时候建议分步让用户填写,为了有更好的体验,可以让用户跳过某些不必要的页面
  • 网页一定要干净简洁!
相关推荐
anOnion16 小时前
构建无障碍组件之Switch Pattern
前端·html·交互设计
刮涂层_赢大奖3 天前
不会 Figma 也能出设计稿:我开源了一个让 AI 直接在 Figma 里画 UI 的工具
claude·交互设计·cursor
九幽归墟4 天前
一篇文章让你读懂Figma的原始数据结构
低代码·视觉设计
anOnion9 天前
构建无障碍组件之Radio group pattern
前端·html·交互设计
anOnion14 天前
构建无障碍组件之Checkbox pattern
前端·html·交互设计
anOnion18 天前
构建无障碍组件之Accordion Pattern
html·设计·交互设计
anOnion24 天前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
anOnion25 天前
构建无障碍组件之Dialog Pattern
前端·html·交互设计
anOnion1 个月前
构建无障碍组件之Alert Dialog Pattern
前端·html·交互设计
初级代码游戏2 个月前
软件界面设计培训
人机交互·交互设计·界面设计