MODULE 04 / LESSON 03

行高、行长与中文排版

让长内容读起来不费力。

15 / 60 课掌握视觉语言含互动实验

先理解这个概念

行高控制纵向阅读节奏,行长控制视线回到下一行起点的距离。中文与拉丁文字密度不同,应实际试读。长段落需要小标题与分段,但不能为了视觉整齐把每句话都截成一行。

阅读节奏由行内和段间共同形成。行太长会增加换行时寻找下一行的成本,太短又会打断词组。行高过紧容易串行,过松则让段落失去整体性。中文正文、英文正文、代码和数字表格的阅读方式不同,不能用同一个行高和宽度覆盖。

用程序员的语言说

代码的行宽限制是帮助阅读,不是为了制造统一的矩形。

记住这三个原则

  1. 01

    长正文用相对行高,避免放大字体后互相覆盖。

  2. 02

    用最大内容宽度控制行长,而不是强制换行。

  3. 03

    测试中英混排、标点避头尾和连续长链接。

实际设计时,分三步做

  1. STEP 01

    用足够长的真实段落调试正文宽度,观察读者能否稳定回到下一行,而不是只排三行短摘要。

  2. STEP 02

    先调行高,再调段间距和标题间距。标题应与它解释的下文形成一组,章节之间再拉开更大间隔。

  3. STEP 03

    检查中文标点、长 URL、英文术语和代码块。允许必要换行或局部横向滚动,避免整个页面被撑宽。

一个容易理解的例子

BEFORE / 常见问题

正文横跨 1600px 屏幕,行高固定 20px,放大后文字挤在一起。

AFTER / 可以这样改

正文限制阅读宽度,使用 1.75 的相对行高并允许长链接换行。

稳定的行长和足够行距帮助视线持续跟踪。

IMPLEMENTATION NOTE
.prose { max-width: 42rem; line-height: 1.75; overflow-wrap: anywhere; }

展开看:从场景到设计决定

宽屏课程页若让正文横跨整个窗口,一行可能包含过多汉字。可以限制阅读列宽,空出的区域放目录,而不是把字号放大来填满宽度。手机上正文自然铺满可用列,代码块单独滚动。长标题允许换行,不能套与按钮相同的 nowrap。读者放大文字后,正文仍应沿单一方向阅读。

适用边界与取舍

数字表格需要列比较,不能套用正文的窄列规则;短提示也不必刻意限制行长。阅读参数应按内容角色分别设定。

YOUR TURN

把这个原则用一次

先做一个小判断

把文章容器从 40rem 改到 80rem,描述阅读差异。

再完成一份设计练习

排版一篇含三级标题、列表、代码与长链接的技术文章,在窄屏与文字放大后检查。

容易踩的坑

中文每行适合多少字取决于字号与场景,不要把英文字符建议直接当成中文硬指标。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

Apple Human Interface GuidelinesMaterial Design 3