7条定律让你优雅地玩转配色

配色关于设计师来说,不管是用来集中用户的留意力还是表达感情或许是传递信息都是十分无力的工具。为了让大家晓得配色关于传递信息有多重要,我援用《The Impact of Color on Marketing》这篇文章中的一句话,经研讨发现,百分之九

配色关于设计师来说,不管是用来集中用户的留意力还是表达感情或许是传递信息都是十分无力的工具。为了让大家晓得配色关于传递信息有多重要,我援用《The Impact of Color on Marketing》这篇文章中的一句话,经研讨发现,百分之九十的用户购置商品的时分,都是由于他的配色才去购置的。

想让配色的运用愈加无效果,这在设计中是十分重要的,也就是设想出一个全新的配色方案。每一种颜色都有着他共同的意思,将他们组合起来也就能传递出有限的能够。

这篇文章引见的是如何让你的配色与你的设计愈加搭配的办法。

选择配色方案的调色板

配色方案、有时就像雨后春笋般忽然从脑子里接二连三的蹦出来,但更多的状况下,我们可以运用一些方案性的办法。

01.将你的目的表现出来

在此之前,让我们明白目的和设计理念。一个有着含义的调色板是良好的设计要素之一。

我们可以问本人以下几个成绩。

  1. 你想经过设计传递什么样的信息?
  2. 设计的目的是什么?想传递什么情报?想引导用户什么?
  3. 他包括了怎样的感情和认识?

02.明白你的目的用户

颜色所面对的每一团体都是不同的。同一个颜色,由于每团体的特性、文明背景,经历的不同会发生不同的效果。思索到这一点,我们就需求明白,当用户面对这样的设计时,会表现出怎样的反响。

一些颜色的含义,在世界的任何中央都是通用的,但有些则不是。绿色,普通是植物的颜色,看到他们就会联想到自然。但是白色就不一样了,他会由于文明的不同而不同。在西洋文明中白色代表的是:火(英: Fire)、暴力(英: Violence)、纷争(英: Warfare),有时也会表示爱(英: Love)或许热情(英: Passion)。但是在中国则表示的是昌盛(英: Prosperity)和幸福(英: Happiness)。

由于颜色有着不同的含义,在创立一个调色板时理解你所面对的用户的感情是十分重要的。

假如你想理解更多关于颜色和国度的意义,你可以去看The Psychology of Color in Marketing and Branding和The Meaning of Color这两篇文章。

03.理解配色方案的根本要素

选择配色时,你需求理解一些关于配色的根本知识。配色的根本,就是配色组合的根本实际和结构,具有理论性的指南。他从如何运用色轮以及每一个的意义都总结的非常片面。

你所应该晓得的,关于配色的根本知识。这篇文章,他关于颜色有着一个详细的划分,你们可以从这篇文章中取得参考。

04.试着去寻觅灵感

有的时分视觉化的必要的配色方案很难设计出来。那种时分,可以从别的设计师的作品中取得灵感。

罗列两个关于配色来说相当方便的网站,Dribbble和Behance。有时你想给你的资料设计找一些特殊的灵感时,引荐Material UI这个网站。平板式的配色彩色板,你可以应用FlatUIColor这个完好。

下面所罗列的几个网站都十分的方便。接上去让我们从不同的设计之中所发生的效果里一同来看一看吧。这样共同而不测的办法,可以让你创立一些更有意思的调色版。例如,室内设计就是十分不错的案例之一。

当你想创立一些不同的配色方案,无妨试着转变一下思绪,应用其他文明的设计。举个栗子、韩国的音乐MV、适用的多彩的调色板让人印象深入。每一个场景,都可以给你的灵感提供参考。

我们也可以从日常生活中取得灵感的启示。当你走出去,室外的任何一个风光都可以作为参考。

当你看到了令人冲动的配色时,就可以把他们做成配色版了。你可以应用Photoshop,或许一些在线工具,来调整我们所找到的配色方案。

05.制造属于你的作风指南

设计零碎你所需求晓得的作风指南是,将一切的设计要素放在一致的设计框架之中。在这之中包括了包括按钮或字体等全部的设计要素。我们在设计时应该考虑什么样的按钮或导航菜单才是应该被选用的。

在理论中如何运用作风指南,在这里有一些网页的案例可以参考。设计师一同来学习,精心挑选的50个知名品牌的作风指南这篇文章,详细引见了知名平牌是如何应用作风指南,可以用来参考。

由于它可以是一个复杂的草图,所以在运用配色版之前,可以方便的协助你做出你本人的作风指南。了如指掌的晓得应用什么样的设计要素,那么也就会明白该运用怎样的配色来停止制造了。

选择设计制造时用的调色板时,要有「KISS(略: Keep it Simple, stupid)(越复杂越好)」这样的思绪。首先,尽能够的增加颜色,我们需求思索上面几点。

  1. 背风光(英: Background)
  2. 主色(英: Primary Color)
  3. 主要色(英: Secondary Color)
  4. 正告色(英: Error Color)
  5. 成功色(英: Success Color)

主色,作为一个重要的CTA(Call to Action,详细可以看这篇文章:http://www.webpowerchina.com/knowledge/page.php?id=438译者注)按钮或强调色被运用着,很多公司将他应用在LOGO设计上。

主要色、普通应用他来区别举措行为的颜色。举个例子,在正告和成功所运用的颜色,通常运用绿色和白色,好像上面的例子,你可以应用他们来设计从而将以后形态信息传递给用户。

06.选择调色板

假如你曾经想好了设计灵感,完成了作风指南并做了一些复杂的草图,那么接上去你就可以选择调色板了。

一些根本的调色板,艺术家们通常将他们以相近的颜色陈列在一同,这是一个十分不错的办法。

我们可以从这些配色方案中可以取得一些灵感作为参考。就让我们一同来看看如何从尝试出的许许多多的配色方案中获得最适宜的方案吧。

正如后面所说,当你在挑选配色方案的时分,为了明白目,传递出怎样的信息情感给用户,你可以尝试着问本人以下几个成绩。

  1. 这个配色用起来很复杂吗?
  2. 用什么颜色影响力最大,最能有目共睹。
  3. 运用的这个颜色有必要让他更亮/更暗一点吗?用户在什么时分运用商品或许设计?
  4. 你想经过设计传递什么样的信息?

可以这么说,由于作风指南,颜色在设计中所担任的任务不同,各种各样的颜色的分量也是不同的(英: Weight)。举个例子、强调色比背风光所运用的次数就要多一些。

关于这一点你可以做一些练习,在实践页面中你可以将颜色依重要水平的不同来放进大小不同的外形中。上面是 Invision 的调色板。

思索到强调色等颜色、配色以图形的形式在上面表现出来了。

07.使用调色板

什么样的颜色适用于作风指南呢?让我们来看看这个比拟容易了解的 Airbnb(一个旅馆预定网站) 的例子。Airbnb的强调色,是可以显示公司住所地址的白色(英: Rausch)。绿松石色(英: Kazan)是辅佐色、背风光则运用了两种灰色(英: Foggy / HOF)。

Airbnb的很多页面,背风光运用的是比拟亮堂的灰色(英: Foggy)。比方上面的例子、预定房间是十分重要的举措,就运用了作为主色的白色(英: Rausch)。

绿松石色(英: Kazan),运用它能更好的引人留意。在上面的这个例子中,你可以看到他作为辅佐色很好的协助了原色。

Airbnb 的错误信息提示,大约将白色(Rausch)停止了一些调整,应用了比拟亮的白色。在图中所运用的感慨号(! 英: Exclamation Mark)和白色相组合,立刻跃入了用户的眼中,将以后零碎的形态传递给了用户。

让我们试着运用最后的颜色来做设计吧。试着将他们放在规划和设计的焦点之中。在这些都完成之后,将调色板使用于设计吧。

思索一下关于视觉的层次感(英: Visual Hierachy)。思索什么样的要素,什么样的颜色与设计才是最婚配的。还有,鼠标在要素上悬停和点击时的举措的呼应,你可以思索应用不同的颜色。

最初

美丽的配色,需求不时的反复,重复的去尝试。至于什么颜色最好,也是没有独一的答案的。决议了规划和设计的功用之后,多多的去尝试各种各样的配色吧。

不时的学习如何运用颜色来停止设计,是十分重要的。在设计开端之前,不论什么样的颜色组合都能经过视觉化的效果表现出来,就可以选择更好的颜色眼停止设计了。

原文:photoshopvip

译者:@喪心病狂十六夜貓

最新案例