【摘】UI设计中对比色颜色的选取
2009-06-02 10:34
323 查看
(仅摘录部分内容,如对全文有兴趣,请访问原文)
顾名思义,GUIs(Graphical User Interfaces,图形化用户界面)从视觉上展现了它们的特性与功能。人机交互在很大程度上是依赖于可视界面,寻找某个事物,并与图形化UI元素进行交互。颜色是任何视觉画面的主要特征,这并不仅限于计算机屏幕,而是任何我们所看到的事物。因为在我们日常生活中,大多数所看到并进行交互的事物都是有颜色的——或许是看到的太多了,我们已对这点习以为常了。反过来说,如果你需要去阅读一个黑色按钮上的深灰色标签,那将是非常痛苦的。所以,颜色会潜移默化的增强或削弱用户体验。本文将对用户体验的概念加以介绍,并着重探讨在UI设计中所推荐的颜色以及颜色感知等内容。
吸引力是指用户以及他所交互系统之间的情感。用户喜欢它吗?讨厌它吗?他们认为它是吸引人的、时尚的,还是为之着迷的?在交互的过程中,他们会为之引以为豪吗?尽管吸引力并不能像可用性那样明确的对其进行定义,但是它对于一个产品的成功仍然至关重要,因为有吸引力的系统会让人使用起来更愉快,更加合其所意,这都会增添产品的价值。
图1:良好对比度的不同前-背景色组合
由S-cone引起的色觉误差会导致颜色的接收都是基于红、绿色调,而深受赞誉的蓝、黄配色则无法感知。但这是一种非常罕见的情况,只有0.004%的男性以及0.002%的女性会出现此类症状。还有一种非常罕见的情况——全色盲,这是由完全缺失视锥细胞所导致的:只有0.003%的男性以及0.002% 的女性看不见任何颜色,他们的视觉是非彩色的,完全基于黑、白、灰。
从表1可以看出,色觉障碍患者中最典型的一类人是无法接收红、绿两色的男性。非红-绿色觉障碍的患者比例非常低。实际上,由闪烁的UI元素引起癫痫的比例都要比非红-绿色觉障碍的比例高出400倍。
问题是,色觉障碍的程度为产品的可用性带来了巨大的挑战。这会因为应用程序的类型差异而有所不同。在所有对颜色的使用有美学要求的地方(比如大多数公司的网站),它对色觉障碍的重要程度就远远低于某些表示状态的系统(比如控制系统和dashboards)。通常情况下,建议不要通过颜色来表明某些重要信息。比如,通过红光或绿光表明系统状态,这会给红-绿色觉障碍者会带来麻烦。所以,最好提供一些有意义的文本标识(“OK” vs. “警告”),或符号(“对号” vs. “感叹号”)代替有色码。
表2:西方的颜色感知
应当注意的是,表2中所列的这些对颜色的感知都起源于西方的文化。因为颜色观念是与文化密切相关的,他们在不同的区域会表示截然不同的涵义。比如红色,在埃及象征着“死亡”,而在印度却代表“生命”与“创新”,在中国则是代表“幸福”【9】。
有感染力的UI是由一组协调、相关的颜色所构成。创建配色方案(color scheme)也是一个技巧,而且是非常重要的,因为需要考虑很多因素,包括所要传达的公司品牌价值、强调的颜色感知(见表2),此外,还要考虑人类个体的问题(比如之前提到的对比度)。
无需图像设计师的帮助,有很多种方法可以用来创建简单的配色方案【10】。举个例子,你可以在12色环(color wheel)中任选3个相邻的颜色(analogous color——相似色,见图4)。或者选择完全相对的两个颜色(conplementary color——互补色)。不要忘记,红色与蓝色对红-绿色觉障碍者可不是很友好
顾名思义,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 |
由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中所列的这些对颜色的感知都起源于西方的文化。因为颜色观念是与文化密切相关的,他们在不同的区域会表示截然不同的涵义。比如红色,在埃及象征着“死亡”,而在印度却代表“生命”与“创新”,在中国则是代表“幸福”【9】。
有感染力的UI是由一组协调、相关的颜色所构成。创建配色方案(color scheme)也是一个技巧,而且是非常重要的,因为需要考虑很多因素,包括所要传达的公司品牌价值、强调的颜色感知(见表2),此外,还要考虑人类个体的问题(比如之前提到的对比度)。
无需图像设计师的帮助,有很多种方法可以用来创建简单的配色方案【10】。举个例子,你可以在12色环(color wheel)中任选3个相邻的颜色(analogous color——相似色,见图4)。或者选择完全相对的两个颜色(conplementary color——互补色)。不要忘记,红色与蓝色对红-绿色觉障碍者可不是很友好
相关文章推荐
- 移动界面UI颜色设计
- 关于UI设计设计的颜色位数、UI缩放、透明的说明
- 初级UI设计中的颜色渐变
- UI设计中最常用的颜色
- UI设计中最常用的颜色
- UI设计之颜色
- Qt——设计颜色编辑选取对话框
- 移动界面UI颜色设计
- Apple Watch人机交互指南:UI设计基础--颜色、字体
- input的CheckBox,根据UI给的设计稿,开发出好看的样式
- 文字如何实现完美UI?文本排版设计告诉你
- 聊聊UI的扁平化设计趋势与拟物化设计
- 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
- 网页设计中的颜色(好文章)(转载)
- UI设计——动画设计
- 颜色选择器的设计与实现
- 设置UI控件的Layer属性(边框可见,边框颜色,边框宽度,边框圆角)
- Android - UI(User Interface)的基本设计
- Android UI 设计技巧
- 经验丰富的开发者总结的网站UI基本设计原则,写的挺好的!