爱奇艺最近换的新图标，原来这么设计的

针对这个视觉效果估计大家各有看法，我们就不讨论这个话题了，今天黑马哥是来出教程的~O(∩_∩)O~。

这个类似于极光/弥散渐变的风格最近也比较流行，在 UI 场景中的运用也是比较普及的，被运用到应用图标的案例中相对较少。大概的回忆了一下，也有一些产品会使用，特别是比较知名的 Instagram 很早之前就使用了，也成为了流行趋势中的优秀案例之一。

通过极光/弥散渐变（混合渐变）的形式强化应用图标外轮廓背景，不仅可以提高视觉感，也是体现年轻化趋势的一种色彩表现形式。不过渐变中的色彩本身也是关键性的因素，如果色彩不够年轻活泼，带来的效果也是千差万别的。

1. 渐变的表现形式

渐变色在我们的设计中是非常普及的，渐变色分为线性渐变、径向渐变、角度渐变、混合渐变、流体渐变等形式。不同的渐变形式可以营造不一样的视觉体验，可以丰富色彩环境、强化光影质感、增强层次感和空间感等。

1.1 线性渐变

这是最常见的一种渐变方式，具备明确的方向性，由两种或者多种颜色组合形成。相较于单色来说，线性渐变可以使得画面更加丰富，色彩营造出的层次感更强。

1.2 径向渐变

径向渐变是以中心向外扩散而形成的圆形渐变，可以作为立体感的表现，也可以营造向中心聚拢的光影效果。

1.3 角度渐变

角度渐变形成类似于雷达扫描的效果，属于运用相对较少的渐变形式。在一些应用图标的外轮廓背景中会被使用，也可以作为营造产品的光影变化。

1.4 混合渐变

混合渐变就是多种颜色随机混合，色彩形成不均匀的自然弥散开，也可以成为弥散渐变或者极光渐变。是最近比较流行的视觉风格，可以呈现出丰富的色彩变化和随性自然的年轻化趋势，被广泛应用到平面设计、UI 设计、电商设计等众多视觉设计领域。

1.5 流体渐变

流体渐变就是多种颜色渐变组合，形成带有流动感的视觉效果，通常作为背景来丰富设计的视觉感。也有动态形式的流体渐变，在 APP 和一些屏幕壁纸中出现，带来的感官体验也是非常不错的。

随着视觉感官体验的不断追求，设计师已经不满足于趋于平面化的渐变形式，探索出造型多变、色彩丰富、刺激感官的视觉体验，以更加丰富的表现形式来探索渐变方式。 

2. 渐变小教程

线性渐变、径向渐变和角度渐变实现起来比较简单，软件自带的渐变属性即可满足。下面重点给大家分享如何实现混合渐变的效果，以后再单独给大家分享关于流体渐变的技巧。

混合渐变顾名思义就是将多种颜色进行混合，形成色彩丰富的过度效果，需要把控的是颜色之间的自然过渡。

方法一：

通过绘制几个不同颜色的形状图形，然后执行高斯模糊形成混合渐变，模糊的参数值要适当大一些，一直到颜色自然过渡为止。

方法二：

如果想要随机性大一些，可以通过画笔工具随意涂抹颜色，这样形成的效果更加随机性。然后再执行高斯模糊将颜色融合，带来自然随性的视觉体验。

3. 分享几个案例

不能只是纸上谈兵，只有反复磨练和尝试才会熟能生巧。根据以上的方式黑马哥完成了以下的作品案例，大家也一起来动动手吧！

3.1 邻近色系易把控

混合渐变技法层面来说并不难，配色是相对具备难度的，很多同学都会因为配色不到位而做不出优秀的作品。针对应用图标设计中的配色来说，邻近色系的搭配是最容易把控的。选择色相范围在 60° 以内的色值，混合出来的色彩排斥感都是比较低的，融合度比较高，能够呈现出比较舒适自然的视觉感官体验。

如果选择了色相角度大于 60° 的色值，只要数值的增减关系控制在 30° 以内都属于可控范围，这时候如果出现较大的色彩排斥感，可以通过降低不透明度来进行视觉平衡。

3.2 强视觉感还得对比色

虽然邻近色的处理比较容易把控，但是带来的视觉感也是与颜色对比关系成正比的，想要达到强视觉感还得选对比色。色相选择范围在 120°~180° 之间的色值，容易形成较强的视觉张力，通过增加高斯模糊的值才能稍微过度相互之间的色彩排斥感。

3.3 学会举一反三

今天分享的经验不局限于应用图标的设计范畴，我们要学会将这个技法举一反三，运用到更多的设计场景中。比如在下面作品中的一组信息卡片的设计中，通过混合渐变形成的卡片背景提高了局部的视觉感，配合磨砂玻璃质感的运用，提高了该部分的视觉感官体验。

3.4 其他作品欣赏

为了辅助大家理解和开拓思维，为大家选择了几个类似的案例作品，希望可以带给大家更多设计灵感。（以下作品版权归属原作者，仅作为学习交流）

想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。

如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：