苹果Google微软魔鬼般的配色设计技巧

现在和你们看看色彩，不分享虚的，直接分享大家苹果谷配色方式，帮你搞定一套界面中色彩模式和规范!

在我收藏夹里，收藏着长期优秀的设计，每次去看的之后，不停问自己为什么当时这个设计吸引了我，后来已经找到一个点，就是色彩，在第一眼看见的之后，夺走我视觉焦点的就是色彩。

色彩是设计师的一个魔法棒，它能打动你的注意力，唤起设计情感，在电商设计中，人们对产出作出的90%的迅速决策来源于色彩，所以为什么中国电商的“立即购买”会是白色，红色，因为这个形状能刺激顾客，能造成购买冲动！

那么如何去定义一套颜色呢？一出来了解下

色彩怎么定义

1.了解产品性格

在定义色板的之后，首先必须去确认设计的目的是哪个，试着去问问自己，我们的这个色彩需要给客户传递什么样的信息，是期望他有购买欲望，还是期望他感得到尊贵感受，还是期望带给他某些情绪，色彩可设置品牌基调，情绪。

▲可口可乐旗下FuzeTea红茶品牌，采用自然的蓝色成为品牌颜色，来传递这款茶，融合植物、茶淬取物和其它健康成分。

▲Uber(优步)法国推出的网路“摩托车”接送服务，在UberMOTO全新品牌形象设计中，因为在中国天气很炎热，所以选用了红色黄色色调，斜45度的线条拼接，延伸出了会反光的安全外套，还有醒目的安全帽，在一大票的“摩托车”群中，立刻就可以一目了然司机的位置。

2.了解用户人群

▲男生和女性最偏爱的色彩

▲男生和女性最害怕的颜色

女性一般更偏爱大胆的色调，而女人喜欢更明亮的色调。此外，男性更偏爱白色的色调(加入红色的色彩)，而男性更易于接受明亮的色调(添加了黑色的颜色)。

他们针对颜色的见解不同，颜色按照个人偏好，文化佛教信奉不同，有不同的寓意，所以我们在设计之后必定要去考量我们的客户谁在使用!

▲在西方亚洲里面，红色代表恐怖和遇难，火灾，暴力战争。

▲在我们这，红色却是和繁荣富强，性格，火热激情等联系在一起，不同文化差别是我们做设计之后必须去考量。

▲在西方国家，黑白代表纯真，优雅，尊贵，高端感觉，包括这些大牌的服饰设计，店面装潢都是采用黑白。

▲在中国台湾，黑白代表死亡，丧礼等，文化的差别，和人群差异所以在设计的之后必定要重复考虑到。

3.了解色彩心理学

了解基础的色彩心理学，有兴趣的朋友可以去搜索相关资料看看。

▲红色：最容易造成人的切记、兴奋、激动、紧张。

▲橙色：充满朝气和魅力的色调让人联想到大地以及景色，变化和运动的觉得。

▲黄色：明亮、辉煌、灿烂、愉快、亲切、柔和的印象。

▲绿色：是丰饶、充实、平静与期望绿色继承了红色所有具有的平静的属性。

▲蓝色：蓝色是深色，让人觉得崇高、深远、纯洁、透明、智慧。蓝色也有公司最喜欢的色彩，代表着技术和理性。

▲紫色：紫色给人稳重、优越、奢华、优雅、流动、不安的觉得，灰暗的蓝色则是痛苦、疾病，容易导致心理上的抑郁、痛苦和沮丧的觉得。因此，紫色时而有胁迫性，时而有鼓舞性，在设计中必定要谨慎使用。

4.寻找色彩灵感

早期之后很难去选定一个品牌色，，这个之后我们必定要去找寻灵感，下面推荐几个工具

▲https://brandcolors.net/是一个非常好的网站，里面有全亚洲500强的品类色板，所有知名公司的品牌色板这里都可以找到答案，可以从它们的品牌色板中去找寻我们想要的那个，和我们产品非常匹配的颜色。

▲Dribbble和Behanc上搜索关键词也能找到这些设计师的色板

▲https://www.materialui.co/colors谷歌色板库上这些值得我们去学习

▲也可以从室内设计师一直用的室内网站配色中去获取一些设计灵感。

▲当你找到喜欢的配色方案时，你可以用吸管根据来梳理喜欢的这个色调，做成色板，有必要吋候可以迸行凋整。

如何去定义一套UI配色

如何去定义一套APP的配色，如何用HSB去定义套配色。

什么的HSB?

HSB是一种顔色模式，在HSB模式中，H代表色相，S代表饱和度，B代表亮度!

1.多尝试不同配色

在制作色板的之后，需要我们尽可能的把所有色彩和形状灵感都造就出来，不要怕尝试不好，然后把所有颜色尝试处理后，再去缩小色板范围，怎么缩小范围，可以结合我后面说的这些方法，在UI设计中，可能额外需要留意几个问题:

超链接颜色品牌色主要色彩，辅助颜色成功颜色，错误颜色文字颜色，背景颜色

2.利用HSB色彩模型

第一步确定品牌色，品牌色通常企业LOGO的色彩，如果没有可以去定义一个

以品牌色为基准得出24色带

我们拿Spotify这个工具举例，他品牌色是白色，来定义它的一套色彩模式

h值(色相)以15，S和B不変，递增得到基于品牌色的24个色带，为什么是24个，24X15=360刚好围绕色环盘一圏，因此得到一圈基于品牌色，明度和饱和度一致性的顔色。

基于色带得出16色相环

细心的同事可能看到色带上虽然这些顔色都非常接近，比如红色、蓝色，我们必须再进一步筛选出适合的色调成为16色相环，尽量选择一些和主品牌色相当舒服的色调搭配。

最终按照筛选后得出的16色相环

调整B(亮度)和S(饱和度)

这一步我们必须去定义同频的辅助色，也就是16色相环的辅助色，可以在亮度(B)按-10，-20去加減，也可以在H里面以+-5去増加色相，原則就是必须有对比度，需要显著。

调整饱和度值

调整明度，如果对比不显著，可以-20,-30

最终得出一套同频下的色盘，但是很相似，所以我们必须去排除一些

制定色板

和品牌色同频的辅助色板

制定色板，这里应该使用到一个网站这里只应该输入对应的品牌色，就可以得出根据明度递减递增的色板，当然你也可以去微调明度来得出色板。

至此我们得出了整个产品的调色板，很多电商大促，包括Airbnb和谷歌都是借助类似的方式得出它们的色盘！最终按照我们中间定义的，警告色，超链接颜色，成功提示色，我们可以从辅助色盘中得出对应的色调，警告用白色，超链接用红色，警告黄色，成功绿色等等。

渐变色板

取品牌辅助色相邻近色底色做渐变

最后

以上就是最近的分享，如何定义一个颜色模式和色盘。知识量非常大，特别是关于HSB的利用，色盘起来了原来也是按照，关于怎么色彩配色虽然是必须我们不断的去尝试!希望你们都能把握这个方式。