MSDN Library
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

Windows Phone용 홈 페이지 메뉴(Panorama 또는 Pivot 컨트롤)가 있는 중앙 앱 허브

2013-12-05

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

 

많은 기능이 있는 앱을 디자인할 수 있습니다. 여러 기능을 살펴보면서 각 기능을 개별 영역으로 구성할 수 있는지 결정할 수 있습니다. 이러한 영역은 사용자가 방문할 앱의 개별 부분이 됩니다. 이러한 UI 영역을 탐색할 수 있는 쉬운 방법을 디자인해야 합니다. 이 유형의 앱에는 사용자가 앱의 각 하위 영역을 시작하는 중앙 응용프로그램 허브가 필요합니다.

예를 들어 축구 팀 관리를 위한 앱을 디자인한다고 가정합니다. 이 앱에는 경기와 연습 일정을 위한 기능 영역, 팀 선수 명단 정보를 위한 기능 영역, 득점 및 선수 통계를 위한 기능 영역, 지난 경기의 동영상 녹화를 위한 기능 영역 등 여러 기능 영역이 필요합니다. 사용자가 이러한 여러 UI 영역을 각각 탐색할 수 있는 수단을 제공하려고 합니다. 이렇게 하려면 앱을 시작할 때 표시되는 홈 페이지가 있는 중앙 응용프로그램 허브를 구현합니다.

UX_AppNavModels_01

축구 팀 관리를 위한 중앙 응용프로그램 허브 UI

중앙 UI 허브에서 사용자는 응용프로그램의 임의 영역을 탐색할 수 있습니다. 사용자가 하위 영역으로 이동된 후 해당 시점에 필요한 UI를 제공합니다. 예를 들어 축구 팀 앱에서 사용자는 중앙 응용프로그램 허브 페이지에서 지정된 대회의 선수 통계를 볼 수 있는 페이지로 이동할 수 있습니다. 사용자가 지정된 앱 하위 영역에서 작업을 마치고 다른 하위 영역으로 이동하려면 중앙 응용프로그램 허브로 먼저 돌아갑니다. 사용자가 Scores and Stats에서 Calendaring으로 바로 이동할 수는 없습니다. 사용자는 먼저 중앙 응용프로그램 허브로 돌아가야 합니다.

팁팁:

다른 앱 영역을 탐색하기 위한 홈 페이지로 중앙 응용프로그램 허브를 사용하는 것은 사용자가 앱과 효율적으로 상호 작용할 수 있도록 하는 멋진 디자인입니다.

응용프로그램 허브를 사용자에게 시각적으로 제공하는 여러 가지 방법이 있습니다. 이러한 방법을 Windows Phone Panorama 컨트롤 대신 사용하는 것이 좋습니다. 이 항목에서는 이 디자인에 대해 설명한 후 고려할 수 있는 변형을 보여 줍니다.

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

 

Microsoft는 중앙 응용프로그램 허브로 사용할 수 있는 Panorama 컨트롤이라는 UI 컨트롤을 제공합니다. 이 컨트롤을 통해 사용자는 앱의 모든 기능 영역을 탐색할 수 있습니다. Panorama 컨트롤은 배경으로 전체 컨트롤 뒤에 있는 Panorama 배경 이미지, 앱을 시작할 때 랜딩하는 홈 패널 및 앱의 최상위 수준에서 UI를 세그먼트화하는 추가 패널로 구성됩니다.

UX_AppNavModels_02

음악+동영상 허브

Panorama 컨트롤은 화면 영역보다 크게 확장되는 캔버스 화면을 사용자에게 제공합니다. 사용자는 패널을 터치하여 캔버스에서 패널별로 가로로 이동합니다. 앱을 시작하면 사용자가 파노라마의 첫 번째 패널로 이동됩니다. 원하는 탐색 작동 방법에 따라 여기서 사용법을 변형할 수 있습니다. 각 변형에 대해 설명합니다.

맨 왼쪽의 첫 번째 패널을 앱 하위 영역을 탐색하는 시작 지점인 홈 위치로 사용할 수 있습니다. 이 패널은 사용자가 선택할 수 있는 영역 메뉴를 제공합니다. 위 그림에 표시된 음악 + 동영상 허브 앱에서 라디오를 탭하면 실제로 음악 + 동영상 허브 앱 내부의 하위 응용프로그램인 라디오 페이지로 이동합니다. 파노라마 UI가 완전히 바뀌고 사용자에게 라디오 UI가 제공됩니다. 이제 사용자가 팟캐스트 영역으로 이동하려는 경우 하드웨어 뒤로 버튼을 사용하여 파노라마 홈 패널로 돌아간 다음 메뉴 목록에서 팟캐스트 항목을 탭합니다. 하위 영역 목록이 길어서 표시에 모두 들어가지 않는 경우 홈 패널에서 스크롤 뷰를 사용할 수 있습니다.

UX_RadioApp

Windows Phone 7용 음악+동영상 허브 앱의 라디오 페이지

홈 패널에서 탐색할 위치 목록에 완전히 새 앱을 시작하는 항목이 포함될 수 있습니다. 예를 들어 음악 + 동영상 허브 앱 홈 페이지에는 Windows Phone 스토어 로 이동하는 항목이 있습니다. 이 항목을 탭하면 그 자체가 Panorama 컨트롤인 스토어 음악 하위 영역이 시작됩니다.

홈 패널의 오른쪽에 있는 패널에는 사용자가 쉽게 액세스할 수 있도록 하려는 UI가 들어 있습니다. 패널을 사용하는 방법은 개발자가 결정합니다. 다른 방식으로 하위 영역에 액세스하도록 하여 사용자가 혼동하지 않게 하세요. 대신 오른쪽에 있는 이러한 패널을 사용하여 하위 영역의 내용과 관련된 일종의 요약 정보를 포함합니다. 예를 들어 음악 + 동영상 앱의 경우 최근에 액세스한 미디어를 보여 주는 두 개의 추가 패널이 있습니다.

따라서 음악 + 동영상 앱의 기록 패널은 하위 영역을 탐색할 필요가 없는 편리한 방법이며 최근에 들었거나 열어 본 항목을 빠르게 액세스할 수 있게 합니다. 음악 하위 영역으로 이동하여 특정 곡을 들은 경우 이제 해당 곡이 빠른 액세스를 위해 기록 패널에 표시됩니다. 따라서 이 경우 패널을 사용하여 하위 영역에서 방문한 콘텐츠를 빠르게 액세스할 수 있습니다.

Facebook 앱은 Panorama 컨트롤을 사용하여 사용자에게 해당 기능을 탐색하는 쉬운 방법을 제공하는 앱의 또 다른 예입니다. 이 앱에도 사용자가 탐색할 수 있는 영역 목록을 제공하는 동일한 홈 패널이 있습니다. 예를 들어 친구 항목을 탭하면 사용자가 친구 목록을 관리하는 UI로 이동합니다.

최상위 Panorama 컨트롤에서 오른쪽에 있는 패널은 기본적으로 디자이너가 최상위 수준에 표시하려는 가장 유용한 뷰에 빨리 액세스할 수 있도록 하는 데 사용됩니다. 파노라마의 최신 항목 패널은 실제로 하위 영역의 UI입니다. 홈 패널에서 이 패널에 접근하려면 뉴스 피드를 탭합니다. Pivot 컨트롤에서 실제로 Pivot 컨트롤인 이 하위 영역으로 이동됩니다. 뉴스 피드 하위 영역 Pivot 컨트롤에는 최신 항목, 사진, 링크동영상 페이지가 있습니다. 디자이너는 사용자가 아래의 뉴스 피드를 탐색한 후 최신 항목을 탐색하도록 하는 대신 최상위 Panorama 컨트롤에도 패널로 노출하려고 했습니다. 최상위 Panorama 컨트롤의 사진이벤트 패널에서도 유사한 작업이 진행 중입니다.

UX_AppNavModels_03

Facebook 앱에 대한 중앙 응용프로그램 허브 UI

홈 페이지에서 탐색할 영역 목록을 표시하는 대신 선택할 이미지 표를 표시할 수 있습니다. 약간 다르게 보이기만 할 뿐 둘 다 동일한 기능을 수행합니다. 이미지를 사용하면 해당 선택 항목이 이동하는 위치를 더 쉽게 확인할 수 있는 시각적 아이콘을 얻게 됩니다. 각 이미지의 위에 텍스트가 오버레이되어 앱 영역 및 해당 활동에 대한 추가 정보를 제공할 수 있습니다.

3 x 3 표가 있는 경우 필요에 따라 최대 9개 이미지 중에서 선택할 수 있습니다. 이 이미지 표를 호스팅하는 홈 패널에서 사용자는 임의 이미지를 클릭하여 앱이 제공하는 여러 기능 영역을 탐색할 수 있습니다.

이 홈 패널은 실제로 표시 가능한 여러 패널 너비에 걸쳐 있는 영역일 수 있습니다. 예를 들어 필요한 경우 추가 공간을 사용하기 위해 이미지의 홈 패널이 가로로 오른쪽까지 확장되도록 할 수 있습니다. 다음 그림과 같이 Kelley Blue Book 앱은 표가 오른쪽까지 걸쳐 있습니다. 이미지의 나머지 부분에 접근하려면 터치하여 가로로 이동하면 됩니다. 이 경우 Panorama 컨트롤 홈 패널은 두 배 너비의 패널입니다.

UX_AppNavModels_04

Kelley Blue Book 앱에 대한 응용프로그램 허브 UI

세로로 스크롤되는 이미지 표는 사용자에게 너무 혼동을 주기 때문에 만들지 않는 것이 좋습니다.

Panorama 컨트롤을 사용하며 메뉴 또는 허브처럼 동작하여 앱의 기능 영역을 탐색하는 홈 패널이 있는 경우에도 앱을 열 때 이 패널을 시작하는 랜딩 지점으로 설정하지 않아도 됩니다. 다른 패널이 처음 표시되도록 선택하는 이유는 단순히 영향을 위한 것입니다. 예를 들어 영화와 상영 시간을 표시하는 앱이 있는 경우 앱 하위 영역에 대한 선택 목록이 있는 홈 패널이 있을 수도 있습니다. 사용자가 여기서 관심 없는 항목에 랜딩하도록 하는 대신 최신 인기 영화의 그래픽을 보여 주는 패널을 사용할 수 있습니다. 이렇게 하면 좀더 사용자의 눈을 끄는 페이지가 열립니다.

eBay 앱을 여는 경우 홈 패널에서 시작되지 않습니다. 대신에 이 디자인은 사용자를 현재 추천 거래가 포함된 패널에서 시작합니다. 오른쪽을 터치하면 이미지가 포함된 응용프로그램 허브 홈 패널이 나타나며, 여기서 이미지를 클릭하여 앱 하위 영역, Watching, Selling, BuyingMessages로 이동할 수 있습니다. 맨 위의 검색 텍스트 상자의 사용도 확인합니다. 이것은 항목을 신속하게 찾기 위해 맨 위에 배치할 유용한 UI 요소이기도 합니다.

UX_AppNavModels_05

eBay 앱에 대한 응용프로그램 허브 UI

Microsoft에서 제공하는 Panorama 컨트롤 대신 사용할 수 있는 방법이 있습니다. 파노라마는 최상위 수준에 여러 패널을 배치할 수 있는 기능을 제공합니다. 하지만 이러한 패널이 필요 없을 수도 있습니다. 다음 그림과 같이 단일 페이지에 대신 간단한 목록을 포함할 수 있습니다. 앱을 열면 이 페이지가 사용자에게 표시됩니다. 이 앱은 탐색할 각 하위 영역에 대해 텍스트 제목 왼쪽의 아이콘과 설명을 사용합니다.

UX_AppNavModels_06

편리한 일기 앱에 대한 응용프로그램 허브 UI

일부 그래픽 배경을 사용하고 탐색 가능한 하위 영역을 고유한 창의적 방식으로 제공하는 고유한 상호 작용 환경을 사용자에게 제공할 수 있습니다. 자신의 브랜딩을 설정하기 위해 이 작업을 할 수도 있습니다. 이 작업은 일부 엔터테인먼트 앱 유형에 더 적용할 수 있습니다. 다음은 시각적으로 매력적인 홈 페이지의 예입니다.

UX_AppNavModels_07

Mycomic 앱

이미 언급했듯이 앱에 별개의 기능 영역이 있는 경우 이러한 기능을 별도의 앱으로 분할할 수 있습니다. 반드시 분할할 필요는 없으며 단일 앱으로 계속 사용할 수 있습니다. 앱을 열 때 표시되는 기본 화면이 단일 앱을 구성하는 실제 하위 응용프로그램에 액세스하는 시작 위치 역할을 합니다. 이 기본 응용프로그램 허브 페이지는 사용자가 앱 아이콘을 클릭하고 앱을 시작할 때 표시되는 페이지입니다.

기능이 있는 각 고유 영역에 대해 별도의 Windows Phone 응용프로그램을 만들지 않는 것이 좋습니다. 이 경우 사용자가 앱 중 하나를 종료한 후 다른 앱을 시작해야 하는 문제가 있습니다. 사용자가 9개의 다른 응용프로그램과 상호 작용해야 한다고 가정해 보세요. 대신 사용자가 시작할 단일 응용프로그램을 만들고, 이 단일 시작 지점에서 앱의 다른 영역에 액세스하는 것이 좋습니다. 앱 디자이너는 사용자를 중앙 허브로 유도하여 제공되는 모든 기능을 하나의 중앙 화면에서 볼 수 있게 하려고 합니다.

앱 기능을 분할하는 방법 및 사용자가 탐색할 수 있도록 하려는 탐색 수준을 결정하는 것은 어렵습니다. 홈 패널과 함께 Panorama 컨트롤을 사용하는 경우 사용자가 목록에서 선택 항목을 탭할 때 표시되는 UI를 결정해야 합니다. 선택 항목을 탭하면 파노라마 응용프로그램 허브를 벗어나서 단일 페이지나 Pivot 컨트롤 같은 새 UI 컨트롤로 이동합니다. 아래 표시된 음악 + 동영상 허브 앱 홈 페이지를 사용하여 이 과정을 보여 줍니다.

UX_AppNavModels_08

음악+동영상에 대한 응용프로그램 허브

음악 + 동영상 허브 앱의 경우 라디오 선택은 듣고 있는 라디오 방송국을 변경할 수 있는 단일 UI 페이지입니다. 이 하위 영역에서는 추가 탐색을 위해 목록, Panorama 또는 Pivot 컨트롤을 사용하지 않습니다. 하지만 홈 페이지에서 음악을 선택하면 보유한 곡의 다른 뷰가 제공됩니다. 다음 그림에서는 음악 선택에 대해 탐색할 UI 트리 부분을 보여 줍니다.

UX_AppNavModels_09

음악 + 동영상 앱의 음악에 대한 탐색 트리

음악 영역에 있는 경우 가로로 스크롤 가능한 Pivot 컨트롤이 표시됩니다. 음악 아래에서 항상 처음 랜딩되는 피벗 페이지는 아티스트 피벗 페이지입니다. 여기서 여러 피벗 페이지를 통해 왼쪽이나 오른쪽으로 이동할 수 있습니다. 각 피벗 페이지는 선택해야 하는 곡을 보는 다른 방법을 제공합니다.

사용자가 원하는 앱 영역을 탐색하면 해당 시점에 필요한 UI를 제공합니다. 지정된 앱 하위 영역에서 사용자는 실제로 의도한 상호 작용을 하게 됩니다. 이 두 번째 수준에 탐색할 다른 영역 목록을 표시하는 것은 바람직하지 않습니다. 기본 페이지 Panorama 컨트롤과 두 번째 세부 정보 수준만 유지하는 것이 좋습니다. 이 두 번째 수준에서 사용자는 다른 앱 영역으로 이동하기 전에 홈 페이지로 돌아갑니다. 하드웨어 뒤로 버튼이 돌아가는 데 사용됩니다.

Panorama 컨트롤을 사용하면 모든 패널에 걸쳐 확장되는 이미지를 표시할 수 있습니다. 항상 동일한 이미지를 사용하거나, 가끔 프로그래밍 방식으로 변경하여 테마를 변경할 수 있습니다. 앱 사용 시 사용자의 관심사와 관련된 이미지를 표시할 수 있습니다. 너무 혼잡하지 않고 위의 UI 콘텐츠에 방해가 되지 않는 이미지를 사용합니다.

UX_AppNavModels_10

배경 이미지

탐색할 하위 영역 목록이 있는 패널이 여러 개 필요할 수도 있습니다. 두 개의 다른 탐색 영역 목록을 분리해야 할 이유가 있을 수 있습니다. 이 경우 둘 다 홈 패널로 작동하는 패널 두 개를 사용할 수 있습니다.

앱이 시작 시 중앙 응용프로그램 허브로 바로 이동하지 못할 수도 있습니다. 사용자에게 앱 액세스를 허용하기 전에 일종의 로그온 또는 비밀번호 잠금 해제를 먼저 제공해야 하기 때문일 수 있습니다. 앱을 시작하기 전에 사용자에게 표시할 브랜딩 시작 페이지를 제공할 수도 있습니다.

UX_AppNavModels_11

편리한 일기 앱에 대한 로그인 페이지 UI

표시:
© 2016 Microsoft