视觉艺术程序员技术栈配色

科技风UI除了蓝色,还有什么配色选择?

2019-12-17  本文已影响0人  唐小葱

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

尽管我今年对蓝色够够了,但还是要分析下它作为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作者:泽泽先生

上一篇下一篇

猜你喜欢

热点阅读