技能 Apple HIG: Layout and Navigation Components
📦

Apple HIG: Layout and Navigation Components

安全

HIG 네비게이션 패턴으로 적응형 Apple 앱 레이아웃 설계하기

여러 Apple 플랫폼용 앱을 빌드하려면 복잡한 네비게이션 패턴과 레이아웃 적응에 대한 이해가 필요합니다. 이 스킬은 사이드바, 스플릿 뷰, 탭 바 등에 대한 공식 Apple Human Interface Guidelines 를 제공하여 앱이 플랫폼 규약을 따르도록 보장합니다.

支持: Claude Codex Code(CC)
🥉 73 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“Apple HIG: Layout and Navigation Components”。 검사기 패널이 있는 문서 편집기를 빌드하고 있습니다. 사이드바와 패널 중 무엇을 사용해야 합니까?

预期结果:

검사기가 있는 문서 편집기의 경우 macOS 에서 패널 (사이드바 아님) 을 사용하십시오. 사이드바는 섹션 간 기본 네비게이션에 사용되며, 패널은 메인 콘텐츠를 보완하는 2 차 컨트롤과 속성에 사용됩니다. iPad 에서는 검사기를 팝오버 또는 시트로 표시하십시오. 참조: inspector 패턴은 panels.md, 기본 네비게이션 패턴은 sidebars.md.

正在使用“Apple HIG: Layout and Navigation Components”。 6 개의 최상위 섹션이 있을 때 탭 바는 어떻게 처리합니까?

预期结果:

iOS 탭 바는 최대 5 개의 보이는 탭을 지원합니다. 섹션이 6 개인 경우 추가 섹션은 'More' 탭에 넣으십시오. 그러나 6 개의 최상위 섹션이 사이드바 (iPad) 또는 중첩 네비게이션으로 재구성할 기회인지 고려하십시오. iPadOS 18+ 에서는 .sidebarAdaptable 을 사용하여 iPad 에서는 사이드바, iPhone 에서는 탭 바를 자동으로 표시하십시오. 참조: 탭 카운트 가이드는 tab-bars.md, 대체 패턴은 sidebars.md.

安全审计

安全
v1 • 2/25/2026

This skill contains only documentation markdown files referencing Apple Human Interface Guidelines. All 768 static analysis findings are false positives: backtick patterns are markdown code blocks with API names, URLs link to official Apple Developer documentation, and cryptographic/C2 keywords are spurious text matches in design documentation. No executable code, network calls, or system commands present.

12
已扫描文件
1,169
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

45
架构
100
可维护性
87
内容
50
社区
100
安全
65
规范符合性

你能构建什么

iOS 앱 네비게이션 설계

첫 iPad 앱을 빌드하는 개발자가 네비게이션에 탭 바와 사이드바 중 어떤 것을 사용할지 결정해야 합니다. 이 스킬은 각 패턴을 언제 사용해야 하는지, NavigationSplitView 가 사이즈 클래스 간에 어떻게 적응하는지 설명합니다.

크로스플랫폼 레이아웃 전략

iPhone, iPad, Mac 에서 출시하는 팀이 통합 네비게이션 전략이 필요합니다. 이 스킬은 반응형 레이아웃을 계획하기 위한 적응 체크리스트와 패턴 선택 테이블을 제공합니다.

visionOS 공간 레이아웃

첫 visionOS 앱을 제작하는 개발자가 윈도우, 볼륨, 오너먼트를 이해해야 합니다. 이 스킬은 공간 포지셔닝과 오너먼트 부착 패턴을 설명합니다.

试试这些提示

기본 네비게이션 패턴 선택
4 개의 메인 섹션 (Home, Search, Library, Settings) 이 있는 앱을 빌드하고 있습니다. iPhone 과 iPad 에서 각각 어떤 네비게이션 패턴을 사용해야 합니까?
적응형 레이아웃 가이드
내 앱은 iPad 에서 3 열 레이아웃을 사용하는데 iPhone 에서 깨집니다. NavigationSplitView 를 사용하여 어떻게 적응해야 합니까?
플랫폼별 규약
macOS 사이드바와 iPad 사이드바의 차이점은 무엇입니까? 각 패턴은 언제 사용해야 합니까?
고급 멀티태스킹 지원
내 iPad 앱은 Split View, Slide Over, Stage Manager 를 지원해야 합니다. 테스트해야 할 사이즈 클래스 전환은 무엇이며 어떻게 처리해야 합니까?

最佳实践

  • 질문하기 전에 항상 기존 apple-design-context.md 확인 - 이미 사용 가능한 정보 활용
  • 네비게이션 패턴을 정보 아키텍처 깊이에 맞추기: 얕은 구조는 탭 바 사용, 깊은 계층은 사이드바 사용
  • 모든 사이즈 클래스 전환과 iPad 멀티태스킹 비율에서 레이아웃 적응 테스트

避免

  • 깊은 계층을 더 잘 처리할 수 있는 사이드바 대신 iPad 에서 탭 바 사용
  • compact vs regular 사이즈 클래스에 적응하지 않는 고정 너비 레이아웃 빌드
  • Apple Vision Pro 타겟팅 시 visionOS 공간 규약 무시

常见问题

사이드바와 탭 바 중 언제 사용해야 합니까?
탭 바는 3-5 개의 동등한 최상위 섹션과 플랫 네비게이션 (iPhone) 에 사용하십시오. 사이드바는 깊은 계층적 네비게이션이 필요하거나 섹션이 많을 때 (iPad, Mac) 사용하십시오. iPadOS 18+ 는 iPad 에서는 사이드바, iPhone 에서는 탭 바를 자동으로 표시하는 .sidebarAdaptable 을 지원합니다.
레이아웃을 iPhone 과 iPad 모두에서 작동하게 하려면 어떻게 합니까?
NavigationSplitView 및 SizeClass 모디파이어와 같은 적응형 컴포넌트를 사용하십시오. compact 너비 (iPhone) 를 먼저 설계한 다음 regular 너비 (iPad/Mac) 로 확장하십시오. 모든 사이즈 클래스 전환에서 테스트하고 스킬의 적응 체크리스트를 사용하십시오.
탭 바에 표시할 수 있는 최대 탭 수는 몇 개입니까?
iOS 탭 바는 최대 5 개의 탭을 표시합니다. 추가 항목은 'More' 섹션에 들어갑니다. 최상위 섹션이 5 개 이상 필요하면 사이드바 또는 중첩 네비게이션 계층으로 재구성을 고려하십시오.
iPad 멀티태스킹 (Split View, Slide Over) 을 어떻게 지원합니까?
좁음에서 넓음까지 모든 스플릿 비율에서 앱을 테스트하십시오. 콘텐츠가 적절히 리플로우되고 네비게이션이 적응하는지 확인하십시오. 고정 치수 대신 auto-layout 과 사이즈 클래스를 사용하십시오. 참조: 멀티태스킹 가이드는 split-views.md 및 windows.md.
visionOS 에서 오너먼트란 무엇입니까?
오너먼트는 콘텐츠를 가리지 않고 툴바와 컨트롤을 위해 윈도우에 부착되는 visionOS UI 요소입니다. 윈도우 가장자리 (상단, 하단, 선행, 후행) 에 나타납니다. 메인 콘텐츠를 보이게 유지하면서 지속적인 컨트롤에 오너먼트를 사용하십시오. 참조: ornaments.md.
네비게이션 컴포넌트에 SwiftUI 와 UIKit 중 무엇을 사용해야 합니까?
SwiftUI 는 사이즈 클래스 변경을 자동으로 처리하는 NavigationSplitView, TabView, NavigationStack 과 같은 내장 적응성을 제공합니다. UIKit 은 UISplitViewController 및 UINavigationController 를 사용하여 더 많은 수동 작업이 필요합니다. 새로운 앱의 경우 특정 UIKit 요구사항이 없다면 SwiftUI 를 선호하십시오.