《认知与设计——理解UI设计准则》（第二版）笔记四

Chapter Four 色觉是有限的

1. 色觉原理

视网膜上有对亮度敏感的视杆细胞和三种对不同频率的光敏感的视锥细胞。（色盲患者的视锥细胞可能少于3种，一些女性的视锥细胞可能有四种--Eagleman,2012）

视杆细胞在光线很暗的环境中才起作用，大部分时间里，我们的视觉完全基于视椎细胞所提供的信息。

视椎细胞共有低频、中频和高频三种类别。三者敏感的光谱范围互相重叠，但三者的敏感度相差很大。

①低频L：对整个可见光谱都敏感，但对出于频谱中间的【黄色】和低频的【红色】最敏感。

②中频M：对从高频的【蓝】到中频偏低的【黄】和【橙】有反应，整体上敏感度低于低频的视椎细胞。

③高频H：对可见光的高频部分【紫】【蓝】最敏感。此类视椎细胞的整体敏感度低于前两者，数量上也更少。因此，我们的眼睛对【紫】【蓝】不如对其他颜色敏感。

a为视网膜三类视锥细胞对光的敏感度

2. 视觉系统对反差敏感 对亮度不敏感

视觉系统相比亮度差别对颜色差别更加敏感。（鲜明的边缘>亮度水平）

中间的色块看起来左边颜色浅 右边颜色深，但实际上都是一个颜色灰度

另一个例子，大脑研究者Edward H. Adelson做了一个很棒的图解，A和B色块其实是同一个颜色，但是视觉告诉我们A比B深很多。

削弱对比，可以明显的看出A、B完全相同

3. 如何设计以提高颜色区分度

首先介绍一下三个影响颜色区分度的

内部因素：

A. 深浅度：越浅（不饱和）越难区分

B. 色块的大小：越小或者越细，越难辨别它们的颜色

C. 分隔的距离：离得越远越难区分

下面几个例子，大家可以引以为戒：

用饱和度低的黄色小方格指示当前任务，而非当前任务的小方格是白色

访问过和未访问的连接颜色差别细微

外部因素：

a. 彩色显示屏的差异

b. 灰度显示器

c. 显示器角度

d. 环境光线

4.针对色盲和颜色感知障碍的用户

设计界面时要注意，使用的颜色是否能够被常见类型的色盲用户区分开：色盲是由于一个或者多个色彩减影通道无法正常工作，以致不能区分某些颜色对。最常见的是红绿色盲，他们难以区分深红色和黑色、蓝色和紫色、浅绿色和白色、绿色和卡其色等颜色对。

⭐️如果想检验设计效果，可以将设计图转换为灰度图，来查看是否有难以区分的颜色。

5.使用色彩的准则

a. 确保饱和度、亮度以及色相能够区分颜色

确保色彩之间有较高的反差，但不要使用强烈的对抗色。一个测试颜色差异的方法是在灰度模式下观察差异是否可识别。

b. 使用独特的颜色

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

c. 避免使用色盲的人无法区分的颜色对

可搜索color-blindness filter 或 color-blindness simulator关键词，利用在线色觉障碍模拟器查看效果。

d. 在颜色之外使用其他提示

不要完全依赖色彩，可利用一些对应图案（区域响应、文字等等）区别他们

e. 将强烈的对抗色彩分开

由于高强度的颜色对比会让人产生难受的闪烁视觉感应

这种配色一定避免！！！！！

Remember me

注：总结都是根据个人理解整理记录，若有疑问或异议，请参考原著~另外期待各位大大们的指正和讨论！~(@^_^@)~

《认知与设计——理解UI设计准则》（第二版）笔记五