跳到主要内容

UI 设计极简教程 Part 3

· 阅读需 5 分钟

如何设计优雅的 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,可以是卡片

生生不息

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