UI 设计极简教程 Part 1
如何设计优雅的 UI?答:小处落笔、主次分明、布局清爽、文字易读、色彩丰富、层次自然、图不逾矩、画龙点睛、生生不息。
小处落笔
- 要从功能入手,不要从布局入手
- 从小处入手,从灰度入手,逼你先把主次、布局、比较、尺寸想清楚,然后再考虑颜色
- 不要过度设计,因为设计远没有用户实实在在用得上的产品重要
- 小步迭代,人们 容易低估实现的难度
- 产品的个性由字体、颜色、border radius、语音等等元素共同决定。比如,越圆越活泼,越细直越严肃;蓝色不会错,金色昂贵与复杂,粉色活泼。注意不要从你的竞争对手那儿借鉴太多 :)
- 限制选择,把通用的参数都提前设置好,拿来即用即可,看起来更好看,做起来也更简单
主次分明
- 人的注意力有限,都是重点等于没有重点
- 尺寸大小不等于重点,应综合考虑两到三种 font-weight, 两到三种颜色
- 可以使用白底灰字来弱化文字,但是不要用彩底灰字,而是应该用彩底彩字
- 弱化与强化混用,而不是只用强化或者只用弱化
- 尽量不要用标签 (label: blah) ,有时候你跟不不需要标签,直接上值即可;有时候你可以把标签和值组成简短的句子;根据标签和值的重要性相应地强化和弱化
- 文档 tag 大小不等于 UI 的大小,比如你常用 h1 做页面标题,而实际上页面标题没那么重要,应该使用常规大小和字体
- weight 和 color 都可以起到强化和弱化的作用,要综合考虑
- 如果有并列的三种操作的 button,要区分 primary, secondary, tertiary
布局清爽
- 从宽松的布局开始,因为 spacing 减起来容易加起来难
- 从设计系统中选 spacing
- 你不需要占据整个屏幕,你可以居中或者加 column
- 有些元素不要用比例,而应该用定宽,比如左侧导航栏、占据一个 column 的 icon 的宽度;form 不在迫不得已的情况下不用缩小
- 不要同比放大和缩小一个组件的所有的元素参数,而是应该在不同大小的情况小具体设计
- 相关的东西要放在一起,间隔不相关的的东西
文字易读
- 从设计系统中挑选 font-size,别用 em 因为它是当前字体的相对值
- 挑个好字体;从系统字体或者流行的字体开始总是不会错;有些字体是为标题而生,它们的水平间距更短小写字母更矮;有些字体是为了小尺寸而生,它们的水平间距更大小写字母更高;从卓越的设计那里偷师。培养直觉。
- 注意文字段落不要太宽
- 同一水平的不同文字,应该使用基准线对齐,
align-items: baseline
而不应该用居中 - 行高会决定用户是否能够轻易地将目光转移到下一行,宽段落用 2 倍行高,窄段落用 1.5 倍行高;小字用大行高、大字用小行高
- 不是每个超链接都需要颜色或者下划线的
- 多段短文可以居中对齐,多段长文要居左对齐;数字要居右对齐
- 如果段落中单行的文字的分布因为词长而不对劲,考虑使用
hyphens: auto;
- 调节 letter-spacing 参见上面条目 2,如果调大适宜小尺寸的字体要注意缩减 letter-spacing