设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 产品设计 > ​2018年为什么渐变色重回主流设计趋势?

​2018年为什么渐变色重回主流设计趋势?

Thomas
2018-04-24
253891



以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具


2018年为什么渐变色重回主流设计趋势?

渐变色是一种用来吸引用户注意的鲜艳色彩。

这个声明在1995年可能是正确的,当时网页设计师用渐变色来扩展他们的色彩方案,在他们的网站上添加一个独特的元素来吸引用户的注意力。记得在90年代的时候,当我们想在学校的演示稿中使用'艺术字'来介绍专业的触摸效果,我们现在都认为这是一个不好的主意!唷!但是你知道吗?也许,我们正朝着一个正确的方向前进。

如今,渐变色被用于大胆的表现和引导用户情感,帮助用户联想到产品或某个想法。在2017年,整个世界对从一种色彩向另一种色彩的过渡感兴趣,除非有人像2016年在他们的品牌重塑中那样扰乱了这种趋势,否则这一趋势不会很快停止,像Instagram这样的大规模产品也深陷这个潮流中。但是......提到渐变色,我们不得不说Spotify,他在播放列表中将渐变色和情感很好的融为一体。

渐变色被用于大胆的表现和引导用户情感


这一切都是如何开始的呢?


我们必须回归到2014年,那时正流行扁平化设计。当时谷歌也推出了自己的“Material design”设计风格,Windows也推出了“Metro”。与当时风靡一时的拟物化设计(skeuomorphic)相比,渐变色看起来很酷且令人耳目一新。这样的设计在低分辨率移动设备显得特别干净,但是,唉,我们受到各种颜色的限制,同时随着高分辨率移动设备的出现,人们的审美也与之前不尽相同。

你能说出20多种扁平化设计颜色吗?

我敢打赌你不能。因为扁平化设计的颜色是有限制的。

渐变色使设计师可以通过大胆混合颜色来创建让用户感觉新颖的东西。它是一种在你混合之前并不存在的颜色,一种看起来独特,现代和让人耳目一新的颜色。你会发现自然界中到处都有渐变色,每一片水果,你看到的每一片叶子都会有一个渐变,从浅色到阴影中的暗色。当你远离地平线时,天空始终有一个从不饱和色调到更饱和色彩的渐变。渐变色看起来是明显的平铺方式,从2015年的渐变开始,在2017年给用户带来了全面的异国情调和饱和色调的深度感。

所以,对于2018年渐变色的复苏有什么大惊小怪呢?

2018年的渐变色


在Behance 设计社区,它已经被 称为“渐变2.0”。你必须走出你的舒适区。现在是时候做出冒险的决定了,勇敢地抛弃你用来敬畏客户的蓝色。现在每个人都开始大胆使用各种颜色,看看Dropbox的新品牌,就可以在不重新设计Logo的情况下引入大量颜色打造酷炫的新品牌视觉颜色。

引入大量颜色打造酷炫的新品牌视觉颜色

不像去年那些随处可见,为了吸引用户眼球的渐变色。这次我们不会看到彩虹般的世界。渐变色不会仅仅是在前景色上起支配作用,我们将也会看到它在背景色上的使用。它们最终将会成为一个自然的设计元素,为我们的设计作品带来更多的深度和维度。随着网站和设计师尝试在设计中融入更多的真实感,沉浸感和三维元素,虚拟和增强现实技术可能会加速推动这一趋势。


这里有几个来自设计界的证实这种信念的例子


Pantone色彩研究预测全球的色彩趋势,并建议色彩公司用渐变色们来创建自己的品牌标识。难怪为什么今年他们选择了神秘的紫色色调作为一年的颜色。

3.jpg

另一个例子是在与医学和健康相关的文章的插图中使用渐变色作为背景色。这里使用渐变用来创建一个伴随深度的情绪。

使用渐变用来创建一个伴随深度的情绪

如果你还不相信渐变色的力量,请看下面的插图。使用渐变增加了深度,以及增加了城市的夜晚魅力。

渐变色的力量

在我们继续前面的内容最后看一个例子。看看sphynx用他们选择的颜色和使用大胆的渐变色做出的表述。

使用大胆的渐变色做出的表述


关于创建惊人渐变色的秘诀


通过使用两种或更多种色调来创建渐变色,以在它们之间逐渐淡化颜色偏移来绘制一个新的元素。接下来,我会分享当时我学习如何创建渐变色的拾色技巧和想法。

不要随意选择颜色


你不会想让你的用户觉得你选择的颜色是随机的,是没有经过任何思考就使用的。你可以使用渐变色来传达变化,引导用户的注视力。例如:选择一种明亮的颜色,增加用户的可视度,选择一种暗色过渡,可以创造形状感,或者是一种沉闷的色彩,以减少视觉重量。但在选择颜色时请记住一些事项。

从色轮选色。选择彼此接近的颜色相比于位于相反侧的颜色或甚至接近互补的颜色,可保证颜色过渡更和谐。主要原因是:他们抵消了彼此的亮度,这与在颜料颜色中混合两种互补色调时发生的情况相同,使用互补色将最终获得一种中性色。参见下面的图1.2 - 在从明亮的绿色色调到明亮的紫色色调的过渡期间,你会看到深色不饱和的绿色。

从色轮选色,不要随意选择颜色

简单的方法是选择颜色轮上彼此更接近的颜色(如图2.2)。但你的品牌或营销团队被色轮颜色限制,那会怎么样?

3点梯度渐变


在渐变色中,可以在原始两种颜色之间大约一半的位置添加第三个点。现在用色彩更美观的色彩(最好是色轮中两个光圈之间的颜色)替换渐变过渡上的暗色(图2.3)。你会看到更平滑的渐变。另外,当你知道如何避免沉闷的灰色时,这意味着你有更多的颜色可选。

8.png

另一个设计秘诀,没有多少人注意到这一点。当你创建从纯色到透明色的渐变时,也就是淡入淡出效果。确保两个站点具有相同的颜色,如图3.1中所示,不同的颜色意味着在中点处,50%不透明度渐变时出现色彩过渡,这将导致视觉效果没有那么流畅。

9.png

举一反三,可以在渐变中创建可以多添加的停止位置,创建更多控制点(图像4.2),或者如果你会使用Adobe illustrator™,请鼓足干劲,并尝试使用网格工具来更好地控制颜色甚至方向,从而打造更多可能性(图4.3)。

10.png

仍然对从哪里开始感到困惑?

最佳的开始地点将是自然。环视四周。大自然拥有最好的渐变色实例,你必须相信数以百万计的艺术家和设计师,他们对于周围的一切都非常着迷。只要你有发现美的眼睛,颜色无处不在。

大自然拥有最好的渐变色实例

12.png

当我创意枯竭的时候,我总是会回归到大自然。当我到山上旅行时,我拍摄了许多照片,并将它们制作成我自己的自然色彩调色板。Sonal,我的同事,也是一名设计师,他最近写了同样的东西 - 为什么每个设计师都需要发现自然的美。这里有一些插图是我用自然界的灵感创作出来的,大家先睹为快。

在我的博客中的另一篇文章 - 如何在iOS 10中创建窗口小部件,我通过使用地板渐变色角度来创建维度。

通过使用地板渐变色角度来创建维度

在最近的一篇文章-为什么每个设计师都需要发现自然的美,我使用渐变的背景色打造聚焦效果。

每个设计师都需要发现自然的美

我希望这篇文章能够帮助你学习有关渐变色的新内容,以及如何使用它们来创建更好的插图。我坚信2018年渐变色会再次流行,并且2018年的渐变色会更有趣。

这里有一些工具可以帮助你了解有关渐变的更多信息

Paletton (我最爱的渐变模版生成器)
Webgradients (大量的渐变色)
Grabient (更多渐变色)
CoolHue (更多渐变色)
ColorSpace (值得推荐的色彩模版和渐变色彩生成器)
Wave Gradient Generator (这个能帮助你理解多个色彩渐变是怎么生成的)

原文作者:Nilanjan Debnath

原文地址:http://blogs.quovantis.com/why-gradients-are-back-to-rule-in-2018/


上一篇
Mockplus & 堇创社4月份的用户画像分析方法总结哪里找?快戳!

Jongde   04/25

掌握这6条“讲故事”原则,助你提高用户体验

Thomas   04/24

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com