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

这是来自谷歌 M3 的一个案例,用来对比控件使用是否规范。它把同一个组件放在不同场景里,展示了正确与错误的边界。下面就以这个例子为切口,深入拆解一下,为什么标签页在不同使用场合下会有不同的禁忌,以及这些禁忌背后真正要遵守的设计逻辑。
这个案例的问题,核心不是标签页做得好不好看,而是它被用在了不适合的内容类型上。右侧错误示例把标签页当成章节或翻页工具,用来承载必须按顺序阅读的内容。这样做会在阅读连续性、内容结构表达、交互预期三个层面制造阻力。
首先是阅读连续性被切断。章节、教程步骤、长文阅读这些内容,用户的心智模型是从上到下逐段推进,上一段的信息会自然成为下一段的上下文。把它拆进多个标签页,相当于强行把一条连续的阅读路径切成几段。用户每读到一个段落,就要把注意力抬到顶部,判断自己该点哪个标签,再回到正文继续找位置。阅读节奏被频繁打断,理解成本会明显上升。
其次是层级关系表达错位。标签页更擅长表达并列分组,它传达的是这一页和那一页是同一层级的不同类别。章节和步骤却不是并列关系,它们天然有先后、有递进、有承接。用标签页承载章节,会让界面在结构上说谎。用户会误以为各章是可随意切换的并列模块,而不是需要连续阅读的内容链条。结果就是用户更容易跳读、漏读,也更难形成完整理解。
第三是交互预期被误导。标签页的常见用法是快速切换类别,例如音乐里的不同分类、设置里的不同分区。用户会期待点一下立即切换内容,且切换成本很低。把它用在长文或章节上,用户一边切换一边承受重排版和重定位,还要重新建立上下文,这会让标签页变得像翻页,但又比翻页更费劲。更糟的是,标签数量一多,顶部区域会拥挤,标题还容易被截断,用户甚至连自己在哪一章都看不清。
所以右侧错误示例的问题可以归结为一句话。用并列分组的控件去装顺序阅读的内容,界面结构和内容结构会互相打架。
左侧正确示例把标签页用于并列分组的内容,例如音乐里的不同类别。这样的内容天然适合用标签页,因为它满足标签页最擅长解决的三个点。
第一,它符合并列分类的结构。用户选择 Ambient 或 Soundscapes,本质是在同一层级里切换不同主题。两者之间没有必须按顺序阅读的关系,切换不会破坏理解链条。标签页用来表达这种同级分组,语义非常准确。
第二,它让浏览变得高效。分类内容的使用场景往往是快速扫视、试探性点击、来回对比。标签页提供了一个低成本的切换入口,用户可以立即看到不同分组的内容,而不需要在同一页里滚很久去找分界。
第三,它让信息架构一眼可见。标签本身就是一份导航地图,告诉用户这个页面有哪些内容板块。对探索型任务来说,这种可见的结构能明显降低迷路感,也能减少用户在列表里反复滚动的次数。
也就是说,正确示例并没有强调标签页本身多高级,而是让标签页回到了它最恰当的职责上。把相关内容清晰分组,提供快速切换,而不是承担阅读顺序。
第一条启示是先判断内容关系,再决定是否用标签页。标签页适合承载并列分组的内容,适合用来切换类别、频道、主题、筛选结果。它不适合承载必须按顺序阅读的内容,比如章节、步骤流程、教程、协议条款、长文阅读。内容一旦需要连续性,就应该把连续性放在页面结构里,而不是拆成多个标签。
第二条启示是不要用标签页充当翻页。标签页的切换是横向跳转,它的设计目标是快速对比与探索,而不是线性推进。如果你的设计意图是上一页下一页那种阅读推进,就该使用真正的分页或章节导航,例如目录、上一章下一章按钮、进度指示,或者在同一页面通过滚动承载完整阅读。
第三条启示是顺序内容要用排版去建立层级。对于章节或步骤,更好的做法是在同一页面里用文字层级和留白组织结构,例如清晰的标题层级、段落间距、分隔、编号、锚点目录。这样用户可以一口气读下去,理解链条不会断,同时也能随时定位自己所在的位置。
第四条启示是把控件语义当成硬约束。标签页在语义上就是并列板块切换器。只要内容关系不是并列,而是递进或顺序,就应该换一种结构。控件语义和内容语义一致,界面会更自解释,用户也更容易读懂并完成任务。
有0人收藏了本文