几何

渐变色风格已经流行好几年,绝大部分应用或者网站基本都能遇到渐变色设计,渐变色之所以受欢迎是因为它可以丰富设计细节、营造空间感、强调品牌调性等,因此作为设计师更要重视它的运用方法。

今天就和大家聊下渐变色风格特点,以及如何在优秀设计中学习渐变色的使用思路。

 

1.渐变色在设计中的价值

渐变色广泛运用在各行业设计中,帮助很多产品有效的打造具有传播性的品牌基因、增强品牌记忆、丰富设计细节。对设计师来说,又多一种设计表达手法。

▲  spotify的渐变色更是让人记忆尤新,通过渐变色打造独有的产品调性。其封面设计最具记忆点。

▲  apple music因其独特渐变色LOGO,吸引很多用户和粉丝,其流动的渐变色正好符合音乐律动感,也最具记忆性。

 

2.渐变色直观感受

当我们说起渐变色,我相信大家有不同的情感表达。最直观的是强视觉感知、美观性强、极具吸引力、记忆性等

▲ 2016年5月知名产品instagram更换品牌后,其惊艳的渐变色吸引很多设计师和用户的关注,有吐槽也有赞美的,其后近几年诸多设计跟随这样的风格。

 

▲  融合几何图形的渐变色,带来更加直观的空间感和流动感。

 

3.运用场景

渐变色在设计中运用范围广包括UI设计、Web、图标、LOGO、海报设计等下面来看看它运用在这些设计中特征点。

 

UI中的运用

▲  在背景中可增加界面细腻度和品质感,如果单纯白色或者纯色,画面显得苍白无力,如果你想给用户营造活力的氛围,那么还可以使用暖色调。

 

▲  在卡片上配合几何图形可区分功能模块。如果是金色渐变,可表达尊贵身份,一般会运用到会员卡片设计。

 

▲  在关键功能上应用渐变色,能起到强调作用,同时增加该功能的趣味性。通过颜色渐变来表达当前的功能状态。

 

WEB中的运用

▲  一般运用在头图背景色偏多,凸显品牌的同时,可以让画面有更多细节。

 

▲  配合几何图形运用,可以增加空间感和神秘感。

 

LOGO中的运用

▲  在LOGO中双色渐变或者多色渐变,可以让logo更加立体与空间感,有助于形成口碑传播与营造吸引力,instagram和apple music 就是一个很好的例子。

 

海报中的运用

▲  海报中运用渐变色,玩法可以有很多种类型,视觉冲击力强,吸引注意力,满满的时尚感。

 

图标中的运用

▲  在图标中运用可凸显其特殊含义,比如音乐的图标,色彩更加流动性与活跃,撞色对比。联系人图标运用蓝色渐变,更加理性与冷静。

 

4.需要注意的点

渐变色设计虽然很酷,但是也有其弊端,切勿过度使用需要避免颜色冲突、注意光源位置、方形或者多边形推荐使用线性渐变、圆形尽量使用径向渐变,渐变过度一定要平滑,下面看几个案例。

▲  反面案例:界面中过多的渐变色,造成视觉噪音污染,使得画面无重点,信息层级也不清晰。

 

▲  正面案例:知道哪些地方运用亮色,哪些范围运用暗色,便于通过渐变色制造光源,强调重要信息。

 

▲  正面案例:当大面积使用渐变色,尽量采用同色系或者邻近色渐变,使用线性渐变,同时注意避免过高饱和度。

 

▲  正面案例:同色系运用且过度平滑,低饱和度渐变,使界面更加轻量简约,同时又不失细节。

 

▲  反面案例:避免使用过于刺激性撞色,如果你没有很好色感,最好使用邻近色,同色系等容易掌握的颜色。

 

5.写在最后

渐变色运用,需要我们长期练习与感悟,当然多欣赏优秀的设计,也可以快速提高。如果色感不好的小伙伴,推荐多使用同色系渐变或者邻近色。

下面推荐2个渐变色彩工具,日常可以多看看学习,便于快速提高渐变色运用技巧。

1.grabient

渐变色可进行编辑与调整,然后点击渐变色卡即可进行复制应用。

 

2.webgradients

点击色卡可进入全屏预览,如果你做大面积渐变色,这个网址非常值得保存。

获取方式:直接网上输入名字即可找到~ 

 

原文地址:功夫UX(公众号)

作者:功夫UX

转载请注明:学UI网 » 为什么渐变色到现在依然这么流行?

登录收藏
 
你可能喜欢的:
西城杂货店 · 插画精选周刊 【16】西城杂货店 · 插画精选周刊 【16】
【要闻回顾】UI设计中色彩使用的10个原则【要闻回顾】UI设计中色彩使用的10个原则
配色攻略-黑色篇配色攻略-黑色篇
什么样的设计技巧是我会的,而你不会?什么样的设计技巧是我会的,而你不会?
写给新手“色”计师的配色攻略(三)写给新手“色”计师的配色攻略(三)
写给新手“色”计师的配色攻略(二)写给新手“色”计师的配色攻略(二)
写给新手“色”计师的配色攻略(一)写给新手“色”计师的配色攻略(一)
数据分类在黑白版中的色彩搭配数据分类在黑白版中的色彩搭配
这个颜色运用方法,搞定了我大部分排版配色这个颜色运用方法,搞定了我大部分排版配色
色彩与构图原理(下)色彩与构图原理(下)