巧用渐变色打造精致移动端APP

渐变色是指某个物体的颜色从明到暗，或由深转浅，或是从一个色彩缓慢过渡到另外一个色彩，充满千变万化的神秘浪漫气息的颜色。在扁平化设计刚刚兴起时，渐变是设计师们避之不及的设计手法。然而自从Instagram把经典的宝丽来相机logo更改成色彩鲜亮的扁平化图标以来，渐变色逐渐回归到了人们的视野之中，也逐渐成为了近年来移动APP设计的主要风潮之一。

​

 

渐变色兴起的缘由在于扁平化风格极其容易形成同质性，设计师若是须要追求视觉丰富度的设计语言，多数会运用插画设计和动效设计让本身的设计脱颖而出，可是这些技巧短期内难以快速掌握。

而渐变色在实际的设计中简单实用，能够高效率地提升设计的格调；更具视觉冲击的特色可以紧紧抓住用户眼球；简洁的图形和高饱和度的渐变色又可以较好兼顾设计的便利度和视觉的份量感。在渐变色设计风潮回归的背景下，咱们一块儿来看看渐变色在移动APP中常见的表现手法。

1、线性渐变

线性渐变是渐变设计中基础的表现手法之一，也是最多见的创做手法之一。通常来讲，渐变的方式按照方向分为三种：横向渐变、纵向渐变和对角渐变。下面咱们来看看实例分析。

横向渐变：

这是一款在线购物APP的概念设计，包括设置，自定义和优惠券界面，设计师以卡片的形式呈现了用户既有的优惠券信息，每张卡片都使用了统一的双色横向渐变色，突出了卡片上的信息，总体界面极简而高雅。

​

 

纵向渐变：

天气类APP的界面设计怎样才能脱颖而出？看看下面这款设计。设计师巧妙地运用双色纵向渐变，配合APP的时间线，打造了精致的傍晚的天空渐变背景，在按照滑动查看温度变化时，可以得到视觉上的时间流动观感，主题和功能相互呼应，相得益彰。

​

 

对角渐变：

这款设计是用快速原型工具Mockplus打造的音乐APP启动页。在功能上，当你打开APP时，系统会自动询问用户的当前心情状态，来自动筛选符合当前心情的音乐，实现智能推送。设计师巧妙地运用了对角的渐变色做为背景，暖色调的渐变背景使界面变得更加友好和亲切，对角的手法使界面更加活泼动感富有层次，带给用户柔和人性化的AI产品体验。

​

 

2、图片上的渐变色叠加

​

 

做为一种设计趋势，在图片上叠加色彩已经流行了至关长的一段时间。而从图片上的单色色彩叠加，到渐变色的叠加，是一个至关天然的“推导”过程。

在页面的背景、头图中加入渐变的色彩叠加，可让它们的总体感更强，从而让用户注意到其余的更加剧要、关键的元素，强化页面的可读性。这种设计对于大图的做用尤为明显。此外画面总体也会更加神秘、优雅而且富有吸引力。

使用过程当中也要注意对背景图的挑选，图片的内容和色调须要保持一致，使用半透明每每能让画面更加细腻，可是再相互叠加后须要强化页面信息的可读性，不能为了装饰而装饰。

 

3、多角度多层次叠加

​

 

对于Instagram图标和UI的变化，团队成员这样说到：若是镜头是进入一个更大胆、更简洁设计的桥梁，那彩虹就是带你进入彩色渐变设计的联结者。色彩一直就是 Instagram 最重要的一个组成部分，你能在经典的 App 图标、过滤器和整个社群中的照片与视频中见到各类不一样的颜色。当咱们开始从新想象彩虹，咱们更多地关注那些简约的设计，但最终咱们仍是须要更多的温度和能量来填充咱们的图形设计。

Instagram抓住了原有logo的核心元素：彩虹、镜头和取景器，背景上用多角度多层次的叠加打造出了简约而缤纷的彩虹意象。具体来看，这枚icon主要用了一组线性对角渐变，加两组球形径向渐变叠加组成，成为了渐变色运用的最惊艳的案例。

​

 

 

4、具备功能性的渐变效果

​

 

渐变色的运用也不限制于单一的背景装饰，也能够具有一些功能性。设计师会采用相同色、同类色、近似色、对比色、补色来将每一个菜单项清晰区分开，让界面平衡在一个频率上，这样的画面多姿多彩，也更富有节奏感和温馨性。

 

了解了渐变色在移动APP中的基本表现方式后，对于设计师来讲，想要用好渐变色，须要在色感和色彩搭配上多下功夫。这里为你们推荐一些经常使用的渐变色设计工具。

uiGradients

​

 

这款网站贴心地为每一种颜色搭配取了相应的名字，点击左上角便可浏览全部颜色，还能够从上面导航栏中选择一种颜色，从而呈现出这个色系对应的全部渐变色搭配方案，挑选到合适的后，点击上面显示的色值便可复制。

网址：https://uigradients.com/

CoolHue

​

 

CoolHue是一个至关实用的渐层背景网站，提供大约 30 种不一样配色的渐层背景，能够免费下载为图片格式或产生 CSS3 语法。只要把它加入网站样式表，就能在任何区域套用渐层色彩。

网址：https://webkul.github.io/coolhue/

小结

移动APP高速发展的背景下，渐变色也是人们审美水平不断提升的产物。在UI中渐变经常配合投影和外发光使用，以加强其立体效果。虽然渐变是目前设计风潮中的热点，可是其独到的表现方式仍是要根据APP自己的需求而来，不能对功能和可读性产生负面影响。​​​​