UI 设计极简教程 Part 3

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

此为 Part 3，前见 Part 1, Part 2

层次自然

• 为什么有些元素看起来凹凸有致？因为它们有自然的 shadow 效果。然而这真的值得你花上几个小时的时间去 tweak 吗？

• 当元素在 z-axis 上提起来靠近用户的时候，会得到更多的注意力，也是 shadow 实现的

• 高阶的 shadow 使用法甚至会有两个 shadow，一个是环境光产生的 shadow，一个是直射光产生的 shadow

• flat design 也可以有层次感，一是用颜色，较亮的颜色看上去比较近，较暗的颜色看上去比较远；二是用垂直 offset 无 blur 的纯色的 shadow 比如 box-shadow: 0 4px 0 hsl(220,8%, 80%);

• 覆盖元素以产生层次感

  • 比如使用负数的 margin 比如 margin-bottom: -72px; 以覆盖两个背景元素，甚至覆盖三个元素 margin: -72px 0 -72px 0;
  • 类似地图片也可以覆盖两个背景区域，但是为了让图片更明晰，可以加上纯色的 border 区分一下

图不逾矩

• 优雅的设计会在意每一张图片的使用，你应该使用高质量的图片；图片的使用要讲规矩

• 在图片上放文字，为了让文字更清晰，可以

  • 覆盖灰色的一层，以加灰背景
  • 降低图片对比度，以加白背景
  • 调节图片为单一颜色，以加深背景
  • 给图片加 shadow

• 图片有它自己的适用大小，不要随意改变它的 scale

  • 不要放大 icon，可以给它加纯色的圈圈
  • 不要缩小截图，上面的文字会看不清；你可以
    • 在小 screen 上截图
    • 截图本身只截重点区域
    • 非要截大图的话，用线条来取代小字，就没有读不清的问题了
  • 也不要缩小 icon，根据实际需要重新画

• 注意用户上传的图片

  • 展示的时候如果大小不一致会很乱，可以用 backgroundSize: "cover", backgroundImage: url(...);
  • 图片颜色混原本的背景颜色会看上去很奇怪，这时候用内阴影或外阴影比较合适

画龙点睛

• 你不必总是增加新的元素以增加设计感，修改 default 的配置就能够很好看，比如
  • 将列表的子弹点换成 icon
  • 给超链接加颜色和 weight，或者有眼色的粗下划线
  • 改动 checkbox 和 radio button 之类元素的缺省设置
• 给一侧的边界加有色 border
• 给背景加颜色、或者低对比度的纹理和插图
• 给 empty states 加单独的设计
• 减少 border 的使用，想要区分颜色的边界，可以用 box-shadow、颜色或者间隔 (spacing)
• 不拘一格，列表不一定是单列的罗列，可以是多列的卡片；表格不一定是单排的，可以是复杂和多排多彩的；单选不一定是 radio button，可以是卡片

生生不息

生活中处处是设计，用一双设计师的眼睛看世界，反复记录与分析