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

相关推荐

  • 不止于美:浅析信息图形设计

    人在喝完可乐一小时内会有什么反应?高速发展的中国互联网在一分钟内会发生些什么事情?美国大选,川普和希拉里的支持率到底有多大差距?信息图带你一分钟搞懂这些事!随着经济技术的发展,信息化科技化速度越来越快,信息量的不断增加,使我们对于信息的整理与识别要求也越来越高。繁忙的工作生活下,如何使信息更为直观的提供给用户,信息图形设计在这种环境下应运而生。

    2017-04-30
  • iOS 10 交互设计指南

    几乎所有的iOS应用都由UIKit framework中定义的组件构成,了解这些基本组件的名称、作用和功能可以帮助你在应用的界面设计过程中提供更好的帮助。UIKit提供的UI组件分为以下4种类型:栏包含了上下文信息来指引用户…

    2017-08-01
  • 当我们在讨论用户至上的时候,我们在讨论什么?

    用户价值=用户收益-用户成本用户价值=用户收益-用户成本-机会成本机会成本=备选产品用户收益-备选产品用户成本。

    2017-05-31
  • 设计风格养成|5个维度,说说设计师讲述设计风格的正确姿势

    找准方向与维度,从大方向去讲解你的设计风格,只要你执行了,那它就不是什么困难的事情了。

    2017-05-06
  • 在交互设计中,极简设计的四种策略

    本文将介绍交互设计中的极简设计4策略,帮助产品经理或产品设计人员在进行产品设计时,可以打造一款真正为“用户”设计的产品。

    2017-05-01
  • 为你的App增加WiFi认证检测,让用户体验更加丝滑

    前言前段时间在上海坐地铁时连接了花生地铁WIFI,打开QQ音乐开始听歌,QQ音乐居然给了我一个"WIFI认证提醒"的弹窗,点击认证就跳转到了花生地铁WIFI的认证页,之后顺利联网成功,体验非常爽。作为一名iOS开发,不禁思考这个是怎么做到的呢?忘记WIFI重新连接后,打开手机里各个应用轮番测试一遍,发现QQ音乐、QQ、QQ空间三个应用都做了比较好的WIFI认证提示:成功提示.png而其它的大应用如微信、手淘、支付宝、钉钉、美团、点评、爱...

    2018-02-07
  • Apple Watch界面设计规范之UI设计基础(1/2)

    一、为Apple Watch而设计 Apple Watch体现着如下几个方面的主题思想: 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digit…

    2015-03-10
  • 用户体验与智能产品设计专业课程研修班

    通知:根据国务院学位委员会(2013)36号文件,原用户体验与智能产品设计在职研究生课程统一更名为“用户体验与智能产品设计在职研修课程”!一培养目标:良好的用户体验是产品成功的关键。在科学技术日益突飞猛进的今天,用户体验与创新设计不仅是国际IT界、设计界和商业界最活跃的热点,甚至成为企业成败的决定因素。随着科技进步和社会发展,人们对产品的需求由满足可用的时代提升到更加重视主观感受和体验。用户在使用产品、服务、系统的前期期望、使用过程中,...

    2018-04-06
  • 『交互设计经验分享』信息交互设计金字塔法则

    本文由卓衡科技运营总监刘鹏分享。文中刘鹏讲述了他们在创业过程中总结出的交互设计的金字塔法则。 金字塔方法这个说法来源于美国著名的现代管理咨询公司麦肯锡。大致的意思就是:任何事情都能归纳出一个中心点,而…

    2015-01-27
  • Axure神器:用母版打造模块化设计【UXRen原创】

    作者:Petrel(UXRen社区Axure金牌讲师,资深交互设计师) Axure原型的制作过程中,你一定遇到过这样的问题,出现在不同页面的功能模块,如果你是通过复制粘贴来完成的,那么当该模块发生变动需要修改时,麻烦就大…

    2017-08-04