颜色中的设计

目录

  • 1. 选择配色
  • 1.1. 明确你的目的
  • 1.2. 弄清你的受众
  • 1.3. 回顾颜色理论
  • 1.4. 寻找灵感
  • 1.5. 建立设计体系
  • 1.6. 选择调色板
  • 2. 总结

颜色中的设计

色彩在设计者手中拥有强大的威力。 它吸引眼球,调动情绪,沟通意思。为了给你一个颜色有多重要的概念,在一份广为引用的题为关于市场营销的颜色的影响的研究中,研究者发现对于某些产品,人们对其做出的一锤定音性质的决定可能仅仅只是根据颜色得出的。

所以高效地使用颜色对于设计作品来说是是重要的。但想出不同的颜色组合又是难的。每种颜色都有各自的含义,而又存在无穷多种颜色组合。

写这篇文章的目的是指导你为你的那些设计想出一些配色。它会鼓励你在色彩方面探索得更多,而这又将有助于你对什么是好的颜色组合,建立起直观的感知。

选择配色

配色板的漂亮的苍蝇 配色板的漂亮的苍蝇

有时调色板就是突然间的灵感的产物。但大多数时候,他都来源于使用一种系统的方法。

明确你的目标

在做任何其它事情之前,首先要澄清你的设计的目标。好的设计能够使它的颜色与它的目标保持一致。

询问一下你自己下述问题:

  • 你想用你的设计传递出什么样的讯息?
  • 你的设计的目标是什么?传递消息还是说服人?
  • 你想让你的设计激发什么样的情绪?

你的目标应该能够指导你选择你的调色板。

弄清你的受众

谁是您的受众,这对您的设计有何影响? 谁是您的受众,这对您的设计有何影响?

人们感受颜色的方式是不同的。正如费尔柴尔德说的,颜色就是一种在观察者内心中涌现出的一种心理现象。对于那些有着不同的个人偏好、成长的文化环境和经验的人,颜色有着不同的影响。因此,为了解人们会对你的设计会作何反应,你需要明确你的受众。

尽管有些颜色的含义对于绝大多数人都相同,其它却不尽然。比如说,绿色代表自然,因为这是植物的颜色;然而,像红色这样的颜色在不同的文化环境中有不同的解释。在西方世界,人们会将红色与大火、暴力、战争联系在一起,当然也会表示爱情和激情;然而,中国等一些国家却将之与繁荣和幸福联系在一起。

中国的红色信封 中国的红色信封

正因为颜色有着如此众多的含义,对于作为设计者的你来说将你的心理颜色模型与观众的心里颜色模型相匹配就显得重要起来。

要阅读更多的有关不同的国家和统计学人群的信息,你可以查验一下文章《市场营销和品牌打造中的颜色心理学》《颜色的含义》

回顾颜色理论

当选择调色板是,知道一些颜色理论是有所裨益的。颜色理论是对于混合颜色时的逻辑结构和实践指导。它围绕着从色环到每个单独的颜色的含义。

这儿有一份不错的启蒙读物,设计学校出品的《设计理论》, 还有核心地带出品的《颜色理论101》。你可以阅读《为什么脸书时蓝色的?市场营销中的颜色背后的科学》后得知一种有趣的颜色应用方式。

寻找灵感

有些时候为了优化你的设计,需要通过视觉方式展示正确的调色板,但这难以做到。这不是什么问题,毕竟伟大的艺术家”偷“;或者准确的说,他们从其他艺术家那里汲取灵感。

调色板灵的感通常可能来自于像http://dribbble.com/https://www.behance.net/这样的网站。如果你想寻找特定的设计风格的灵感,比如材质设计,你可以使用诸如https://www.materialui.co/colors的网站。相应的,扁平设计的可以到https://flatuicolors.com/

那些站点都有用,但也要尝试看一些来自于你的设计的目标媒介之外的设计。这样做能帮你能想到出乎预料地与众不同的和令人愉悦的调色板。比如,可以看一看室内设计。

室内设计用颜色给空间带来生机 室内设计用颜色给空间带来生机

如果你想来点儿不同的东西,那么到其他文化中的设计中寻找灵感吧。例如,韩国的音乐视频的布景设计以五颜六色与抓眼的配色方案著称。每一帧都是灵感之源啊。

布景设计是很棒的灵感来源 布景设计是很棒的灵感来源

你不必去韩国寻找色彩灵感,灵感无处不在,包括你的日常生活。你下次外出时,停下脚步开始感受一下你周遭的美妙色彩吧。

色彩灵感无处不在, 包括你的日常生活 色彩灵感无处不在, 包括你的日常生活

当你发现某些能够激发你的东西时,为它创造一个调色板。你可以用你最喜欢的设计程序中的取色器工具梳理出一个调色板,然后做些必要的调整。

建立设计体系

设计体系,有时也称之为风格指南,即囊括你所有设计元素的框架。这包括从按钮到排版的一切。考虑一下你要使用什么样的按钮,你的导航条应该长什么样。

作为设计体系的一个范例,查验一下https://www.lightningdesignsystem.com/design/overview/的设计体系。如果要寻求甚至更多例子,这儿有份列表https://designschool.canva.com/blog/50-meticulous-style-guides-every-startup-see-launching/

的设计系统 的设计系统

图注,MashCreative应该是一家设计公司

在选择配色板前,建立一个设计体系是有帮助的,即便只是粗略的草案。这样做可以给你一个概观: 你有哪些元素,你的颜色可以如何应用于这些元素。

依循"保持简单,保持愚蠢"的原则,颜色越少越好。对于大多数的设计体系,下列结构是一个良好的开端:

  • 背景
  • 主着重色
  • 次着重色
  • 错误提示色
  • 成功提示色

主要色是你最常用来应用于重要的按钮或着重部分,很多公司会都取之于它们的商标。

642848-20190624113437202-1822559132.png

次要色是用来区分次要动作和主要动作的。比如主次两种按钮。错误和成功提示色,通常是红和绿,表达的是设计状态,比如要通知成功和错误时。

设计状态 设计状态

选择一个调色板

既然你已经具备了灵感和设计体系的草图,那么现在是时候来选择色板了。

对于一个基本的色板,我喜欢将颜色并排放着,就像美术家对绘画用的调色板所做的一样。

642848-20190624113339092-1452244261.png

此时是时候将你的所有的那些色彩灵感,融汇到你的色板创建中了。越多越好!另外也不要害怕去独立自主地的做色彩实验。

当你要缩小你的调色板选项选项时,往回要想到头两个章节中你所明确的设计的目标和受众。问你自己下述问题:

  • 什么样的颜色是访问友好的?
  • 什么的一些颜色又视觉影响力,吸引着你的眼球?
  • 你需要浅色的或深色的颜色方案吗?人们会在一天的什么时段使用你的产品?
  • 你想要你的设计产品传递怎样的心情?是否有那么一款你已有的调色板比其它的都要优秀?

正如我上一章节提到的,颜色将在你的设计体系中扮演不同的角色。这也意味着他们在你的体系中有各自不一的重要程度。举个例子,相较于强调色,你将会更频繁地使用背景色。

642848-20190624112950488-1639628446.png

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

例如,这是(invasion)的调色板。

642848-20190624113123587-1813075545.png

几何图形表示起来可能像是这样。

642848-20190624112811813-302719727.png

应用配色

为了让您了解如何将颜色应用于设计体系,让我们来看看爱彼迎(Airbnb)。爱彼迎的主要颜色是劳什色(Rausch),劳什是公司创立时所在的街道名。喀山色(Kazan)作为次要颜色,两种灰色用作背景颜色。

爱彼迎的品牌颜色 爱彼迎的品牌颜色

对于大多数页面,爱彼迎使用雾灰色作为背景。您可以看到他们使用劳什色作为主要颜色来强调重要操作,例如请求预订清单。

642848-20190624110738471-153838671.png

喀山色,即绿松石色,用于捕捉和吸引你的眼睛。请注意它是如何烘托主色的。

642848-20190624110138220-1454316848.png

对于错误消息,Airbnb使用浅红色来呈现,可以说是一片劳什色。红色加上感叹号会立即引起您的注意,并告知您当前系统的状态。

642848-20190624104737006-549794992.png

在设计中没有任何颜色的情况下开始。专注于元素的布局和放置位置。在对手头的东西感到满意后,您就可以着手将颜色调色板应用到您的设计中。

从没有颜色开始,然后从那里慢慢添加 从没有颜色开始,然后从那里慢慢添加

考虑在你的设计中使用可视化的层级结构。考虑你想强调哪些设计组件,并分配与之合适的颜色。另外,像悬浮和点击状态这类东西,也考虑使用这些颜色的阴影。

总结

颜色就是不断实验和迭代。如果你想要更擅于颜色这块的话,唯一的法宝就是出更多的作品。将颜色视为添加剂。如果您具有设计的布局和功能,那么您可以根据需要尝试尽可能多的调色板。

学习如何使用颜色进行设计对于设计师来说无限有价值。随着您在选择调色板方面更加擅长,您也就发展出这样的能力:在接触设计程序之前就能够以视觉化的方式呈现设计中的颜色组合。

我很乐意知道你是如何在工作中使用颜色的。你的流程是什么?

附注:如果你喜欢这篇文章,点击推荐按钮或分享给你的朋友,这有很大的意义。

想要获取更多,你可以在推特上关注我,我会发一些吹逼扯淡的一些繁杂凌乱的东西,内容涉及设计、前端开发、网络机器人、机器学习。

参考

更新

  • [2019-03-16 周六 06:28] 添加一些翻译,修正一些翻译错误。
  • [2019-06-23 周日 19:00] 添加一些翻译,测试图片和修正部分目录链接。
  • [2019-06-24 周一 11:45] 补充完整翻译、链接和图片。

转载于:https://www.cnblogs.com/lywon/p/6087723.html