颜色与UI

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

用户体验

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

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

颜色与UI

颜色是360nm至720nm之间的光波刺激人类的眼睛并由视觉系统[3]进行处理后所触发的感知。我们的眼睛拥有三种类型的颜色接收器，分别用于处理长波、中波、短波。它们分别被称为L-、M-和S-cones（译者注：cones是人眼的圆锥细胞）。如图1所示，一束530nm的光波会触发最多的M- cones，其次是L-cones ，只会触发很少的S-cones。这条光束最后被感知到的颜色即为绿色。

图1：三种cone类型的光波被感知到的颜色（[4]）。

计算机屏幕中的颜色是由RGB颜色模型（R代表红色，G代表绿色，B代表蓝色）所定义的。这三种颜色被称为（三）原色（primary colors），分别对应L-、M-和S-cone中最易接收的光波。三原色不能由其他颜色混合而生成。相反，通过混合三原色，可以生成其他所有的颜色。屏幕上的每一个像素都是由一束红光、蓝光和绿光相互作用而生成的，它们挨的非常近，是无法分辨出来的。

颜色对比度

通常情况下，UI中的有色对象或区域并不是孤立存在的，都会与其他的对象或区域比邻或者重叠。这就产生了对比效果。没有足够的对比，我们是不能在屏幕上分辨出不同的区域的。这也正是办公软件例如微软的Word、Powerpoint、Excel、Outlook为什么都会默认设置成白底黑字的原因了—— 因为它会产生最强的对比度，以及最佳的可视度。

除此之外，颜色对比度通常被用于把浏览者的注意力引向某些传递关键信息或者需要输入的重要UI元素。

颜色对比度也会提高UI的视觉吸引力。实验研究显示，暖色调（比如红、黄、橙）非常适合作为冷色调（比如蓝、绿、紫）的背景，反之亦然。

对比效果同样会对用户体验产生不利的影响。下面讲的两个例子是比较有代表性的。通常情况下，任何视觉区域都会趋于临域的补色。比如，一个灰色的方框，如果周围是红色，那它看起来就会发绿，如果周围是绿色，看起来就会发红。这种情况被称为同时对比（simultaneous color contrast）【4】。在UI 中，通常是一个控件，比如一个按钮，在不同的背景色下会产生完全不同的视觉效果。