(仅摘录部分内容,如对全文有兴趣,请访问原文)

顾名思义,GUIs(Graphical User Interfaces,图形化用户界面)从视觉上展现了它们的特性与功能。人机交互在很大程度上是依赖于可视界面,寻找某个事物,并与图形化UI元素进行交互。颜色是任何视觉画面的主要特征,这并不仅限于计算机屏幕,而是任何我们所看到的事物。因为在我们日常生活中,大多数所看到并进行交互的事物都是有颜色的——或许是看到的太多了,我们已对这点习以为常了。反过来说,如果你需要去阅读一个黑色按钮上的深灰色标签,那将是非常痛苦的。所以,颜色会潜移默化的增强或削弱用户体验。本文将对用户体验的概念加以介绍,并着重探讨在UI设计中所推荐的颜色以及颜色感知等内容。

用户体验

用户体验(User Experience,简称UX)是一个关于用户(users)以及交互(interactive)技术系统领域的整体概念。具体来说,它代表了一个网站或者应用程序对其用户的可用性(usability)以及吸引程度。可用性高意味着交互产品能够让用户快速的实现他的目标。ISO 9241-110[1]以及Nielsen的研究[2]是这个领域中的“圣经”。

吸引力是指用户以及他所交互系统之间的情感。用户喜欢它吗?讨厌它吗?他们认为它是吸引人的、时尚的,还是为之着迷的?在交互的过程中,他们会为之引以为豪吗?尽管吸引力并不能像可用性那样明确的对其进行定义,但是它对于一个产品的成功仍然至关重要,因为有吸引力的系统会让人使用起来更愉快,更加合其所意,这都会增添产品的价值。

背景色

绿

前景色

good

good

good

good

good

good

good

good

good

good

good

good

good

good

good

good

绿

good

good

good

good

good

good

good

图1:良好对比度的不同前-背景色组合

由S-cone引起的色觉误差会导致颜色的接收都是基于红、绿色调,而深受赞誉的蓝、黄配色则无法感知。但这是一种非常罕见的情况,只有0.004%的男性以及0.002%的女性会出现此类症状。还有一种非常罕见的情况——全色盲,这是由完全缺失视锥细胞所导致的:只有0.003%的男性以及0.002% 的女性看不见任何颜色,他们的视觉是非彩色的,完全基于黑、白、灰。

从表1可以看出,色觉障碍患者中最典型的一类人是无法接收红、绿两色的男性。非红-绿色觉障碍的患者比例非常低。实际上,由闪烁的UI元素引起癫痫的比例都要比非红-绿色觉障碍的比例高出400倍。

问题是,色觉障碍的程度为产品的可用性带来了巨大的挑战。这会因为应用程序的类型差异而有所不同。在所有对颜色的使用有美学要求的地方(比如大多数公司的网站),它对色觉障碍的重要程度就远远低于某些表示状态的系统(比如控制系统和dashboards)。通常情况下,建议不要通过颜色来表明某些重要信息。比如,通过红光或绿光表明系统状态,这会给红-绿色觉障碍者会带来麻烦。所以,最好提供一些有意义的文本标识(“OK” vs. “警告”),或符号(“对号” vs. “感叹号”)代替有色码。

颜色与视觉感染力

颜色非常适合增强软件产品的视觉感染力。我们通常会赋予某些颜色以特定的涵义(表2)。这些对颜色的观念在设计UI的时候往往起到非常大的作用。举个例子,一个基于白色的诊所软体应用程序是非常合情合理的,因为白色象征着“整洁”。再比如,联合国的主页是基于蓝色的,传达了一种“和平”的理念。

颜色

传达的感受

热(hot)、停止(stop)、侵略(aggression)、错误(error)、警告(warning)、火(fire)、勇气(daring)

女性(female)、可爱(cute)、棉花糖(cotton-candy)

温暖(warm)、 秋天(autumnal)

幸福(happy)、明媚(sunny)、 快乐(cheerful)、减速(slow down)、小心(caution)

温暖(warm)、秋天(fall)、肮脏(dirty)

绿

嫉妒(envy)、 羡慕(jealousy), 菜鸟(a novice)、 肥沃(fertile)、 田园(pastoral)

平静(peaceful)、水(water)、男性(male)

皇族(Royal)

纯洁(virginal)、干净(clean)、天真(innocent)、寒冷(cold)

邪恶(evil)、幽灵(ghostly)、死亡(death)、恐惧(fear)、哀痛(mourning)

阴暗(overcast)、忧郁(gloom)、晚年(old age)

表2:西方的颜色感知

应当注意的是,表2中所列的这些对颜色的感知都起源于西方的文化。因为颜色观念是与文化密切相关的,他们在不同的区域会表示截然不同的涵义。比如红色,在埃及象征着“死亡”,而在印度却代表“生命”与“创新”,在中国则是代表“幸福”【9】。

有感染力的UI是由一组协调、相关的颜色所构成。创建配色方案(color scheme)也是一个技巧,而且是非常重要的,因为需要考虑很多因素,包括所要传达的公司品牌价值、强调的颜色感知(见表2),此外,还要考虑人类个体的问题(比如之前提到的对比度)。

无需图像设计师的帮助,有很多种方法可以用来创建简单的配色方案【10】。举个例子,你可以在12色环(color wheel)中任选3个相邻的颜色(analogous color——相似色,见图4)。或者选择完全相对的两个颜色(conplementary color——互补色)。不要忘记,红色与蓝色对红-绿色觉障碍者可不是很友好

转载于:https://www.cnblogs.com/hyqiang168/archive/2009/06/02/1494294.html

【摘】UI设计中对比色颜色的选取相关推荐

  1. UI设计中有关颜色的几点建议

    色彩的把控并不容易,大部分UI设计中都不会有过多的色彩存在,搭配三种颜色就够了,如果是多彩色界面,那么表示这个设计师足够的配色能力才能驾驭,否则只会花哨至极.所以在每一个设计作品里,都需要谨慎的使用颜 ...

  2. ui设计中必备的色彩的搭配技巧

    对于UI设计初入门的新手来说,光是UI设计里面的颜色搭配都够头疼很久!今天,给大家简单分享关于UI设计中的颜色搭配知识点,千万不要错过! 多伦多大学关于人们如何使用Adobe Color CC的研究显 ...

  3. 中剪取一种颜色的板块_不知道UI设计中APP界面版式如何排版?来看这个!

    UI设计中APP的界面看似只有几个简单的元素组合起来, 所有元素的绘制可以说比较简单: 然而,当一个产品原型出来后,设计师如果单纯按原型来进行设计而不考虑信息化规则, 那么很多时候就会出现不协调的效果 ...

  4. 在UI设计中如何正确使用颜色

    在我们进行UI设计时,颜色往往是我们表达理念重要的一点,但也是我们常常会忽视的一点.颜色其实如同语言一样,我们可以通过颜色的变化组合,来表达不同的情绪. 正确使用颜色不单能让我们吸引到客户,也能更好地 ...

  5. UI设计中最重要的颜色

    正如你可能已经猜到的,这篇文章致力于蓝色.毫无疑问,蓝色是UI设计中最重要的颜色之一,也是最常见的颜色之一. 可以看看你的智能手机应用程序图标,你就会发现其中很多是蓝色的,比如:脸谱网.Twitter ...

  6. UI设计中配色设计攻略

    不知道有没有小伙伴跟我一样在做页面配色时会很痛苦呢,很多时候都是凭感觉去配色.最近研究了一下配色方法,今天我就针对UI设计中配色设计攻略进行简单的说明,希望能帮助到一部分小伙伴. 有个有趣的研究成果 ...

  7. UI设计中AI黑科技插件合集

    俗话说:欲善其事必先利其器. 作为设计师怎么能缺少神器般的AI黑科技插件?随着插画风分析图.轴测图.效果图等的流行,adobe Illustrator在设计类软件里的分量也越来越重.逆天的PS插件很多 ...

  8. UI设计中引导页设计指南

    一个好的引导页设计会给用户留下良好的第一印象.也可以降低用户的学习成本,快速上手产品并了解新增功能,避免用户使用过程中的迷茫,减少误操作,是提升产品体验的必要手段.今天我就针对UI设计中引导页设计指南 ...

  9. UI设计中如何做出美观实用的UI界面?

    UI/UE设计指在培养从事软件人机交互.操作逻辑.界面美观整体设计工作的UID ( UserInterface Designer ).UI设计师的涉及范围包括商用平面设计.高级网页设计.移动应用界面设 ...

最新文章

  1. 解决了无法显示验证码的问题
  2. scanf的拓展用法——匹配特定字符
  3. 牛客 - 牛牛与牛妹的约会(贪心)
  4. java+spring+mysql配置_JAVA后台搭建(springboot+mybatis+mysql)项目搭建
  5. 用python画爱心再加一行文字_如何理解python一行代码实现一个爱心字符画?
  6. Java EE 7中包含哪些JSR?
  7. mysql jooyoo net_.net连接MySQL的方法
  8. linux默认安装数据库密码是多少,Linux服务器上安装MySql数据库(默认安装,密码为空),首次使用需要修改密码(示例代码)...
  9. 快狗打车被曝裁员50% 官方回应:正常调整 实际未超3.5%
  10. nginx 一般配置实例 静态页面
  11. 制作svg格式矢量图
  12. 马上谈薪了,五险一金你还不知道?作为毕业生,钱不能白交!!!
  13. Django cache redis 最全介绍
  14. SEO长尾理论,关键词需求覆盖理论
  15. 大数据分析技术与应用
  16. 用python进行数据分析(二:数据处理)
  17. Python面向对象版学员管理系统
  18. python plc fx5u_三菱FX5U可编程控制器硬件及指令篇
  19. 艺术照片特效软件JixiPix Premium Pack Mac2020-10-15
  20. 方法重载在同一个类中,方法名相同,参数不同,可以定义多个同名的方法根据不同的参数,可以调用不同的方法

热门文章

  1. 树莓派卸载系统自带应用增大硬盘空间
  2. 基于ssm的校园二手电子交易平台
  3. Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
  4. BUUCTF Crypto RSA what writeup
  5. Teams app 的 SSO 机制
  6. 租房子,光看数据怎么够,Python爬取某站租房图片
  7. mac java 创建文件夹_在mac电脑上创建java的一些简单操作
  8. 迅时MX100G-S数字中继网关荣获《电信设备进网许可证》
  9. python爬取ppt代码_Python爬取PPT模板小工具
  10. 【快速技巧】手机拍摄的视频如何旋转并保存?