MODULE 04 / LESSON 02

字号阶梯:建立稳定的文字角色

用有限的字号表达页面、章节、正文和辅助信息。

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

先理解这个概念

字号阶梯是一组可复用的文字角色。可以用比例生成候选值,再根据中文阅读与产品密度调整。字号比例是起点,不是标准答案。正文必须在目标设备上可读,也要尊重用户放大设置。

字号阶梯首先是角色系统,然后才是比例计算。正文、辅助说明、卡片标题和页面标题各自承担不同职责;同一角色应稳定,同样大小的文字也可以通过字重和位置区分。机械地按比例无限生成字号,会产生难以维护的样式,却不一定形成清楚层级。

用程序员的语言说

像枚举类型:把随意的数字收敛为 title、heading、body、caption 等语义角色。

记住这三个原则

  1. 01

    先设正文,再决定标题与辅助信息。

  2. 02

    不要为每个卡片发明新字号。

  3. 03

    搭配字重和间距建立层级,不只依赖字号。

实际设计时,分三步做

  1. STEP 01

    先列实际文字角色,为每种角色定义字号、行高、字重和用途。不要只交付一列数字。

  2. STEP 02

    在最常见页面组合这些角色,检查标题是否压过正文、辅助信息是否太弱,以及相邻层级是否真的可区分。

  3. STEP 03

    为窄屏设置必要变化,优先让大标题缩小或换行,保持正文的可读基础,不把整套字号按屏幕比例缩放。

一个容易理解的例子

BEFORE / 常见问题

一个页面出现 15、17、19、21、23、26、29 等大量相近字号。

AFTER / 可以这样改

收敛为正文 16、章节 24、页面标题 36 等少量角色,次要标签保持可读。

差异更明确,维护时也不必逐个猜测数值。

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

假设正文采用 17px,卡片标题 21px,章节标题 26px,页面标题 40px,这是一组练习起点而非标准答案。长课程名在手机上可以降低页面标题字号并允许多行,正文继续保持阅读尺寸。日期不应因为“层级低”被压到难读;可以减少字重、移到辅助位置。先验证角色,再微调数值。

适用边界与取舍

营销海报的大幅字号差异未必适合高密度工具。阶梯应覆盖任务所需层级,不必让每一级都出现在每一页。

YOUR TURN

把这个原则用一次

先做一个小判断

在排版实验里调整比例,比较文章页与工具页。

再完成一份设计练习

为设置页和文章页共用一套五种文字角色,说明哪些角色共享、哪些只在文章页出现。

容易踩的坑

不要机械地把整套黄金比例应用到所有文字。

继续查阅

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

Apple Human Interface GuidelinesMaterial Design 3