UI 设计极简教程 Part 2

如何设计优雅的 UI？答：小处落笔、主次分明、布局清爽、文字易读、色彩丰富、层次自然、图不逾矩、画龙点睛、生生不息。

此为 Part 2，前见 Part 1

色彩丰富

• 从设计师的角度来看，HSL 色盘比 RGB 有用，因为其中的参数是人眼能够感知的:

  • 色相 hue 彩色色轮上颜色的位置/角度
  • 饱和度 saturation 是灰还是艳？0% 是灰色，100% 是最艳丽
  • 亮度 lightness 是黑还是白？0% 是纯黑，100% 是纯白，50% 是色相上的纯彩

• 你需要的色彩远比你想象的要多，五六种是远远不够的

  • 总体分为三种，每种里面的每一个颜色 7 个选择
    • 灰色
    • 主色
    • 特色 accent colors

• 从预定义的颜色里挑选

  • 如何定义色库是真正考验功力的工作，因为少有经验，得靠眼力
  • 先找最深和最浅的颜色，然后再找中间的

• 找深色的时候，可以稍微把 hue 调节 30 度以内，补充单独改动另外两个所造成的色彩不足

• 同理，灰色也不需要是纯灰，可以加一些其他颜色；有些灰色是冷色调的，有些灰色是暖色调的

• 为了解决 accessibility，不一定需要只改 saturation 和 lightness 让元素更明晰，你其实也可以改 hue，只要相对明晰即可，这样就不必变丑了

• 不要只靠颜色区分元素，还有很多其他的方法甚至能够达到更好的效果