理解UI设计准则——色觉的局限性

目录

• 色觉的原理
• 边缘对比度比亮度反差更容易被捕捉
• 区别颜色的能力取决于颜色是如何呈现的
• 使用色彩的准则

 

---

色觉的原理

　　人的视锥细胞分为三类：

　　■ 低频视锥细胞：对低频的红色和黄色敏感，细胞数量最多

　　■ 中频视锥细胞：对中频的黄色和橙色敏感，细胞数目低于上一种

　　■ 高频视锥细胞：对高频的蓝色和紫色敏感，细胞数目最低

　　下面是视锥细胞对颜色的整体敏感度

　　

　　　　这样就能够知道，人们大体上对那些颜色敏感了。

 

边缘对比度比亮度反差更容易被捕捉

　　　　人的视觉对于对比鲜明的边缘更加敏感，而对于绝对的亮度差异就没有那么敏感了。所以，给我们的提示就是：如果要突出不同元素的差别，

　　最好使它们的边缘对比度不同，而不是使它们的绝对亮度不同。

 

区别颜色的能力取决于颜色是如何呈现的 

　　　　人对颜色之间的差别的觉察也是有限的。基于视觉系统运作的方式，有以下三个呈现因素影响着我们区分颜色的能力。

　　　　■ 深浅度：两个颜色越浅（饱和度低），就越难以将它们区分开来

　　　　■ 色块大小：对象越小或者越细，就越难以将它们区分开

　　　　■ 分隔距离：两个色块之间的距离越远，就越难以区分它们

　　　　　　

　　　　前几年，在在线旅游网站ITN中的当前任务进度栏中，当前的任务用饱和度低的黄色的非常小的方格指示，而非当前任务的小方格是白色，

　　这个辨识就做的不好

　　　     　

　　　　又比如链接点击前后，颜色区分不明显现象也是非常多的

　　　　　　

　　　　

 使用色彩的准则

　　　　（1）确保饱和度、亮度以及色相能够区分颜色

　　　　（2）使用独特的颜色

　　　　　　  根据色觉原理，最独特的六种颜色分别是：黑、白、红、绿、黄、蓝

　　　　　

　　　　（3）将强烈的对抗色彩分开

　　　　　　  这是由于，高强度的颜色对比会让人产生难受的闪烁视觉感应，因此也必须避免

　　　　　         　

　　　　（4）不要严重依赖颜色来达到区分的目的

　　　　　　  在使用颜色的同时，我们还可以辅助其他的手段进行区分，比如：形状、区域响应、文字等等

　　　　　　　比如，下面的图例由于数量多，色块小，没有办法做到非常好的区分

　　　　　　　

　　　　　　　　如果，当我们的鼠标指到图中的某个区域，右面的对应的图例就会有一个视觉上的相应，告知你，当前的区域对应的图例，

　　　　　　这样的方式会更好

　　　　　　　　又比如，上面提到的旅游公司的网站最新的改进版本如下：

　　　　　　　　

　　　　　　　　结合使用了图形指示和高差异化的颜色