Windows 앱용 탐색 디자인 기본 사항
앱을 페이지의 컬렉션으로 생각할 경우, ‘탐색’은 앱 내에서 페이지 사이를 이동하는 동작을 나타냅니다. 탐색은 사용자 환경의 시작 지점이고, 사용자가 관심 있는 콘텐츠와 기능을 찾는 방법입니다. 매우 중요한 것이며, 올바르게 만들기 어렵습니다.
탐색에 대한 선택지는 아주 많습니다. 다음과 같이 할 수 있습니다.
사용자에게 여러 페이지를 순서대로 진행할 것을 요구합니다.
사용자에게 어떤 페이지로나 직접 점프할 수 있는 메뉴를 제공합니다.
모든 내용을 한 페이지에 넣고, 컨텐츠를 볼 수 있도록 필터링 메커니즘을 제공합니다.
모든 앱에 맞는 하나의 탐색 디자인은 없지만, 앱에 적절한 디자인을 결정하는 데 도움이 되는 원칙과 지침이 있습니다.
좋은 탐색의 원칙
좋은 탐색 디자인의 기본 원칙부터 시작하겠습니다.
- 일관성: 사용자 기대치를 충족합니다.
- 단순성: 필요 이상으로 하지 마십시오.
- 명확성: 명확한 경로와 옵션을 제공합니다.
일관성
탐색은 사용자의 기대를 일관성 있게 충족해야 합니다. 사용자가 친숙한 표준 컨트롤을 사용하고, 아이콘과 위치 스타일링에 대한 표준 규칙을 사용하면 사용자의 탐색이 예측 가능하고 직관적이 됩니다.
사용자는 특정 UI 요소를 표준 위치에서 찾을 수 있을 것으로 기대합니다.
단순함
탐색 항목이 적을수록 사용자의 의사 결정 과정이 단순해집니다. 중요한 대상에 쉽게 액세스하도록 하고 중요하지 않은 항목을 숨기면 사용자가 원하는 항목을 더 빨리 검색하는 데 도움이 됩니다.
친숙한 탐색 메뉴에 탐색 항목을 표시합니다.
많은 탐색 옵션으로 사용자를 당황하게 하지 마세요.
명료함
명확한 경로는 사용자가 논리적으로 탐색을 할 수 있도록 해줍니다. 탐색 옵션을 명확히 만들고 페이지 간 관계를 명료하게 만들면 사용자가 헤매지 않고 탐색을 할 수 있습니다.
목적지를 명확히 레이블로 표시하면 사용자가 자신이 어디에 있는지 알 수 있습니다.
일반 권장 사항
이제 일관성, 단순함, 명료함이라는 디자인 원칙에 따라 몇 가지 일반 권장 사항을 제안하겠습니다.
- 사용자에 관해 생각하세요. 사용자가 앱에서 일반적으로 통과할 경로를 추적하고 각 페이지에서 사용자가 왜 머무는지 어디로 가려는지 생각하세요.
- 탐색 계층 구조를 깊게 만들지 마세요. 두 가지 수준의 탐색을 초과하는 경우 사용자에게 현재 위치를 보여 주는 이동 경로 탐색 막대를 제공하고 신속하게 다시 돌아올 수 있도록 합니다. 그렇지 않으면 사용자가 깊은 계층 구조에서 벗어나는 데 어려움을 겪을 위험이 있습니다.
- "페이지 왕복"을 피합니다. 페이지 왕복은 관련된 콘텐츠가 있지만 탐색하려면 위 단계로 올라갔다가 다시 내려와야 하는 경우를 말합니다.
적합한 구조 사용
일반적인 탐색 원칙을 알아봤습니다. 그렇다면 앱을 어떻게 구성해야 할까요? 플랫과 계층의 두 가지 일반 구조가 있습니다.
플랫/측면
플랫/측면 구조에서 페이지는 나란히 표시됩니다. 어떤 순서로든 한 페이지에서 다른 페이지로 갈 수 있습니다.
다음과 같은 경우 플랫 구조를 사용하는 것이 좋습니다.
- 순서에 따라 페이지를 볼 수 있습니다.
- 페이지는 서로 명확하게 구별되며 명백한 부모/자식 관계를 갖지 않습니다.
- 그룹에 8페이지 미만이 포함되어 있습니다.
(더 많은 페이지가 있는 경우 사용자가 페이지의 고유성이나 그룹 내의 현재 위치를 이해하기 어려울 수 있습니다. 앱에 문제가 없다고 생각되면 계속 진행하여 페이지를 피어링합니다. 그렇지 않으면 계층 구조를 사용하여 페이지를 두 개 이상의 작은 그룹으로 나누는 것이 좋습니다.)
계층적
계층 구조에서 페이지는 트리와 유사한 구조로 구성됩니다. 각 자식 페이지에는 부모 페이지가 하나만 있지만 부모 페이지에는 자식 페이지가 여러 개 있을 수 있습니다. 부모 페이지를 통해 자식 페이지에 도달합니다.
계층 구조는 많은 페이지로 확장되는 복잡한 콘텐츠 구성에 적합합니다. 단점은 탐색의 오버헤드입니다. 구조가 깊을 수록, 페이지에서 페이지로 이동하는 데 더 많은 클릭이 필요하게 됩니다.
다음과 같은 경우 계층 구조를 사용하는 것이 좋습니다.
- 페이지를 특정한 순서로 통과해야 합니다.
- 페이지 사이에 확실한 부모 자식 관계가 있습니다.
- 그룹에 페이지가 8개 이상 포함되어 있습니다.
결합 구조
하나의 구조만 선택할 필요는 없습니다. 잘 디자인된 많은 앱은 두 개 모두 사용합니다. 앱은 최상위 수준 페이지를 어떤 순서로도 볼 수 있게 플랫 구조를 사용하고, 더 복잡한 관계에 있는 페이지에는 계층 구조를 사용합니다.
탐색 구조에 여러 수준이 있는 경우 피어 투 피어 탐색 요소를 현재 하위 트리 내의 피어에만 연결하는 것이 좋습니다. 두 개의 수준이 있는 탐색 구조를 보여 주는 인접한 그림을 참조하세요.
- 수준 1에서 피어 투 피어 탐색 요소는 A, B 및 C 페이지에 대한 액세스를 제공해야 합니다.
- 수준 2에서, A2 페이지의 피어 투 피어 탐색 요소는 다른 A2 페이지에만 연결되어야 합니다. C 하위 트리의 수준 2 페이지에 연결해서는 안 됩니다.
올바른 컨트롤 사용
페이지 구조를 결정하면, 사용자가 이 페이지를 탐색할 방법을 결정해야 합니다. XAML는 앱에 일관되고 신뢰할 수 있는 탐색 환경을 구현할 수 있도록 다양한 탐색 컨트롤을 제공합니다.
몇 가지 예외를 제외하고, 여러 페이지가 있는 모든 앱은 프레임을 사용합니다. 일반적으로 앱에는 프레임과 탐색 보기 컨트롤과 같은 기본 탐색 요소가 있는 기본 페이지를 포함합니다. 사용자가 페이지를 선택하면, 프레임을 로드하여 표시합니다.
동일한 수준의 페이지에 대한 링크의 가로 목록을 표시합니다. NavigationView 컨트롤은 최상위 탐색 패턴을 구현합니다.
다음과 같은 경우 최상위 탐색을 사용합니다.
- 화면에 모든 탐색 옵션을 표시하려는 경우
- 앱 콘텐츠에 대한 추가 공간을 원하는 경우
- 아이콘은 탐색 범주를 명확하게 설명할 수 없습니다.
각 상한 수준의 페이지에 대한 링크의 가로 목록을 표시합니다. BreadcrumbBar 컨트롤은 최상위 탐색 패턴을 구현합니다.
다음과 같은 경우 이동 경로 사용:
- 현재 위치의 경로를 표시하려고 합니다.
- 다양한 수준의 탐색이 있습니다.
- 사용자가 이전 수준으로 돌아갈 수 있을 것으로 예상합니다.
최상위 페이지에 세로 링크 목록을 표시합니다. 다음과 같은 경우 를 사용합니다.
- 페이지가 최상위 수준에 있습니다.
- 5개가 넘는 많은 탐색 항목이 있습니다.
- 사용자가 페이지 사이에서 자주 전환하지 않을 것으로 예상되는 경우
항목의 목록을 표시합니다. 항목을 선택하면 세부 정보 섹션에 해당 항목 페이지가 표시됩니다. 다음과 같은 경우 를 사용합니다.
- 사용자가 자식 항목 사이에서 자주 전환할 것으로 예상하는 경우
- 사용자가 개별 항목 또는 항목 그룹에 대해 삭제 또는 정렬과 같은 높은 수준의 작업을 수행할 수 있도록 하고, 사용자가 각 항목에 대한 세부 정보를 보거나 업데이트할 수 있도록 하고자 합니다.
목록/세부 정보는 이메일 받은 편지함, 연락처 목록 및 데이터 항목에 적합합니다.
포함된 탐색 요소는 페이지의 콘텐츠에 표시될 수 있습니다. 페이지에서 일관되어야 하는 다른 탐색 요소와 달리, 콘텐츠 포함 탐색 요소는 페이지 간에 고유합니다.
다음: 앱에 탐색 코드 추가
다음 문서인, 기본 탐색 구현에서는 필요한 코드로 Frame 컨트롤을 사용해 앱에서 두 페이지 간의 기본 탐색을 하는 법을 소개합니다.
Windows developer