最专业的八方代购网站源码!

资讯热点
超实用!设计师的自学手册配色指南

发布时间:2019-11-12 分类: 行业资讯

本文系统地介绍了一些寻找色彩方案灵感的想法,并辅以大量案例来解释色彩匹配方法,这种方法易于理解,最适合初学者。

色彩是设计师手中的有力武器。

它吸引了用户的注意力,唤起了情感并传达了内涵。在对颜色的调查中,研究人员发现,90%的用户对产品的快速决策都是基于颜色的。

因此,颜色的使用对于设计至关重要,每种颜色都有其自身的含义,多种颜色的组合也需要理论指导。

选择配色方案

有时色彩匹配是光环的时刻,但更常见的是,它有更系统的匹配方式。

确定目的

在开始设计之前,确定设计目标。在开始之前问自己这些问题:

您希望通过设计传达哪些信息?

你的设计目的是什么?提供信息?劝导?

你想让你的设计唤起什么样的情感?

在选择调色板时,您的设计目的应该是您的指南。

确定您的受众

人们对颜色有不同看法。颜色是观察者内部发生的心理现象。根据个人喜好,文化发展和经验,颜色对人有不同的影响。因此,为了了解人们对您设计的反应,您需要确定您的受众群体。

当然,颜色有一般的含义。绿色通常代表自然,因为它是植被的颜色。然而,红色等颜色在不同的文化中有不同的解释。在西方世界,红色与火灾,暴力和战争有关。它也与爱和激情有关。然而,像中国这样的国家将红色与繁荣和幸福联系在一

因为颜色有许多不同的含义,所以将您的心理颜色模型作为设计师与您的受众进行匹配非常重要。

要了解有关不同国家/地区和人口统计数据的颜色和颜色的更多信息,请查看营销和品牌中颜色心理和颜色含义的颜色。

红篇:《设计师的读书笔记!带你重新全面认识色彩系列之红色篇》

橙色:《深入浅出学配色!带你重新全面认识色彩系列之橙色篇》

黄色文章:《深入浅出学配色!带你重新全面认识色彩系列之黄色篇》

绿色文章:《深入浅出学配色!带你重新全面认识色彩系列之绿色篇》

蓝色文章:《深入浅出学配色!带你重新全面认识色彩系列之蓝色篇》

紫色:《深入浅出学配色!带你重新全面认识色彩系列之紫色篇》

回顾色彩理论

色彩理论是混合色彩的逻辑结构和实用指南。它包含从色轮到各种颜色含义的所有内容。

《色彩搭配速成!3个实用方法帮你全面搞定配色》是一个很好的设计方法。你能通过研究来理解为什么Facebook是蓝色的吗?

寻找灵感

很多时候我们可能没有灵感,没关系,即使它是伟大的艺术家,我们也可以从别人的作品中学习并获得灵感。

一个寻找灵感的好代购源码网站是:

Dribbble

Behance的

如果你想找到配色方案或材料灵感,你可以尝试一下

MaterialUI

FlatUIColors

这些代购源码网站很有用,但尝试从您正在设计的特定媒体外部查看设计。这样做可以帮助您想出一个意想不到的独特和愉快的配色方案。例如,您可以看一下室内设计。

如果您想要不同的东西,请在其他文化设计中寻找色彩灵感。例如,韩国音乐视频集以其色彩鲜艳且引人注目的调色板而闻名。每个框架都可以用作灵感来源。

配色方案无处不在,包括您的日常生活。下次出门,停下来欣赏周围的色彩。

建立设计系统

设计系统(有时称为样式指南)是将所有元素封装到设计中的框架。这包括从按钮到排版的所有内容。您需要考虑哪种按钮以及导航栏的外观。

有关设计系统的示例,请查看网易的设计规范:《内部教程!超实用6步透视网易设计规范(附完整PDF下载)》,每个初学者都应该在开始设计之前仔细查看。

构建设计系统对色彩匹配有很大帮助。即使是草图也会为您提供适合整体解决方案的想法,颜色和元素。

保持Kiss原则(尽可能简单),颜色越少越好。对于大多数设计系统,结构是一个良好的开端:

背景

主要重点

次要重点

颜色错误

成功的颜色

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

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

选择配色方案

现在您已经对灵感和设计系统进行了粗略的描绘,现在是时候选择一种配色方案了。对于一个基本的调色板,我喜欢将我的颜色并排放置,就像每个人都整齐地等待会议一样。

基色可以更多,不要害怕尝试大胆的颜色。

当您进一步确认您选择的颜色时,请问自己:

设计目的和观众是否清晰?

什么颜色可以很容易理解?

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

你需要明亮或深色的配色方案吗?

人们什么时候会在一天内使用您的产品?

您希望您的设计传达什么样的心情?

你的配色方案比同类型的配色方案好吗?

正如我在上一节中提到的,颜色在您的设计系统中将扮演不同的角色。这也意味着每种颜色在您的系统中具有不同的权重。例如,您的背景颜色将比主要提示更频繁地使用。

因此,有时有利的是创建由不同尺寸的形状组成的一次性设计,每个尺寸大致等于给定页面上的颜色的出现频率和平均表面积。 (导演:颜色重量越高,面积越大,例如背景颜色尺寸>主要颜色尺寸)

例如,这是Invision的配色方案:

您可以将基色更改为其他大小以预览颜色方案。

应用配色方案

为了让您了解如何将颜色应用到您的设计系统,让我们来看看Airbnb。 Airbnb的主要颜色是Rausch(右起第二位),以公司起源的街道命名。喀山(下图中的第一个右侧)用作次要颜色,并且使用两个灰色作为背景颜色。

对于大多数页面,Airbnb使用雾灰色作为背景。您可以看到他们使用Rausch作为主要颜色来突出显示重要操作,例如请求预订清单。

喀山习惯于捕捉和吸引你的眼睛。注意它是如何补充原色的。

对于错误消息,Airbnb使用浅红色,这是一种阴影。红色和感叹号会立即引起您的注意,并告知您系统的状态。

想想您设计中的视觉层次结构。考虑要突出显示哪些设计组件并分配适当的颜色。另外,请考虑使用不同颜色的阴影进行悬停和点击状态。尝试为您的产品应用颜色。

最后

学习如何使用颜色设计对于设计师来说是非常宝贵的,颜色方案需要不断的实验和迭代。如果你想更容易处理颜色,唯一的办法就是做更多的工作并尝试。

« 如何分析外国竞争对手的关键词策略SEO | 指尖让你去APP促销营销新时代 »