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