> ## 文章索引 > 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt > 这是 lrd.im 的个人博客，记录设计、技术与思考。 # Dribbble 大改版，顺势记录下我对近期 UI 设计趋势和一些细节的观察 ![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/01.png) > 2020 年 3 月下旬，知名设计网站 Dribbble.com 在过去十年中首次做了彻底的重新设计。借着这次机会，并结合近期其他互联网产品的更新迭代，在此记录一下近半年来我观察到的一些设计趋势变化。 ## 一、更通透的页面设计 对比 Dribbble.com 新旧两个版本的首页，新版首页由于去除了顶部导航栏的背景色，整个页面会更通透；而放大作品图片并删除边框，也能让用户更好地聚焦于内容本身，减少干扰。 ![Dribbble 新旧首页对比：新版（左）导航栏无背景色、作品图片更大且无边框，页面更通透；旧版（右）有白色导航背景且图片较小，内容密度更高但视觉干扰更多。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/02.png "新旧版 Dribbble.com 首页对比") 其实过去一年不止是网页端，App 在更新迭代中都有对首页，尤其是顶部导航栏这块区域进行相应的优化。给我印象较深的是 2019 年四月底（当时正流行 All-White 风格）进行大更新的 Facebook App，将原来蓝色背景的顶部导航栏改成了白色，且将品牌 Logo 放在左上角，极其醒目。 ![Facebook App 新旧版本对比：旧版（左）顶部导航栏为蓝色背景，与内容区域分割明显；新版（右）改为白色背景并将蓝色品牌 Logo 置于左上角，页面更通透自然。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/03.png "新旧版 Facebook App 对比") 这样做几个好处，一是让页面布局更通透、柔和，减少了生硬的分割。因为用品牌色作为顶部导航栏的背景色，容易与下方的内容区域产生明显的分 割。而将白色（或内容区域背景色）作为顶部导航栏的背景色，两者衔接起来会更自然，用户观感会更佳。 ![淘宝、TIM、虎扑三款 App 新旧版本对比截图：旧版均采用品牌色（橙、蓝、红）顶部导航栏，新版统一改为白色背景，页面视觉更通透，内容区域与导航栏衔接更自然。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/04.png "将白色（或内容区域背景色）作为顶部导航栏的背景色是流行趋势") 二是保留了品牌基因。过去我们都习惯将品牌颜色作为顶部导航栏的背景色，一个很重要的原因是我们想透过该区域展示一些品牌元素，让用户一眼到界面就能知道这是什么产品。 而像新版 Facebook 这种将品牌 Logo 放在左上角的处理方式，则能够在保持页面通透感的同时，也能起到强调品牌的作用，避免同质化过于严重。对于比较注重运营的 App 来说，甚至多了一个轮播运营位。 ![六款电商 App 新旧版首页对比：京东、网易严选、考拉海购均将顶部导航栏从品牌色背景改为白色或浅色，页面通透感显著提升，品牌 Logo 改置于左上角展示。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/05.png "在顶部导航栏强调品牌基因") 第三点则是我认为这种处理方式对适配深色模式更友好。在深色模式的处理中，比较棘手的一点是大面积的有色相的颜色处理。如果顶部导航栏背景色是使用品牌颜色，在适配深色模式时需要考虑到一点：品牌颜色在白色背景下看着没什么问题，但大面积应用在深色模式下可能会不协调，甚至会比较刺眼。 可以看到钉钉和豆瓣的两种场景，显然后者的处理更优。 ![钉钉与豆瓣 App 的普通模式与深色模式对比截图：钉钉在深色模式下顶部保留蓝色品牌色导航栏，视觉偏刺眼；豆瓣深色模式则将绿色品牌色收敛至小图标，顶部背景改为深色，整体更协调自然。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/06.png "钉钉和豆瓣在深色模式下对顶部导航栏的不同处理方式") ## 二、更清晰的内容展示 一直以来 UI 设计师其中一项工作职责是尽可能地保证页面内容清晰地展示在用户眼前。提升页面清晰度有几个方法，其中一个提升正文文字与背景的对比度。 比如这次 Dribbble.com 的大改版就加深了正文文字的颜色，且将背景色改成纯白，对比度大幅提升。包括新版 Facebook Web 端页面也是。 ![Dribbble 作品详情页新旧对比：旧版正文文字色值 HSB(0,0,33)、背景 HSB(0,0,96)，对比度仅 6.77:1；新版文字改为 HSB(243,67,13)、背景改为纯白，对比度大幅提升至 17.58:1。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/07.png "新版 Dribbble.com 提升了文字与背景的对比度") ![Facebook Web 旧版与新版正文字色对比：旧版文字色值 H:220 S:29 B:16，对比度 16.13:1；新版文字色值 H:0 S:0 B:2，接近纯黑，对比度提升至 20.38:1，背景均为纯白。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/08.png "新版 Facebook.com 提升了文字与背景的对比度") 不止是网页端，这种加深正文字体颜色的趋势在近期也频繁应用在各类 App 产品上。 ![新旧版本对比图：Facebook App 和火币 App 的文字颜色改进。新版均采用纯黑色文字（H:0 S:0 B:2），对比度提升至 20.38:1，相较旧版灰色文字对比度（14–17:1）显著改善，内容可读性更强。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/09.png "通过增加正文的对比度让页面内容清晰展示（注：截图中可能包含的政治立场与本文作者无关）") ## 三、更微妙的设计细节 ### 1. 加入缓动参数让渐变过渡更自然 在新版 Dribbble.com 中，首页的作品展示图改成了大圆角卡片的样式，收藏作品/点赞的操作栏也改成在一个黑色渐变蒙版上操作。 ![Dribbble 新旧版作品卡片对比：左侧旧版在卡片下方显示标题、日期及「Save」「Liked」操作按钮；右侧新版悬停时卡片上叠加黑色渐变蒙版，标题与收藏、点赞图标直接浮于蒙版之上，底部显示作者信息与评论、点赞数。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/10.png "新旧版 Dribbble.com 首页卡片操作栏对比 ") 其中新版的“黑色渐变蒙版”引起了我的注意，我发现似乎比自己平常做的渐变要柔和许多，过渡比较自然。于是我打开浏览器的审查元素，发现其实是由两层**带有缓动参数的渐变**组成。 ![Dribbble 新版卡片渐变蒙版的 CSS 拆解示意图：顶部为几乎透明的多段渐变层（透明度从 0 到 0.03），底部为带缓动曲线的 180deg 线性渐变层（透明度从 0 到 0.4），两层叠加实现边缘自然过渡的黑色渐变蒙版效果。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/11.png "Dribbble.com 使用了带有缓动曲线的线性渐变") 在网上搜了下，了解到这种柔和的渐变是使用 Sketch 插件 Easing Gradient 生成的，国内也有不少大厂的产品也[应用](https://www.zcool.com.cn/article/ZMTEwMTU0OA==.html)起来了。 了解到这个细节位后，网上截了两张图做对比研究，能比较明显地看出，带有缓动曲线的渐变蒙版，在颜色消失边界的过渡会缓和许多，而常规的两点线性渐变会有比较明显的消失边界。 ![闲鱼和微信 App 的渐变蒙版对比截图：带缓动参数的渐变版本（上方）颜色消失边界过渡柔和自然，普通线性渐变版本（下方）边界明显生硬。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/12.png "带有缓动曲线的渐变与常规两点线性渐变对比 ") 刚好前段时间公司有优化“试用中心”的需求。原本的详情页头图如果是白色或较浅的颜色，顶部导航栏的按钮难以看清。所以我给开发提了一个改动，在顶部增加了一层带有缓动参数的渐变蒙版，以提高顶部导航栏按键在浅色头图下的可见性，效果比以往两个端点的线性渐变要好。 ![三张手机截图对比展示大麻叶水嫩焕颜面膜详情页：左为无渐变蒙版（顶部头图与内容区边界生硬），中为线性渐变蒙版（过渡较突兀），右为添加缓动参数的渐变蒙版（颜色消失边界最柔和自然）。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/13.png "将带有缓动参数的渐变蒙版应用在公司项目中，提高视觉体验，丰富页面细节") ### 2. 线性图标转换成面性图标时的特殊处理 另一个稍早观察到的细节是很多 App 产品的底部标签栏图标，未选中时是线性图标，而选中时是面性图标。在这种图标风格切换时更好的处理方式是相应地将部分线性图标的线条、圆点等加粗，均衡视觉比例，从而提高图标的识别度。 ![Twitter App 与拼多多 App 底部标签栏图标对比：两款 App 均在线性图标（未选中）切换为面性图标（选中）时，对线条和圆点进行了加粗处理，使激活状态更清晰、视觉比例更均衡。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/14.png "Twitter App 和拼多多 App 底部标签栏图标的处理") 对比其他 App 产品的底部标签栏图标，可以看到做过相应处理的图标看上去比较舒服，已激活的状态也会更清晰。 ![腾讯企鹅辅导 App 与淘宝 App 底部标签栏对比：选中状态下，企鹅辅导的书本图标轮廓加粗，淘宝的 "宝贝分类" 列表图标线条加粗且文字变橙色，视觉比例更均衡，识别度更高。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/15.png "腾讯企鹅辅导 App 和淘宝 App 底部标签栏图标的处理") ## 总结 1. 越来越多 App 产品在优化顶部导航栏的位置，做成白底色+Logo的样式。但不一定适合每个 App。 2. 加深文字颜色，提高文字与背景的对比度是一种趋势，但不提倡纯白底色搭配纯黑文字。 3. 学习并应用了渐变参数和图标绘制的两个小细节。 ## 广告时间 鄙人作为一名深色模式的狂热者，为了增加一些深色模式的设计实践经验，最近利用一些业余时间做了一套 Dribbble.com 的深色样式（已适配了主要使用流程）。 ![Dribbble 网站深色模式设计稿对比图：左侧为原始白色主题界面，右侧为作者自制的深色主题界面，两者并排展示了首页瀑布流卡片、导航栏和筛选标签的深浅色适配效果。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/16.png) ![Dribbble.com 深色模式设计稿截图：左侧为原始浅色界面，展示 Studio VØR 的设计师主页；右侧为深色版本，背景改为黑色，顶部展示几何风格作品，底部排列三个项目卡片缩略图。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/17.png) ![Dribbble 作品详情页的深色模式设计效果图，展示了 "Possessed Village"3D 村庄插画作品页，页面整体为深色背景，导航栏、评论区、标签等元素均适配为深色样式，与原版白色界面形成鲜明对比。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-04-07-bd9e4a9bd263/18.png) 对此感兴趣可前往 [Userstyles.org](https://userstyles.org/styles/178754/) 安装使用。另也可移至我的个人网站 [LRD.IM](https://old.lrd.im/html/dribbbledark.html) 了解设计过程。