Apple HIG:标签栏(Tab bars)

2026年5月20日
Apple HIG
Apple HIG
苹果人机界面设计指南
已累计原创 20 篇文章查看全部

标签页栏可让用户在 App 的各顶层部分间导航。

标签页栏可帮助用户理解 App 提供的不同类型信息或功能,还可让用户在视图的不同部分之间快速切换,同时保留各个部分中的当前导览状态。


1. 最佳实践

使用标签页栏支持导航,而非提供操作。标签页栏可让用户在 App 的不同部分之间导航,如“时钟” App 中的“闹钟”、“秒表”和“计时器”标签页。如果你需要提供可操作当前视图中元素的控制,请改用工具栏

确保当用户导航至 App 的不同部分时,标签页栏可见。如果你隐藏标签页栏,用户可能会忘记自己处于 App 中的哪个区域。模态视图覆盖标签页栏的情况除外,因为模态是暂时的自含式内容。

使用适当数量的标签页来帮助用户在你的 App 中导航。作为 App 层级结构的表示方式,在更多标签页带来的复杂性和用户频繁访问每个部分的需求之间权衡非常重要;请记住通常标签页越少,导航越轻松。对于包含复杂信息结构的 App,应在可用时考虑使用边栏或可变为边栏作为替代的标签页栏。

避免溢出标签页。根据设备尺寸和方向,可见标签页的数量可能比标签页总数量要小。如果水平空间限制了可见标签页的数量,则 iOS 和 iPadOS 中的末尾标签页会变为“更多”标签页,在单独列表中显示剩余项目。“更多”标签页会让用户难以前往和注意到隐藏标签页上的内容,因此请限制在 App 中出现这种情况。

不要停用或隐藏标签页栏按钮,即使在其内容不可用时。如果让标签页栏按钮在某些情况下可用,但在其他情况下不可用,App 的界面会显得不稳定和不可预测。如果某个部分为空,请解释其内容不可用的原因。

包括标签页标签以帮助导览。标签页标签会出现在标签页栏图标的下方或旁边,可通过清晰地描述标签页所含内容的类型或功能来辅助导览。尽可能使用单个字词。

考虑使用 SF 符号提供熟悉的可缩放标签页栏图标。使用 SF 符号时,标签页栏图标会自动适配不同的环境。例如,标签页栏可以是常规型或紧凑型,具体取决于设备和方向。紧凑视图下,标签页栏图标会显示在标签页标签的上方,而在常规视图下,图标和标签会并排显示。为了与平台保持一致,请优先使用实心符号或图标。

若要创建自定义标签页栏图标,请参阅 Apple 设计资源了解标签页栏图标尺寸。

使用标记指示有关键信息可用。你可以在标签页上显示一个标记(包含白色文本和数字或感叹号的红色椭圆),以指示该部分有值得用户注意的全新或更新信息。为关键信息保留标记以便其影响和含义不被削弱。有关指南,请参阅通知


Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro

0 人收藏了本文

为 Gemini 应用绘制插画体系为 Gemini 应用绘制插画体系
Material3设计规范:轮播(Carousel)Material3设计规范:轮播(Carousel)
Apple HIG:页面控制(Page controls)Apple HIG:页面控制(Page controls)
Apple HIG:提醒(Alerts)Apple HIG:提醒(Alerts)
Apple HIG:操作表单(Action sheets)Apple HIG:操作表单(Action sheets)
Apple HIG:进度指示符(Progress indicators)Apple HIG:进度指示符(Progress indicators)
Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Apple HIG:材质(Materials)Apple HIG:材质(Materials)