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

    About Axure 8.0Axure:产品人必备必会的软件,快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。1.Axures的安装官方下载地址:https://www.axure.com/download汉化包地址:http://www.iaxure.com/menupage/download.html国内下载地址:https://pan....

    2018-05-08
  • 交互设计师怎样理解信息架构

    设计文章 / 交互设计 | 发布者: GUImobile 这篇适合交互设计或者对交互设计感兴趣的小伙伴们看。所以我就不解释信息架构是什么了。今天写一下产品信息架构的思考。 任何产品都有信息架构,或繁杂或简单。在文中讨论…

    2014-10-15
  • 说句心里话,这5种常见的设计模式还是挺闹心的

    本文所提到的这5种设计模式确实有其恼人的一面,但是它们同样存在特定的优势。在许多设计项目中,在特定的需求之下,它们也可能是最佳的解决方案。另一方面,学会根据实际的状况来寻求优化的方案,也是设计师应当做到的事情。

    2017-04-28
  • 提高移动应用体验的7个UX设计要点

    ​APP为了提供服务与内容,信用已经成了一种主流方式。但是,在各种服务如雨后春笋般蓬勃发展的市场上,怎样让你的移动应用更有帮助更具关联性,让用户流连忘返就非常有必要了。这一次,我们介绍的是让你的用户获得非常棒的移动应用体验的7个UX设计要点,那么,一起来看看吧。

    2017-05-10
  • 重要交互设计原则

    不管是开发者还是交互设计师,每一位从业者都想要创造让自己自豪的产品。为了改善结果,两方人员一直在重新思考整个开发流程,要求有更好的工具、更好的指南、更高的权限。交互设计的强大力量不容置疑。它能让用户在工作、娱乐和交流之际,获得难忘、有效、简单,以及有益的体验。设计原则:1. 用户界面应该基于用户心理模型,而不是实现模型。2. 目标导向的交互设计反映了用户的心理模型。3.交互设计不是凭空猜测。4.不要让用户感觉自己愚笨。5. 界面设计的关...

    2018-03-01
  • 这些走心的用户体验应该多学学

    不仅仅局限于互联网的设计,可能还有服务,线下的设计等。先问一下自己,到底什么是好的用户体验?我认为有以下三点:第一,无需思考,符合本能的设计。(反例,各种需要用户大量动脑的设计)第二,不打扰用户,让用户沉浸的设计。(反例,各种不必要的弹窗提示)第三,温暖的设计,细节打动人心,超出用户的心理预期。(反例,各种冰冷的缺省页面)1.网易云音乐分享提示最近发现了网易云音乐的一个小彩蛋,那就是在播放页当你点了某一首音乐喜欢后,会给你跳出来一个可爱...

    2018-02-01
  • APP设计:那些打动人心的设计点(一)

    打造用户喜欢的产品,让产品从能用、好用到爱用,是每个互联网从业者的使命,为你的APP增添一些打动人心的小设计,不失为一个好办法。当然,前提是该设计能为用户带来价值,千万不要为了设计而设计。

    2017-05-06
  • 创先争优|张迪:创业艰难,但梦想会让你永远保有对生活的热爱

    争先创优为全面贯彻党的教育方针,鼓励研究生勤奋学习、自强不息、积极实践、勇于创新,促进优良校风学风建设,培养德、智、体全面发展的高层次复合型人才,学校结合实际,研工部于2017年10月-11月组织开展了重庆大学2016至2017学年度研究生“争先创优”评选。为响应学校号召,UMD研究生网络文化工作室根据工作安排,特推出重庆大学“争先创优”优秀研究生人物志系列活动,从中挑选一批先进研究生代表,通过微博、微信、网站、电子显示屏等网络宣传平台...

    2018-03-01