[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-0671f564-157d-48d8-8c62-9cea1c116624":3,"$fRFBJNjcWGTUk3g9kuPLaEa7Wg2Uya0B_nXtDJw-5LZ0":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"0671f564-157d-48d8-8c62-9cea1c116624","hig-components-layout","苹果界面布局和导航组件的人机界面指南。","cat_design_ui","mod_design","sickn33,design","---\nname: hig-components-layout\ndescription: Apple Human Interface Guidelines for layout and navigation components.\nrisk: unknown\nsource: community\ndate_added: '2026-02-27'\n---\n\n# Apple HIG: Layout and Navigation Components\n\nCheck for `.claude\u002Fapple-design-context.md` before asking questions. Use existing context and only ask for information not already covered.\n\n## Key Principles\n\n1. **Organize hierarchically.** Structure information from broad categories to specific details. Sidebars for top-level sections, lists for browsable items, detail views for individual content.\n\n2. **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.\n\n3. **Adapt to screen size.** Three-column on iPad collapses to single-column on iPhone. Use size classes and adaptive APIs (NavigationSplitView) for automatic adaptation.\n\n4. **Support multitasking on iPad.** Respond gracefully to Split View, Slide Over, and Stage Manager. Test at every split ratio and size class transition.\n\n5. **Maintain spatial consistency on visionOS.** Windows, volumes, and ornaments in shared space. Position predictably. Use ornaments for toolbars and controls without occluding content.\n\n6. **Use scroll views for overflow content.** Enable paging for discrete content units. Support pull-to-refresh where appropriate. Respect safe areas.\n\n7. **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.\n\n8. **Prefer system components.** UINavigationController, UISplitViewController, NavigationSplitView, and TabView provide built-in adaptivity, accessibility, and state restoration.\n\n## Reference Index\n\n| Reference | Topic | Key content |\n|---|---|---|\n| [sidebars.md](references\u002Fsidebars.md) | Sidebars | Source lists, selection state, collapsible sections, iPad\u002FMac patterns |\n| [column-views.md](references\u002Fcolumn-views.md) | Column Views | Finder-style browsing, progressive disclosure through columns |\n| [outline-views.md](references\u002Foutline-views.md) | Outline Views | Expandable hierarchies, disclosure triangles, tree structures |\n| [split-views.md](references\u002Fsplit-views.md) | Split Views | Two\u002Fthree column layouts, NavigationSplitView, adaptive collapse |\n| [tab-views.md](references\u002Ftab-views.md) | Tab Views | Segmented tabs, page-style tabs, macOS tab grouping |\n| [tab-bars.md](references\u002Ftab-bars.md) | Tab Bars | Bottom tab bars (iOS), badge counts, max tab count |\n| [scroll-views.md](references\u002Fscroll-views.md) | Scroll Views | Paging, scroll indicators, content insets, pull-to-refresh |\n| [windows.md](references\u002Fwindows.md) | Windows | macOS\u002FvisionOS window management, sizing, full-screen, restoration |\n| [panels.md](references\u002Fpanels.md) | Panels | Inspector panels, utility panels, floating panels, macOS conventions |\n| [lists-and-tables.md](references\u002Flists-and-tables.md) | Lists and Tables | Plain\u002Fgrouped\u002Finset-grouped styles, swipe actions, section headers |\n| [boxes.md](references\u002Fboxes.md) | Boxes | Content grouping containers, labeled boxes, macOS grouping |\n| [ornaments.md](references\u002Fornaments.md) | Ornaments | visionOS toolbar attachments, positioning, visibility |\n\n## Navigation Pattern Selection\n\n| App Structure | Recommended Pattern | Platform Adaptation |\n|---|---|---|\n| 3-5 peer top-level sections | Tab Bar | iPhone: bottom tab bar. iPad: sidebar (`.sidebarAdaptable`, iPadOS 18+). Mac: sidebar or toolbar tabs |\n| Deep hierarchical content | Sidebar + NavigationSplitView | iPhone: single column stack. iPad: two\u002Fthree columns. Mac: full multi-column |\n| Deep file\u002Ffolder tree | Column View | Mac: Finder-style. iPad: adaptable. iPhone: push navigation |\n| Flat list with detail | Split View (two column) | iPhone: push\u002Fpop stack. iPad\u002FMac: primary + detail columns |\n| Document-based with inspectors | Window + Panels | Mac: main window with inspector. iPad: sheet or popover |\n| Spatial app with tools | Window + Ornaments | visionOS: ornaments on window. Other platforms: toolbars |\n\n## Layout Adaptation Checklist\n\n- [ ] **Compact width (iPhone portrait):** Navigation collapses to single stack? Tab bars visible?\n- [ ] **Regular width (iPad landscape, Mac):** Navigation expands to sidebar + detail? Space used well?\n- [ ] **Multitasking (iPad):** Adapts at every split ratio? Works in Slide Over?\n- [ ] **Accessibility:** Supports Dynamic Type at all sizes? VoiceOver order logical?\n- [ ] **Orientation:** Content reflows between portrait and landscape?\n- [ ] **visionOS:** Windows positioned ergonomically? Ornaments accessible? Depth meaningful?\n\n## Output Format\n\n1. **Recommended navigation pattern** with rationale for the app's information architecture.\n2. **Layout hierarchy** from root container down (e.g., TabView > NavigationSplitView > List > Detail).\n3. **Platform adaptation** across targeted platforms and size classes.\n4. **Size class behavior** at each transition.\n\n## Questions to Ask\n\n1. What is the app's information architecture? (Sections, hierarchy depth, top-level categories?)\n2. How many top-level sections?\n3. Which platforms?\n4. Need multitasking on iPad?\n5. SwiftUI or UIKit?\n\n## Related Skills\n\n- **hig-foundations** -- Layout spacing, margins, safe areas, alignment\n- **hig-platforms** -- Platform-specific navigation conventions\n- **hig-patterns** -- Multitasking, full-screen, and launching patterns\n- **hig-components-content** -- Content displayed within layout containers\n\n---\n\n*Built by [Raintree Technology](https:\u002F\u002Fraintree.technology) · [More developer tools](https:\u002F\u002Fraintree.technology)*\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,204,1343,"2026-05-16 13:21:54",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"UI 设计","ui-design","mdi-monitor-cellphone","界面设计、交互规范、设计系统",1,36,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"bd7e840a-4226-48cf-bf2f-87ab0c81d2d4","1.0.0","hig-components-layout.zip",43157,"uploads\u002Fskills\u002F0671f564-157d-48d8-8c62-9cea1c116624\u002Fhig-components-layout.zip","1c250220a5f668e9aadfd31e56608b4d29ebe8c9e74d8d69aa70c15ef0667e3e","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":6157},{\"path\":\"references\u002Fboxes.md\",\"isDirectory\":false,\"size\":3069},{\"path\":\"references\u002Fcolumn-views.md\",\"isDirectory\":false,\"size\":3245},{\"path\":\"references\u002Flists-and-tables.md\",\"isDirectory\":false,\"size\":11092},{\"path\":\"references\u002Fornaments.md\",\"isDirectory\":false,\"size\":5243},{\"path\":\"references\u002Foutline-views.md\",\"isDirectory\":false,\"size\":6088},{\"path\":\"references\u002Fpanels.md\",\"isDirectory\":false,\"size\":7383},{\"path\":\"references\u002Fscroll-views.md\",\"isDirectory\":false,\"size\":12390},{\"path\":\"references\u002Fsidebars.md\",\"isDirectory\":false,\"size\":11241},{\"path\":\"references\u002Fsplit-views.md\",\"isDirectory\":false,\"size\":10737},{\"path\":\"references\u002Ftab-bars.md\",\"isDirectory\":false,\"size\":15977},{\"path\":\"references\u002Ftab-views.md\",\"isDirectory\":false,\"size\":5370},{\"path\":\"references\u002Fwindows.md\",\"isDirectory\":false,\"size\":22273}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]