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

2023-11-11

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

尽管我今年对蓝色够够了,但还是要分析下它作为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设计。

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

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

科技风UI除了蓝色,还有什么配色选择? 的相关文章

  • 1秒30000QPS,前后端设计思路

    A1 作者 李道兵 没做过支付 不考虑细节 随便聊聊 1 首先要解决掉数据库的压力 3万qps对应的磁盘 iops 很大 不过现在好的 SSD 能提供很好的 iops 比如这款 ARK Intel SSD DC P3700 Series 8
  • android 4.2版本的sdcard文件目录分析

    1 今天遇到一个问题 修改已经解决 1 首先看看真机测试下的文件结构 2 简单介绍android文件结构的作用 以下是几个重要目录 文件的说明 1 mnt 挂载点目录 2 etc 系统主要配置文件 3 system Android 系统文件
  • ios-设置状态栏颜色(电池颜色)

    iOS 状态栏的两种形式 白底黑字和黑底白字 UIStatusBarStyleLightContent UIStatusBarStyleDefault 设置方法如下 1 Info plist文件添加一行 2 要改变的VC中添加代码 void

随机推荐

  • Android自定义Dialog仿IOS的Dialog

    由于时间原因 没有详细整理 直接拿网上代码 先看看效果 首先 布局文件 activity main xml
  • 抖音小程序如何运营;怎么快速变现赚钱。

    随着LBS 企业号和购物车等能力的上线 抖音早已不是单纯的短视频APP了 抖音正在成为一个融合了线上线下的全新导流平台 而随着抖音小程序的上线 标志着抖音正式完成变现转型 那么抖音小程序有哪些优势 又是怎么貝兼钱的呢 今天 我们就来了解下如
  • 华为OD机试 - 玩牌高手(Java)

    题目描述 给定一个长度为n的整型数组 表示一个选手在n轮内可选择的牌面分数 选手基于规则选牌 请计算所有轮结束后其可以获得的最高总分数 选择规则如下 在每轮里选手可以选择获取该轮牌面 则其总分数加上该轮牌面分数 为其新的总分数 选手也可不选
  • 多传感器融合之雷达图像数据集自动生成 - 20220613

    文章目录 Automatic Radar Camera Dataset Generation for Sensor Fusion Applications 1 Radar Camera Co Calibration 2 ROS pipeli
  • 集成第三方单点登录JIRA(Colfluence同理)

    jira单点登录原理 jira单点登录依赖于seraph插件 在searph的配置文件中引入我们自定义的验证类 类似一个过滤器 jira登录时会解析代码中的逻辑 具体内部实现逻辑自己定义 如header token cookie等等形式 j
  • 获取单选框选中值提交到数据库

    获取单选框选中值提交到数据库 开发工具与关键技术 VS2015 ASP NET MVC 撰写时间 2019 08 08 先说明一下我这两个单选框的作用 就比如说我做的这个是一个商品单位的属性 是允许小数或者不允许小数的 比如手机是一台的 台
  • 公司招人,面了一个5年经验不会自动化的测试人,他凭什么要18K?

    在深圳这家金融公司也待了几年 被别人面试过也面试过别人 大大小小的事情也见识不少 今天又是团面的一天 一百多个人都聚集在一起 因为公司最近在谈项目出来面试就2个人 无奈又被叫到面试房间 整个过程我都是非常认真负责的 不管是有经验的还是没经验
  • 自学之Python常用库——logging

    logging库日志级别 默认的级别是warning 级别 级别数值 使用时机 DEBUG 10 详细信息 常用语调试 INFO 20 程序正常运行过程中产生的一些信息 WARNING 30 警告用户 虽然程序还在正常工作但有可能发生错误
  • ch340非一键下载电路烧录esp8266程序

    esp8266 ch340非一键下载电路烧录问题的解决 前些天对智能家居很感兴趣 在网上看了一些关于esp8266的开发视频后 就从淘宝入手了一些小玩意儿 原先以为用ch340就可以实现esp8266一键下载呢 事实上却没有那么简单 笔者受
  • flutter报错记录:java.lang.IllegalAccessError: class org.gradle.internal.compiler.java.ClassNameCollector

    在一天新电脑上运行flutter项目时 项目一直跑不起来 详细的报错内容 java lang illegalaccesserror class org gradle internal compiler java classnamecolle
  • 原生js的e.target.closest()方法

    closest 方法 首先检查当前元素是否匹配 如果匹配则直接返回当前元素本身 如果不匹配则沿着dom树一层一层向上查找祖先元素 直到找到匹配的祖先元素为止 如果都不不匹配则返回空null 用法 比如 有一个ul列表 当点击ul里面的内容时
  • cmake can not determine linker.....

    目录结构如下 a hpp CMakeLists txt 内容如下 add library a a hpp 编译该目录 报上面的错误 cmake实际需要有 cpp的文件才能单独编译 只有hpp不行 但是如果加上链接库也是可以的 上面的内容加上
  • 嵌入式软件开发

  • vue element checkbox多选框 多组联动数据嵌套多选、单选实际应用

    先看我最近项目中要实现的功能 点击 干部管理组 员工管理组 与下属员工复选框实现联动 后台返回的数据结构大概是这样的 title 干部 rows id 1 name 张三 id 2 name 张四 title 员工 rows id 3 na
  • bean的生命周期分析(三)

    目录 二 全流程梳理 2 6 创建bean 2 6 1 createBean 2 6 2 resolveBeanClass 2 6 3 prepareMethodOverrides 2 6 4 resolveBeforeInstantiat
  • 【闲谈】对于华为提出的“端云协同”渲染模式的一些看法

    本帖的主要内容 是发表一些对于华为 端云协同 的顾虑 端云协同是好事 我们本地算力可以云化 本地近乎走瘦终端路线 但这就会引发问题 这将大大增加运营商的网络传输流量业务 所以宽带套餐应该会又有变革 那不得不说一些现实点的状况 一 家用宽带可
  • sqli-labs:less-28(过滤了union和select)

    div div
  • C++——#ifndef和#ifdef宏定义的使用及作用介绍

    建议结合以下博客理解 头文件重复引用 https blog csdn net shenlanzifa article details 21071443 ifndef和 ifdef都是一种宏定义判断 作用是防止多重定义 ifndef是if n
  • element-plus 表单验证

    表单验证是使用率比较高的 和之前element版本也有些差别
  • 科技风UI除了蓝色,还有什么配色选择?

    今年做了一年的科技风 看到蓝色也是甚是觉得审美疲劳 在同类产品中体现出差异性也比较困难 寻思着除了蓝色 就没有别的配色选择了吗 通过对科技类设计的搜集 总结了科技风产品的配色文章参考 尽管我今年对蓝色够够了 但还是要分析下它作为FUI首选配