跳到主要内容

UI 设计极简教程 Part 1

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

小处落笔

  1. 要从功能入手,不要从布局入手
  2. 从小处入手,从灰度入手,逼你先把主次、布局、比较、尺寸想清楚,然后再考虑颜色
  3. 不要过度设计,因为设计远没有用户实实在在用得上的产品重要
  4. 小步迭代,人们容易低估实现的难度
  5. 产品的个性由字体、颜色、border radius、语音等等元素共同决定。比如,越圆越活泼,越细直越严肃;蓝色不会错,金色昂贵与复杂,粉色活泼。注意不要从你的竞争对手那儿借鉴太多 :)
  6. 限制选择,把通用的参数都提前设置好,拿来即用即可,看起来更好看,做起来也更简单

主次分明

  1. 人的注意力有限,都是重点等于没有重点
  2. 尺寸大小不等于重点,应综合考虑两到三种 font-weight, 两到三种颜色
  3. 可以使用白底灰字来弱化文字,但是不要用彩底灰字,而是应该用彩底彩字
  4. 弱化与强化混用,而不是只用强化或者只用弱化
  5. 尽量不要用标签 (label: blah) ,有时候你跟不不需要标签,直接上值即可;有时候你可以把标签和值组成简短的句子;根据标签和值的重要性相应地强化和弱化
  6. 文档 tag 大小不等于 UI 的大小,比如你常用 h1 做页面标题,而实际上页面标题没那么重要,应该使用常规大小和字体
  7. weight 和 color 都可以起到强化和弱化的作用,要综合考虑
  8. 如果有并列的三种操作的 button,要区分 primary, secondary, tertiary

布局清爽

  1. 从宽松的布局开始,因为 spacing 减起来容易加起来难
  2. 从设计系统中选 spacing
  3. 你不需要占据整个屏幕,你可以居中或者加 column
  4. 有些元素不要用比例,而应该用定宽,比如左侧导航栏、占据一个 column 的 icon 的宽度;form 不在迫不得已的情况下不用缩小
  5. 不要同比放大和缩小一个组件的所有的元素参数,而是应该在不同大小的情况小具体设计
  6. 相关的东西要放在一起,间隔不相关的的东西

文字易读

  1. 从设计系统中挑选 font-size,别用 em 因为它是当前字体的相对值
  2. 挑个好字体;从系统字体或者流行的字体开始总是不会错;有些字体是为标题而生,它们的水平间距更短小写字母更矮;有些字体是为了小尺寸而生,它们的水平间距更大小写字母更高;从卓越的设计那里偷师。培养直觉。
  3. 注意文字段落不要太宽
  4. 同一水平的不同文字,应该使用基准线对齐,align-items: baseline 而不应该用居中
  5. 行高会决定用户是否能够轻易地将目光转移到下一行,宽段落用 2 倍行高,窄段落用 1.5 倍行高;小字用大行高、大字用小行高
  6. 不是每个超链接都需要颜色或者下划线的
  7. 多段短文可以居中对齐,多段长文要居左对齐;数字要居右对齐
  8. 如果段落中单行的文字的分布因为词长而不对劲,考虑使用 hyphens: auto;
  9. 调节 letter-spacing 参见上面条目 2,如果调大适宜小尺寸的字体要注意缩减 letter-spacing