awwwards 首页设计学习

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

参考设计截图

优点

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

自我感悟

  • 当 Sign Up 流程不多的时候通常弹框或者抽屉的设计会避免用户在不同的页面上切换,减少页面之间的跳转次数,但是当 Sign 需要收集用户更多信息且一个非滚动页面装不下这么多内容的时候建议分步让用户填写,为了有更好的体验,可以让用户跳过某些不必要的页面
  • 网页一定要干净简洁!
相关推荐
anOnion1 天前
构建无障碍组件之Menu and Menubar Pattern
前端·html·交互设计
万亿少女的梦1688 天前
基于虚幻引擎的天坛文化遗产虚拟漫游系统设计
unreal engine·交互设计·三维建模·虚拟漫游·文化遗产数字化
anOnion11 天前
构建无障碍组件之Listbox Pattern
前端·html·交互设计
Bigger15 天前
堆了 20 套主题、10+ 组件,用户还是用不出来?我给设计 Skill 加了「自动驾驶」
前端·ai编程·视觉设计
Bigger15 天前
我给 Han Design 做了 6 套很值钱的中国风配色主题
前端·设计·视觉设计
Bigger16 天前
把中式美学塞进工具站,到底怎样才不土?我拿烟火食间试了一遍
人工智能·设计·视觉设计
牧艺18 天前
cos-design PhotoAlbum:用 CSS 3D 做一个「能翻页」的实体相册
前端·css·交互设计
萧青山22 天前
人机协同进化专栏导览:从哲学思考到技术落地的系统性内容体系
交互设计·组织变革·gb/z 185·人机协同进化·专栏导览·哲学思辨·伦理合规
Kim.Li24 天前
格式塔设计原则全解析:12项核心原则在 UI/UX 中的实战应用指南
ui·产品经理·ux·视觉设计·交互设计
Kim.Li25 天前
UX、DX、AX:设计对象的三次扩张,你的产品到底为谁设计?
人工智能·产品经理·ux·交互设计·ui设计