排版基础 | 设计界面 | 做产品

排版基础

界面上九成的内容是文字。文字排不好，加多少装饰都救不回来。

你会遇到的现象

• 页面说不上哪里丑，但就是读着累

• 字号定了七八种，改一处要连带改一片

• 照着英文模板做出来的中文界面，总觉得挤

字号怎么定

用途常用范围说明 一级标题24–36px页面主标题，一屏只有一个 二级标题16–24px区块标题，用来分节 正文14–16px主要阅读内容。14 是普通正文，16 是需要强调的正文 辅助信息12px网页最小可用字号。日期、版权、注释

12px 是下限，再小在多数屏幕上就吃力了。移动端因为观看距离近，正文可以比桌面端稍大一点。

标题和文字的组合形式常见的有四种：图标加字、纯颜色的字、容器加字（把文字放进一个框里）、带颜色的字。挑一种在全站保持一致就行，混着用会让层级失效。

行距、字距、段距

参数推荐值调错了会怎样 行距字号的 1.2–1.5 倍**中文正文取 1.6–1.8太小行与行粘住，太大段落会散掉，读的时候找不到下一行 字距约字号的 20%中文正文通常不调中文加字距会破坏词语的成组感，标题可以微调 段落间距行距的 0.5–1 倍小于行距就分不出段，大于两倍会让内容看着不连贯 页边距页面宽度的 5%–15%太窄显得拥挤，内容贴边像没排完 正文栏宽中文一行 25–35 字太宽读到行尾找不回行首，太窄换行太频繁

行距那一行值得单独记：英文界面常用 1.4，中文因为方块字没有升降部、视觉密度更高，同样的 1.4 会显得挤。中文正文往 1.7 上下调。

同一段中文，只改了行距

行距 1.4　照搬英文习惯 中文因为是方块字，没有升降 部，视觉密度比英文高得多。 同样的行距参数照搬过来，中 文就会显得挤，读着累。 行与行粘在一起，眼睛要费劲才能分开

行距 1.7　中文该有的 中文因为是方块字，没有升降 部，视觉密度比英文高得多。 同样的行距参数照搬过来，中 文就会显得挤，读着累。 每一行都能被单独看见，找下一行不费力

另一个中文专属的细节：中英混排要留空隙

使用AI生成一份对账单

使用 AI 生成一份对账单 数字和中文之间同理。这个空格不是排版洁癖，它让中文和拉丁字母各自的成组感回来了。

还有几个中文的坑值得一并记住：中文没有斜体（系统硬拉出来的很难看，要强调就加粗）、中文不适合两端对齐（会拉开字距，本来就等宽，拉完更难读）、字重不要太细（Light 在小字号上会糊）。

字体怎么选

• 界面用无衬线，长文和标题可以用衬线。**无衬线粗细统一、没有装饰，适合扁平化的界面；衬线有字脚，适合海报和宣传。

• **中文用系统字体就好。**苹方、思源黑体、微软雅黑。用网络字体要考虑中文字库体积，一个字重经常好几兆。

• **一到三种字体，不要更多。**通常是一种正文字体加一种标题字体。超过三种会乱。

• **字重比字体更好用。**同一个字体的常规和加粗就能拉开层级，比换字体安全得多。

中文的几个坑

• 中英混排要留空隙。「使用 AI 生成」比「使用AI生成」好读。数字和中文之间同理。

• **中文没有斜体。**系统硬拉出来的斜体很难看，要强调就用加粗或换颜色。

• **标点占一个全角宽。**连续的标点会出现明显空隙，标题里尤其明显，必要时手动调。

• **中文不适合两端对齐。**两端对齐会拉开字距，中文本来就是等宽的，拉完更难读。左对齐就好。

• **字重不要太细。**细体在中文上很容易糊，尤其小字号。正文用常规，别用 Light。

接着看

字号阶梯 把上面的字号范围收敛成三到四个固定值，才能保证全站一致。

视觉层级从哪来 排版五法则里的对比和留白，落到文字上就是字号差和行距。

一套间距 行距、段距、页边距最好都来自同一组数值，而不是每处单独拍。