做配色达人不得不会的一种配色利器——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

相关推荐

  • Designing in color

    色彩是设计师手中强大的力量,它吸引你的眼球,调动你的情绪,让沟通更为有效。为了让你能够认识到色彩是多么重要,在一篇广泛被引用研究的报告-“The Impact of Color on Marketing”,研究者们发现对一些产品来说,90%的人仅仅基于它的颜色对一款产品下决定。

    2016-07-11
  • 设计只在需要时 —— “暂停”按钮的消失又出现

      很多时候,不好的设计往往是因为思考的不充分或者思考的太多;而好的设计则正是因为它出现的恰到好处,哪怕它可能是在对传统习惯做出的挑战。以下我将通过现实产品中“暂停”按钮的消失又出现来说明这一点。
      对于现实中的声音播放工具,大家应该不陌生吧。录音机、walkman、CD随身听,虽然这是上个世纪甚至上上世纪的名字,但是也不至于让现在沉溺于虚拟世界的人们彻底忘记(90后除外)。我们只是去回味这些古老工具的播放控制按钮,也是能够品味出优良的设计思想的。

    2017-08-04
  • 译文 | 交互设计中对于“可控性”的理解

     “今天,你可以自由的调节你的屏幕的亮度,关掉应用的通知,自主决定是否连接手机的无线网络等等,虽然这些只能将你的手机电量多延长了几分钟,但却让你满足于一种成就感:你可以完全掌控你的手机,你可以调整所有的设置!(其实你无法控制你手机的电池寿命!) ”

    2017-05-31
  • 如何才能读懂甲方给出的设计需求?

    转到交互岗已经有一阵子了。原来在做产品的几个月里没少和技术、设计进行沟通,每当自己把意思想法传达下去的时候,反馈回来的结果基本都要进行进一 步的修改,这种返工和修改在产品快速迭代的过程中很浪费时间。当时自己没有觉得表达有问题,已经把需求的目的结果都表达清楚了。可能是自己没写过代码、没 做过设计所以在一些专业的术语的表达上,方案实现方式的选择上存在偏差,导致技术、设计没有完全按照自己设想的预期做出结果。

    2017-05-24
  • 交互设计的门类 & 英国综合类院校及艺术院校在如何定义交互设计?

    艺麸大大带你了解英国交互类TOP院校要知道你离名校并不遥远别走神,好好看完哦~随着科技日新月异的发展,让交互设计一时成了“网红专业”,很多学平面设计或视觉传达的童鞋们纷纷转专业到交互设计大本营。然而各大顶尖院校对于交互设计的专业命名也是“五花八门”,如,服务设计、交互设计、用户体验设计等。交互本来就是一个艺术与科技的完美结合,国内很多院校都不能将其做的很突出和优秀,这就导致了出国学习交互设计成为许多人的想法。那么你有多了解交互设计呢?我...

    2018-04-19
  • Axure模板库(13)-直播

    最近直播app越来越火,我整理了一些直播app,做了几个模板,跟大家分享。原型文件在文章最后。1、首先临摹一个国外的。(1)首页第一个展示的是快速发布直播的入口,鼓励用户创作内容。第二个展示的是一系列标签。如果平台上内容类型比较多的话,可以像这样强调标签、分类。如果平台上都是美女主播,那分类的权重就可以小一点了。第三个展示的是直播列表。直播最重要的信息就是直播的画面,列表上可以放一张大图,或者更直接,展示一小段视频。(2)直播页面,展示...

    2018-03-04
  • 未来的用户界面,将重新定义设计师的角色

    如果用户界面能够自适应用户的需求,那么设计师实际需要设计什么?如果没有图形用户界面,还需要设计师吗?

    2017-05-10
  • 7个未来网页设计的发展

    太多的文章会告诉你什么是酷的在网页设计中。 我要带你做一些真正的预测。 1. 手势是新的点击 我们忘记了滚动网页曾经是多么困难。 大多数用户会刻意将鼠标移动到屏幕的右边缘,使用一些“古代”称为“滚动条”: 作为一…

    2015-08-19
  • UI风水学:你该知道的9个UI设计门道

    好风水称之“顺”,其中一元叫气,精气/气场在于风水之中:“气遇风则走,遇水则停。”讲究个气顺心畅;
    好交互称之“理”,其中一元叫情,情感/情怀在于场景之中:“情遇杂则乱,遇简则通。”讲究个通情达理。好风水称之“顺”,其中一元叫气,精气/气场在于风水之中:“气遇风则走,遇水则停。”讲究个气顺心畅;
    好交互称之“理”,其中一元叫情,情感/情怀在于场景之中:“情遇杂则乱,遇简则通。”讲究个通情达理。

    2017-05-12
  • 设计师要懂心理学の眼见非脑见

    我们一般认为,当我们观察周围的一切时,眼睛会将看到的信息传输给大脑,大脑再对信息进行处理,让我们感受到真实的世界。但其实不然,脑见并非眼见,因为大脑总会解析眼睛看到的所有信息。试举一例,请观察下图: …

    2014-11-26