跳到主要内容

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,只要相对明晰即可,这样就不必变丑了

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