Apple HIG:页面控制(Page controls)

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

页面控制显示一行指示符图像,其中每个都代表扁平列表中的一个页面。

指示符的滚动行可帮助用户导览列表以找到其想要的页面。页面控制可处理任意数量的页面,因而在用户可创建自定义列表的情况下特别有用。

页面控制默认显示为一系列小指示点,代表了可用的页面。实心圆点表示当前页面。这些圆点在视觉上始终保持等距,并且如果圆点太多导致窗口无法容纳,则会被裁剪。


1. 最佳实践

使用页面控制来表示页面有序列表之间的移动。页面控制不表示分层或无序的页面关系。对于更复杂的导览,请考虑改用边栏或拆分视图。

使页面控制在视图或窗口底部居中。为了确保用户始终知道页面控制的位置,请将其水平居中,并放置在视图底部附近。

虽然页面控制可处理任意数量的页面,但不要显示过多。超过约 10 个圆点便很难一眼看出数量。如果你的 App 需要显示 10 个以上相互对等的页面,请考虑使用不同的排列方式(例如网格),从而让用户按照任意顺序导览内容。


2. 自定义指示符

页面控制对所有指示符默认使用系统提供的圆点图像,但也可以显示独特的图像来帮助用户识别特定的页面。例如,“天气”使用 location.fill 符号来区分当前位置的页面。

如果能增强你的 App 或游戏,你可以提供自定义图像作为所有指示符的默认图像,还可以为特定页面提供不同的图像。

确保自定义指示符图像简单清晰。避免复杂的形状,不要包括负空间、文本或内部线条,因为这些细节可能会使图标在非常小的尺寸下显得模糊不清、难以辨认。考虑使用简单的 SF 符号作为指示符或设计自己的图标。有关指南,请参阅图标

仅自定义可增强页面控制整体含义的默认指示符图像。例如,如果你列出的每个页面都包含书签,则可以使用 bookmark.fill 符号作为默认指示符图像。

避免在一个页面控制中使用两个以上不同指示符图像。如果你的列表包含一个具有特殊含义的页面(如“天气”中的当前位置页面),你可以通过为其提供独特的指示符图像来使该页面易于查找。相反,使用多个独特图像来标记多个重要页面的页面控制则难以使用,因为用户必须要记住每个图像的含义。如果页面控制显示两种以上类型的指示符图像,即使每个图像都清晰,该控制往往也会显得杂乱无序。

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

0 人收藏了本文

为 Gemini 应用绘制插画体系为 Gemini 应用绘制插画体系
Material3设计规范:轮播(Carousel)Material3设计规范:轮播(Carousel)
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)
Material3设计规范:标签页(Tabs)Material3设计规范:标签页(Tabs)