Dribbble 大改版,顺势记录下我对近期 UI 设计趋势和一些细节的观察

一、更通透的页面设计

新旧版 Dribbble.com 首页对比
新旧版 Facebook App 对比
将白色(或内容区域背景色)作为顶部导航栏的背景色是流行趋势
在顶部导航栏强调品牌基因
钉钉和豆瓣在深色模式下对顶部导航栏的不同处理方式

二、更清晰的内容展示

新版 Dribbble.com 提升了文字与背景的对比度
新版 Facebook.com 提升了文字与背景的对比度
通过增加正文的对比度让页面内容清晰展示(注:截图中可能包含的政治立场与本文作者无关)

三、更微妙的设计细节

1. 加入缓动参数让渐变过渡更自然

新旧版 Dribbble.com 首页卡片操作栏对比
Dribbble.com 使用了带有缓动曲线的线性渐变
带有缓动曲线的渐变与常规两点线性渐变对比
将带有缓动参数的渐变蒙版应用在公司项目中,提高视觉体验,丰富页面细节

2. 线性图标转换成面性图标时的特殊处理

Twitter App 和拼多多 App 底部标签栏图标的处理
腾讯企鹅辅导 App 和淘宝 App 底部标签栏图标的处理

总结

广告时间

广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store