把「好看」拆成能照做的规矩

§0

工作顺序

动手之前的五步，顺序本身就是规则。

1. 从一个具体功能开始做。导航和外壳等功能做出几个之后再定。RUI
2. 先用灰阶做。只靠间距、字号、字重、明暗把层级做出来，颜色最后加。工具栏里的「灰阶」可以随时检查。RUI
3. 先定性格。字体、主色、圆角、文案语气定下来，再挑具体数值。RUI
4. 选值用排除法。先猜一档，再和相邻两档并排比，留下看着最对的那档。RUI
5. 先做能上线的最小版本。还做不出来的功能不画进界面。RUI

§1

层级

先决定读者第一眼看哪里。层级是让界面「像设计过」的最大因素，先做好这一节再管细节。

• 每屏先排主次：一个主要信息和主操作，几个次要，其余第三级。RUI
• 拉开层级按这个顺序动手：颜色深浅 → 字重 → 字号。字号最后才动，否则主内容过大、次要内容过小。RUI
• 文字颜色三档：主要 gray-900、次要 gray-600、第三级 gray-500。RUI
• 想突出 A，先把和它抢注意力的 B、C 压下去（调淡、去掉底色）。RUI
• 彩色底上的次要文字：取与底色同色相的颜色，调饱和度和亮度拉开对比（示例见 §4）。RUI
• 区块标题多半起的是标签作用，做得小而淡；视觉大小按重要性定，与 h1/h2 等标签语义分开。RUI
• 展示数据时先试不用 label：格式本身能说明的直接展示，或把 label 并进值里（「剩 12 件」「3 间卧室」）。必须有 label 时，label 小而淡；规格表这类按 label 查找的页面，反过来让 label 更深。RUI
• 实心图标比文字「重」，和文字并排时把图标调淡来平衡；1px 细线太淡时加粗到 2px，保持颜色柔和。RUI
• 模糊测试：工具栏的「模糊」切到 5px 检查分组，切到 20px 检查第一眼焦点是不是你要的那个。NNg

§2

间距与尺寸

间距只从刻度里取，组内比组间近。没有边框的界面，分组全靠这一条。

间距刻度

小端密、大端疏，相邻两档至少差约 25%。宽高也用这套刻度，再往上还有 640、768。

• 刻度里相邻两档至少差约 25%：小端密、大端疏。RUI
• 组间距大于组内距，至少大一档，常用组内 8、组间 24。RUIXHS
• 先给多到过分的留白，再一档档收回。信息密集的界面（仪表盘、学习侧栏）可以紧凑，那是主动决定。RUI
• 组件的各个尺寸各自调：大按钮内边距更宽松、小按钮更紧，不跟字号等比缩放。RUI
• 用自动布局：间距和内边距写在容器上（gap / padding），子元素只声明「贴合内容」或「撑满」。XHS

§3

文字

字号从刻度里取，一屏两档字重，行高跟着字号走。

字号刻度

字号

• 一屏的字号层级控制在 3 级左右，最大号的元素不超过 2 个。NNg
• 网页正文 16px，信息密集的面板 14px；iOS 原生正文 17pt，最小 11pt。NNgHIG
• 字号用 px 或 rem 定义，保证嵌套后算出来的值仍在刻度里。RUI

字重

• 一屏两档：常规 400（或 500）+ 强调 600（或 700）。RUIXHS
• 界面文字用 400 及以上；要弱化就换浅色或小一号。RUIHIG
• 挑字体选至少有 5 种字重的家族，这是字体做工的信号。拿不准就用系统字体栈。RUI

行高与行宽

• 行高与字号成反比：正文 1.5，宽栏正文到 1.75–2，标题 1.25，特大标题 1。RUI
• 中日文行高比拉丁文高一档，正文从 1.75 起。M3经验值
• 段落每行 45–75 个拉丁字符（约 20–35em），中日文约 25–40 字。图文混排时内容区可以宽，段落本身仍限宽。RUIM3经验值

对齐、字距与链接

• 文字左对齐；居中只给 2–3 行以内的短文本，太长就改短文案。RUI
• 表格里的数字右对齐并开 tabular-nums。RUI
• 同一行混排不同字号时按基线对齐。RUI
• 大标题略收字距（约 -0.02em）；全大写短标签加宽字距（+0.05 ~ +0.1em）；正文保持字体默认字距。RUI经验值
• 拉丁文两端对齐时同时开 hyphens: auto。RUI
• 正文段落里的链接用颜色或下划线标出；导航、列表这类满屏可点的地方用字重或深色区分，次要链接悬停时再出下划线。RUI

§4

颜色

一个主色，九档灰，语义色少用。色板先定好，用的时候只从里面取。

色板（示例，按项目替换）

每块底部是它和白色的对比度，由本页按 WCAG 公式现算。达到 AA 的颜色可以作白底上的文字，也可以作白字的底色。

面积配比

来自室内设计的经验法则，用来检查强调色是否铺得太多。每屏实心强调色按钮 1–2 个。

色板组成

• 灰 9 档（100–900）：900 给正文（代替纯黑），100 给页面底色。RUI
• 主色 1 个（最多 2 个），9 档：500 是适合当按钮底色的那档，900 给彩色文字，100 给浅色提示底。RUI
• 语义色：红（错误、危险）、黄（警告）、绿（成功），各几档，用量很少。红色专留给错误和危险操作。RUINNg
• 分类色（图表、标签、日历）另成一组，按需添加。RUI
• 建色阶：先定 500，再定 900 和 100，再补 700 和 300，最后补 800/600/400/200。定好之后只从色板取，lighten() / darken() 现算不用。RUI

调色

• 用 HSL（或 OKLCH）调色，色相、饱和度、亮度分开动。RUI
• 越接近最亮和最暗，越要提高饱和度，两端才不发灰。RUI
• 要变亮又保持浓度：色相往最近的亮色相转（黄 60°、青 180°、品红 300°）；变暗往红 0°、绿 120°、蓝 240° 转；最多转 20–30°。RUI
• 灰色带一点色相：冷调加蓝，暖调加黄或橙，两端同样补饱和度。RUI
• 大面积用低饱和色，高饱和只留给小面积强调。XHS
• 渐变只在相邻色相（相差 ≤30°）之间，用作背景点缀。RUI

对比度

• 正文 ≥ 4.5:1；大字（24px 常规或 18.5px 粗体以上）≥ 3:1。WCAG
• 图标、输入框边框、焦点环等界面元素与相邻颜色 ≥ 3:1。WCAG
• 禁用态不受以上约束，文字仍要读得清。NNg
• 白字放在彩色底上对比不够时，反过来做：浅彩底 + 深彩字。RUI
• 颜色只做辅助：涨跌、对错同时配图标或文字；多条曲线用深浅区分，同时配图例或线型。RUIHIG

§5

圆角

圆角决定性格。选一个方向，全局一致；贴着嵌套时内外同心。

• 圆角决定性格：小圆角中性，大圆角活泼，直角正式。一个产品选一个方向，全局一致。RUI
• 嵌套圆角同心：内层圆角 = 外层圆角 − 两层之间的内边距。M3HIGXHS
• 内边距大于等于外层圆角时，两层已不算贴着嵌套，各用各的档位。M3
• 信息密集的组件（数据卡片、表格容器）用小圆角。M3

§6

深度

阴影表示离用户多近。分隔元素时，边框排在最后。

• 先想元素在 z 轴上的位置，再选阴影档：越靠近用户，阴影越大越柔，也越吸引注意。RUI
• 光从上方来：凸起的元素顶边略亮、下方有投影；凹陷的元素（输入框、凹槽）内侧上沿有阴影。RUI
• 按下时阴影变小或去掉；拖起时阴影变大。RUI
• 两层阴影更精致：一层大而淡（直射光），一层小而深（贴近底面）；层级越高，小而深那层越淡，最高层去掉。RUI
• 扁平风格也有层次：比背景亮是浮起，比背景暗是凹陷；或用无模糊的短实色投影。RUI
• 分隔元素按这个顺序选：加大间距 → 换一档底色 → 阴影 → 边框。RUI
• 层叠：让卡片跨过两种背景的分界，或高出父容器；图片互相重叠时加与背景同色的描边隔开。RUI

§7

图标与图片

图标按原尺寸用，同一排一个尺寸；图上压字要处处读得清。

• 同一排图标一个尺寸。常用 16（行内小字旁）、20（紧凑布局）、24（标准）。M3XHS
• 图标描边粗细和旁边文字的字重匹配。HIG
• 图标按原设计尺寸使用。需要大图标时放进带底色的圆形或方形里；需要 favicon 这类极小尺寸时，重画简化版。RUI
• 产品截图：截局部、用平板尺寸截，或画去掉细节的简化示意图，让截图里的字保持可读。RUI
• 图上压字要让对比度处处一致：半透明遮罩、降低图片对比度、单色上色，或大模糊无偏移的文字光晕。RUI
• 用户上传的图放进固定比例容器（object-fit: cover）；和背景颜色相近时，用浅内阴影或半透明内描边勾出边界。RUI

§8

操作与按钮

每屏一个主操作。危险操作到确认那一步，才变成红色实心。

到确认这一步，删除才是主操作，用红色实心；键盘默认焦点仍放在「取消」上。

• 每屏一个主操作：实心、高对比。次要：描边或低对比底色。第三级：链接样式。RUIHIG
• 危险操作不是当前页主操作时，按次要或第三级样式处理；到确认那一步它才成为主操作，用红色实心。RUI
• 同一组按钮等大，主次靠样式区分。HIG
• 按钮文案以动词开头，说清做什么（「保存修改」「加入收藏」）。HIG
• 点击区域 ≥ 44×44px（Android 48dp），底线 24×24（WCAG AA）；相邻目标间隔 ≥ 8px。视觉上小的按钮用透明内边距把热区撑够。HIGM3WCAG

§9

状态与反馈

交付前把状态做全。下面每个状态都按规范的数值画出来了。

按钮的六个状态

输入框的四个状态

• 每个可交互组件交付前，把适用的状态都做出来：默认、悬停、聚焦、按下、禁用、加载，以及选中、错误。M3NNgXHS
• 悬停叠一层 8% 的内容色，按下叠 10%；任何操作 100ms 内要有可见反馈。M3NNg
• 聚焦用 ≥ 2px 描边环，与周围对比 ≥ 3:1，形状变化而不只是变色。WCAGNNg
• 禁用：内容 38% 不透明度，附一句不可用的原因，保留在 Tab 顺序里（aria-disabled="true"）。M3NNgHIGXHS
• 加载：按钮内嵌小转圈并锁定，防止重复提交。HIG
• 输入框另有填写中、校验错误；label 放在框上方并常驻，placeholder 只放格式示例。NNgXHS
• 下拉框另有展开、当前选中项、无匹配结果。XHS
• 错误提示贴在出错字段旁，写清问题和改法；字段失焦后再校验；保留用户已填内容；措辞中性，描述问题本身。NNg

§10

加载、提示与空状态

等多久用什么指示；成功、出错、要确认各有各的提示方式；空状态当首屏来设计。

按等待时长选加载方式

提示用哪种

操作成功、低优先级、可撤销

Toast / Snackbar：底部，4–10 秒自动消失，一次一条，最多一个操作（如「撤销」）。M3

出错

就地提示：字段旁、按钮旁或区块内，常驻到问题解决。NNg

不可逆、会丢数据、必须先补信息

对话框：最多 3 个按钮，标题不超过 2 行，默认按钮是安全的那个。HIGNNg

持续状态（离线、同步中）

区块内或顶部的常驻横幅、状态文字。HIG

• 能先出的内容先出；进度匀速推进；同一处始终用同一种指示器。HIG
• 反馈放在用户视线附近，即触发它的元素旁边。NNg
• 空状态当首屏来设计：一个插图或图标 + 一句说明 + 一个主操作按钮。还没有内容时，先隐藏只对内容起作用的 tab、筛选、排序。RUI

§11

布局

按内容需要定宽。屏幕再宽，也按内容所需的宽度排。

• 按内容需要定宽：表单、卡片、登录框给 max-width，屏幕比它窄时才缩。RUI
• 侧栏这类内容固定的区域用固定宽度，主区域伸缩填满剩余空间；只有真想等比缩放的元素才用百分比。RUI
• 页边距：手机 16，平板及以上 24；iOS 用系统 safe area 和 layout margins。M3HIG
• 先在约 400px 宽的画布上做手机版，再放到大屏上调整。RUI
• 窄内容放进宽屏显得空时，拆成两栏，表单本身保持合适宽度。RUI
• 小屏上大元素缩得更快：桌面 45px 的标题到手机约 20–24px，与正文的比例随屏幕重新定。RUI

§12

收尾加分

层级、间距、文字都对了还嫌平淡时，从这几样里挑一两样。

• 给默认元素加料：列表圆点换成对勾或箭头图标；引语的引号放大成装饰；复选框、单选框的选中态用品牌色。RUI
• 强调边框：卡片顶边、提示框侧边、当前导航项、标题下方一小段彩色条。RUI
• 背景点缀：换一档底色、相邻色相的轻渐变、低对比的重复图案或几何形状（可只沿一条边）。RUI
• 突破组件的默认形态：下拉菜单可分组、分栏、带说明和图标；表格可以合并相关列做出主次；重要的单选用可选卡片。RUI

§13

交付前自查

逐条核对，全部打勾才算完成。勾选记录只存在这台电脑的浏览器里。

• 每个间距、字号、圆角、阴影、颜色都能在刻度里找到。
• 一屏字重两档，字号层级 3 级左右。
• 每屏只有一个视觉上最突出的主操作。
• 去掉边框和底色后，仍能靠间距分清分组。
• 贴着嵌套的圆角满足「内 = 外 − 内边距」。
• 同一排图标同尺寸，描边与文字匹配。
• 文字对比度达标（4.5:1 / 3:1），信息有颜色之外的第二种表达。
• 可交互组件的悬停、聚焦、按下、禁用（含原因）、加载、错误都已做出。
• 点击区域 ≥ 44px。
• 空状态、加载状态、出错状态都已设计。
• 模糊测试后，第一眼焦点落在主内容上。
• AI 生成稿四项复核：间距是否全在刻度上、内外圆角是否同心、大面积颜色是否已降饱和、渐变是否限于相邻色相。

来源

• RUIAdam Wathan、Steve Schoger《Refactoring UI》（2018）。间距、字号、阴影刻度取自书中插图。refactoringui.com
• M3Material Design 3：shape、spacing、typography、states、snackbar、elevation。m3.material.io
• HIGApple Human Interface Guidelines：layout、typography、buttons、color、alerts、progress indicators；同心圆角见 WWDC25 session 356。developer.apple.com
• NNgNielsen Norman Group：响应时间、进度指示、骨架屏、模态对话框、错误提示、视觉层级等文章。nngroup.com
• WCAGWCAG 2.2：1.4.3、1.4.11、2.4.7、2.5.5、2.5.8。w3.org
• XHS小红书「布纠结」UI 设计干货系列，19 篇，取自封面与标题。

标「经验值」的条目没有出自上面的权威来源，是常见做法。