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

相关推荐

  • APP设计当中不容忽视的20个小细节

    APP设计当中不容忽视的20个小细节如下: 1、一致,一致,还是一致 你能做的最重要的事情就是保证用户界面运作的一致性。对于列表框来说,如果双击其中的项,使得某些事件发生,那么双击任何其它列表框中的项,都应…

    2015-04-14
  • 百度贴吧体验升级背后的故事,用户洞察与交互升级

    作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的方式来解决,邀请用户与设计师一起,参与到品牌升级...

    2018-01-30
  • 界面框架与内容控件总结

    UI设计中一项很基本的工作就是界面设计,但是,如果一开始就是从界面这个概念去入手的话,往往会觉得无从谈起。所以,我会一个界面拆分成几个模块:框架、导航和内容。然后根据每个模块的特征去选择适合的展示方式,然后再拼凑成一个完整的界面。

    2017-05-29
  • 线上与线下零售体验设计分析

    本文作者将结合自己对线上与线下零售的实际体验,与你交流用户体验设计策略相同之处,提升融通思维的洞察力。本文行文思路如下:
    1、用户流量
    2、停留时间
    3、回访频次
    4、客单价
    5、盈利模式
    6、总结

    2017-04-29
  • 淘宝天猫个性化推荐技术演进史

    小编说:个性化推荐技术直面用户,可以说是站在最前线的那个。如今,从用户打开手机淘宝客户端(简称“手淘”)或是手机天猫客户端(简称“猫客”)的那一刻起,个性化推荐技术就已经启动,为你我带来一场个性化的购物…

    2017-05-09
  • 如何在Sketch中快速创建调色板?

    今天我将会教你如何在Sketch中快色的创建调色板。这是个很棒的技巧,是年前我从Marc Edwards那里学到的。首先我们先创建三个正方形,它们是可以被三整除。在我们的例子中,我们将先创建一个240pt高和240pt宽的正方形。我们将重命名这些图层为红色、绿色和蓝色。让我们将红色图层的填充改为#FF6161,绿色图层为#4F953B和蓝色的图层为#0076FF。选中这3个图层,然后按“A”快捷键来选择画板工具。我们现在从右边的检查器上...

    2018-04-17
  • 交互总结篇(一):框架与布局

    上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见《三个维度,解析产品的交互设计》。而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法。

    2017-04-28
  • JDC丨京东设计中心 - 电商大促攻略页设计指南

    通常我们看到的旅游攻略,游戏攻略等都是以文章资讯的形式呈现,只可阅读不可交互。而电商大促活动中的攻略页,可不仅仅是一篇资讯文章那么简单,除了要向用户传达促销信息,往往承载着引流,预约,发券,传播等营…

    2018-03-27
  • 用微妙动效改善用户体验的简单方法

    译者:zyl0127     应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧, 这些都是过去的事情了。 当…

    交互专题 2017-08-07
  • 清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28