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