awwwards 首页设计学习

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

参考设计截图

优点

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

自我感悟

  • 当 Sign Up 流程不多的时候通常弹框或者抽屉的设计会避免用户在不同的页面上切换,减少页面之间的跳转次数,但是当 Sign 需要收集用户更多信息且一个非滚动页面装不下这么多内容的时候建议分步让用户填写,为了有更好的体验,可以让用户跳过某些不必要的页面
  • 网页一定要干净简洁!
相关推荐
我码玄黄6 小时前
Figma入门-设计过程基本操作
产品经理·figma·交互设计·原型图
我码玄黄8 天前
交互新体验:Axure动态面板下的图片拖动技巧
交互·产品经理·axure·交互设计
Kim.Li1 个月前
海蓝色主题移动端后台UI作品集模板源文件分享 figma&sketch格式
面试·figma·交互设计·sketch·简历·ui设计·作品集模板
设计师工作日常1 个月前
有趣的css - 跷跷板加载动画
css·交互设计·动效设计·ux/ui·加载动画
rolt1 个月前
界面耻辱纪念堂--可视元素04
交互设计
Smilezyl1 个月前
关于未来App服务即应用的探讨
交互设计
rolt1 个月前
界面耻辱纪念堂--可视元素03
交互设计
rolt1 个月前
界面耻辱纪念堂--可视元素02
交互设计
rolt1 个月前
隐喻的使用及误用02
交互设计
mon_star°3 个月前
web实现drag拖拽布局
前端·交互设计