# 设计原则
## 强调靠墨色，不靠颜色（§2）
- 好：一处只有一个实心按钮，用墨色（或主色）。
```html
```
- 不好：每个按钮一种颜色：颜色失去了意义，强调也没了。
## 颜色只表意义：绿色只表示完成（§2）
- 好：完成的才是绿色，其余是中性灰。
```html
已写入草稿
```
- 不好：装饰性的绿色，让「完成」不再可信。
## 默认直角；语义上的圆永远是圆（§3）
- 好：矩形跟着圆角开关；单选、状态点、头像永远是圆。
```html
```
- 不好：直角模式下的胶囊按钮、方形单选：语义被打乱。
## 一个框只有一个框（§4）
- 好：聚焦时边框变深一次就够。
```html
```
- 不好：外面一圈光、里面一层框：框里套框。
## 一组选项是一个列表，不是一叠盒子（§4）
- 好：只在行之间画线，首行上、末行下不画。
```html
```
- 不好：每项一个盒子：线比内容还多。
## 卡片、行、按钮没有阴影（§5）
- 好：卡片靠一条细线分开；阴影只给浮起来的东西。
```html
```
- 不好：卡片也浮起来，浮层就分不出来了。
## 选中改颜色，不加粗（§6）
- 好：选中只改颜色和下划线，字宽不变。
```html
```
- 不好：加粗让字变宽，旁边的 tab 跟着跳。
## 相关的字靠得更近（§6）
- 好：说明紧贴标题，两组之间空得多。
```html
```
- 不好：间距都一样：分不清哪句说明属于哪个标题。
## 分段控件：一个托盘，选中的像纸一样浮出（§4）
- 好：托盘没有边，选中段是纸。
```html
```
- 不好：托盘有框、选中段也有框：框里套框。
## 对话框：取消在前、安静；主操作最后（§10）
- 好：取消是内容宽度的安静按钮；主操作是最右的那个承诺，文字说清会发生什么。
```html
```
- 不好：两个一样重的按钮，取消在最右，「确定」不知道确定什么。
## 图标：1.5 线宽、方角、斜接（§7）
- 好：直线和方角，只有本身是圆的才画圆。
```html
```
- 不好：粗线、圆角矩形、实心填充：和整套界面不是一个画法。
## 同心圆角：外 = 内 + 间距（§7½）
- 好：内圆角 = 外圆角 − 间距，弧线平行。
```html
```
- 不好：内外一样的圆角：角上一边厚一边薄。
## 按钮文字说下一次点击会做什么（§9）
- 好：动词 + 对象，点之前就知道结果。
```html
```
- 不好：「确定」「操作」：要先读上下文才知道会发生什么。