2006-04-20
渐变色风格已经流行好几年，绝大部分应用或者网站基本都能遇到渐变色设计，渐变色之所以受欢迎是因为它可以丰富设计细节、营造空间感、强调品牌调性等，因此作为设计师更要重视它的运用方法。
今天就和大家聊下渐变色风格特点，以及如何在优秀设计中学习渐变色的使用思路。
渐变色广泛运用在各行业设计中，它帮助很多产品有效的打造具有传播性的品牌基因、增强品牌记忆、丰富设计细节。对设计师来说，又多一种设计表达手法。
▲ spotify的渐变色更是让人记忆尤新，通过渐变色打造独有的产品调性。其封面设计最具记忆点。
▲ apple music因其独特渐变色LOGO，吸引很多用户和粉丝，其流动的渐变色正好符合音乐律动感，也最具记忆性。
当我们说起渐变色，我相信大家有不同的情感表达。最直观的是强视觉感知、美观性强、极具吸引力、记忆性等。
▲ 2016年5月知名产品instagram更换品牌后，其惊艳的渐变色吸引很多设计师和用户的关注，有吐槽也有赞美的，其后近几年诸多设计跟随这样的风格。
▲ 融合几何图形的渐变色，带来更加直观的空间感和流动感。
渐变色在设计中运用范围广包括UI设计、Web、图标、LOGO、海报设计等下面来看看它运用在这些设计中特征点。
▲ 在背景中可增加界面细腻度和品质感，如果单纯白色或者纯色，画面显得苍白无力，如果你想给用户营造活力的氛围，那么还可以使用暖色调。
▲ 在卡片上配合几何图形可区分功能模块。如果是金色渐变，可表达尊贵身份，一般会运用到会员卡片设计。
▲ 在关键功能上应用渐变色，能起到强调作用，同时增加该功能的趣味性。通过颜色渐变来表达当前的功能状态。
WEB中的运用
▲ 一般运用在头图背景色偏多，凸显品牌的同时，可以让画面有更多细节。
▲ 配合几何图形运用，可以增加空间感和神秘感。
LOGO中的运用
▲ 在LOGO中双色渐变或者多色渐变，可以让logo更加立体与空间感，有助于形成口碑传播与营造吸引力，instagram和apple music 就是一个很好的例子。
海报中的运用
▲ 海报中运用渐变色，玩法可以有很多种类型，视觉冲击力强，吸引注意力，满满的时尚感。
图标中的运用
▲ 在图标中运用可凸显其特殊含义，比如音乐的图标，色彩更加流动性与活跃，撞色对比。联系人图标运用蓝色渐变，更加理性与冷静。
渐变色设计虽然很酷，但是也有其弊端，切勿过度使用需要避免颜色冲突、注意光源位置、方形或者多边形推荐使用线性渐变、圆形尽量使用径向渐变，渐变过度一定要平滑，下面看几个案例。
▲ 反面案例：界面中过多的渐变色，造成视觉噪音污染，使得画面无重点，信息层级也不清晰。
▲ 正面案例：知道哪些地方运用亮色，哪些范围运用暗色，便于通过渐变色制造光源，强调重要信息。
▲ 正面案例：当大面积使用渐变色，尽量采用同色系或者邻近色渐变，使用线性渐变，同时注意避免过高饱和度。
▲ 正面案例：同色系运用且过度平滑，低饱和度渐变，使界面更加轻量简约，同时又不失细节。
▲ 反面案例：避免使用过于刺激性撞色，如果你没有很好色感，最好使用邻近色，同色系等容易掌握的颜色。
渐变色运用，需要我们长期练习与感悟，当然多欣赏优秀的设计，也可以快速提高。如果色感不好的小伙伴，推荐多使用同色系渐变或者邻近色。
下面推荐2个渐变色彩工具，日常可以多看看学习，便于快速提高渐变色运用技巧。
1.grabient
渐变色可进行编辑与调整，然后点击渐变色卡即可进行复制应用。
2.webgradients
点击色卡可进入全屏预览，如果你做大面积渐变色，这个网址非常值得保存。
原文地址：功夫UX（公众号）
作者：功夫UX
