编者按：这是 iPhone Duo 发布之后，苹果官方在设计指南（HIG）当中为 iPhone Duo 的视觉和交互设计的中文翻译版，其中包含整套交互设计的核心逻辑，基本的结构和需要注意的事项，以及为了适配 iPhone Duo 而需要调整和适配的 UI 控件相关的链接。希望对于你能有帮助。
为 iPhone Duo 设计的 App 应当顺畅适配两块显示屏，在设备开合时提供连续的使用体验。
iPhone Duo 配有两块屏幕，每块屏幕各有一个前置摄像头。机身通过中央铰链开合，用户可以用不同方式握持或摆放设备。两块屏幕的尺寸不同，设备又有多种使用姿态，因此布局能否灵活适配就更加重要。如果 App 使用标准系统组件，并且已经能够适应尺寸变化，只需少量调整，就能自动适配设备的各种姿态。开发说明见为 iPhone Duo 准备你的 App。
外屏
内屏
iPhone Duo 采用了新的设备形态，但它仍然是一部 iPhone。为 iOS 设计中的设计模式和最佳实践同样适用。
iPhone Duo 配有内屏和外屏。设备合上时，用户通过外屏操作，系统将工具栏和标签栏放在屏幕侧边，尽可能为内容留出纵向空间。设备展开并横向使用时，控件仍放在侧边，让用户在内外屏之间切换时保持一致的操作体验。
中央铰链让设备能够以不同方式握持和摆放。设备折叠时，铰链也会影响内容的可用显示空间。
外屏的前置摄像头位于屏幕一角，始终可见，并与侧边控件沿同一条纵向轴线排列。内屏的前置摄像头位于屏幕后方，未启用时不会显现。
外屏结构图：铰链与外屏前置摄像头的位置
内屏结构图：铰链与内屏前置摄像头的位置
用户可以用多种方式握持或摆放 iPhone Duo，例如像拿着一本半开的书一样使用它，将它放在桌面等平面上，或让机身边缘接触平面，把设备立起来。
适配这些姿态时，无须为每一种姿态单独设计一套布局。使用「尺寸类」（Size classes），就能让 App 随着可用尺寸的变化自动调整。为外屏设计紧凑宽度布局，为内屏设计常规宽度布局，可以为各种姿态的适配打好基础。尺寸发生变化时，应在现有布局的基础上利用新增空间展开内容，避免重新设计整套界面。详见下文「动态布局」。
你可以通过 Xcode 中的 Device Hub 预览 App 在 iPhone Duo 上的界面，并检查它在不同设备姿态下的显示效果。
让 App 能够适应尺寸变化。iPhone Duo 配有两块屏幕，支持多种使用姿态和分屏多任务，App 的可用尺寸也会随之变化。使用尺寸类、布局边距和安全区内边距安排控件与内容。避免将布局宽度写死，也不要让布局依赖某一块特定屏幕。
保持内外屏的使用体验一致。在两块屏幕之间切换时，App 的功能和各界面元素的状态应当保持一致，信息层级也应延续。如果内容适合并排呈现，可以在较大的内屏上同时显示相邻的两个层级。例如，设备合上时，「邮件」显示邮件列表或某一封邮件的正文；设备展开后，列表和正文便可以并排显示。
「邮件」在外屏：显示邮件正文
「邮件」在内屏：左侧显示邮件列表，右侧显示正文
设备姿态改变时，保持功能一致。界面在适配可用空间的过程中，部分控件可能被收进溢出的菜单，内容也可能移动或改变大小。无论用户怎样握持或观看，都应该能找到并使用相同的控件和内容。具体的设计方式，详见「动态布局」与「纵向控件」的相关章节。
遵循系统的纵向布局，安排工具栏、标签栏和导航控件。与其他 iPhone 相比，Duo 的外屏更宽、更矮，因此系统将控件移到侧边，为内容留出纵向空间，同时也要适应屏幕的不对称布局。内屏横向使用时，控件也保持在侧边，让用户切换屏幕后，仍能在相同的高度范围内继续操作。使用标准系统组件，即可获得这种布局，你也可以根据 App 的需要进一步调整。详见「纵向控件」的相关章节。
确保游戏在各种设备姿态下都能正常游玩。你可以将游戏固定为竖屏或横屏，但设备姿态发生改变时，游戏画面仍应铺满屏幕。可用尺寸变化时，尽量保持文字和控件的大小一致。优先调整画面的宽高比，避免在上下或左右留出黑边。如果确实无法避免，可以在这些区域加入美术素材，使整体画面看起来仍然铺满屏幕。更多建议见为游戏设计。
为 iPhone Duo 设计布局时，需要考虑不同的硬件和软件配置。与其他 iOS 设备一样，应使用布局边距和安全区内边距安排界面，避免固定宽度，也不要让布局依赖某一块特定屏幕。
布局的一般建议见布局；边距与安全区相关资源见Apple 设计资源；开发说明见 safeAreaInsets（SwiftUI）
设计 Duo 的布局时，除了通常需要考虑的安全区，还要注意「保留区域」（reserved regions）。这些是屏幕上需要让内容避开，或通过调整组件布局来适配的区域。如果你曾为 iPad 窗口控件等类似区域调整过布局，这种处理方式应该很熟悉。
iPhone Duo 上的保留区域包括：
- 外屏前置摄像头区域。这个区域始终存在，并可扩展为显示实时活动的灵动岛。当控件沿屏幕侧边排列时，系统会自动为该区域留出空间，并调整周围元素的位置。
- 内屏前置摄像头区域。这个区域只在摄像头启用时出现。摄像头未启用时不会显现；启用后，界面会向旁边让开，显示出摄像头的位置。
- 折叠区域。这个区域是否需要避让，取决于设备当前的使用姿态。设备部分展开时，屏幕中央会弯曲；除去中央这部分折叠区域，其余空间便分成了几个可用区域。
外屏保留区域：外屏摄像头区域
内屏保留区域：折叠区域与内屏摄像头区域
许多系统组件会自动适配保留区域。提示框（alert）、上下文菜单和模态面板（sheet）会移动位置，避开折叠区域；分屏视图等较大的组件则会调整各栏的宽度和边距，适应内屏两侧对称的空间。对于自定义组件，可以通过 ReservedRegion（SwiftUI） 或 UIView.ReservedRegion（UIKit） 将内容移出保留区域。
设备折叠时，相应地调整布局。优先使用能够自动适配的布局容器。例如，「备忘录」的分屏视图会在设备折叠时，调整各个窗格的宽度，让内容保持清晰可见。网格布局适宜采用偶数列，便于将内容分到屏幕两侧。如果系统没有自动移开重要元素，可以通过保留区域 API 让它们避开中央的折叠区域。
「备忘录」在内屏完全展开时：左侧窗格窄于右侧窗格
「备忘录」在内屏半折时：两侧窗格等宽
设备折叠时，避免大幅改动布局。为确保元素看得清，也容易点按，只移动有必要调整的部分。控件突然消失，或一下子移到很远的位置，都会让用户更难找到它们。因此，应优先做小幅调整，尽量保留原有排列。
在 iPhone Duo 上，分屏视图可以在内屏中展开为多个窗格，在外屏中收起为单个窗格。它的适配方式与其他 iPhone 相同：在常规宽度下展开，在紧凑宽度下收起。使用标准系统组件构建的分屏视图，会自动适配保留区域，通过调整宽度和边距避开折叠区域。
设计建议见分屏视图；开发说明见 NavigationSplitView（SwiftUI） 与 UISplitViewController（UIKit）。
排列视图（arrangement view）是一种布局容器，其中包含一个主视图和一个次视图。它会根据屏幕尺寸、方向及保留区域，自动调整这两个视图的排列方式。
排列视图有两种类型：分列与叠加。
- 分列排列（split arrangement）：将容器内的空间分给主视图和次视图。容器较宽时，两个视图左右并排；容器较高时，两个视图上下排列。
- 叠加排列（overlay arrangement）：将主视图叠在次视图之上。屏幕部分折叠时，两个视图移到折叠区域两侧，分别占据一侧；在其他状态下，主视图叠在次视图之上显示。
分列排列：主视图占据左侧一半，次视图占据右侧一半
叠加排列：次视图铺满屏幕，主视图在底部悬浮其上
你可以限定分列排列采用的方向，例如只允许左右排列或只允许上下排列。使用叠加排列时，如果不需要显示次视图，也可以将它收起。
开发说明见 ArrangementView（SwiftUI） 与 UIArrangementViewController（UIKit）。
如果现有布局与某一种排列方式相近，可以考虑直接使用排列视图。通过 HStack 或 VStack 将两个视图左右或上下并排的布局，可以改用分列排列；通过 ZStack 将一个视图叠在另一个视图之上的布局，可以改用叠加排列。
将导航容器放在排列视图的外层。排列视图负责安排内容的位置，不负责页面导航。因此，应由导航分屏视图、标签视图等导航容器包住排列视图，避免把这些导航容器放进排列视图内部。
在 iPhone Duo 上，通常位于屏幕顶部或底部的工具栏、标签栏和导航控件会移到侧边，为内容留出纵向空间，也让用户更容易够到控件。内屏竖向使用时是例外：此时纵向空间充足，可以保留常见的横向栏布局。
屏幕侧边同时排列着系统和 App 的界面元素，包括灵动岛、状态栏、工具栏（含导航按钮）和标签栏。
外屏纵向控件布局：自上而下依次为灵动岛、状态栏、工具栏、标签栏
两个 App 通过分屏多任务并排显示在内屏时，各自的控件会放在靠近屏幕外缘的一侧：左边 App 的控件在左，右边 App 的控件在右。
两个 App 在内屏分屏多任务：各自控件位于自身外沿
纵向排列的控件以硬件位置为参照，在外屏上与摄像头保持相同的相对位置。即使使用从右向左书写的语言，这些控件也仍在原来的一侧。
布局时，要考虑单侧控件带来的不对称。控件占据屏幕的一侧边缘，留给内容的空间也会相应偏向另一侧。应根据安全区安排内容，避免被控件遮挡。两个 App 在内屏分屏显示时，控件也可能出现在另一侧边缘，布局同样需要适配。
切换设备姿态时，尽量保持控件之间的相对位置。有些姿态下，控件会从侧边的纵向排列改为横向排列，可用空间也会变化。应尽量延续原有的位置关系，让用户换一种拿法后，依然知道该去哪里寻找操作。
遵循工具栏操作项的标准排列顺序。纵向排列时，最上方放置「返回」「关闭」等主要导航控件，其后是「完成」等重要操作。这样既能延续熟悉的导航方式，也能让重要操作保持在容易够到的位置。其余操作项应保留原有分组；系统会在原本来自顶部栏和底部栏的操作项之间留出纵向间隔，帮助用户区分。
优先显示常用的工具栏操作项。空间不足时，系统默认从底部开始，依次向上将操作项收进溢出菜单。为操作项设置显示优先级，可以改变收起的先后顺序。通常先按整个分组设置；如果需要更精细的控制，再对组内单个操作项分别设置。开发说明见 ToolbarItemVisibilityPriority（SwiftUI） 和 UIBarButtonItemVisibilityPriority（UIKit）。
应优先保留「邮件」中的「撰写」和「备忘录」中的「新建备忘录」等常用操作。显示重要状态的控件，例如带角标的操作项，也应尽量保留在界面上，便于用户一眼看见。
通常应保留系统默认的栏位置。沿屏幕侧边纵向排列控件，是 iPhone Duo 的核心交互模式之一。将控件放在用户熟悉的位置，有助于他们快速上手你的 App，也能让不同 App 的使用方式保持一致。
界面不需要工具栏或标签栏时，可以考虑利用屏幕的全部宽度。以画面呈现为主、无需滚动的沉浸式界面，适合采用这种布局，前提是内容不会与灵动岛或状态栏相互遮挡。例如，「计算器」就利用了屏幕的全部宽度。也可以在同一界面中结合两种布局：背景图或页头铺满宽度，可滚动内容则与屏幕边缘保持一定距离。
计算器在 iPhone 16（左）与 iPhone Duo 外屏（右）的布局对比：前者四列五行按钮，后者五列四行
将相关的工具栏操作项编成一组，让系统处理间距。通过 ToolbarItemGroup（SwiftUI） 或 UIBarButtonItemGroup（UIKit） 创建分组后，系统会自动设置组内操作项之间、不同分组之间的间距，并随可用空间调整。请避免自行添加固定间距。详见工具栏。
将控件放在它所操作的内容附近。如果某组控件管理的内容不在布局的末尾侧（trailing），就应让控件留在对应的内容区域，避免一律移到屏幕侧边。控件靠近内容，用户才能清楚地看出它们之间的关系。例如，「邮件」中管理邮件列表的控件放在起始侧（leading）窗格上方，表明它们针对的是整个列表，而非某一封邮件的正文。
「邮件」内屏
除纯文字操作项外，每个工具栏操作项都应同时提供文字标题和图标（symbol）。这样，系统才能根据当前界面选择合适的显示形式。即使操作项平时只显示图标，也需要提供标题，以便在溢出菜单或展开显示时使用。开发说明见 Label（SwiftUI） 与 UIBarButtonItem（UIKit）。
尽量少用文字按钮。带文字的按钮会保留在横向栏中，因此，只要图标能够清楚表达含义，就优先使用图标。
空间有限时，根据当前页面的用途，决定优先保留工具栏还是标签栏。如果页面以浏览和导航为主，就将工具栏操作项收进溢出菜单，保留标签栏及主要页面的入口。这也是系统默认的栏压缩方式。
如果页面主要用于完成某项任务，则应收拢标签栏，优先保留完成任务所需的工具栏操作。这与其他 iPhone 上标签栏最小化时的处理方式一致。开发说明见 ToolbarVerticalCompressionBehavior（SwiftUI） 与 UIVerticalBarCompressionBehavior（UIKit）。
工具栏压缩：标签栏保留完整，工具栏项目收进溢出菜单
标签栏压缩：工具栏保留完整，标签栏收拢为单个控件
使用系统提供的溢出菜单。如果 App 已有自己的溢出菜单，应将其中的操作并入系统菜单，方便用户在同一个地方找到这些操作。省略号图标专用于溢出菜单，其他菜单应使用不同的图标。开发说明见 ToolbarOverflowMenu（SwiftUI） 与 additionalOverflowItems（UIKit）。
相关文档：
开发资料：
复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。
发评论！每天赢奖品
点击 登录 后，在评论区留言，系统会随机派送奖品
2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助 联系我们
用户体验增长
已累计诞生 795 位幸运星
发表评论
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓