사이드바 vs. 서랍
사이드바는 화면 구조 안에 자리 잡아. Drawer는 잠깐 옆으로 미끄러져 들어와서 화면을 가리거나 밀어낼 수 있어.
여유가 있을 때 사람들이 자주 사용하는 도구나 링크에는 사이드바를 사용하세요. 덜 자주 사용하는 작업이나 작은 화면에는 드로어를 사용하고, 닫기 쉽게 만드세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
Sidebar Source List
Sidebar Source List는 창 옆에 있는 폴더 구조 목록이야. 선택한 위치나 그룹이 메인 화면에 뭘 보여줄지 정해.
사진 보관함은 보관함, 즐겨찾기, 앨범, 공유 그룹을 보여줘요. 고른 모음집이 상세 화면을 꽉 채워요.
- 사용할 때
- 안정적인 그룹이나 장소가 주요 뷰를 제어하고 사람들이 작업 중에 자주 돌아갈 때 사용하십시오.
- 다음 경우에는 사용하지 마세요
- 일회성 체크리스트나 짧고 평평한 행동 목록에서는 피하세요. 각 카테고리는 메인 콘텐츠의 근원을 진짜로 바꿔야 해요.
- 코드에서 사용된 이름
NSOutlineView source-list style / SwiftUI NavigationSplitView
서랍
화면 가장자리에서 서랍이 미끄러져 나와요. 뒤에 있는 페이지 일부가 계속 보이죠.
주문을 선택하여 오른쪽에서 세부 정보를 엽니다. 주문 목록은 뒤에 계속 표시됩니다.
- 사용할 때
- 현재 위치를 유지하는 것이 도움이 될 때, 세부 사항이나 작은 두 번째 작업에 사용하세요.
- 다음 경우에는 사용하지 마세요
- 여러 단계가 있는 긴 워크플로를 좁은 서랍 안에 억지로 넣지 마세요.
- 코드에서 사용된 이름
Dialog + edge positioning
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| Sidebar Source ListSidebar Source List | 안정적인 그룹이나 장소가 주요 뷰를 제어하고 사람들이 작업 중에 자주 돌아갈 때 사용하십시오. | 일회성 체크리스트나 짧고 평평한 행동 목록에서는 피하세요. 각 카테고리는 메인 콘텐츠의 근원을 진짜로 바꿔야 해요. | NSOutlineView source-list style / SwiftUI NavigationSplitView |
| 서랍Drawer | 현재 위치를 유지하는 것이 도움이 될 때, 세부 사항이나 작은 두 번째 작업에 사용하세요. | 여러 단계가 있는 긴 워크플로를 좁은 서랍 안에 억지로 넣지 마세요. | Dialog + edge positioning |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 Sidebar Source List (Sidebar Source List)、서랍 (Drawer)에서 선택하세요. 이 규칙 사용: 사이드바는 화면 구조 안에 자리 잡아. Drawer는 잠깐 옆으로 미끄러져 들어와서 화면을 가리거나 밀어낼 수 있어. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.