【UI设计】新手学习APP界面图标渐变效果设计技巧

Hi~ 大家好，今天和大家分享关于渐变的知识点和混合渐变的实现技巧，希望可以带给大家更多灵感。

正文

经常使用爱奇艺刷剧的同学，有没有发现爱奇艺的应用图标又变了。前段时间爱奇艺针对品牌设计进行了较大的调整，最近又悄悄地将应用图标的背景色换成了这种多彩色混合渐变的形式。

针对这个视觉效果估计大家各有看法，我们就不讨论这个话题了

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

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

一、渐变的表现形式

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

1、线性渐变

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

2、径向渐变

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

3、角度渐变

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

4、混合渐变

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

5、流体渐变

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

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

二、渐变小教程

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

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

方法一：

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

方法二：

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

三、分享几个案例

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

1、邻近色系易把控

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

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

【零基础学习UI设计全链路技巧高端课程】

http://www.yanguosheji.com/h-col-105.html

2、强视觉感还得对比色

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

3、学会举一反三

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

4、其他作品欣赏

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