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


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

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

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


配色方案调色板


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

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


01.澄清你的设计目的

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

问自己以下问题:

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

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

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

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


02.确定你的受众群体


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

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

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

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


03.配色方案的基本要素

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

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


04.试着找灵感

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

通常的调色板灵感是像DribbbleBehance这样的网站。如果你想要特定的设计风格,如为材料设计找到颜色灵感,你可以使用像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,于是又将原文与日语重新整合翻译,里面的图片具有来源,出处都是很不错的网站。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容