1/4
2026/6/24 · 9:16

Day 15 · Tab Bar 标签栏:同层切换,不换任务

Tab Bar / Tabs 适合在同一层级的内容之间快速切换。本期 4 张图讲清它与 Segmented / Bottom Nav 的边界、4 种常见形态,以及使用口诀:同级切换,才用 Tabs。

图集

Tab Bar / Tabs 适合把同一层级的内容分成几组,让用户在不离开当前上下文的情况下快速切换;Material Design 把 Tabs 用来组织不同屏幕、数据集或交互中的内容类别。1
别把所有横向按钮都叫 Tab。Ant Design 说明 Tabs 用于在不同视图之间探索和切换;它也把 Card Tabs、Normal Tabs 和 Radio.Button 分给不同场景。2 如果入口是应用的顶层模块,Apple HIG 的 Tab Bar 更接近「在 App 主区之间导航」的语义,设计时要和页面内 Tabs 区分开。3
常见形态可以按层级和容量来记:Primary Tabs 放主内容入口,Secondary Tabs 放内容内分组,Scrollable Tabs 处理较多选项,Card Tabs 适合多视图、可关闭的工作区。
判断口诀:同级切换,才用 Tabs。若用户在走步骤流程,用 Stepper;若只是一次性操作,用按钮或表单控件;若是应用主模块入口,优先考虑底部导航或平台规范里的 Tab Bar。

评论

登录后可发表评论。