Yingkui

Yingkui

Solving Problems. Making Progress.

第三章:颜色

颜色要克制,尽可能用枯燥却实用的颜色,例如,使用小字体低饱和度的颜色,让信息看起来更舒适。

而且本书中的思维,并不是要研究颜色理论,以及不同的颜色带来的复杂的情绪变化,而是提供几个不那么差的选项,以供选择参考。

对于一个复杂的系统,你并没有那么多的选择

多用蓝色,210 次选用橙黄色,绿蓝色 保留绿色,给人安全 保留黄色,作为抓取注意力的颜色 保留红色,进行危险动作提示,或是强烈的冲击 保留金色,给人以高级感

蓝色,墨绿方向(青色hue),紫色方向

克制自己使用灰色的shades开始,或者克制自己只用蓝色(H值在180 - 240),而调整SL或者SV值

3.1 常见颜色

3.1.1 白色背景

3.1.1.1 黑灰色

最为保险和实用的情景,

3.1.1.2 红色

3.1.1.3 蓝色

3.1.1.4 橙色(红色的延伸)

3.1.1.5 绿色

3.1.1.4 金色

3.1.1.6 紫色(红色 + 蓝色)

3.1.1.4 褐色(黄色的延伸)

3.1.2 黑色背景

3.1.2.1 白色

3.1.2.2 金色

3.1.2.2 绿色

3.1.3 黄色背景

3.1.3.4 黑色

经典常见的配色搭配,黄色明亮,黑色清晰,就是在白色的基础上,增加了一份乐趣

3.2 配色

3.2.1 背景和文字

黄色和褐色

3.2.1 背景色和边框色

3.3

Gray

灰色(#xx)是最实用的颜色,甚至应该尝试着都用灰色设计,然后必要的地方增添其他的颜色,再接着根据主色调分配颜色

用灰色作背景,

  1. table的header
  2. card的header
  3. form/modal的footer
  4. page的footer
  5. secondary region bg color

Colors

  1. 红金:Red BG and Yellow (Gold)
  2. 绿金:Dark Green BG ang Gold
  3. 黑金:Black BG and Gold
  4. 黄褐:Yellow BG and Brown
  5. 黄黑:Yellow BG and Black
  6. 黑绿:
  7. 白红
  8. 白蓝
  9. 白褐
  10. 白绿
  11. 白X灰

水墨灰

和纯脆的灰色(#xx)相比,加入一定青蓝色的灰色,给人以高级的质感。

alternative text
#E3E8E7
alternative text
#B6C1CB

Color Shades

Duo Tone