내보내기(0) 인쇄
모두 확장

Windows Phone용 Pivot 컨트롤 디자인 지침

2013-12-05

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

Pivot 컨트롤은 앱 내에서 뷰의 탐색을 관리하기 위한 빠른 방법을 제공합니다. 이 컨트롤은 개별 뷰를 서로 가로로 배치하며 왼쪽 및 오른쪽 탐색을 관리합니다. 페이지를 터치하거나 가로로 이동하면 피벗 기능이 순환됩니다.

Pivot 컨트롤 내부의 페이지 내용이 앱에 의해 정의됩니다.

UI_Pivot

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

Windows Phone 피벗 앱은 뷰 또는 페이지를 관리하는 빠른 방법을 제공합니다. 이 앱은 대용량 데이터 집합을 필터링하거나 여러 개의 데이터 집합을 표시하거나, 또는 앱 뷰를 전환하는 데 사용할 수 있습니다. 예를 들어 페이지를 터치하거나 페이지의 왼쪽에서 오른쪽으로 이동하면 콘텐츠의 다음 페이지로 이동합니다.

Pivot 컨트롤은 터치 상호 작용 및 탐색에 대한 지원을 기본으로 제공하므로 특수 제스처 기능은 기본적으로 사용하도록 설정되므로 앱에서 구현할 필요가 없습니다. Pivot 컨트롤은 다음 제스처와 탐색 효과를 지원합니다.

  • 가로 이동(탭하여 왼쪽/오른쪽으로 끌기)

  • 가로 터치(탭하여 빠르게 왼쪽/오른쪽으로 밀기)

  • 호스트되는 컨트롤 탐색 - 예를 들면, 링크는 탭하고 목록은 스크롤할 수 있습니다.

AP_CoreCon_PivotSample

특히 PivotItem 컨트롤이라는 보조 컨트롤의 컨테이너인 Pivot 컨트롤이 앱의 기초가 됩니다. PivotItem 컨트롤은 컨트롤, 표 또는 링크 등의 개별 페이지 콘텐츠를 각 페이지 내에 포함합니다. 디자이너를 사용하거나 프로그래밍 방식으로 이러한 요소에 대해 작업할 수 있습니다. Pivot 컨트롤 아키텍처에 대한 자세한 내용은 Windows Phone의 Pivot 컨트롤 아키텍처를 참조하세요.

AP_CoreCon_PivotAnatomy

큰 데이터 집합을 필터링하거나, 여러 데이터 집합을 보거나, 앱 뷰를 전환하는 데 이 컨트롤을 사용합니다. 앱을 통합 Windows Phone 피벗 환경처럼 디자인하고 반응하게 할 수 있습니다.

다음은 Pivot 컨트롤을 사용하여 피벗 환경을 만드는 방법에 대한 일반 모범 사례입니다.

  • 다른 Pivot 컨트롤 내부에 Pivot 컨트롤을 추가하지 마세요. Panorama 컨트롤 내부에 Pivot 컨트롤을 추가하지 마세요.

  • 하지만 Pivot 컨트롤에 대한 Panorama 컨트롤 링크에 요소를 지정할 수 있습니다. 그 반대의 경우도 가능합니다.

  • 앱에 사용되는 피벗 페이지 수(4페이지 이하)를 최소화해야 합니다. 사용자가 피벗 페이지에서 피벗 페이지로 점프하는 경우 길을 잃을 수 있습니다. Pivot 컨트롤 사용을 자제하고 피벗 페이지 사용을 환경에 적합한 시나리오로 제한합니다.

  • Pivot 컨트롤은 근본적으로 다른 작업을 노출하는 작업 흐름에 사용하면 안 됩니다. 서로 다른 페이지가 모양과 느낌 면에서 매끄럽게 진행되어야 하며, 사용자 동작이 갑작스럽게 변경되지 않아야 합니다(예: 메일을 필터링하는 페이지와 사진을 표시하는 페이지).

  • Pivot 컨트롤은 비슷한 유형의 데이터나 항목(예: 동일한 데이터의 필터링된 뷰)을 표시하는 데 사용해야 합니다.

  • 피벗 페이지가 순환적이라는 점을 고려하세요. 마지막 피벗 페이지에 도달한 후에도 사용자가 계속 살짝 밀 경우 표시할 다음 페이지는 첫 번째 피벗 페이지가 됩니다. 이 동작을 사용하여 피벗 페이지 옵션과 내용 간에 매끄럽게 진행되도록 합니다.

  • 피벗 헤더는 고정 길이이며 변경할 수 없습니다.

  • 빈 피벗 페이지는 사용자 작업을 통해 페이지에 정보가 더 추가될 수 있는 가능성이 없는 경우에만 제거해야 합니다. 예를 들어, 읽지 않은 이메일 피벗 페이지에 표시할 항목이 없으면 읽지 않은 이메일 피벗 페이지를 제거하지 마세요. 대신에 데이터를 사용할 수 있을 때나 단순히 피벗 페이지가 "비어 있음"을 사용자에게 알리기 위해 특정 콘텐츠를 표시하는 자리 표시자 텍스트나 이미지가 페이지에 추가됩니다.

  • 다음 피벗 창의 존재 여부에 대한 시각적 단서를 사용자에게 제공하고 지역화를 지원하기 위해 피벗 제목 텍스트를 최대 한 단어 또는 두 단어로 제한하는 것이 좋습니다.

  • Pivot 컨트롤 안에서 Slider, ToggleButton 또는 Map을 사용하지 마세요. 이동되거나 스크롤될 수 있는 컨트롤을 Pivot 컨트롤 내부에서 사용하지 마세요. 예를 들어 Pivot 컨트롤 내부에 Map 컨트롤을 추가하면 Pivot 컨트롤을 사용하기 어려울 수도 있습니다. 제스처 입력이 혼동됩니다. 예를 들어 슬라이더가 있고 왼쪽으로 밀려고 하면 맵을 스크롤하려는 것인지, 슬라이더를 이동하려는 것인지 또는 다음 피벗 페이지로 이동하려는 것인지 명확하지 않습니다. 해결 방법은 제스처 입력이 필요한 컨트롤을 사용하여 하위 페이지를 탐색하는 것입니다. 맵에서 제스처 상호 작용을 사용할 수 없는 경우 피벗 페이지에 맵을 배치할 수 있습니다. 맵을 활성화하는 버튼을 오버레이할 수 있습니다. 버튼을 누르면 실제로 Map 컨트롤만 있는 별도의 페이지로 이동합니다. 사용자가 뒤로 버튼을 눌러 Pivot 컨트롤로 돌아갈 수 있습니다.

  • 피벗 내에서 편집 컨트롤을 사용하지 마세요. 이러한 사용은 왼쪽에서 오른쪽으로 터치와 이동 제스처 상호 작용에 방해가 됩니다.

표시:
© 2014 Microsoft