Apple HIG:布局(Layout)

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

适配各种环境的一致布局可帮你打造更友好的体验,还有助于用户在其所有设备上享用喜爱的 App 和游戏。

App 的布局可帮助用户从打开 App 的那一刻起就沉浸在内容之中。用户期望控制和内容之间存在自己熟悉的关系以帮助其使用和发现 App 的功能,而设计出能够充分利用这一点的布局可让 App 完美契合各个平台。

Apple 提供了模板、指南和其他资源以帮助你整合 Apple 技术并设计出可在所有 Apple 平台上运行的 App 和游戏。请参阅 Apple 设计资源


1. 最佳实践

将相关项目分组,帮助用户找到想要的信息。例如,你可以使用负空间、背景形状、颜色、材质或分隔线来显示互相关联的元素以及将信息分隔到不同的区域中。这样操作时,请确保内容与控制之间具有明显区别。

为重要信息留出足够空间来使其易于找到。用户希望立即看到最重要的信息,因此不要将其与不重要的细节挤在一起以妨碍查看。你可以在窗口的其他部分中提供次要信息,或者将其包括在附加视图中。

扩展内容以填满屏幕或窗口。确保背景和全屏插图延伸至显示屏边缘,同时确保可滚动布局能持续滚动至设备屏幕的底部和两侧。控制以及像边栏和标签页栏等导览组件会显示在内容之上而非显示在同一平面中,因此布局时考虑到这一点十分重要。

当内容未占满整个窗口时,请使用背景扩展视图在屏幕任一侧的控制层后面提供内容外观,例如在边栏或检查器下方。


2. 视觉层次

将控制和内容区分开来。充分利用 Liquid Glass 材质,为控制提供在 iOS、iPadOS 和 macOS 间显示一致的独特外观。请使用滚动边缘效果而非背景来提供内容和控制区域之间的过渡。有关指南,请参阅滚动视图

项目放置应传达其相对重要性。用户通常按阅读顺序开始查看项目(即从上到下和从前端到后端),因此将最重要的项目放在窗口、显示或视场顶部和前端附近一般效果不错。请注意,阅读顺序因语言而异,请在设计时将从右到左的语言纳入考量。

将组件互相对齐,让其更易于浏览并传达出条理性和层次感。对齐可让 App 看起来整洁有序,还可帮助用户在滚动或移动视线时跟踪内容,从而能够更容易找到信息。对齐还可搭配缩进来帮助用户理解信息层级结构。

利用渐进显示来帮助用户发现当前隐藏的内容。例如,如果无法一次显示大集合中的所有项目,你需要指明当前还有不可见的更多项目。取决于不同平台,你可以使用显示控制或者显示项目的一部分,以提示用户可通过与视图交互(如滚动)来显示更多内容。

通过在控制四周提供足够的空间并将其分组到合理的分区,提高控制的易用性。如果不相关控制之间的距离过近(或者与其他内容挤在一起),用户可能很难区分这些控制或者了解其用途,从而导致 App 或游戏难以操作。有关指南,请参阅工具栏


3. 适配性

每款 App 和游戏在设备或系统环境发生变化时均需进行适配。在 iOS、iPadOS、Apple tvOS 和 visionOS 中,系统定义了一系列特征以描述可能影响 App 或游戏外观的各种设备环境。使用 SwiftUI 或“自动布局”可帮助你确保界面动态适配这些特征和其他环境变化;如果不使用这些工具,则需要使用替代方法进行适配。

以下是你需要处理的最常见设备和系统变化因素:

  • 不同的设备屏幕尺寸、分辨率和色彩空间
  • 不同的设备方向(竖排/横排)
  • 各种系统功能,例如灵动岛和相机控制
  • iPad 上的外接显示器支持、缩放显示和大小可调整的窗口
  • 动态字体文字大小更改
  • 基于区域设置的国际化功能(如从左到右/从右到左布局方向、日期/时间/数字格式调整、字体变体和文本长度)

设计完美适应环境变化且在视觉上保持一致的布局。用户希望你打造的体验在其旋转设备、调整窗口大小、添加其他显示器或切换到不同设备时运行良好并且使用顺手。你可以遵循系统定义的安全区、外边距和指南(可用时),并指定布局修饰符来微调界面中视图的放置,从而帮助确保界面的高适配性。

事先考虑文字大小变化。用户希望在选取不同文字大小时,App 和游戏都能响应。如果支持动态字体这项功能(可让用户在 iOS、iPadOS、Apple tvOS、visionOS 和 watchOS 中选取可见文本的字号),当用户调整文字大小时,你的 App 或游戏可适当响应。若要在基于 Unity 的游戏中支持动态字体,请使用 Apple 的辅助功能插件。有关在你的 App 中显示文本的指南,请参阅字体排印

在多台设备上使用不同的方向、本地化语言和文字大小预览 App。首先测试使用最大和最小大小布局的体验版本可简化测试过程。虽然通常最好在实际设备上预览广色域等特性,但你可以使用 Xcode Simulator 检查截断或其他布局问题。例如,如果你的 iOS App 或游戏支持横排模式,你可以使用 Simulator 确保无论设备向左还是向右旋转,布局看起来都很美观。

必要时,缩放插图以响应显示更改。例如,在不同环境(如不同宽高比的屏幕)中查看 App 或游戏可能导致插图看起来被裁剪、以信箱模式(上下加框)或邮筒模式(左右加框)显示。发生这种情况时,请勿更改插图的宽高比,而应缩放插图以保持重要的视觉内容可见。在 visionOS 中,当窗口沿 z 轴移动时,系统会自动对其进行缩放


4. 指南和安全区

布局指南定义了一个矩形区域,可帮你在屏幕上放置、对齐和间隔内容。系统包括预定义的布局指南,可让你轻松在内容周围应用标准外边距,以及限制文本宽度以优化可读性。你还可以自定义布局指南。

安全区定义了视图内不会被工具栏、标签页栏或者窗口可能提供的其他视图遮挡的区。安全区对于避开设备的交互和显示特性(如 iPhone 上的灵动岛或部分 Mac 机型上的相机防护罩)而言必不可少。

遵循每个平台中的关键显示和系统特性。如果 App 或游戏不适应此类特性,则会在平台中显得格格不入且用户可能更难以上手。除了帮助你避免显示和系统特性,安全区还可帮助你考虑诸如栏等交互式组件,并在尺寸更改时动态调整内容位置。

有关包括各平台适用的指南和安全区的模板,请参阅 Apple 设计资源


5. 平台考量因素

5.1 iOS

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)