MODULE 04 / LESSON 03
行高、行长与中文排版
让长内容读起来不费力。
先理解这个概念
行高控制纵向阅读节奏,行长控制视线回到下一行起点的距离。中文与拉丁文字密度不同,应实际试读。长段落需要小标题与分段,但不能为了视觉整齐把每句话都截成一行。
阅读节奏由行内和段间共同形成。行太长会增加换行时寻找下一行的成本,太短又会打断词组。行高过紧容易串行,过松则让段落失去整体性。中文正文、英文正文、代码和数字表格的阅读方式不同,不能用同一个行高和宽度覆盖。
代码的行宽限制是帮助阅读,不是为了制造统一的矩形。
记住这三个原则
- 01
长正文用相对行高,避免放大字体后互相覆盖。
- 02
用最大内容宽度控制行长,而不是强制换行。
- 03
测试中英混排、标点避头尾和连续长链接。
实际设计时,分三步做
- STEP 01
用足够长的真实段落调试正文宽度,观察读者能否稳定回到下一行,而不是只排三行短摘要。
- STEP 02
先调行高,再调段间距和标题间距。标题应与它解释的下文形成一组,章节之间再拉开更大间隔。
- STEP 03
检查中文标点、长 URL、英文术语和代码块。允许必要换行或局部横向滚动,避免整个页面被撑宽。
一个容易理解的例子
正文横跨 1600px 屏幕,行高固定 20px,放大后文字挤在一起。
正文限制阅读宽度,使用 1.75 的相对行高并允许长链接换行。
稳定的行长和足够行距帮助视线持续跟踪。
.prose { max-width: 42rem; line-height: 1.75; overflow-wrap: anywhere; }展开看:从场景到设计决定
宽屏课程页若让正文横跨整个窗口,一行可能包含过多汉字。可以限制阅读列宽,空出的区域放目录,而不是把字号放大来填满宽度。手机上正文自然铺满可用列,代码块单独滚动。长标题允许换行,不能套与按钮相同的 nowrap。读者放大文字后,正文仍应沿单一方向阅读。
适用边界与取舍
数字表格需要列比较,不能套用正文的窄列规则;短提示也不必刻意限制行长。阅读参数应按内容角色分别设定。
把这个原则用一次
先做一个小判断
把文章容器从 40rem 改到 80rem,描述阅读差异。
再完成一份设计练习
排版一篇含三级标题、列表、代码与长链接的技术文章,在窄屏与文字放大后检查。
中文每行适合多少字取决于字号与场景,不要把英文字符建议直接当成中文硬指标。
继续查阅
本课为原创教学解释。具体平台规则与标准可查阅官方资料。
Apple Human Interface GuidelinesMaterial Design 3