Lec 19 色彩
- 颜色如何工作
- 不同的颜色模型
- 用颜色进行设计
- 可访问性方面的考虑
- 颜色的视觉表现
用颜色进行设计
单色配色
使用同一种颜色的不同变化可以形成一种很有冲击力的配色方案，但如果不加入黑色、白色以及不同深浅的灰色来增强对比，就很难有效地使用这种配色。
应选择具有较大明暗变化（色调和阴影变化范围更广）的颜色，以提供足够的对比度。
类似色
在色轮上彼此相邻的颜色组合，会形成一种范围较窄但很和谐的配色方案。
与单色配色类似，类似色通常会带来偏暖或偏冷的整体感觉，具体取决于它们在色轮中的位置。
互补色
位于色轮相对两端的颜色提供了最强的对比效果。
如果能够克制增加更多颜色的冲动，只使用两种互补色，可以创造出非常强烈甚至令人震撼的视觉效果。
但需要合理搭配，否则它们可能会产生冲突感。
分裂互补色
这种互补配色的变体是：选取一个主色，再选取它互补色两侧的两个颜色。
这些颜色具有较高的视觉对比，但相比纯互补色，视觉张力更弱、更柔和
三色配色
在色轮上等距离分布的三种颜色组合，可以产生强烈且生动的视觉效果。
有些配色会显得大胆，有些则更精致、克制。
你也可以对这种方法进行调整，例如用其中一种颜色的浅色或深色来替代纯色，从而降低整体冲突感。
四方配色
这种配色方案因为既有强对比又能保持一定和谐感，所以很受欢迎。它由两组互补色构成。
但如果四种颜色使用比例相同，会很难协调。
因此通常需要选择一种主色作为设计的主导色，其余颜色作为辅助色来支持整体视觉效果。
可以使用工具来评估 adobe color
一个建议： 可以从照片上拾取颜色。
可读性与颜色
提高对比度的方法
- 相应地提高或降低其中一种或两种颜色的亮度（lightness）
- 使用更大字号和/或更粗的字体
- 使用
text-shadow（文字阴影） - 在文字后面添加半透明的黑色或白色背景
这些方法的目标都是：
让文字与背景之间更容易区分，从而提高可读性和可访问性。
非典型色觉
下面列出的是不同类型色觉异常的大致人群比例：
| 类型 | 男性 XY | 女性 XX |
|---|---|---|
| Protanopia（红色盲） | 1.0% | 0.02% |
| Deuteranopia（绿色盲） | 1.1% | 0.01% |
| Tritanopia（蓝色盲） | 0.002% | 0.001% |
| Cone monochromatism（视锥单色视觉） | 0.0% | 0.0% |
| Rod monochromatism（杆状细胞单色视觉） | 0.003% | 0.002% |
| Protanomaly（红色弱） | 1.0% | 0.02% |
| Deuteranomaly（绿色弱） | 4.9% | 0.38% |
| Tritanomaly（蓝色弱） | 0.0% | 0.0% |
| 总计 | 8.0% | 0.4% |
对UI设计意味着，不要只靠颜色传达信息。 例如不要 红色 = 错误； 绿色 = 正确。 建议加上图表和颜色， 因为部分用户可能根本分不清。
优秀设计通常会：
- 同时使用颜色 + 图标
- 使用足够亮度对比
- 避免红绿直接对抗
- 提高文字可辨认性