Windows 스토어 앱의 허브 컨트롤에 대한 지침

Applies to Windows only

계층적 Food with Friends 앱의 와이어프레임

설명

허브 컨트롤은 계층적 탐색 패턴을 사용하여 관계형 정보 아키텍처가 필요한 Windows 스토어 앱을 지원합니다.

이 탐색 패턴은 기본 시퀀스나 순서로 트래버스해야 하는 다양한 정보 수준을 가지며 고유하지만 서로 관련된 섹션이나 범주로 앱 콘텐츠를 구성할 수 있는 경우에 가장 유용합니다.

이 컨트롤은 시각적으로 멋진 앱을 디자인하기 위한 시작점입니다. 허브 컨트롤은 브랜드에 맞게 앱을 사용자 지정할 수 있는 유연성과 프레임워크를 제공합니다. 방문 페이지에서 섹션 페이지 및 세부 정보 페이지에 이르는 허브 페이지는 시각적으로 다양하여 사용자가 앱에 주목하도록 만듭니다.

첫 번째 그룹에는 영웅 이미지 또는 콘텐츠 섹션을 사용할 수 있습니다.

영웅 타일이 포함된 허브 템플릿을 가로로 이동영웅 타일이 포함된 허브 템플릿을 세로로 이동

관심의 중심을 잃지 않고 세로 및 가로로 잘릴 수 있는 영웅의 큰 이미지를 사용합니다.

다음은 하나의 영웅 이미지와 가로, 세로 및 좁은 너비에서 해당 이미지가 잘릴 수 있는 방법의 예제입니다.

다양한 창 크기에 맞게 잘린 영웅 이미지

예제

허브는 상당한 디자인 유연성을 제공합니다. 따라서 매력적이고 시각적으로 풍부한 다양한 환경을 가진 앱을 디자인할 수 있습니다. 다음 섹션에서는 색, 입력 체계, 이미지, 그래픽 및 컴퍼지션을 사용하여 다양한 디자인 및 스타일 가능성을 보여 주는 자연 앱을 보여 줍니다.

표준 허브 컨트롤을 보여 주는 Bing 뉴스 앱

허브 템플릿

허브 템플릿은 시작점입니다. 다음은 Microsoft Visual Studio 허브 템플릿을 사용하는 자연 앱 예제입니다.

방문 페이지:

기본 허브 템플릿을 사용한 예제 자연 앱

세부 정보 페이지:

기본 허브 템플릿을 사용한 예제 자연 앱, 세부 정보 페이지

콘텐츠는 명확하고 체계적이지만, 동일한 템플릿을 사용하는 다른 모든 앱과 차별화되지 않습니다. 템플릿은 앱의 토대로만 사용해야 하며, 템플릿 위에 고유한 환경을 만들어야 합니다.

변형 1 - 모듈식

이 디자인은 대담한 색과 그래픽 이미지 자르기를 사용하여 모듈식 레이아웃으로 디자인이 정의됩니다.

예제 자연 앱 변형 1

방문 페이지:

예제 자연 앱 변형 1, 방문 페이지

세부 정보 페이지:

예제 자연 앱 변형 1, 세부 정보 페이지
예제 자연 앱 변형 1의 색상표   색의 그래픽 영향은 콘텐츠를 향상시키고 전체 레이아웃에 대한 시각적 구조를 만듭니다. 이 예제에서 색상표는 대담하고 강렬한 색과 멋진 회색으로 구성됩니다. 방문 페이지는 밝은 빨간색을 한 섹션의 배경색으로 사용하여 이미지의 유사한 빨간색 음영을 보완합니다. 대담한 색과 중간색인 회색을 사용하여 균형을 이룹니다. 두 색은 경쟁하지 않고 콘텐츠를 보완하도록 디자인되었습니다.
예제 자연 앱 변형 1의 이미지이미지   사진은 이 디자인의 큰 핵심입니다. 이미지는 대담한 색과 그래픽 잘림에 맞게 신중하게 선택되었습니다. 이미지는 앱 가장자리에 배치되거나 전체 화상 물림 재단되어 몰입형 환경을 만듭니다. 이미지는 콘텐츠가 돋보이고 컨텍스트와 의미를 전달하는 방식으로 콘텐츠를 제공하는 데 도움이 됩니다. 영웅 이미지가 주 이미지인 경우 둘러싸는 이미지가 경쟁하지 않고 해당 효과를 지원할 수 있습니다.
예제 자연 앱 변형 1의 컴퍼지션컴퍼지션   영웅 이미지는 크기와 강력한 그래픽 영향 때문에 주목을 받게 됩니다. 영웅 이미지의 오른쪽에 있는 각 그룹에는 텍스트와 이미지가 포함된 고유한 컴퍼지션이 있습니다. 컴퍼지션 및 시각적 방향은 그룹별로 다른 요구 사항을 가장 잘 나타내는 레이아웃을 고려합니다. 그룹의 순서는 앱의 전체 콘텐츠 계층 구조 및 수평 구조를 지원합니다.
예제 자연 앱 변형 1의 입력 체계입력 체계   이 예제에서 유형 크기 및 색 사용은 콘텐츠 계층 구조와 인터페이스 구조를 지원합니다. 크기, 위치 및 간격은 제공되는 정보의 계층 구조에 따라 논리적입니다. 영웅 이미지가 예외적인 크기와 프리젠테이션을 사용한다는 것과 동일한 맥락에서 영웅의 유형은 언어 요구 사항에 따라 예외적일 수 있습니다. 영웅의 오른쪽에 있는 3개 그룹에 반영된 데이터 기반 모델은 일관된 제목 처리와 기본 그리드 맞춤을 통해 함께 연결됩니다.

 

병형 2 - 간격 없이 나란히 배열된 세로 창

이 디자인은 유기적 요소가 포함된 세로 창을 간격 없이 나란히 배열하여 사실적이면서도 현대적인 미를 만듭니다.

예제 자연 앱의 변형 2 간격 없이 나란히 배열된 세로 창

방문 페이지:

예제 자연 앱의 변형 2 간격 없이 나란히 배열된 세로 창, 방문 페이지

세부 정보 페이지:

예제 자연 앱의 변형 2 간격 없이 나란히 배열된 세로 창, 세부 정보 페이지
예제 자연 앱 변형 2의 색상표   녹색, 검은색 및 갈색으로 구성된 토속적인 색상표가 자연 이미지를 보완합니다.
예제 자연 앱 변형 2의 입력 체계입력 체계   이 디자인은 가늘게 및 보통 두께와 다양한 크기로 Segoe UI를 사용합니다. 유형의 배율과 투명도를 사용하여 영웅 섹션, 그룹 제목 및 지도의 관심 영역에 그래픽 관심을 제공합니다.
예제 자연 앱 변형 2의 그래픽그래픽   허브 영웅 섹션의 등고선 지도 그래픽은 자연 테마를 강화하고 앱의 그리드 구성에 시각적 대비를 제공합니다.
예제 자연 앱 변형 2의 컴퍼지션컴퍼지션   앱은 텍스트 및 이미지의 컬러 세로 창으로 구성됩니다. 원형 강조 이미지, 그룹 머리글, 인용문 등의 요소로 세로 창을 연결하여 컴퍼지션을 흥미롭게 만들고 주요 콘텐츠 영역을 돋보이게 합니다.

 

변형 3 - 구조적 열

이 디자인은 부드러운 색상표 및 이미지와 함께 구조적 열 레이아웃을 사용하여 차분한 느낌을 만듭니다.

예제 자연 앱의 변형 3 구조적 열

방문 페이지:

예제 자연 앱 변형 3 구조적 열, 방문 페이지

세부 정보 페이지:

예제 자연 앱 변형 3 구조적 열, 세부 정보 페이지
예제 자연 앱 변형 3의 색상표   밝은 중간색으로 구성된 부드러운 색상표는 차분한 느낌을 만듭니다.
예제 자연 앱 변형 3의 이미지이미지   중간색 또는 적갈색 톤의 이미지가 부드러운 색상표를 보완합니다. 유사한 톤의 이미지는 전체 레이아웃에서 통일성을 만들고 시각적 노이즈를 줄입니다.
예제 자연 앱 변형 3의 그래픽그래픽   원형 투명 그래픽이 선형 컴퍼지션을 발랄하게 나눕니다.
예제 자연 앱 변형 3의 컴퍼지션컴퍼지션   가는 1px 회색 선이 허브 내의 여러 그룹을 구분합니다. 여유로운 공백에 작은 입력 체계를 사용하여 이 앱의 차분한 미를 강조합니다.
예제 자연 앱 변형 3의 그림그림   드로잉이나 흥미로운 미디어 유형이 큰 텍스트 블록을 나눕니다. 예제의 스케치는 문서에 질감과 개성을 제공합니다.

 

변형 4 - 각도

이 변형은 각도를 주제로 하여 이미지 프레임을 구성하고 흥미로운 배경을 만듭니다.

예제 자연 앱 변형 4 각도

방문 페이지:

예제 자연 앱 변형 4 각도, 방문 페이지

세부 정보 페이지:

예제 자연 앱 변형 4 각도, 세부 정보 페이지
예제 자연 앱 변형 4의 색상표   앱은 각진 액센트 모양에 대해 대담한 색이 포함된 밝은 색상표를 사용합니다.
예제 자연 앱 변형 4의 입력 체계입력 체계   디자인은 본문 텍스트에 Segoe UI를 사용하지만 제목과 그룹 머리글 텍스트에 Bebas Neue를 사용하여 대비시킵니다. 다른 입력 체계를 사용하면 빠르고 효율적으로 앱에 고유한 느낌을 줄 수 있습니다.
예제 자연 앱 변형 4의 그래픽그래픽   이 앱은 영웅 이미지 뒤에 목록이 포함된 별도의 그룹이 나오는 표준 허브 컴퍼지션을 사용합니다. 그러나 영웅 이미지와 배경 이미지에 모두 각도 그래픽 요소를 추가하면 이 디자인에 동적이고 독특한 느낌을 줄 수 있습니다.

 

권장 사항 및 금지 사항

  • 대화형 머리글을 사용하고 머리글 텍스트의 끝에 펼침 단추 문자 모양(>)을 넣어 추가 콘텐츠가 있음을 나타냅니다. 자세한 내용은 컨트롤(XAML 및 C#/C++/VB)허브 섹션이나 컨트롤(HTML 및 JavaScript)허브 섹션을 참조하세요.
  • 허브 안에 허브를 만들지 마세요. 대신 대화형 머리글을 사용하여 다른 섹션이나 페이지로 이동합니다.
  • 다양한 창 크기에 맞게 그룹의 콘텐츠를 동적으로 재배치합니다. 자세한 내용은 창 크기에 대한 지침을 참조하세요.
  • 섹션이 많은 경우 허브에 시맨틱 줌을 추가합니다. 이렇게 하면 좁은 너비에 맞게 앱 크기가 조정된 경우 쉽게 섹션을 찾는 데도 도움이 됩니다.
  • 기본 앱 콘텐츠에 대해 오버레이된 텍스트와 어울리는 이미지를 신중하게 선택합니다.
  • 허브 템플릿을 시작점으로 사용하고 앱의 장점을 가장 잘 반영하도록 레이아웃을 사용자 지정합니다. Hub 컨트롤의 다음 측면을 사용자 지정할 수 있습니다.
    • 섹션 수
    • 각 섹션의 콘텐츠 형식
    • 섹션의 배치 및 순서
    • 섹션 크기
    • 섹션 간격
    • 섹션과 허브 위쪽 또는 아래쪽 사이의 간격
    • 머리글과 콘텐츠의 텍스트 스타일 및 크기
    • 배경, 섹션, 섹션 머리글 및 섹션 콘텐츠의 색
  • 가로로 이동하는 허브 안에 세로로 이동하는 섹션을 사용하지 마세요. 살짝 밀기 선택과 마우스 스크롤이 예상대로 작동하지 않습니다. 자세한 내용은 이동에 대한 지침을 참조하세요.

관련 항목

디자이너용
명령 패턴
탐색 패턴
레이아웃
뒤로 버튼에 대한 지침
앱 바에 대한 지침
앱 바에 접근성 구현
Windows Phone 앱의 허브 컨트롤
개발자용(HTML)
계층적 탐색 전체 프로세스
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
HTML Hub 컨트롤 샘플
HTML AppBar 컨트롤 샘플
HTML NavBar 컨트롤 샘플
탐색 및 탐색 기록 샘플
첫 번째 앱 - 3부: PageControl 개체 및 탐색
앱 바 추가(HTML)
탐색 모음 추가(HTML)
페이지 간 탐색(HTML)
레이아웃 및 탐색에 허브 컨트롤 사용
페이지 간 이동
개발자용(XAML)
계층적 탐색 전체 프로세스
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
XAML Hub 컨트롤 샘플
XAML AppBar 컨트롤 샘플
XAML 탐색 샘플
첫 번째 앱 - 3부: 탐색, 레이아웃 및 보기
첫 번째 앱 - C++ Windows 스토어 앱에서 탐색 및 보기 추가(자습서 3/4)
앱 바 추가(XAML)
페이지 간 탐색(XAML)
허브 사용
개발자용(DirectX 및 C++로 작성한 Windows 런타임 앱)
앱 바 또는 설정 만들기(DirectX)

 

 

표시:
© 2015 Microsoft