玩转色彩！UI设计最新流行趋势大揭秘

**1、霓虹渐变
****2、轻量渐变
**3、高饱和度色系

霓虹色渐变在暗色调的背景烘托下，撞色的冲击感使得画面更加具有科技感、潮流感；对于霓虹色渐变使用比较频繁的赛博朋克风、故障风，也是现下较为前沿的风格，通过丰富鲜明的色彩与背景作强对比，营造出极具视觉冲击力的画面效果；霓虹渐变色也被广泛的使用于app、web、插画等领域，但其大胆、强烈的配色风格给画面带来的冲击感以及潮流、*感，使得它仍然成为当下一种比较流行的色彩趋势。

1、霓虹渐变好在哪里?

综艺海报

宣传海报通过高饱和度的霓虹色渐变，与人物及背景形成强明暗对比，结合对人物本身的光影细节刻画，突出人物主体，增强画面视觉冲击力。

APP

通过明暗的强对比突出页面关键元素，对用户进行视觉引导，同时丰富页面层次，增强页面的视觉冲击力及艺术感染力。

专题

偏暗色调的霓虹渐变色背景烘托出专题页的内容主体，使得页面运营氛围更好同时在一些重要的、需要用户操作点击的部分使用了暖色调的霓虹色渐变，使得内容主体在冷色调的环境下更为突出，提高了用户体验。

ICON

通过高饱和度的霓虹渐变色彩，结合外发光、叠加、模糊的技法，塑造出更加丰富的光影效果，不仅增强图标视觉表现力及空间感，更凸显了图标的风格化与趣味性。暗色调背景的烘托，使霓虹色渐变图标更加有质感，更加突显。

插画

通过大面积的霓虹色渐变结合迷彩渐变的绘制手法，构建不同色彩鲜明的矩形图案，暗色调的背景烘托与颜色用冷色为主暖色为辅、点缀，画面感极强，极具视觉冲击力。

**可借鉴点
1、局部增加动效：魔性的循环动效，非常符合当下的传播特性。对于运营、品牌广告而言，循环动效能赋予其趣味性，让用户更加沉浸地去了解相关信息。
2、增加粒子光束/未来科技/酷炫 粒子光束最能代表科技感特效之一，在画面上能凸显科技、先进、酷炫的视觉效果。
**3、增强现实的升级应用

2、轻量渐变

渐变色的运用仍然非常流行。相较之前运用较多的强视觉冲击类——对比色渐变，轻量渐变在色彩运用上变得更加理性与克制。主要特征为轻量、柔和、层次递进，营造一种舒缓、治愈的沉浸感

渐变色的运用仍然非常流行。相较之前运用较多的强视觉冲击类——对比色渐变，轻量渐变在色彩运用上变得更加理性与克制。主要特征

为轻量、柔和、层次递进，营造一种舒缓、治愈的沉浸感。特点为渐变色彩邻近，幅度轻柔，节奏缓慢，融合感和细腻感较强。

**特点：**轻量渐变是一种简约且高度可用的元素，可创造出一些时尚的氛围，同时不会有信息过载的担忧，这使得轻量渐变成为一种

富有感染力又非常实用的设计解决方案。特点之一为明度高、饱和度低，色彩轻量而透气。在轻量渐变的使用过程中，同色系、邻****近色系较多，其过渡自然柔和。

01毛玻璃案例

轻量渐变与3D碰撞时，则会产生更加趣味的视觉化学反应。画面中使用的3D效果可以最大限度还原现实世界的材质与光效，呈现极具脑洞的“超现实”效果，为用户呈现空间感吸引用户眼球。画面中的背景使用了轻量渐变来创建多彩的模糊背景，3D素材创造出另类维度的空间感，增加了画面深度，让设计更具真实感。

02首页ICON

自如app最新的首页风格采用轻量渐变+毛玻璃效果，金刚区应用最为明显。图标的色彩选用低饱和邻近色，遵循3色系原则，整体色彩统一且不失丰富。从单个图标看，色块部分采用单色渐变，局部调整渐变值，以达到最佳效果。

使用者在经历过传统大色块、大面积、较强冲击力渐变的视觉后往往更加想追寻视觉上的宁静，所以视觉负担相对较小、相对轻量的微渐变色彩和可以利用微透质感减弱色彩冲击力的毛玻璃相结合的视觉效果越来越多地被运用。