awwwards 首页设计学习

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

参考设计截图

优点

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

自我感悟

  • 当 Sign Up 流程不多的时候通常弹框或者抽屉的设计会避免用户在不同的页面上切换,减少页面之间的跳转次数,但是当 Sign 需要收集用户更多信息且一个非滚动页面装不下这么多内容的时候建议分步让用户填写,为了有更好的体验,可以让用户跳过某些不必要的页面
  • 网页一定要干净简洁!
相关推荐
喵个咪2 天前
GoWind CMS 拆解:Flutter 设计系统内核——双态 token、四档断点与自适应壳层
前端·flutter·交互设计
ZhengEnCi7 天前
12 种高级 UI 交互效果及对应 AI 提示词:从按压回弹到底部抽屉的物理感教学
前端·css·交互设计
金銀銅鐵12 天前
[Java] 用纯 Swing 做一个《論語·學而》阅读器
java·ai编程·交互设计
2601_9679791214 天前
详细解析什么是原型开发
交互设计·墨刀·用户体验·原型开发·用户测试
anOnion19 天前
构建无障碍组件之Grid Pattern
前端·html·交互设计
子兮曰22 天前
CSS 复现 23 种设计风格:从拟物到液态玻璃的成本阶梯与兜底写法【实战】
前端·css·视觉设计
西西木科技丨Shopify开发机构22 天前
独立站极简设计:字体、影像与构图如何形成品牌识别
视觉设计·独立站·品牌设计
牧艺1 个月前
浏览器端 3D 看车重磅升级:从三款展车到可试驾的八车展厅
前端·three.js·交互设计
FungLeo2 个月前
成为全栈·React 管理后台篇·评论审核工作流:把状态下拉改成可理解的动作
react·内容安全·状态机·交互设计·成为全栈·评论审核
Bigger2 个月前
我把苹果发布会里的折叠屏,真的用网页做出来了
前端·ai编程·交互设计