最近渐变色设计（Gradient Design）之风席卷全球。作为在减少主义设计（Minimal Design）框架之内的风格设计之一，渐变色设计的技术难度并不太高，而其带来的视觉效果却十分丰富跳脱，可谓是一种「性价比」极高的设计手法。本文粗略梳理渐变色设计手法，有待深入完善。

霸屏的紫红渐变

目前界面设计中盛行的紫红色渐变色风格其实在 2015 年底就开始出现：

Product Design Weekly, 2015 Beard Design, 2015 MailChimp, 2015

在大家对粉蓝粉红的「舒缓色」搭配视觉疲劳后，以 Instagram 的品牌视觉设计变更为标志节点，蓝紫色渐变设计一夜之间成为设计师们关注并广泛使用的热门设计风格。

标志性的 Instagram 新品牌设计

到了 2016年 底，欧美的各大网站基本已被蓝紫色、橙红色渐变设计占领。除了我整理的《20117新色彩来了，不管你接受与否》所提到的，还有下面这些……👇

NYC Pride WP Crew Lines Real Future Fair Tubatomic Hugo Mingoia Nuansa Spa

在霸屏全球、带来强烈视觉冲击的同时，紫红色渐变设计在人们心目中的形象也从一开始的大胆新颖变成见惯不怪。而且在审美取向更为含蓄的国内，设计师如果还用这般「重口味」配色，一来免不了和各种设计作品「撞车」，二来吃瓜群众对此的接受度也不见得像欧美人那般高。是时候换换口味了。

玩出新意

改变配色

其实想用渐变色，又想避免设计「撞车」的最简单粗暴的方法，就是在泛滥的蓝-紫-橙配色之外挑选配色。恰好潘通 Pantone 已经给我们挑出了 2017 春季的 10 大流行色：

我们可以一眼就看到红框中在渐变色设计案例里用烂了的配色组合。避开它们或者将它们和别的颜色重新组合、再加上色彩饱和度的改变，你的设计很容易就能跟别的妖艳贱货配色区分开来。

1、双色渐变

双色渐变是最常见的渐变色类型，可尝试以下配色：

蓝+紫

蓝+绿

红+橙

紫+绿

红+蓝

橙+蓝绿

橙+蓝紫

还有更小众的类型……

2、也可以使用更为微妙稳重的单色渐变：

减小用色面积

在上面的例子中，都是通过改变配色组合来做出新的渐变色风格。除了改变配色类型和色彩的饱和度，也可以减少色彩的使用面积：

1、渐变色块背景

2、渐变色图形元素

除了作为背景，渐变色也可用在图形元素中并与纯色背景搭配，既能丰富界面效果，又能避免视觉感受过「重」的问题。这其中包括了标题字体、UI 元素、示例图片等方面的应用。

与标题字体、正文的结合 示例图片中的应用 Logo 上的应用 UI 元素上的应用

跟前面的大范围采用渐变色做背景的设计方案进行对比，可以看见小范围图形元素上使用渐变色是有风险的：容易过度凸出特定的元素，有可能破坏界面的视觉整体性，一不小心就会容易「喧宾夺主」。毕竟无论我们使用渐变色与否，最终目的还是为了提升用户体验，而非引导用户的注意力跑偏，过于关注界面设计的美学。因而小范围的渐变色更适合使用单色或者相近色系的渐变。

与其他流行元素结合

渐变色另外一种玩法，就是和当前热门的其他设计风格元素共同结合使用。例如：

1、低多边形（Low Poly）

其实渐变色基本上是和低多边形风格分不开的，但目前多数体现在插画设计上，用在界面设计上的普遍低调：

2、照片滤镜

仿胶片滤镜，恰恰就是渐变效果的一种。将这种效果夸张化，作为界面大图的叠加色，是渐变色设计中容易出彩的手法。

请注意，渐变色在页面的背景、头图中的叠加，是为了让这些视觉元素的整体感更强，从而让用户注意到其他的更加重要、关键的元素，强化页面的可读性，而非颠倒过来。在图片上采用渐变色滤镜的技巧在于平衡色彩和图片之间的关系，需要始终遵循「渐变色彩不是主角」的原则。

渐变色的实现

国外网页设计师 Tim Brown 搜集整理了一些不易撞车的渐变色的色号：

酸橙渐变：#FD6F46, #FB9832 灰色渐变：#dee1e1, #f4f4f4 蓝绿渐变：#01a99c , #0698b1 金色渐变：#8e7a3f, #b09a51 柠檬酸渐变：#99D22B, #FBFF00 黑灰渐变：#1C1C1C, #494949 薄荷绿渐变：#50C9C3, #96DEDA 新生绿渐变：#b6eae1, #D2FBAD 稳重蓝渐变：#38aecc, #347fb9 血橙渐变：#d64759 10%, #da7352 森林绿渐变：#00537E, #3AA17E

其中详细的 CSS 可参照原文。

另外马克渐变色生成网站：uiGradients 。它会提供详细的渐变色预览（色块预览及全屏预览）、相应色号及 CSS，炒鸡实用！

渐变色块预览 全屏预览（详细色号+ CSS）

小结

无论渐变色风格是以怎样的形式应用，它和 2.5D 设计、阴影、低多边形、无网格设计等等潮流一样，是设计师们在如今扁平化设计背景下寻求突破、为界面增加更多的纵深感与层级感的探索，也可以说是目前虚拟现实技术大范围流行对设计风格影响的体现。我们的最终目标是完成信息的更好传达，其他的都只是手段而已。

Linmas, 工业设计师，GAFA在读硕士研究生

「 Learning by doing 」