Windows Phone 스토어 앱의 허브 컨트롤에 대한 지침
.png "허브 컨트롤의 부분(허브 헤더, 허브 섹션 헤더 등)")
설명
—전화에서 세로 방향에서만 사용되도록 만들어진—허브 컨트롤에 좌우로 이동할 수 있는 일련의 섹션이 표시됩니다. 이 컨트롤은 앱의 전체 화면 컨테이너이자 탐색 모델입니다.
허브(이전의 파노라마) 환경은 기본 Windows Phone 모양과 느낌의 일부입니다. 휴대폰 화면의 범위에 맞게 디자인된 앱과 달리 허브 앱은 화면의 범위를 넘어 가로로 확장되는 넓은 가상 캔버스를 사용하여 컨트롤, 데이터 및 서비스를 보는 고유한 방법을 제공합니다. 기본적으로 Windows Phone의 이러한 동적 보기에서는 레이어가 다른 속도로 원활하게 이동하도록 계층적 애니메이션 및 콘텐츠를 사용하며, 시차 효과와 유사합니다.
허브 앱의 섹션은 보다 세부적인 환경의 시작점 역할을 합니다. 목표는 사용자에게 시각적으로 풍부한 콘텐츠를 제공하는 것입니다.
예제
.png "Windows Phone 앱: 허브 컨트롤")
사용자 인터페이스는 배경색 또는 이미지, 허브 헤더, 허브 섹션 헤더 및 허브 섹션과 같이 독립적으로 이동하는 레이어로 구성됩니다.
설정할 경우 배경 이미지는 가장 낮은 레이어이며 허브에 풍부하고 잡지와 같은 느낌을 제공해야 합니다. 일반적으로 풀 블리드(full-bleed) 이미지인 배경 이미지는 앱의 가장 시각적인 부분일 수 있습니다.
허브 헤더는 앱을 식별하므로 사용자가 앱을 시작하는 방법에 관계없이 표시되어야 합니다.
허브 섹션은 다른 컨트롤 및 콘텐츠를 포함하는 허브 앱의 구성 요소입니다. 허브 섹션은 터치 이동이나 긋기와 동일한 속도로 이동합니다. 허브 섹션 헤더는 특정 허브 섹션에 옵션으로 제공됩니다.
미리 보기는 중요한 요소로, 다른 페이지의 콘텐츠나 미디어에 연결할 수 있습니다.
.png "미리 보기가 있는 허브 컨트롤")
사용 지침
앱의 요구 사항에 따라 여러 가지 허브 섹션을 허브 컨트롤에 추가할 수 있으며, 각 섹션은 고유한 기능 용도를 제공합니다.— 예를 들어 한 섹션에는 일련의 링크 및 컨트롤이 포함되고 다른 섹션은 미리 보기 이미지의 리포지토리입니다. 사용자는 허브 컨트롤에 기본 제공되는 제스처 지원을 사용하여 이러한 섹션을 앞뒤로 이동할 수 있습니다.
디자인 지침
- 허브 컨트롤의 동작 및 렌더링은 세로 방향에서만 지원됩니다.
- 허브 컨트롤에 테마를 적용하고 기본 색을 재정의하는 등의 작업을 수행할 수 있습니다.
- 허브 컨트롤의 래핑 효과를 Windows Phone에 사용하여 마지막 섹션에서 첫 번째 섹션으로 래핑하거나 그 반대로 래핑합니다. 1 또는 2개의 섹션이 포함된 허브는 줄 바꿈하지 않습니다. 3 개 이상의 섹션이 포함된 허브는 줄 바꿈을 합니다.
- Windows Phone에서 허브에 앱 바를 사용하는 경우 앱 바의 모드를 최소화로 설정합니다. 이 모드는 허브 페이지의 화면 공간을 최대화하도록 특별히 디자인되었습니다. 자세한 내용은 Windows Phone용 앱 바를 참조하세요.
- 시스템 트레이에 진행률 표시줄을 표시하거나 허브 컨트롤이 시작되는 동안 "로드 중" 표시기를 전체 화면에 표시합니다.
- 허브 컨트롤의 섹션이 업데이트되거나 새로 고쳐지고 있지만 사용자 조작을 차단하지 않는 경우 시스템 트레이에 진행률 표시줄을 표시합니다.
- 처음 방문: 표시된 섹션의 허브 헤더가 왼쪽에 올바르게 정렬되어 있어야 합니다. 어떤 섹션이 기본값인지에 대한 표준 지침이 없으며, 표시되는 콘텐츠에 따라 달라집니다.
- 같은 허브 컨트롤을 다음에 방문하기 위해 사용자는 중단한 섹션으로 다시 이동합니다.
- 허브 컨트롤에 섹션을 6개 이상 만들지 않습니다. 이는 성능상의 이유이며 사용자가 탐색해야 하는 영영 수도 제한되기 때문입니다. 콘텐츠가 더 복잡한 경우 더 적은 섹션을 사용합니다. 많은 섹션으로 사용자에게 불편을 주지 않습니다. 사용자는 네다섯 개 섹션만으로 현재 위치 및 왼쪽과 오른쪽에 있는 항목을 확인할 수 있습니다.
- 허브 컨트롤 내부에서 피벗 컨트롤을 사용하거나 피벗 컨트롤 내부에서 허브 컨트롤을 사용하지 않습니다. 그러나 허브 섹션의 항목을 피벗 컨트롤을 포함하는 다른 페이지에 연결할 수는 있습니다.
- 허브 컨트롤 내부에서 이동하거나 스크롤할 수 있는 컨트롤을 사용하지 않습니다. 예를 들어 허브 섹션 내에 지도 컨트롤을 넣으면 허브 컨트롤을 사용하기가 어려울 수 있습니다. 제스처 입력이 혼란스럽게 됩니다. 예를 들어 슬라이더를 사용하여 왼쪽으로 밀려는 경우 허브 컨트롤의 섹션에 있으면 섹션을 스크롤할지 슬라이더를 이동할지가 명확하지 않습니다. 제스처 입력이 필요한 컨트롤에 대한 해결 방법은 해당 컨트롤을 고유한 페이지에 넣고 탐색하는 것입니다. 지도와 같이 제스처를 사용하지 않는 컨트롤은 허브 섹션에 배치할 수 있습니다.— 지도를 활성화하는 버튼을 오버레이할 수 있습니다. 버튼을 누르면 지도만 포함된 다른 페이지로 이동합니다. 그러면 사용자는 뒤로 버튼을 눌러 허브 섹션으로 다시 이동할 수 있습니다.
- 허브 컨트롤과 피벗 컨트롤을 사용하는 경우에 대한 자세한 지침은 다음 항목을 검토하세요.
허브 헤더:
- 로고와 같은 일반 텍스트나 이미지를 사용합니다. 로고 및 텍스트(또는 기타 UI 요소)와 같은 여러 요소를 사용할 수도 있습니다.
- 헤더의 글꼴이나 이미지 색은 전체 배경 이미지에서 헤더가 명확하게 표시되도록 해야 합니다. 왜냐하면 두 항목이 독립적으로 이동하기 때문입니다. 다른 글꼴, 크기 또는 색을 사용하는 특정 브랜드 환경이 필요하지 않을 경우 시스템 글꼴 및 스타일을 사용합니다.
- 헤더에 애니메이션을 적용하거나 크기를 동적으로 변경하지 않습니다.
- 일관성을 위해 허브 헤더가 시작의 실행 타일과 일치하도록 합니다.
- 허브 컨트롤을 배치하고 헤더를 디자인할 때 시스템 트레이나 다른 요소에 폐색 문제가 발생하지 않도록 합니다.
허브 섹션 헤더:
- 로고와 같은 일반 텍스트나 이미지를 사용합니다. 로고 및 텍스트(또는 기타 UI 요소)와 같은 여러 요소를 사용할 수도 있습니다.
- 헤더의 글꼴이나 이미지 색은 전체 배경 이미지에서 헤더가 명확하게 표시되도록 해야 합니다. 왜냐하면 두 항목이 독립적으로 이동하기 때문입니다. 다른 글꼴, 크기 또는 색을 사용하는 특정 브랜드 환경이 필요하지 않을 경우 시스템 글꼴 및 스타일을 사용합니다.
- 헤더에 애니메이션을 적용하거나 크기를 동적으로 변경하지 않습니다.
허브 섹션:
- 허브가 답답하고 복잡해지지 않도록 섹션 콘텐츠에 포함할 텍스트 및 이미지를 신중하게 선택하여 허브 컨트롤 환경의 아름다움을 그대로 유지합니다.
- 세로 스크롤을 사용하는 경우 방향을 고려합니다. 허브 섹션의 세로 스크롤은 섹션의 너비가 화면 너비보다 큰 경우에 허용됩니다.
- 콘텐츠가 표시될 때까지 허브 섹션을 숨깁니다.
배경 아트
- 어둡고 부드러우며 대비가 낮은 배경이 가장 적합합니다. 단색이나 그라데이션이 좋습니다.
- 흐리고 눈에 잘 띄지 않는 배경 사진을 사용하면 시각적으로 매력적인 허브 컨트롤을 만들 수 있습니다. 그러나 밝은 색이 많은 사진을 사용하면 섹션을 읽기 어려울 수 있으므로 피해야 합니다. 한 가지 실용적인 기술은 사진 위에 반투명 흑백 필터(사각형)을 사용하는 것입니다. 비트맵 편집 도구에서 이 작업을 수행한 다음 이미지를 평면화할 수 있습니다.
- 배경 이미지는 전체 허브 컨트롤에 걸쳐 있어야 합니다. 즉, 배경 이미지의 가로 세로 비율은 허브 컨트롤과 일치해야 하고 크기는 가장 일반적인 장치 해상도, 가장 큰 장치 해상도 및 성능을 고려해야 합니다. 파일 크기를 작게 유지하려면 JPEG 형식을 사용하는 것이 좋습니다.
- 앱이 실행되는 동안에도 배경 이미지 간에 전환할 수는 있지만 한 번에 하나의 이미지만 표시할 수 있습니다.
미리 보기
- 전체 이미지 크기를 줄이는 대신 식별 가능한 항목을 강조 표시하는 잘린 이미지를 사용합니다. 텍스트가 있어야 이미지를 식별할 수 있는 경우 최대 두 줄의 텍스트를 사용하여 콘텐츠를 식별할 수 있습니다.
관련 항목
디자이너용
개발자용(XAML)
Windows.UI.Xaml.Controls Hub class