做配色达人不得不会的一种配色利器——MD

今天,呆呆来给大家说说配色的问题,也算是用我这浅薄的经验,尽量教大家如何做好配色吧。


今天,呆呆来给大家说说配色的问题,也算是用我这浅薄的经验,尽量教大家如何做好配色吧。

做配色达人不得不会的一种配色利器——MD

很多小伙伴都说自己配色如屎,因为没学过色彩,没画过画,导致每次配色时都小心翼翼的。

然后去网上搜各种配色理论,看了什么冷暖、明暗等术语后开始照着去配色,然而还是一坨…(我也是这样)

所以有段时间我专门去了解配色这玩意儿,发现配色其实没那么难,至少没像做平面、广告等那些设计那么难,UI 视觉界面的配色其实更“简单”(这里说的简单不是说配色简单,而是用色更简约)。

所以,我下面介绍一款配色利器给你。

Maerial Design(MD)

MD 是由 Google 推出的设计语言,它更适用于 UI 视觉界面的配色,能起到更统一、更舒服的作用。

MD 所展示的颜色较鲜艳,所以在设备上展示出来也是很有识别性。有时候大家看到某个界面颜色很突出,干净且简约,那一定是按照 MD 的颜色来设计的。

它的色彩灵感来自于当代建筑等,并由此引发出了大胆的颜色,与单调乏味的周边环境形成鲜明的对比。

包括目前很多优秀的作品,都是参照它的规范来设计的。

因为我们今天只说颜色,所以如果你对 MD 的其他部分感兴趣的话,可以去网上搜下关于 MD 的文档。当中也包括有关于 Icon、框架层次、控件等如何搭配的讲解。(建议如果你英语还可以,最好看原版的)

MD 视觉调色板

MD 给出的官方色谱你可能会看不懂,所以我做了一套更清晰的(本来我做的很简单很丑,这个是看了 @大植子 的色板修改过的):

做配色达人不得不会的一种配色利器——MD

这是我在 sketch 里面做的色板,我这次骑行单车 App 的设计,颜色也是借用于此,所以色泽会看起来相对比较舒服。

不过在使用的过程中一定要学会限制数量。我们都知道,做界面设计的时候,颜色是“越少越好”(简约)的,所以在众多基础色中选出三个色值以及一个强调色来做搭配就足够了。

三个色度

三个色度如:

做配色达人不得不会的一种配色利器——MD

利用这三个色值来做搭配,可以起到一个过渡的作用。

举个例子:

做配色达人不得不会的一种配色利器——MD

大家看到这个界面,我一共使用了三种颜色,分别用不同的透明度来做调度,按钮是一个颜色、两种文字的搭配色、以及地图显示的颜色。

这样整个界面的基调都处于一个范围内,看起来也会很统一。

(虽然我做的都是一个色值的设计,但不代表它不能做渐变,原理也跟上面的是一样的。)

强调色

那强调色是什么呢?

比如你选择了三个色度值之后,想要突出按钮,那么就用其他颜色的色值来做按钮色来尽量突出这个按钮,所以你选择的这个颜色就是强调色。

举个例子:

做配色达人不得不会的一种配色利器——MD

这个按钮的颜色就是强调色,主要看你如何去搭配使用。

如果你大范围的用到强调色,那只需要用透明度来做不同位置的控制就足够了,不需要用过多的颜色来强调。

当然,强调色是可有可无的。或许你看我的这个界面使用了这个颜色会觉得不搭,那是因为我的背景色全都偏暖了,所以加了个冷色会显得很突兀,主要还是看你界面是否存在多样性,然后自己看情况去配色。

我的建议是:前期你先做好同色系的色彩搭配,然后再慢慢延展去做多色混搭。(并不是说单色搭配容易,其实单色更难,这样建议只是说先去做好统一,再去做变化)

主题色

很简单,就是界面背景和面板色。因为我做的是暗色系的搭配,所以选择了黑色。但是为什么我的黑色不是纯黑呢?

上面其实也提到了下,因为为了配合我的黄色系,我在黑色中加了点黄色,这样更能衬托出界面的基调。包括面板也是,加了亮黄,所以看起来比黑色更浅,但是不会突兀。

这就是主题色的搭配。整体来说还是比较简单的,希望能帮到你。

总结

有时候我们看一个作品,会觉得这个作品好看,但是说不出来哪里好。包括不好的作品也一样,说不出哪里不好。

这就是平时积累及总结的问题。人们经常说平时要多看多练,但其实多看多练不是最重要的。

最重要的是多想,想想它为什么这么做,多去看看官方的设计文档、网上大家的作品及文章,自己再把它总结一遍,化为自己的知识,不然你就算看再多做再多,都是没 Ruan 用的。

END.

#专栏作家#

呆呆,微信公众号:UDai-bl,人人都是产品经理专栏作家。交互设计师一枚,擅长交互动效、产品分析、数据分析、用户研究、行业分析等。痴迷阅读,希望有书友交流。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25209/

(0)
CatherineCatherine
上一篇 2017-05-10 23:07
下一篇 2017-05-11 01:16

相关推荐

  • 如何看待近几年网页设计发展与前途?是否网页设计已死成事实?

     抱着理想走下去,跨出封闭的国门,你会看到前途是无限大的。眼界或者环境被约束了,你是爬不高的,甚至会自暴自弃,或者抱怨现实,或者失去长期坚持的信心。 就算爬高了,也只是指定一群人的尖子。不止是眼界,环境也很重要,想办法突破现实环境的约束,否则,你只能看到,web就像是被APP和 ios,android,创业,微信等等玩意儿淘汰的产物,特别是封闭在自己出生的国家,其实不然,不要相信别人说的,也不要相信你看到的,要换个环境, 体验你所感受到的。

    2017-05-21
  • 短期记忆与用户体验:为脑力的局限而设计

    人类大脑不适于抽象思考和记忆数据,但网站常常要求我们这么做。许多可用性指南都取决于认知局限。

    2017-04-27
  • Reading Your User | 设计心理学书籍推荐

    研究大众的心理学对于设计是很有帮助的。用户在围绕着你的产品所进行的一系列行为举止背后的动机是什么,与之互动时进行过哪些心理活动,外部的哪些因素能够成功影响用户的决策……这些都能够设计师完成更好的设计。

    2017-05-20
  • 交互与时间:大幅菜单的0.5秒等待时间

    在大幅菜单中,鼠标经过区域的响应时间会很大程度的影响用户的使用体验,那么在现在具体的网页设计中体验时间都是怎么设计的呢?文章分享了几个实例,一起来看看。

    2017-04-28
  • 5个设计小技巧,创造令人愉悦的用户体验

    我们常常探讨用户体验,那么用户体验到底是什么?许多人认为,用户体验更多的是关乎产品的可用性(产品是如何运作的)。而实际上,用户体验远不止于一个“能用”的东西,它是关于用户的主观感受的。通过设计为可用的产品增添令人愉快的体验,同用户产生情感联系,这才是用户体验设计所要做的事情。个性是一种神秘的力量,它吸引一部分人,并且让我们与另外一部分人区分开来。

    2017-05-13
  • 交互设计--需求分析的20条法则

    来源:UI新动态对商业用户来说,他们后面是成百上千个供货商,前面是成千上万个消费顾客。怎样利用软件管理错综复杂的供货商和消费顾客,如何做好精细到一个小小调料包的进、销、调、存的商品流通工作,这些都是商…

    2017-08-02
  • 泛滥的移动产品设计模式

    如果你是一名移动产品设计师,你可能会同意这样的观点:参考借鉴别人的设计不算抄袭。这不仅是最佳的练习方法,也是一种设计模式,而且还符合业界主流的设计趋势,同时还能确保在用户熟悉的模式下来创建可用性的界…

    2016-10-18
  • 从设计默认值开始,给用户和产品带来更好的用户体验

    默认值是你的数字产品的默认基准设定值,这些填充设置的默认值虽然常常不多,但是换个角度来看,它更像是是设计师为设计作出一些基本的“决定”,帮助用户更快的让产品运行起来,上手使用。默认值对于产品和用户而言很重要,今天的文章,我们将会探讨设计师要如何设置默认值的样式、交互和字段细节,确保给用户和产品都能带来更好的用户体验。

    2017-05-03
  • 无框界面的四大优势,为你演绎一种新的设计风格

    无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救布料;而能自成一派的优秀设计师并不需要收到任何风格的局限。

    2017-05-10
  • 【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例

    本次分享给大家展现依然是高保真效果的原型,上一次展现的是iPad版本的,这次是iPhone端版本的原型,和上次一样,我们依然以国际第一时尚品牌VOGUE为例:iPhone端的效果比iPad更复杂,难度更高,我们要做的是抽屉效…

    2016-02-26