Back to Details

hig-components-layout

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Apple HIG: Layout and Navigation Components

Apple HIG：布局与导航组件

Check for 
.claude/apple-design-context.md
before asking questions. Use existing context and only ask for information not already covered.
提问前请先查看
.claude/apple-design-context.md
文件。请基于已有上下文进行提问，仅询问未被覆盖的信息。

Key Principles

核心原则

  1. Organize hierarchically. Structure information from broad categories to specific details. Sidebars for top-level sections, lists for browsable items, detail views for individual content.
  2. Use standard navigation patterns. Tab bars for flat navigation between peer sections (iPhone). Sidebars for deep hierarchical navigation (iPad, Mac). Match the pattern to the information architecture and platform.
  3. Adapt to screen size. Three-column on iPad collapses to single-column on iPhone. Use size classes and adaptive APIs (NavigationSplitView) for automatic adaptation.
  4. Support multitasking on iPad. Respond gracefully to Split View, Slide Over, and Stage Manager. Test at every split ratio and size class transition.
  5. Maintain spatial consistency on visionOS. Windows, volumes, and ornaments in shared space. Position predictably. Use ornaments for toolbars and controls without occluding content.
  6. Use scroll views for overflow content. Enable paging for discrete content units. Support pull-to-refresh where appropriate. Respect safe areas.
  7. Keep navigation predictable. Users should always know where they are, how they got there, and how to go back. Use back buttons, breadcrumbs, and clear section titles.
  8. Prefer system components. UINavigationController, UISplitViewController, NavigationSplitView, and TabView provide built-in adaptivity, accessibility, and state restoration.
  1. 层级化组织。将信息从宽泛的类别到具体细节进行结构化。使用Sidebar（侧边栏）展示顶级板块，列表展示可浏览项，详情视图展示单个内容。
  2. 使用标准导航模式。Tab Bar（标签栏）适用于iPhone上同级板块间的扁平化导航。Sidebar（侧边栏）适用于iPad、Mac上的深度层级导航。需根据信息架构和平台选择匹配的模式。
  3. 适配屏幕尺寸。iPad上的三栏布局在iPhone上会折叠为单栏布局。使用尺寸类和自适应API（如NavigationSplitView）实现自动适配。
  4. 支持iPad多任务处理。需优雅适配Split View（分栏视图）、Slide Over（滑过视图）和Stage Manager（台前调度）。在每个分栏比例和尺寸类切换场景下都需进行测试。
  5. 在visionOS上保持空间一致性。在共享空间中合理使用窗口、卷和Ornaments（装饰控件）。位置需可预测。使用Ornaments放置工具栏和控件，避免遮挡内容。
  6. 使用Scroll View（滚动视图）处理溢出内容。为离散内容单元启用分页功能。在合适的场景支持下拉刷新。需遵循安全区域规范。
  7. 保持导航可预测。用户应始终清楚自己所处位置、到达路径以及返回方式。使用返回按钮、面包屑导航和清晰的板块标题。
  8. 优先使用系统组件。UINavigationController、UISplitViewController、NavigationSplitView和TabView等组件内置了自适应、无障碍访问和状态恢复功能。

Reference Index

参考索引

ReferenceTopicKey content
sidebars.mdSidebarsSource lists, selection state, collapsible sections, iPad/Mac patterns
column-views.mdColumn ViewsFinder-style browsing, progressive disclosure through columns
outline-views.mdOutline ViewsExpandable hierarchies, disclosure triangles, tree structures
split-views.mdSplit ViewsTwo/three column layouts, NavigationSplitView, adaptive collapse
tab-views.mdTab ViewsSegmented tabs, page-style tabs, macOS tab grouping
tab-bars.mdTab BarsBottom tab bars (iOS), badge counts, max tab count
scroll-views.mdScroll ViewsPaging, scroll indicators, content insets, pull-to-refresh
windows.mdWindowsmacOS/visionOS window management, sizing, full-screen, restoration
panels.mdPanelsInspector panels, utility panels, floating panels, macOS conventions
lists-and-tables.mdLists and TablesPlain/grouped/inset-grouped styles, swipe actions, section headers
boxes.mdBoxesContent grouping containers, labeled boxes, macOS grouping
ornaments.mdOrnamentsvisionOS toolbar attachments, positioning, visibility
参考文档主题核心内容
sidebars.md侧边栏源列表、选中状态、可折叠板块、iPad/Mac端模式
column-views.md列视图Finder风格浏览、通过列逐步展示内容
outline-views.md大纲视图可展开层级、disclosure triangles（展开三角标）、树形结构
split-views.md分栏视图双栏/三栏布局、NavigationSplitView、自适应折叠
tab-views.md标签视图分段标签、页面式标签、macOS标签分组
tab-bars.md标签栏iOS底部标签栏、角标计数、最大标签数量
scroll-views.md滚动视图分页、滚动指示器、内容内边距、下拉刷新
windows.md窗口macOS/visionOS窗口管理、尺寸调整、全屏、状态恢复
panels.md面板检查器面板、实用工具面板、浮动面板、macOS规范
lists-and-tables.md列表与表格普通/分组/内嵌分组样式、滑动操作、板块标题
boxes.md容器框内容分组容器、带标签容器框、macOS分组规范
ornaments.md装饰控件visionOS工具栏附件、位置布局、可见性

Navigation Pattern Selection

导航模式选择

App StructureRecommended PatternPlatform Adaptation
3-5 peer top-level sectionsTab BariPhone: bottom tab bar. iPad: sidebar (
.sidebarAdaptable
, iPadOS 18+). Mac: sidebar or toolbar tabs
Deep hierarchical contentSidebar + NavigationSplitViewiPhone: single column stack. iPad: two/three columns. Mac: full multi-column
Deep file/folder treeColumn ViewMac: Finder-style. iPad: adaptable. iPhone: push navigation
Flat list with detailSplit View (two column)iPhone: push/pop stack. iPad/Mac: primary + detail columns
Document-based with inspectorsWindow + PanelsMac: main window with inspector. iPad: sheet or popover
Spatial app with toolsWindow + OrnamentsvisionOS: ornaments on window. Other platforms: toolbars
应用架构推荐模式平台适配
3-5个同级顶级板块标签栏iPhone：底部标签栏。iPad：侧边栏（
.sidebarAdaptable
，iPadOS 18+）。Mac：侧边栏或工具栏标签
深度层级内容侧边栏 + NavigationSplitViewiPhone：单栏栈式导航。iPad：双栏/三栏布局。Mac：完整多栏布局
深度文件/文件夹树列视图Mac：Finder风格。iPad：自适应布局。iPhone：推入式导航
扁平化列表带详情分栏视图（双栏）iPhone：推入/弹出栈式导航。iPad/Mac：主栏 + 详情栏
带检查器的文档类应用窗口 + 面板Mac：主窗口搭配检查器。iPad：表单页或弹出框
带工具的空间应用窗口 + 装饰控件visionOS：窗口上的装饰控件。其他平台：工具栏

Layout Adaptation Checklist

布局适配检查清单

  • Compact width (iPhone portrait): Navigation collapses to single stack? Tab bars visible?
  • Regular width (iPad landscape, Mac): Navigation expands to sidebar + detail? Space used well?
  • Multitasking (iPad): Adapts at every split ratio? Works in Slide Over?
  • Accessibility: Supports Dynamic Type at all sizes? VoiceOver order logical?
  • Orientation: Content reflows between portrait and landscape?
  • visionOS: Windows positioned ergonomically? Ornaments accessible? Depth meaningful?
  • 紧凑宽度（iPhone竖屏）：导航是否折叠为单栈式？标签栏是否可见？
  • 常规宽度（iPad横屏、Mac）：导航是否展开为侧边栏 + 详情视图？空间是否得到合理利用？
  • iPad多任务：是否适配所有分栏比例？在Slide Over（滑过视图）中能否正常工作？
  • 无障碍访问：是否支持所有尺寸的动态字体？VoiceOver朗读顺序是否符合逻辑？
  • 横竖屏切换：内容能否在横竖屏间重新流式布局？
  • visionOS：窗口位置是否符合人体工程学？装饰控件是否可访问？深度效果是否有意义？

Output Format

输出格式

  1. Recommended navigation pattern with rationale for the app's information architecture.
  2. Layout hierarchy from root container down (e.g., TabView > NavigationSplitView > List > Detail).
  3. Platform adaptation across targeted platforms and size classes.
  4. Size class behavior at each transition.
  1. 推荐导航模式：结合应用信息架构给出理由。
  2. 布局层级：从根容器到子组件的层级结构（例如：TabView > NavigationSplitView > List > Detail）。
  3. 平台适配：针对目标平台和尺寸类的适配方案。
  4. 尺寸类行为：在每个尺寸类切换节点的表现。

Questions to Ask

待询问问题

  1. What is the app's information architecture? (Sections, hierarchy depth, top-level categories?)
  2. How many top-level sections?
  3. Which platforms?
  4. Need multitasking on iPad?
  5. SwiftUI or UIKit?
  1. 应用的信息架构是什么？（板块、层级深度、顶级类别？）
  2. 有多少个顶级板块？
  3. 目标平台有哪些？
  4. 是否需要支持iPad多任务？
  5. 使用SwiftUI还是UIKit？

Related Skills

相关Skill

  • hig-foundations -- Layout spacing, margins, safe areas, alignment
  • hig-platforms -- Platform-specific navigation conventions
  • hig-patterns -- Multitasking, full-screen, and launching patterns
  • hig-components-content -- Content displayed within layout containers
Built by Raintree Technology · More developer tools
  • hig-foundations -- 布局间距、边距、安全区域、对齐方式
  • hig-platforms -- 平台专属导航规范
  • hig-patterns -- 多任务、全屏与启动模式
  • hig-components-content -- 布局容器内的内容展示
由Raintree Technology开发 · 更多开发者工具