收藏本站 关于我们

大神都是这么做渐变的

发布时间:2017-12-04 10:28:39   来源:   人气:0

前言:很多人渐变设计的很生硬,今天来告诉你如何来做出高级的渐变。

在最近一些流行设计中以及一些设计分析的文章里面,都看见有一项“亮色渐变”,在流行了几年Flat Design 以及 Material Design 之后,许多设计师开始为新的趋势尝试更多的设计技法,当然最著名的例子还是去年Instagram 的改版为这一风格拉开了序幕 。

亮色渐变使用原则

在设计亮色渐变时候,必须注意两色和多色之间的平滑于流畅,生硬的颜色或转折会让整个颜色看着不协调,同时也会造成浏览者视觉突兀感觉,起到反的作用,渐变设计反而会成为缺点,以下图为例,使用同样三个颜色但因为渐变转折点位置关系,造成不一样的视觉效果。


1.平滑的渐变


2.明亮的颜色

渐变最糟糕的是颜色运用造成脏脏的感觉,尽量选用比较明亮的颜色作为渐变转折点饱和度高明亮的配色非常重要,所以在调渐变时候尽量避开色板左半部以及下半部分,面积越小渐变越弱,面积越大颜色越浅。


3.将品牌色作为渐变的节点

要将品牌颜色融入贯穿整个视觉体系以及 UI 的设计里中,不能随意的选择喜欢的颜色作为渐变节点,将品牌标准色作为节点是最基础的一种方式。


4.相近色渐变

相近色的渐变设计,选取色条中相近色2个到3个颜色,相近色的渐变也能调出比单色更有层次的视觉效果。


Evernote 使用不同深浅的绿色作为渐变的设计

 

Airbnb 的Banner 使用深浅的水蜜桃色作为渐变的设计


色板案例


5.多色渐变:选择色系

如果是多色建议采用色系的概念

以 Spotify Year Music 为例

近色系:浅玫瑰粉 → 紫罗兰,浅灰蓝 → 亮桃红;

暖色系:桃粉紅 → 粉橘红→ 橘黄; 

冷色系:蓝紫 → 青蓝 → 青色


界面中运用

相近色渐变以及多色渐变的运用案例






平面中运用

相近色渐变以及多色渐变的运用案例




设计策略

好的渐变设计能造成相对完美舒适视觉效果,提升愉悦的体验,但是要注意过多在页面中使用会起到相反效果,因此要避免渐变滥用。

比较适用场景:图片处理效果能凸显出个性时尚、按钮 、标签等。



以上内容如果大家喜欢可关注公众账号:我们的设计日记(ID:helloskys)

我们还有几个千人设计师交流微信群,转发公众号任意一篇文章到朋友圈,并发送截图给微信:uiskys ,即可以加入我的设计交流群。


----------------------------------------------------------------------

本文章图片来源于网络,文章内容均属原创,非授权请勿转载,如需转载,请联系小编,否则追究文责。邮箱:sunshine520473@163.com

本文来自PS教程网www.46PS.com,转载请注明!关键词:大神都是这么做渐变的观点skys的设


PS教程