颜色是设计师手中的强大力量。它吸引你的眼睛,唤起情感,传达意义。为了让你了解颜色的重要性,在一篇被广泛引用的题为“颜色对市场营销的影响”的研究中,研究人员发现,对于某些产品,人们对产品的90%的快速决策可能只基于颜色。
所以有效地使用颜色对设计很重要。 但是想出不同的颜色组合也很难。 每种颜色都有自己的意义,有无限数量的组合。
本文旨在作为一个指南,帮助你为自己的设计提出调色板。 它鼓励你探索更多的颜色,这将有助于你开发直观的感觉良好的颜色组合。
有时,调色板是突然的灵感的结果。但大多数时候,它来自采取系统的方法。
在做任何其他事情之前,首先确定你的设计目的。良好的设计使其调色板与其目的一致。
01.澄清你的设计目的
在做任何其他事情之前,首先明确你的目的和设计的理念。好的配色方案是让你的调色版与设计目的保持一致。
问自己以下问题:
● 你想用你的设计传达什么信息?
● 你的设计目的是什么?传达的信息?事情诱使用户?
● 你想让你的设计唤起什么情绪?
“ 你的设计的目的应该为你选择你的调色板时作为指南。”
02.确定你的受众群体
颜色是观察者内部出现的心里现象。在不同人的个性和文化背景的烘托下,不同的经历、颜色会带来不同的效果。因此,为了了解人们如何对您的设计做出反应,你需要识别你的受众。
颜色有普遍含义和特殊含义。比如:绿色普遍代表自然,因为它是植被的颜色。然而,像红色这样的颜色在不同文化之间有不同的解释。在西方世界,红色与火,暴力和战争有关。它也与爱和激情有关。然而,像中国这样的国家将红色与繁荣和幸福联系在一起。
因为颜色有很多不同的含义,所以重要的是要将你作为设计师的心理颜色模型与你的观众相匹配。
要了解更多关于不同国家和人口统计的颜色意味着什么,请查看颜色在市场营销和品牌的新颜色心理学和颜色的意义。
03.配色方案的基本要素
当选择一个调色板,它也可能有助于了解颜色方案的一点点基本知识。基本的配色方案,在色彩组合的逻辑结构,是一个实用指南。从如何使用色轮到各种颜色的意义,总结全面。
一个好的底漆是设计学校的颜色理论,和Hubspot的颜色理论101。你可以阅读一个有趣的应用色彩理论:为什么Facebook是蓝色?颜色后的科学营销。
04.试着找灵感
有时很难想象设计所需的颜色方案。没关系,可以尝试从其他艺术作品寻找灵感。
通常的调色板灵感是像Dribbble、Behance这样的网站。如果你想要特定的设计风格,如为材料设计找到颜色灵感,你可以使用像Material UI这样的平板式的色彩配置网站,我们还利用FlatUIColor。
也可以尝试看看来自设计的特定媒体之外的设计。它会帮助你创建一个有趣的调色板。例如,室内设计可以说是很好的例子之一。
当你想有一点不同的配色方案,这是一个好主意,试图转向其他文化的设计。例如,在韩国音乐视频集设计,以其丰富多彩和眼睛捕捉的调色板而闻名。每一个场景,一定可以作为灵感来源。
你不必去韩国寻找颜色灵感。 它无处不在,包括你的日常生活。 下一次出去,停下来欣赏你周围的颜色。
当你找到的色彩,令人兴奋的兴奋,让我们创建一个调色板。使用最喜欢的设计程序中的吸管工具挑出一个调色板,如在线工具オンラインツール,让我们在必要的调整配色方案。
05.建立设计系统
设计系统,也叫作样式指南。所有的设计元素,被共同使用的框架。如本按钮和排版字体,它将包含所有的设计元素。什么按钮让我们来考虑是否采用的风格和导航菜单的设计。
更实用的使用风格指南是介绍一些网站:Salesforce的设计系统。对于更多的例子查看:50个细致的风格指南列表。
在选择调色板之前建立一个设计系统是有帮助的,即使它只是一个粗略的草图。 这样做会给你一个想法,你有什么元素,以及你的颜色如何适用于他们。
当选择一个设计调色板时,最好坚持KISS(保持简单,愚蠢)原则。 颜色越少越好。 对于大多数设计系统,以下结构是一个好的开始:
背景色(英: Background)
原色(英: Primary Color)
间色(英: Secondary Color)
警戒色(英: Error Color)
成功色彩(英: Success Color)
原色是最常用于重要按钮和重音的颜色。对于许多公司,这也是他们的标志的颜色。
辅助颜色是用于区分次要操作和主要操作的颜色。 例如,主按钮和辅助按钮。 错误和成功颜色,通常是红色和绿色,传达设计状态。 例如,成功或错误通知。
06.选择调色板
现在你拥有灵感和设计系统的粗略草图,是选择一个调色板的时候了。
对于一个基本的调色板,我喜欢把我的颜色并排,就像一个艺术家为他们的油漆调色板。
这是采取所有的颜色灵感和创建调色板从他们的时间。越多越好。不要害怕自己尝试颜色。
在缩小调色板选项时,请回想前两个部分,在其中确定设计的目的和受众。问自己以下问题:
它的配色方案很容易被使用。
什么颜色有视觉冲击力和吸引你的眼睛?
你需要一个明亮或深色配色方案吗?一天的什么时候人们会使用你的产品?
你想让你的设计传达什么样的心情? 有没有任何一个调色板你做的比别人更好?
正如我在上一节中提到的,颜色将在你的设计系统中有不同的角色。 这也意味着每种颜色在你的系统中都有不同的重量。 例如,你的背景颜色将比重音颜色更频繁地使用。
因此,有时创建一个由不同尺寸的形状组成的一次性设计是有好处的,每个尺寸大致等于给定页面上的颜色的出现频率和平均表面积。
例如,这里是Invision的调色板。
考虑到强调色,它也可以表示为如下,并代表在所述图形的颜色方案。
07.应用调色板
如何申请颜色的风格指南,让我们来看看一个更容易理解的Airbnb的例子。Airbnb,在推出该公司时,当时以地址命名的红色为主色颜色。绿松石是次要颜色,两种灰色为背景色。
对于大多数页面,Airbnb使用雾灰色作为背景。 您可以看到,他们使用rausch作为他们的主要颜色强调重要的行动,如要求预订列表。
喀(ka)山,绿松石色,用于捕捉和吸引你的眼睛。 注意它如何补充原色。
对于错误消息,Airbnb使用浅红色,可以说是一种阴影。 红色,连同感叹号,立即吸引你的眼睛,并通知你系统的状态。
介绍让我们的设计没有使用的颜色。让我们关注的布局和设计的安排。该说服力完成后,我们的调色板应用到设计中。
想想设计中的视觉层次。想想你想强调,考虑什么设计组件要突出显示和分配适当的颜色,我们指定的颜色相匹配的设计元素是什么。此外,按照点击行为,比如当鼠标悬停,你也可以考虑使用深浅不同的。
结语:
颜色都是关于实验和迭代。如果你想变得更好地处理颜色,唯一的答案是做更多的工作。想想颜色作为添加剂。如果你有自己的设计布局和功能想法,那么你可以试验尽可能多的调色板。
学习如何用颜色设计对于设计师来说是无价的。随着你更好地选择调色板,你可以开发在设计之前可视化颜色组合的功能,甚至可以触摸设计程序。
最开始看到这篇文章是在一个日文网站:PHOTOSHOP.VIP,当我把里面的日文翻译完成后,发现原来出自Free Code Camp,于是又将原文与日语重新整合翻译,里面的图片具有来源,出处都是很不错的网站。