이 페이지가 유용했습니까?
이 콘텐츠에 대한 여러분의 의견은 중요합니다. 의견을 알려주십시오.
추가 의견
1500자 남음
MSDN Library
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone의 앱 탭(Pivot 컨트롤)

2013-12-05

적용 대상: Windows Phone 8 | Windows Phone OS 7.1

앱 탭 스타일은 흔히 사용자가 이동하는 UI의 여러 페이지에 사용됩니다. 이 스타일은 앱이 하나의 테마(예: 영화, 야구 등)를 중심으로 하는 경우에 특히 유용한 스타일입니다. 각 페이지는 앱 전체에서 제공되는 전체 데이터와 관련된 정보를 사용자에게 표시합니다. 앱 탭 스타일로 전체 앱을 구성할 수도 있고, 앱의 하위 영역에서 사용할 수도 있습니다. 예를 들어 이전 단원에서 설명한 것처럼 Panorama 컨트롤을 통해 앱의 첫 번째 기본 수준으로 사용하고 나서 그곳에서 Pivot 컨트롤을 사용하여 사용자가 앱 탭 스타일을 사용하는 앱의 하위 섹션을 탐색하도록 할 수 있습니다.

홈 컬렉션에 보유한 영화의 카탈로그를 작성하는 앱을 원한다고 가정합니다. 앱 탭 스타일을 사용하여 여러 가지 방법으로 필터링된 영화 뷰를 제공할 수 있습니다. 필터링된 특정 뷰에서는 즐겨찾기로 표시된 영화를 보여 주고, 필터링된 다른 뷰는 액션 유형 영화에만 사용할 수도 있습니다. 또 다른 필터링 뷰는 시간이 있을 때 시청하려는 순서대로 순위가 매겨진 영화일 수 있습니다. 물론 필터링 없이 페이지에 전체 영화 목록을 표시할 수도 있습니다.

다음 그림은 이 앱 구조를 시각화하는 데 도움이 됩니다. 앱을 시작하면 필터링된 페이지 중 하나가 표시됩니다. 여기서 UI의 탭처럼 동작하는 각 페이지를 가로로 스크롤할 수 있습니다.

UX_AppNavModels_14

Outlook 받은 편지함에 대한 응용프로그램 허브 탭

각 탭은 기본적으로 사용자에게 제공할 데이터를 필터링하고 보는 다른 방법일 수 있습니다. 필터링된 뷰 페이지에서 하드웨어 뒤로 버튼을 누르면 앱이 종료됩니다.

중앙 데이터 형식에 대해 필터링된 여러 뷰가 제공되는 앱에 대해 앱 탭 스타일을 사용합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

Pivot 컨트롤을 사용하여 앱 탭 UI 스타일을 구현할 수 있습니다. 이 컨트롤을 사용하면 사용자가 피벗 페이지라고 하는 각 페이지에서 오른쪽 및 왼쪽으로 탐색할 수 있습니다.

Microsoft의 Outlook 클라이언트 앱은 단일 데이터 형식(각 피벗 페이지에 서로 다른 필터링이 적용된 이메일 목록)을 표시하므로 앱 탭 스타일을 사용합니다. Outlook 앱을 사용하여 이메일 받은 편지함을 살펴볼 때 세 개의 피벗 페이지(모두, 읽지 않음긴급)를 볼 수 있습니다. 따라서 긴급 이메일(원하는 메일 경우)만 쉽게 볼 수 있습니다. 즉, 모든 피벗 페이지의 이메일을 스크롤할 필요 없이 긴급으로 표시된 메일을 쉽게 찾을 수 있습니다.

UX_AppNavModels_15

Outlook 클라이언트 앱

앱 탭 스타일을 사용하는 또 다른 기존 앱은 Netflix 앱입니다. 각 피벗 페이지에는 동영상 목록이 표시됩니다. 적용된 필터링으로 인해 각 피벗 페이지의 목록이 다릅니다. 각 목록이 고유하고 유용한 방식을 비교하고 확인할 수 있습니다. 즉시 피벗 페이지에는 원하는 스트리밍 장치를 통해 시청하기 위해 해당 대기열에 저장한 동영상이 표시됩니다. 피벗 페이지는 Netflix에서 관심이 있을 것으로 예상된 영화를 보여 줍니다. 검색 피벗 페이지는 검색 키워드와 일치하는 영화를 보여 줍니다.

피벗 페이지는 집중적이며 효율적입니다. 주로 필터링, 정렬, 관련 항목 표시 등의 작업 기반 동작에 중점을 둡니다. 파노라마는 광범위하고 총체적이며 탐구적입니다. 최신 관련 콘텐츠를 판촉하고 표시하는 데 사용하는 것이 가장 좋습니다. 한 컨트롤이 다른 컨트롤보다 더 적합한 경우가 있습니다.

UX_AppNavModels_16

Netflix 앱

각 피벗 페이지는 실제로 탭이며 맨 위에 탭이 표시됩니다. Netflix 앱 그림에서 볼 수 있듯이 앱은 피벗 페이지에 있으며 오른쪽에서 장르 피벗 페이지를 사용할 수 있습니다. 장르 피벗 페이지로 이동하려면 탭하거나 이동합니다.

Windows Phone의 탭 기반 앱과 데스크톱 구현에서 볼 수 있는 탭 기반 응용프로그램과의 한 가지 차이점은 Windows Phone 탭을 사용할 경우 대체로 모든 제목 대신 한 번에 두세 개 탭의 제목(피벗 페이지 제목)이 표시된다는 것입니다.

앱에 사용되는 피벗 페이지 수를 최소화해야 합니다. 사용자가 피벗 페이지에서 피벗 페이지로 점프하는 경우 길을 잃을 수 있습니다. 피벗 페이지 수를 6개 이하로 유지합니다. 이보다 많은 페이지가 필요한 경우 Pivot 컨트롤 중 하나에 그 자체가 Pivot 컨트롤인 다른 페이지나 다른 탐색 레벨로 이동하기 위해 탭할 링크가 있는 목록 컨트롤을 포함합니다. 필요한 항목이 이 컨트롤인지 확인하려면 Windows Phone의 세부 정보 드릴다운이 있는 목록을 참조하세요.

팁팁:

Panorama 컨트롤은 현재 가로 방향 모드를 지원하지 않지만 Pivot 컨트롤은 지원합니다. 이는 Pivot 컨트롤을 Panorama 컨트롤보다 우선으로 선택하는 이유 중 하나일 수 있습니다. 피벗 제목을 탭하여 피벗 페이지에서 피벗 페이지로 이동할 수도 있습니다. Panorama 컨트롤은 이 작업을 수행할 수 없습니다.

이 항목의 시작 부분에서 최상의 Pivot 컨트롤 사용은 각 피벗 페이지에 동일한 데이터 형식을 포함하지만 해당 데이터의 다른 필터링을 제공하는 것이라고 설명했습니다. 또한 Panorama 컨트롤을 사용하여 관련 없는 데이터가 포함된 페이지를 표시할 수 있다고 설명했습니다. 데이터가 근본적으로 서로 다르지만 특정 주제 유형과 모두 관련된 경우에도 이런 방식으로 Pivot 컨트롤을 사용할 수 있습니다. 예를 들어 관광 산업용 앱에서 뉴욕 시에 대해 제공할 정보가 있는 경우 위치, 인구, 연간 세수 등의 흥미로운 통계가 포함된 피벗 페이지가 있는 Pivot 컨트롤을 사용할 수 있습니다. 그런 다음 볼거리 등의 정보가 포함된 추가 페이지와 숙박할 호텔에 대한 다른 피벗 페이지를 사용할 수 있습니다.

ESPN ScoreCenter 앱은 중심 테마를 기반으로 하는 다른 유형의 데이터가 각 피벗 페이지에 포함된 앱 탭 탐색 모델의 예입니다.

UX_AppNavModels_17

ESPN ScoreCenter 앱

Facebook 앱 같은 Panorama 컨트롤의 페이지에 있는 목록에서 탐색 항목을 탭하여 Pivot 컨트롤로 이동할 수 있습니다. 이것이 Facebook Panorama 패널의 프로필 선택에서 수행되는 동작입니다. 사용자가 프로필 선택 항목을 탭하면 담벼락, 정보, 내 사진 등의 피벗 페이지를 나타내는 Pivot 컨트롤로 이동합니다. 이러한 방식으로 한 컨트롤에서 다른 컨트롤로 이동할 수 있습니다.

UX_AppNavModels_18

Facebook 앱 내의 기본 Panorama 컨트롤에서 Pivot 컨트롤로 이동

Panorama 패널 선택에서 다른 Panorama로 이동할 수 있습니다. 이 경우 실제로 사용한 앱을 잊어버리기 쉬워 사용자에게 혼동을 줄 수 있기 때문에 바람직한 동작이 아닙니다. Panorama는 대체로 맨 위에 있을 때 고정된 상태로 유지되도록 확장 이미지를 배경에 사용하며, 그 자체가 새 배경이 있는 Panorama인 하위 영역으로 이동하는 경우 혼동되기 쉽습니다.

모든 데이터가 동일한 형식이기 때문에 표시되는 항목과 관련된 버튼이 포함된 앱을 맨 아래에 제공할 수 있습니다. 다음 그림에 표시된 Outlook 앱에는 사용자에게 필요하며 특정 방식으로 표시 중인 항목에 영향을 주는 작업을 포함하기 때문에 항상 표시되는 앱 바가 있습니다.

UX_AppNavModels_15

Outlook 클라이언트 앱

Outlook 앱의 앱 바는 현재 어떤 피벗 페이지에 있는지에 관계없이 동일한 작업을 허용할 수 있습니다. 위 그림에서 새 이메일을 만들고, 선택 상자를 표시하고, 폴더를 전환하고, 이메일을 다시 동기화하는 버튼이 있는 것을 확인할 수 있습니다. 앱 바가 맨 아래에 배치되지 않으므로 이것은 Pivot 컨트롤과 Panorama 컨트롤 간의 또 다른 차이점입니다.

각 피벗 페이지의 항목을 신중하게 고려했으며 이것이 적절한 경우가 아니면 항상 맨 아래에 동일한 버튼을 유지할 수 있다고 가정하면 안 됩니다. Pivot 컨트롤을 사용할 때 각 피벗 페이지에 정확하게 동일한 데이터 형식이 유지되지 않을 수도 있습니다.

사용자에게 표시되는 초기 피벗 페이지를 나머지 모든 피벗 페이지의 목록에 제공할 수 있습니다. 이렇게 하면 사용자가 밀어서 탐색하는 대신 피벗 페이지를 탭하여 바로 점프할 수 있습니다. 이 목록에 다른 앱을 시작하는 항목이 포함될 수도 있습니다.

원하지 않는 경우 사용자가 피벗 페이지에 랜딩하도록 하지 않아도 됩니다. 예를 들어 영화 목록 앱에서는 사용자가 피벗 페이지에 랜딩하도록 하는 대신 최신 인기 영화의 그래픽을 표시하는 피벗 페이지에 랜딩하도록 할 수 있습니다. 이렇게 하면 좀더 사용자의 눈을 끄는 페이지가 열립니다.

표시:
© 2015 Microsoft