7要点,重拾配色设计方案

2017-02-05  本文已影响0人  Jenica_Jig
By @jonathanzwhite


颜色是设计师手中的强大力量。它吸引你的眼睛,唤起情感,传达意义。为了让你了解颜色的重要性,在一篇被广泛引用的题为“颜色对市场营销的影响”的研究中,研究人员发现,对于某些产品,人们对产品的90%的快速决策可能只基于颜色。

所以有效地使用颜色对设计很重要。 但是想出不同的颜色组合也很难。 每种颜色都有自己的意义,有无限数量的组合。

本文旨在作为一个指南,帮助你为自己的设计提出调色板。 它鼓励你探索更多的颜色,这将有助于你开发直观的感觉良好的颜色组合。

配色方案调色板

有时,调色板是突然的灵感的结果。但大多数时候,它来自采取系统的方法。

在做任何其他事情之前,首先确定你的设计目的。良好的设计使其调色板与其目的一致。

01.澄清你的设计目的

在做任何其他事情之前,首先明确你的目的和设计的理念。好的配色方案是让你的调色版与设计目的保持一致。

问自己以下问题:

● 你想用你的设计传达什么信息?

● 你的设计目的是什么?传达的信息?事情诱使用户?

● 你想让你的设计唤起什么情绪?

“ 你的设计的目的应该为你选择你的调色板时作为指南。”


02.确定你的受众群体

Who is your audience and how does that affect your design?

颜色是观察者内部出现的心里现象。在不同人的个性和文化背景的烘托下,不同的经历、颜色会带来不同的效果。因此,为了了解人们如何对您的设计做出反应,你需要识别你的受众。

颜色有普遍含义和特殊含义。比如:绿色普遍代表自然,因为它是植被的颜色。然而,像红色这样的颜色在不同文化之间有不同的解释。在西方世界,红色与火,暴力和战争有关。它也与爱和激情有关。然而,像中国这样的国家将红色与繁荣和幸福联系在一起。

Chinese red envelope

因为颜色有很多不同的含义,所以重要的是要将你作为设计师的心理颜色模型与你的观众相匹配。

要了解更多关于不同国家和人口统计的颜色意味着什么,请查看颜色在市场营销和品牌的新颜色心理学颜色的意义

03.配色方案的基本要素

当选择一个调色板,它也可能有助于了解颜色方案的一点点基本知识。基本的配色方案,在色彩组合的逻辑结构,是一个实用指南。从如何使用色轮到各种颜色的意义,总结全面。

一个好的底漆是设计学校的颜色理论,和Hubspot的颜色理论101。你可以阅读一个有趣的应用色彩理论:为什么Facebook是蓝色?颜色后的科学营销

04.试着找灵感

有时很难想象设计所需的颜色方案。没关系,可以尝试从其他艺术作品寻找灵感。

通常的调色板灵感是像DribbbleBehance这样的网站。如果你想要特定的设计风格,如为材料设计找到颜色灵感,你可以使用像Material UI这样的平板式的色彩配置网站,我们还利用FlatUIColor。

也可以尝试看看来自设计的特定媒体之外的设计。它会帮助你创建一个有趣的调色板。例如,室内设计可以说是很好的例子之一。

Interior designers use color to bring spaces alive

当你想有一点不同的配色方案,这是一个好主意,试图转向其他文化的设计。例如,在韩国音乐视频集设计,以其丰富多彩和眼睛捕捉的调色板而闻名。每一个场景,一定可以作为灵感来源。

Set design is a great source of inspiration

你不必去韩国寻找颜色灵感。 它无处不在,包括你的日常生活。 下一次出去,停下来欣赏你周围的颜色。

Color inspiration is everywhere, including your daily life

当你找到的色彩,令人兴奋的兴奋,让我们创建一个调色板。使用最喜欢的设计程序中的吸管工具挑出一个调色板,如在线工具オンラインツール,让我们在必要的调整配色方案。

05.建立设计系统

设计系统,也叫作样式指南。所有的设计元素,被共同使用的框架。如本按钮和排版字体,它将包含所有的设计元素。什么按钮让我们来考虑是否采用的风格和导航菜单的设计。

更实用的使用风格指南是介绍一些网站:Salesforce的设计系统。对于更多的例子查看:50个细致的风格指南列表

The design system of MashCreative

在选择调色板之前建立一个设计系统是有帮助的,即使它只是一个粗略的草图。 这样做会给你一个想法,你有什么元素,以及你的颜色如何适用于他们。

当选择一个设计调色板时,最好坚持KISS(保持简单,愚蠢)原则。 颜色越少越好。 对于大多数设计系统,以下结构是一个好的开始:

背景色(英: Background)

原色(英: Primary Color)

间色(英: Secondary Color)

警戒色(英: Error Color)

成功色彩(英: Success Color)

原色是最常用于重要按钮和重音的颜色。对于许多公司,这也是他们的标志的颜色。


辅助颜色是用于区分次要操作和主要操作的颜色。 例如,主按钮和辅助按钮。 错误和成功颜色,通常是红色和绿色,传达设计状态。 例如,成功或错误通知。

06.选择调色板

现在你拥有灵感和设计系统的粗略草图,是选择一个调色板的时候了。

对于一个基本的调色板,我喜欢把我的颜色并排,就像一个艺术家为他们的油漆调色板。

这是采取所有的颜色灵感和创建调色板从他们的时间。越多越好。不要害怕自己尝试颜色。

在缩小调色板选项时,请回想前两个部分,在其中确定设计的目的和受众。问自己以下问题:

它的配色方案很容易被使用。

什么颜色有视觉冲击力和吸引你的眼睛?

你需要一个明亮或深色配色方案吗?一天的什么时候人们会使用你的产品?

你想让你的设计传达什么样的心情? 有没有任何一个调色板你做的比别人更好?

正如我在上一节中提到的,颜色将在你的设计系统中有不同的角色。 这也意味着每种颜色在你的系统中都有不同的重量。 例如,你的背景颜色将比重音颜色更频繁地使用。

因此,有时创建一个由不同尺寸的形状组成的一次性设计是有好处的,每个尺寸大致等于给定页面上的颜色的出现频率和平均表面积。

例如,这里是Invision的调色板。

考虑到强调色,它也可以表示为如下,并代表在所述图形的颜色方案。

07.应用调色板

如何申请颜色的风格指南,让我们来看看一个更容易理解的Airbnb的例子。Airbnb,在推出该公司时,当时以地址命名的红色为主色颜色。绿松石是次要颜色,两种灰色为背景色。

Airbnb’s brand colors

对于大多数页面,Airbnb使用雾灰色作为背景。 您可以看到,他们使用rausch作为他们的主要颜色强调重要的行动,如要求预订列表。

喀(ka)山,绿松石色,用于捕捉和吸引你的眼睛。 注意它如何补充原色。

对于错误消息,Airbnb使用浅红色,可以说是一种阴影。 红色,连同感叹号,立即吸引你的眼睛,并通知你系统的状态。

介绍让我们的设计没有使用的颜色。让我们关注的布局和设计的安排。该说服力完成后,我们的调色板应用到设计中。

Start off without color and slowly add from there

想想设计中的视觉层次。想想你想强调,考虑什么设计组件要突出显示和分配适当的颜色,我们指定的颜色相匹配的设计元素是什么。此外,按照点击行为,比如当鼠标悬停,你也可以考虑使用深浅不同的。

结语:

颜色都是关于实验和迭代。如果你想变得更好地处理颜色,唯一的答案是做更多的工作。想想颜色作为添加剂。如果你有自己的设计布局和功能想法,那么你可以试验尽可能多的调色板。

学习如何用颜色设计对于设计师来说是无价的。随着你更好地选择调色板,你可以开发在设计之前可视化颜色组合的功能,甚至可以触摸设计程序。

最开始看到这篇文章是在一个日文网站:PHOTOSHOP.VIP,当我把里面的日文翻译完成后,发现原来出自Free Code Camp,于是又将原文与日语重新整合翻译,里面的图片具有来源,出处都是很不错的网站。

译文来自:Designing in Color by Jonathan Z. White – Medium

上一篇下一篇

猜你喜欢

热点阅读