设计对与错，小编帮你来剖析，这是我们对与错栏目的第 3 期，请看下方的设计案例

这是来自谷歌 M3 的一个案例，用来对比控件使用是否规范。它把同一个组件放在不同场景里，展示了正确与错误的边界。下面就以这个例子为切口，深入拆解一下，为什么标签页在不同使用场合下会有不同的禁忌，以及这些禁忌背后真正要遵守的设计逻辑。

1 为什么错误方案不当

这个案例的问题，核心不是标签页做得好不好看，而是它被用在了不适合的内容类型上。右侧错误示例把标签页当成章节或翻页工具，用来承载必须按顺序阅读的内容。这样做会在阅读连续性、内容结构表达、交互预期三个层面制造阻力。

首先是阅读连续性被切断。章节、教程步骤、长文阅读这些内容，用户的心智模型是从上到下逐段推进，上一段的信息会自然成为下一段的上下文。把它拆进多个标签页，相当于强行把一条连续的阅读路径切成几段。用户每读到一个段落，就要把注意力抬到顶部，判断自己该点哪个标签，再回到正文继续找位置。阅读节奏被频繁打断，理解成本会明显上升。

其次是层级关系表达错位。标签页更擅长表达并列分组，它传达的是这一页和那一页是同一层级的不同类别。章节和步骤却不是并列关系，它们天然有先后、有递进、有承接。用标签页承载章节，会让界面在结构上说谎。用户会误以为各章是可随意切换的并列模块，而不是需要连续阅读的内容链条。结果就是用户更容易跳读、漏读，也更难形成完整理解。

第三是交互预期被误导。标签页的常见用法是快速切换类别，例如音乐里的不同分类、设置里的不同分区。用户会期待点一下立即切换内容，且切换成本很低。把它用在长文或章节上，用户一边切换一边承受重排版和重定位，还要重新建立上下文，这会让标签页变得像翻页，但又比翻页更费劲。更糟的是，标签数量一多，顶部区域会拥挤，标题还容易被截断，用户甚至连自己在哪一章都看不清。

所以右侧错误示例的问题可以归结为一句话。用并列分组的控件去装顺序阅读的内容，界面结构和内容结构会互相打架。

2 为什么正确方案更好

左侧正确示例把标签页用于并列分组的内容，例如音乐里的不同类别。这样的内容天然适合用标签页，因为它满足标签页最擅长解决的三个点。

第一，它符合并列分类的结构。用户选择 Ambient 或 Soundscapes，本质是在同一层级里切换不同主题。两者之间没有必须按顺序阅读的关系，切换不会破坏理解链条。标签页用来表达这种同级分组，语义非常准确。

第二，它让浏览变得高效。分类内容的使用场景往往是快速扫视、试探性点击、来回对比。标签页提供了一个低成本的切换入口，用户可以立即看到不同分组的内容，而不需要在同一页里滚很久去找分界。

第三，它让信息架构一眼可见。标签本身就是一份导航地图，告诉用户这个页面有哪些内容板块。对探索型任务来说，这种可见的结构能明显降低迷路感，也能减少用户在列表里反复滚动的次数。

也就是说，正确示例并没有强调标签页本身多高级，而是让标签页回到了它最恰当的职责上。把相关内容清晰分组，提供快速切换，而不是承担阅读顺序。

3 从对比方案得到的计启示

第一条启示是先判断内容关系，再决定是否用标签页。标签页适合承载并列分组的内容，适合用来切换类别、频道、主题、筛选结果。它不适合承载必须按顺序阅读的内容，比如章节、步骤流程、教程、协议条款、长文阅读。内容一旦需要连续性，就应该把连续性放在页面结构里，而不是拆成多个标签。

第二条启示是不要用标签页充当翻页。标签页的切换是横向跳转，它的设计目标是快速对比与探索，而不是线性推进。如果你的设计意图是上一页下一页那种阅读推进，就该使用真正的分页或章节导航，例如目录、上一章下一章按钮、进度指示，或者在同一页面通过滚动承载完整阅读。

第三条启示是顺序内容要用排版去建立层级。对于章节或步骤，更好的做法是在同一页面里用文字层级和留白组织结构，例如清晰的标题层级、段落间距、分隔、编号、锚点目录。这样用户可以一口气读下去，理解链条不会断，同时也能随时定位自己所在的位置。

第四条启示是把控件语义当成硬约束。标签页在语义上就是并列板块切换器。只要内容关系不是并列，而是递进或顺序，就应该换一种结构。控件语义和内容语义一致，界面会更自解释，用户也更容易读懂并完成任务。