#|1 一文详细阐述UI设计颜色搭配，受益匪浅~ 【定制开发|-|数据可视化大屏

心理学家认为，人的第一感觉就是视觉，而对视觉影响最大的则是色彩。
文章图片
一图概括色彩意向：

色系	色彩意向
红色系	【#\|1 一文详细阐述UI设计颜色搭配，受益匪浅~】热情、张扬、高调、艳丽、侵略、暴力、血腥、警告，禁止
橙色系	明亮、华丽、健康、温暖、辉煌、欢乐、兴奋、热烈、温馨
黄色系	温暖、亲切、光明、疾病、懦弱、智慧、轻快
绿色系	希望、生机、成长、环保、健康、嫉妒
蓝色系	沉静、辽阔、科学、严谨、冰冷、保守、冷漠、忧郁
紫色系	高贵、浪漫、华丽、忠诚、神秘
黑色系	稳重、高端、精致、黑暗、死亡、邪恶
白色系	纯洁、天真、和平、洁净、冷淡、贫乏、苍白、空虚

设计 - 色彩搭配原则整体色调协调统一：界面设计应该先确定主色调，主色将会占据页面中很大的面积，其他的辅助色都应该以主色为基准进行搭配。这可以保证整体色调的协调统一，重点突出，使作品更加专业、美观。
重点色：配色时，可以选取一种颜色作为整个界面的重点色，这个颜色可以被运用到焦点图、按钮、图标，或者其他相对重要的元素，使之成为整个页面的焦点。重点色不应该用于主色和背景色等面积较大的色块，应用于强调界面中重要元素的小面积零散色块。
注意色彩的平衡：配色的平衡主要是指颜色的强弱、轻重和浓淡的关系。一般来说，同类色彩的搭配方案往往能够很好地实现平衡性和协调性，而高纯度的互补色或对比色，例如红色和绿色很容易带来过度强烈的视觉刺激，使人产生不适的感觉。另一方面为明度的平衡关系，高明度的颜色显得更明亮，可以强化空间感和活跃感；低明度的颜色则会更多的强化稳重低调的感觉。
调和对立色：当包含两个或者两个以上的对立色时，页面的整体色调就会平衡，这时就需要对对立色进行调和。
通常有3种方法进行调和：

调整对立色的面积，使一种颜色为主色，其他颜色成为辅助色。为了降低辅助色的色感，可能需要适当调整它们的纯度和明度；
添加两种对立色之间的颜色，引导颜色在色相上逐渐过渡，例如要调和红色和黄色，可加入橙色；
加入大量的中性色，黑、白、灰称为中性色，它们不带任何正面或负面的感情色彩，用来调和其他彩色是一种非常有效的方法。

设计 - 搭配方法单色（Monochrome）
是指通过对同一颜色，加上10-90%白色或黑色的透明度层后获得的一组颜色。

文章图片

邻近色（Analogous）
是指在色相环中相邻的色彩。很显然这样的配色方案不会产生高对比度。使用邻近色来增加色彩上的变化，从而使你的设计更有层次和活力。

文章图片

互补色（Complementary）
是指色相环中，相对（互为180度角）的两个颜色。互补色让人产生强烈地对比效果。例如，紫色按钮在黄色背景上非常的突出。当然，这还取决于每一种颜色的饱和度。互补色经常用在需要突出显示的按钮、警告等地方，但使用不当也有可能使你的设计显得非常突兀，通过实践来理解是最好的，请记住：对立对比。

文章图片

中性色调
是指由黑色、白色及由黑白调和的各种深浅不同的灰色系列，中性色不属于冷色调也不属于暖色调，它可以起到中和剂的作用。过多的使用色彩会使整个设计缺乏可用性，而中性色却可以帮助将用户的注意力拉回到内容本身。

文章图片

中性色板
主色往往容易确定，但背景和文字颜色有时却很难把握。它们的搭配很微妙，需要设计师有足够的经验将它们进行组合并调整到最佳。
蓝色色板
蓝色是所有网站或App UI中使用最多的，它给人安静，宽广，值得信任的感觉，像Twitter,Facebook,IBM，LinkedIn等商业巨头都采用了蓝色作为它们的主色。而且蓝色也更容易与其他颜色搭配使用。

文章图片

灰色色板
我们应该始终避免在UI中使用纯黑（#000）。纯黑色和其他颜色搭配时，产生的对比过于明显。

文章图片

如果你要使用灰色，请使用明度值低于30%或者高于70%的灰色。平均明度的灰色显得单点而且不能与其他颜色很好的搭配。

文章图片

自定义色板
除了上面的蓝色和灰色色板，我们也可以使用任何颜色来定制自己的色板，不过你总是需要让色板的颜色互相搭配。

文章图片

首先滑动色相（Hue）滑块来选择一个主色，然后选择与主色相关的其他单色，邻近色和互补色。最后通过调节这些颜色的饱和度（Saturation）和明度（Brightness）来增加色彩对比和活力。
明亮UI的配色原则

内容应该比背景明亮。通过亮度的对比，可以使你想突出的内容轮廓更加清晰易读
不要过度使用颜色。颜色总是可以抓住人们的视线，但过度使用却会往往会人们忽视主体内容，因此，仅在需要进行突出提示的地方，如重要的按钮以及需要突出的状态时，使用颜色。

文章图片

避免使用平均的白色，90%-100%的白色最为适中。
暗色UI的配色原则

不要使用纯黑，那样很难看到细节，另外与白色的对比会显得过高。
如果你必须使用黑色，那么请选择使用暗灰作为替代，这样可以消除过高的对比度
当使用蓝色时避免同时使用灰色。深蓝与蓝色更相配

文章图片

主色调辅助色点缀色搭配

文章图片

主色用量基本占据全部用色的25%，基本决定了整个界面的视觉风格。
辅助色起到辅助主色的作用，又叫背景色，它在全部用色中约占据75%。用与主色同色系色彩作为辅助色可以呈现柔和、整体、统一的视觉效果；而用主色邻近色作为辅助色可以让界面有丰富的变化，产生活泼感；用主色调对比色作为辅助色可以让主色更为突出。
点缀色占全部色彩方案的5%左右、提醒的作用。应用在鼠标悬停，选中状态，强调部分。点缀色要与界面整体色调相区别，一般在明度、饱和度上要有明显差异，一般会用明度或饱和度高的颜色。

文章图片

基础科普 - 色彩的意象红色（red）热情、活泼、张扬、激动、轰轰烈烈，容易鼓舞勇气，同时也很容易生气，情绪波动较大，西方以此象征牺牲、战争之意，东方则代表吉祥、乐观、喜庆之意，红色也有警告的意思。
视觉震撼力强，让人觉得活跃、热烈、轰轰烈烈、有朝气。在人们的观念中，红色往往与吉祥、好运、喜庆相联系，它便自然成为一种节日、庆祝活动的常用色。同时红色又易联想到血液和火炮，有一种生命感、跳动感，还有危险、恐怖的血腥气味的联想。灭火器、消防车都是红颜色的。
橙色（orange）激情、狂热、时尚、青春、动感，速度与激情，有种让人活力四射的感觉；炽烈之生命，太阳也是橙色。
兼有红与黄的优点，色彩柔和，使人感到温暖又有力量。一些成熟的果实往往呈现橙色，富于营养的食品(面包、糕点)也多是橙色。因此，橙色又易引起营养、香甜的联想。是易于被人们所接受的颜色。但在特定的国家和地区，橙色又与欺诈、嫉妒有联系。由于橙色过于跳跃，抢夺视线，有时会被认为是粗俗的象征。
黄色（yellow）黄色的温暖、尊贵、辉煌，有着太阳般的光辉。黄色有着黄金的尊贵，象征着财富和权利，它是骄傲的色彩。东方代表尊贵、优雅，是帝王御用颜色；是一种可以让人增强食欲的颜色；西方基督教以黄色为耻辱象征。
温柔和娇美的颜色，有很强的温暖感，使人感到愉悦和纯洁。枯萎的植物往往呈淡黄色，又有衰老、老年、黄昏的联想，还可以让人想起极富营养的蛋黄、奶油及其他食品。但是，黄色又与病弱有关，植物的衰败、枯萎也与黄色相关联。因此，黄色又使人感到空虚、贫乏和不健康。
绿色（green ）清新、健康、希望，是生命的象征；代表安全、平静、舒适之感。
心理效应：绿色具有蓝色的灵敏和黄色的温暖，又与人目然的生命相一致相吻合，因此，它具有平衡人类心境的作用，是易于被接受的色彩。绿色又与某些尚未成熟的果实的颜色一致，因而会引起酸与苦涩的味觉。深绿易产生寂静、消极、冷漠感。
蓝色（blue）宁静、自由、清新，欧洲作为对国家忠诚之象征，一些护士护士服就是蓝色的；在中国，海军的服装就是海蓝色的。深蓝代表孤傲、忧郁女性气质，浅蓝色代表天真、纯洁；同时蓝色也代表开阔，安定与和平。
蓝色极端的冷色，具有灵活和理智的特性，恰好与红色相对应。蓝色易产生清彻、超脱、远离世俗的感觉。深蓝色会滋生忧郁、空虚和多愁善感的感觉，也会产生陌生感、孤独感。在美国，有“blue boy”这一说，意思并不是 “蓝色男孩” ，而是 “忧郁男孩” ，所以蓝色也有忧郁之意。
紫色（purple）有点可爱、梦幻、高贵、优雅，也代表着非凡的地位。一般人喜欢淡紫色，有愉快之感；红紫一般人都不喜欢，不易产生美感。紫色有高贵高雅的寓意，高雅感十足，曾是西方帝王的服色。
具合优美高雅、雍容华贵的气度。含红的个性，又有蓝的特征。浅紫色会引起优雅、凉爽、高贵的感觉。在许多画面中紫色还是梦幻的代表。
黑色（black ）高深、黑夜、庄重、隐藏、神秘，无情色，是白色的对比色。有一种让人感到黑暗的感觉，如和其他颜色相配合含有集中和重心感。在西方用于正式场合。
具有包容和侵占性，可以衬托高贵的气质，也可以流露不可征服的霸气。是隐藏、神秘的意思。
白色（white）清爽、无瑕、冰雪、简单，无情色，是黑色的对比色。表纯洁之感，及轻松、愉悦。浓厚之白色会有壮大之感觉，有种冬天的气息。在东方也象征着死亡与不祥之意。
灰色（gray）高雅、朴素、沉稳，代表寂寞、灰心丧气、拜金主义，灰色使人有现实感，也给人以稳重安定的感觉。

色系	色彩意向
红色系	热情、张扬、高调、艳丽、侵略、暴力、血腥、警告，禁止
橙色系	明亮、华丽、健康、温暖、辉煌、欢乐、兴奋、热烈、温馨
黄色系	温暖、亲切、光明、疾病、懦弱、智慧、轻快
绿色系	希望、生机、成长、环保、健康、嫉妒
蓝色系	沉静、辽阔、科学、严谨、冰冷、保守、冷漠、忧郁
紫色系	高贵、浪漫、华丽、忠诚、神秘
黑色系	稳重、高端、精致、黑暗、死亡、邪恶
白色系	纯洁、天真、和平、洁净、冷淡、贫乏、苍白、空虚