科技风UI除了蓝色，还有什么配色选择？

今年做了一年的科技风，看到蓝色也是甚是觉得审美疲劳，在同类产品中体现出差异性也比较困难。寻思着除了蓝色，就没有别的配色选择了吗？通过对科技类设计的搜集，总结了科技风产品的配色文章参考。

尽管我今年对蓝色够够了，但还是要分析下它作为FUI首选配色的合理性：

（1）科幻电影对大众认知影响。早期美国冷战后的科幻电影中，未来世界的高科技大都是以蓝色呈现在银幕上。

（2）大众熟知的科技类产品和品牌采用蓝色，如windows开屏动画，IBM品牌的印象深化，蓝色成为了智能创新的科技类产品的标志性产物，强化了人们对与蓝色与科技感的关联。

（3）蓝色对人心理情绪的影响。冷色调的蓝色，回让人联想到宇宙、天空、海洋，更能激发的冷静、安静、信任等情绪。适合数据分析这种需要人理智的环境中。

（4）蓝色为底色不会干扰功能性色彩。人们的认知中，红色为禁止或失败，绿色为成功，黄色为警告。而蓝色并没有人们为它赋予的功能性语意，在一些设计操作类的FUI中，更适合作为底色减少对视觉的干扰。

(5)  蓝色受人喜爱且安全。有研究表明，蓝色受大多数人喜欢，不论男女；蓝色对与色盲用户也相对友好，是全球范围内公认的最安全的颜色。

emmmm.....,尽管蓝色如此棒棒，但用久了毕竟还是会腻的嘛。难道就不能给其他色彩一个展露头脚的机会了吗？配合产品调性用对了颜色，也能众多竞品中万蓝从中一朵花呀～

二、光的三原色的加色原理

（图片来源：别以为，色彩的知识你全懂了之基础知识篇——色彩系列第 01_01 篇 作者：泽泽先生）

光的三原色的加色原理：两种及两种以上的光之间叠加，色彩的明度会增强。从图中可以看到，三原色光两两混合会产生明度更高的色彩。

原色明度排序

指色彩的明暗程度。在无彩色系中最亮的是白色（#ffffff），最暗的是黑色（#000000），在有彩色系之中，也有明度差异,色彩明度从大到小依次是黄色＞青色＞品红＞绿色＞红色＞蓝色。明度的高低变化可以理解为在色彩当中加入黑色（降低明度）/白色（提高明度）。

三、除了蓝色外的其他配色选择

3.1青色

   青色可以算是在FUI色彩中出现率排行第二的色彩。处于蓝色与绿色之间，属于可见光里的高频段色彩，这个色彩明度较高，亮青色清澈、灵动，亮青色比较刺目，适合小范围使用提亮重点；深青给人深邃、宁静感，适合做背景。

青色适用的场景也比较多，游戏、运营、数据可视化、车载界面、大屏操作等。

常见的色彩搭配：青黄（对比）、青蓝（临近）、青紫（对比）、青红（互补）

     （图片来源于网络版权不详  作者仅搜集示例，如有侵权，请联系作者删除）

3.2紫

    紫色在科技设计出现的频率也比较高，但单一紫色UI会的比较少，可能是因为紫色给人的感觉比较诡异和老气。作者不是很喜欢大面积使用紫色，对于紫色把控能力不行，用不好就会显得整个画面比较脏、比较绵。

    紫色通常会搭配明度更高的色彩一起使用，比如在赛博朋克风的游戏中，紫色搭配青、洋红、黄这类霓虹色的色彩就能很好的营造前卫、魔幻科技感。色彩没有好坏，用对地方就是发挥了它的价值。

    常见配色：紫青、紫蓝、紫黄、紫粉。

                                                                                                    （图片来源于网络版权不详  作者仅搜集示例，如有侵权，请联系作者删除）

3.3红

红色是非常大胆、热情的色彩，能够营造紧张，热情的氛围。但因为红色事人们认知中出错警告的功能色，因此功能操作性UI就运用较少，在数据大屏要结合数据含义慎重使用。

红色会更多应用于广告运营UI设计。红色与黑色、蓝色结合，碰撞强烈，很适合用于电子竞技对抗的题材中。

常见的配色：红黑、红蓝、红青

（图片来源于网络版权不详  作者仅搜集示例，如有侵权，请联系作者删除）

3.4黄

黄色的色彩明度高，在暗色背景下对比强烈。以黄色为主色的UI适用用于金融界面、男性用户为主的游戏界面、以及交通、地图重点的标定。黄色及橙色属于偏暖色系，也常常作为配色出现在蓝、青、等偏冷色设计稿中，起到视觉冷暖调和的作用。

常见配色：黄黑、黄蓝、黄青

（图片来源于网络版权不详  作者仅搜集示例，如有侵权，请联系作者删除）

3.5粉

FUI设计中的粉色系偏冷色调，在光的三原色中也属于高亮度色彩，色彩性格鲜艳浮夸，在娱乐性较强的游戏及综艺运营UI中比较常见。经常出现在赛博朋克为代表的科技风格中，如《银翼杀手》《攻壳机动队》等电影。在数据分析展示中，通常也是作为配角色彩出现，搭配蓝色、青色反而有点洋气，高级感。

常见色彩搭配：粉蓝、粉紫、粉青

（图片来源于网络版权不详  作者仅搜集示例，如有侵权，请联系作者删除）

3.6绿

绿色在FUI中出现比较低，常见比较明亮的荧光绿，可以联想到飞碟光，代码等代表科技的雨啊苏。绿色与黑色搭配，简直就是黑暗中的萤火虫PP，适合做重点原色的标记。过多的使用的话，就很辣眼了，如图一的例子如果你这么丧心病狂的用可能是想亮瞎用户的THJGY。

常见色彩搭配：绿黑、绿红、绿蓝

                                                                                                     （图片来源于网络版权不详  作者仅搜集示例，如有侵权，请联系作者删除）

3.7白

白色，是所有色彩中明度最高的颜色。提到白色首先会想到：纸张，羽毛，白云，雪，纱，烟一类事物，白色视觉重量很轻，有一种悬浮感。且白色作为无彩，色彩性格更为平淡，具有极大的包容性，可以与其他各种颜色搭配。以白色为主色的FUI就比较少见，因为难以表现白色那种通透感，但很适合在VR、AR展示中用于悬浮元素表现物理空间的层次感，在设计上更偏向于功能性，适合极简扁平风的UI设计。

常见色彩搭配：白黄黑、白蓝

                （图片来源于网络版权不详  作者仅搜集示例，如有侵权，请联系作者删除）

    科技风FUI(Fictional User Interfaces )是科幻的、未来的，区别于现实世界的，更多需要设计师对光色彩的把控，在暗色的场景中，高饱和的荧光色彩可以更清晰的传递信息。除了蓝色，多个色系的选择可以尝试，但需要根据产品的功能以及使用的场景做出恰当的选择和搭配。

文章参考：别以为，色彩的知识你全懂了之基础知识篇——色彩系列第 01_01 篇

https://mp.weixin.qq.com/s/rvI9AHpOX6aGsG7wgxaADQ作者：泽泽先生