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

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

2013-12-05

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

Panorama 컨트롤은 좌우로 이동할 수 있는 항목의 뷰를 표시합니다. 이 컨트롤은 앱의 전체 화면 컨테이너 및 탐색 모델입니다.

OEM_OemMoAppDevGuide_PeoplePan

Panorama 컨트롤

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

파노라마 환경은 기본 Windows Phone 모양과 느낌의 일부입니다. 휴대폰 화면의 범위에 맞게 디자인되는 표준 앱과 달리 파노라마 앱은 화면의 범위를 벗어나는 긴 가로 캔버스를 사용하여 컨트롤, 데이터 및 서비스를 보는 고유한 방법을 제공합니다. 이러한 기본 동적 뷰는 계층이 시차 효과와 비슷하게 다른 속도로 매끄럽게 이동하도록 계층화된 애니메이션과 콘텐츠를 사용합니다.

파노라마 앱의 요소는 보다 자세한 환경의 시작 지점 역할을 합니다. 개발자는 사용자에게 시각적으로 다양한 콘텐츠 표현을 제공해야 합니다.

사용자 인터페이스는 배경 이미지, 파노라마 제목, 파노라마 섹션 제목, 파노라마 섹션 등 고유한 독립 동작 논리로 작동하는 계층 유형으로 구성됩니다. 미리 보기는 환경을 완료하며 파노라마 뷰의 기본 요소입니다. 파노라마 환경 외부에서 사용되는 콘텐츠나 미디어에 연결합니다.

배경 이미지는 최하위 계층이며 파노라마에 잡지처럼 다채로운 느낌을 제공합니다. 일반적으로 풀 블리드(full-bleed) 이미지인 배경은 앱에서 가장 시각적인 부분입니다.

파노라마 제목은 앱을 식별하며 사용자가 앱을 시작하는 방법에 관계없이 표시되어야 합니다.

파노라마 섹션은 다른 컨트롤과 콘텐츠를 캡슐화하는 파노라마 앱의 구성 요소입니다. 파노라마 섹션은 손가락이 이동 또는 터치하는 속도와 동일한 속도로 이동합니다.

파노라마 섹션 제목은 지정된 파노라마 섹션의 선택 사항입니다.

미리 보기는 파노라마 뷰의 기본 요소일 수 있습니다. 파노라마 환경 외부에서 사용되는 콘텐츠나 미디어에 연결합니다.

OEM_OemMoAppDevGuide_PictPan

미리 보기가 있는 Panorama 컨트롤

파노라마 환경은 Panorama 컨트롤과 하나 이상의 PanoramaItem 컨트롤로 구성됩니다. Panorama 컨트롤은 앱의 기본 컨트롤로 사용되며, PanoramaItem 컨트롤은 개별 콘텐츠 섹션을 호스트합니다. 앱의 요구 사항에 따라 각각 개별 기능 용도를 제공하는 여러 PanoramaItem 컨트롤을 Panorama 컨트롤 화면에 추가할 수 있습니다. 예를 들어 특정 PanoramaItem에는 일련의 링크와 컨트롤이 포함되고 다른 컨트롤은 축소판 이미지의 저장소일 수 있습니다. 사용자는 파노라마 앱이 이미 제공하고 있는 제스처 지원을 사용하여 이들 섹션의 상하좌우로 이동할 수 있습니다.

파노라마의 일반 지침:

  • Panorama 컨트롤은 마지막 섹션에서 첫 번째 섹션으로 래핑되고 그 반대의 경우도 마찬가지입니다. 이 효과를 활용하여 앱의 흐름을 올바르게 디자인할 수 있습니다.

  • Panorama에서 앱 바를 사용하는 경우 Mode를 Minimized로 설정합니다. 이 모드는 특히 Panorama 페이지의 화면 공간을 최대화합니다. 자세한 내용은 Windows Phone용 앱 바를 참조하세요.

  • 성능상 및 사용자가 탐색해야 하는 뷰 수를 제한하기 위해 Panorama 컨트롤에 최대 5개의 섹션만 사용해야 합니다. 콘텐츠가 더 복잡한 경우 더 적은 섹션을 사용해야 합니다. 많은 섹션으로 사용자에게 혼동을 주지 마세요. 4개 또는 5개 섹션만 사용하면 사용자가 현재 위치 및 왼쪽과 오른쪽에 있는 항목과 관련하여 위치를 확인할 수 있습니다.

  • Panorama 컨트롤은 세로 방향 전용입니다. Panorama 컨트롤에는 가로 방향이 지원되지 않습니다. 불안정한 환경을 방지하려면 Panorama 컨트롤 내에서 시작된 대화 상자를 회전하지 말아야 합니다.

  • Panorama 컨트롤은 시스템 트레이에 진행률 표시줄을 표시하거나 시작 시 전체 화면 "로드 중" 표시기를 표시할 수 있습니다. 시스템 트레이의 진행률 표시줄은 Panorama 컨트롤의 한 섹션을 업데이트하거나 새로 고치는 중이지만 사용자 상호 작용을 차단하지 않는 경우에 표시됩니다.

  • 첫 번째 방문: 표시되는 첫 번째 섹션에서는 Panorama 컨트롤 제목이 왼쪽에 올바르게 정렬되어 있어야 합니다. 어떤 섹션이 기본값인지에 대한 표준 지침은 없습니다. 이것은 제공되는 콘텐츠에 따라 달라집니다.

  • 이후 방문 시에는 사용자가 동일한 Panorama 컨트롤을 다시 방문할 때 이전에 중단한 창으로 다시 돌아가야 합니다.

  • Panorama 컨트롤 내부에서 Pivot 컨트롤을 사용해서는 안 되며, 그 반대의 경우도 마찬가지입니다. 하지만 Panorama 컨트롤 섹션의 항목에 링크를 설정하여 사용자를 Pivot 컨트롤로 이동시킬 수 있습니다.

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

  • Panorama 컨트롤과 Pivot 컨트롤을 사용해야 하는 경우에 대한 자세한 내용은 다음 항목을 참조하세요.

파노라마 제목:

  • 일반 텍스트나 로고 등의 이미지를 Panorama 제목에 사용합니다. 로고 및 텍스트(또는 기타 UI 요소)와 같은 여러 요소를 사용할 수도 있습니다.

  • 제목의 글꼴이나 이미지 색이 전체 배경에 적용되는지, 표시 유형이 배경 이미지에 종속되지 않는지 확인합니다. 다른 글꼴, 크기 또는 색을 사용하는 특정 브랜딩 환경이 필요하지 않은 경우 시스템 글꼴과 스타일을 사용합니다.

  • 일관성을 위해 시작의 실행 타일에 동일한 Panorama 제목을 사용합니다.

  • Panorama 제목에 애니메이션 효과를 주거나 그 크기를 동적으로 변경하지 마세요.

  • 최상위 콘텐츠 계층에 비해 느리고 배경 아트보다 더 느린 동작 속도를 Panorama 제목에 사용합니다.

파노라마 섹션 제목:

  • Panorama 섹션 제목에는 일반 텍스트를 사용합니다. 또는 이미지를 사용할 수 있습니다. 이미지 및 텍스트(또는 UIElement 클래스의 기타 UI 요소)와 같은 여러 요소를 사용할 수도 있습니다.

  • Panorama 섹션 제목이 배경 아트에 종속되지 않는지 확인합니다.

  • 제목이 이동하므로 애니메이션 효과가 적용된 Panorama 섹션 제목은 사용을 피합니다.

  • 여러 컨트롤이 있는 경우에도 Panorama 섹션 제목을 전체 Panorama 섹션에 적용합니다.

  • 사용자가 새 섹션으로 이동하는 경우 Panorama 섹션 제목에 애니메이션 효과를 적용하여 화면 바깥쪽으로 나가게 합니다.

  • Panorama 섹션 제목은 섹션 너비가 화면 너비보다 크거나 작은지에 따라 다르게 동작해야 합니다. 즉, 제목이 섹션의 왼쪽 위에 유지되지 않고 Panorama가 이동하는 동안 위쪽에서 다른 속도로 이동해야 합니다. 이 경우 세로 스크롤은 없어야 합니다. 또는 섹션 너비가 화면 너비보다 작은 경우 제목이 항상 섹션의 왼쪽 위로 설정되어야 합니다. 이 경우 가로 애니메이션이 없어야 하며 제목이 콘텐츠와 함께 이동해야 합니다.

파노라마 섹션:

  • 섹션의 범위 내에 있고 가로 스크롤과 병행되지만 않으면 Panorama 섹션에서 목록 또는 표를 세로로 스크롤할 수 있습니다.

  • 사용자가 새 섹션으로 이동하는 경우 Panorama 섹션에 애니메이션 효과를 적용하여 화면 바깥쪽으로 나가게 합니다.

  • 표시할 콘텐츠가 있을 때까지 Panorama 섹션을 숨깁니다.

배경 아트 모범 사례:

  • 항상 배경이나 복잡한 배경을 사용할 필요는 없습니다.

  • 사진 배경은 Panorama 컨트롤을 시각적으로 멋지게 만듭니다.

  • Panorama 컨트롤에 테마를 지정하고 앱 브랜딩 색으로 시스템 테마를 재정의할 수 있습니다.

  • 시스템 트레이 또는 다른 요소와 겹치거나 가리는 문제가 발생할 수 있으므로 Panorama 컨트롤 제목에 포함 텍스트와 로고를 포함할 때는 주의합니다.

  • 콘텐츠가 너무 복잡하고 지나치지 않도록 콘텐츠에 포함되는 텍스트와 이미지를 신중하게 선택하여 Panorama 컨트롤 환경의 아름다움을 유지합니다.

  • 어둡고 부드러우며 대비가 낮은 배경을 사용합니다. 한 가지 실용적인 방법은 반투명 흑백 필터(사각형)를 배경 이미지 위에 사용하여 텍스트를 읽기 쉽게 하는 것입니다. 이 작업은 비트맵 편집 도구에서 수행하거나 사각형 컨트롤을 사용하여 배경 이미지 위에 오버레이할 수 있습니다.

  • 단일 이미지를 Panorama 컨트롤의 배경으로 사용하는 것이 좋습니다.

  • 전체 Panorama에 걸쳐 있는 이미지나 단색 배경을 사용합니다. 이미지를 사용하는 경우 대부분의 UI 이미지 형식이 지원됩니다. 하지만 일반적으로 JPEG가 다른 형식보다 파일 크기가 작기 때문에 JPEG를 사용하는 것이 좋습니다.

  • 여러 이미지를 배경으로 사용할 수 있지만 한 번에 하나의 이미지만 표시해야 합니다.

  • 성능을 향상시키고 로드 시간을 최소화하며 배율 조정이 발생하지 않도록 하려면 배경 이미지가 480 x 800 픽셀과 1024 x 800 픽셀(너비 x 높이) 사이여야 합니다.

미리 보기:

  • 전체 이미지보다 식별 가능한 대상을 강조하는 잘린 이미지를 사용합니다. 텍스트 없이 이미지를 식별할 수 없는 경우 최대 두 줄의 텍스트를 사용하여 콘텐츠를 식별할 수 있습니다.

UI_Panorama_04

Panorama 컨트롤 부분(제목, 섹션 제목 등)

표시:
© 2014 Microsoft