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

Recommand
北京/UI设计师/5年前/35779浏览
科技风UI除了蓝色,还有什么配色选择Recommand
唐小葱

​除了蓝色,科技风UI就没有别的配色选择了吗?通过对FUI情绪板的搜集,总结了科技风产品的配色文章以供参考。


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

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

一、为什么科技风产品多蓝色呢?

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

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

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

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

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

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

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

undefined

(图片来源:别以为,色彩的知识你全懂了之基础知识篇——色彩系列第 01_01 篇  作者:泽泽先生)

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

原色明度排序

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

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

3.1青

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

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

    常见的配色:青黄、青蓝、青紫、青红

undefined


3.2紫

    紫色在科技设计出现的频率也比较高,但单一紫色UI会的比较少,可能是因为紫色给人的感觉比较诡异和老气。

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

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

undefined


3.3红  

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

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

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

undefined

3.4黄

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

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

undefined


3.5粉    

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

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

undefined


3.6绿 

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

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

undefined

3.7白

    白色,是所有色彩中明度最高的颜色。提到白色首先会想到:纸张,羽毛,白云,雪,纱,烟一类事物,白色视觉重量很轻,有一种悬浮感。且白色作为无彩,色彩性格更为平淡,具有极大的包容性,可以与其他各种颜色搭配。

    以白色为背景色的FUI就比较少见,因为难以表现白色那种通透感,但很适合在VR、AR展示中用于悬浮元素表现物理空间的层次感,在设计上更偏向于功能性,适合极简扁平风的UI设计。

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

undefined


总结:

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


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

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


458
Report
|
934
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
管理后台系统
管理后台系统
管理后台系统
管理后台系统
精选收藏夹
作品收藏夹
可视化
可视化
可视化
可视化
精选收藏夹
作品收藏夹
数据可视化FUI
数据可视化FUI
数据可视化FUI
数据可视化FUI
作品收藏夹
数据可视化-科技感
数据可视化-科技感
数据可视化-科技感
数据可视化-科技感
作品收藏夹
科技感大屏
科技感大屏
科技感大屏
科技感大屏
作品收藏夹
B端界面
B端界面
B端界面
B端界面
作品收藏夹
大家都在看
Log in