开始

设计原则

每条都配一对「好 / 不好」，都是真的组件：右上角切换主题、圆角、主色，看它们怎么变。完整原文在仓库 docs/DESIGN-PRINCIPLES.md。

强调靠墨色，不靠颜色 §2

好一处只有一个实心按钮，用墨色（或主色）。

不好每个按钮一种颜色：颜色失去了意义，强调也没了。

颜色只表意义：绿色只表示完成 §2

已写入草稿

好完成的才是绿色，其余是中性灰。

新功能草稿

不好装饰性的绿色，让「完成」不再可信。

默认直角；语义上的圆永远是圆 §3

单选

好矩形跟着圆角开关；单选、状态点、头像永远是圆。

单选

不好直角模式下的胶囊按钮、方形单选：语义被打乱。

一个框只有一个框 §4

好聚焦时边框变深一次就够。

不好外面一圈光、里面一层框：框里套框。

一组选项是一个列表，不是一叠盒子 §4

长文发布
批量存图
今日待办

好只在行之间画线，首行上、末行下不画。

长文发布

批量存图

今日待办

不好每项一个盒子：线比内容还多。

卡片、行、按钮没有阴影 §5

编辑式海报

xxd-panel-001

好卡片靠一条细线分开；阴影只给浮起来的东西。

编辑式海报

xxd-panel-001

不好卡片也浮起来，浮层就分不出来了。

选中改颜色，不加粗 §6

好选中只改颜色和下划线，字宽不变。

不好加粗让字变宽，旁边的 tab 跟着跳。

圆角关闭时为直角

主色按钮和选中用这个颜色

好说明紧贴标题，两组之间空得多。

圆角关闭时为直角主色按钮和选中用这个颜色

不好间距都一样：分不清哪句说明属于哪个标题。

分段控件：一个托盘，选中的像纸一样浮出 §4

好托盘没有边，选中段是纸。

不好托盘有框、选中段也有框：框里套框。

对话框：取消在前、安静；主操作最后 §10

好取消是内容宽度的安静按钮；主操作是最右的那个承诺，文字说清会发生什么。

不好两个一样重的按钮，取消在最右，「确定」不知道确定什么。

图标：1.5 线宽、方角、斜接 §7

好直线和方角，只有本身是圆的才画圆。

不好粗线、圆角矩形、实心填充：和整套界面不是一个画法。

同心圆角：外 = 内 + 间距 §7½

切到「圆角」看差别；直角模式下两边都是 0。

好内圆角 = 外圆角 − 间距，弧线平行。

不好内外一样的圆角：角上一边厚一边薄。

按钮文字说下一次点击会做什么 §9

好动词 + 对象，点之前就知道结果。

不好「确定」「操作」：要先读上下文才知道会发生什么。