홈페이지 메뉴(허브 또는 피벗 컨트롤)가 포함된 중앙 앱 허브(Windows Phone 스토어 앱)

다양한 기능이 포함된 앱을 디자인하고 있을 수 있습니다. 기능을 검토하면서 확실히 구별되는 영역으로 구성하기로 결정할 수 있습니다. 이러한 영역은 결국 사용자가 방문할 앱의 분리된 부분이 될 것입니다. 사용자가 이러한 UI 영역을 쉽게 탐색할 수 있도록 디자인해야 합니다. 이 유형의 앱에는 사용자가 앱의 각 하위 영역을 시작하는 중앙 응용 프로그램 허브가 필요합니다.

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

축구팀 관리를 위한 중앙 앱 허브 UI

사용자는 중앙 UI 허브에서 응용 프로그램의 모든 영역으로 이동할 수 있습니다. 하위 영역으로 이동한 사용자에게 해당 시점에서 필요한 UI를 제공합니다. 예를 들어 축구팀 앱에서 사용자는 중앙 응용 프로그램 허브 페이지에서 지정된 시합을 위해 선수 상태를 확인할 수 있는 페이지로 이동할 수 있습니다. 사용자가 앱의 지정된 하위 영역에서 작업을 마치고 다른 하위 영역으로 돌아가려면 먼저 중앙 응용 프로그램 허브로 돌아가야 합니다. 사용자는 점수 및 상태에서 일정 관리로 바로 이동할 수 없습니다. 사용자는 먼저 중앙 응용 프로그램 허브로 돌아가야 합니다.

참고  앱의 다른 영역으로 이동하기 위해 홈페이지가 있는 중앙 응용 프로그램 허브를 사용하는 것은 사용자가 앱을 효율적으로 조작할 수 있게 하는 좋은 디자인입니다.

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

허브 컨트롤을 응용 프로그램 허브로 사용

Microsoft에서는 중앙 응용 프로그램 허브로 사용할 수 있는 허브 컨트롤이라는 UI 컨트롤을 제공합니다. 이 컨트롤을 사용하면 사용자가 앱에서 모든 기능 영역으로 이동할 수 있습니다. 허브 컨트롤은 배경으로 전체 컨트롤 뒤에 있는 허브 배경 이미지, 앱이 시작될 때 방문하는 홈 섹션, 앱의 상위 수준에서 UI를 구분하는 추가 섹션으로 구성됩니다.

음악 허브

허브 컨트롤은 사용자에게 화면 범위를 벗어나 가로로 확장되는 넓은 가상 캔버스를 제공합니다. 사용자가 캔버스를 가로질러 그으면 섹션별로 캔버스를 가로질러 가로로 이동됩니다. 앱이 시작될 때 사용자는 허브의 첫 번째 섹션으로 이동됩니다. 탐색 작동 방식에 따라 여기에서 사용법을 변형할 수 있습니다. 각 변형에 대해 설명합니다.

홈 섹션

맨 왼쪽에 있는 이 첫 번째 섹션을 앱의 하위 영역으로 이동할 시작점인 홈 위치로 사용할 수 있습니다. 이 섹션에서는 사용자가 선택할 영역에 대한 메뉴를 제공합니다. 앞의 그림에 표시된 음악 허브에서 손가락으로 라디오를 탭하면 실제로 음악 허브 내부의 하위 응용 프로그램인 라디오 페이지로 이동됩니다. 허브 UI가 완전히 바뀌고 사용자에게 라디오 UI가 제공됩니다. 이제 사용자가 팟캐스트 영역으로 이동하려고 하면 하드웨어 뒤로 버튼을 사용하여 허브 홈 섹션으로 돌아간 다음 메뉴 목록에서 팟캐스트 항목을 탭합니다. 하위 영역 목록이 디스플레이에 표시될 수 있는 것보다 더 길면 홈 섹션에서 스크롤 뷰를 사용할 수 있습니다.

음악 허브의 라디오 페이지

홈 섹션에서 이동할 위치 목록에는 완전히 새로운 앱을 시작하는 항목이 포함됩니다. 예를 들어 음악 허브 홈 섹션에는 스토어로 이동할 수 있는 항목이 있습니다. 이 항목을 탭하면 그 자체가 허브 컨트롤인 스토어 음악 하위 영역이 시작됩니다.

오른쪽 섹션

홈 패널의 오른쪽 섹션에는 사용자가 쉽게 액세스할 수 있는 UI가 포함됩니다. 섹션을 어떻게 사용할지는 개발자에게 달려 있습니다. 여러 가지 방법으로 액세스할 수 있는 하위 영역을 포함해서 사용자를 혼란스럽게 만들지 마세요. 대신에 이러한 오른쪽 섹션을 사용하여 하위 영역에 포함된 항목과 관련된 몇 가지 요약 정보를 포함하세요. 예를 들어 음악 허브의 경우 최근에 액세스한 미디어를 보여 주는 두 개의 추가 섹션이 있습니다.

음악 허브의 기록 섹션은 하위 영역으로 아래로 이동할 필요가 없는 편리한 방법이고 여기에서 최근에 듣거나 본 항목에 빠르게 액세스할 수 있습니다. 음악의 하위 영역으로 이동하고 특정 노래를 들으면 해당 노래가 빠른 액세스를 위한 기록 섹션에 표시됩니다. 따라서 이 경우 섹션을 통해 하위 영역에서 방문한 콘텐츠에 빠르게 액세스할 수 있습니다.

Facebook 앱은 허브 컨트롤을 사용하여 사용자에게 기능을 손쉽게 탐색하는 방법을 제공하는 앱의 다른 예입니다. 여기에도 사용자가 이동할 수 있는 영역 목록을 제공하는 동일한 홈 섹션이 있습니다. 예를 들어 친구 항목을 탭하면 사용자는 친구 목록을 관리하는 UI로 이동됩니다.

상위 수준 허브 컨트롤에서 오른쪽 섹션은 기본적으로 디자이너가 상위 수준에서 표시할 가장 유용한 뷰라고 생각한 항목에 대한 더 빠른 액세스를 제공하는 데 사용됩니다. 허브의 최신 섹션은 실제로 하위 영역의 UI입니다. 홈 섹션에서 이 섹션으로 이동하려면 뉴스 피드를 탭합니다. 그러면 실제로는 피벗 컨트롤인 하위 영역으로 이동됩니다. 뉴스 피드 하위 영역 피벗 컨트롤에는 최신, 사진, 링크, 동영상 항목이 포함됩니다. 사용자가 뉴스 피드로 아래로 이동한 다음 최신으로 이동할 필요가 없다고 여기는 디자이너는 이 항목을 최상위 허브 컨트롤의 섹션으로 노출하기도 합니다. 최상위 허브 컨트롤의 사진 및 이벤트 섹션도 비슷하게 처리됩니다.

Facebook 앱의 중앙 응용 프로그램 허브 UI

이미지 그리드 사용

홈 섹션에서 이동할 영역 목록을 표시하지 않고 선택할 이미지 그리드를 표시할 수도 있습니다. 동일한 작업이 이루어지고 있는데 약간 다르게 보입니다. 이미지를 사용하면 해당 섹션을 통해 이동하는 위치를 더 쉽게 결정할 수 있는 시각적 아이콘이 표시됩니다. 각 이미지에는 그 위에 오버레이된 텍스트를 포함하여 해당 앱 영역과 관련 활동에 대한 추가 정보를 제공할 수 있습니다.

3 x 3 그리드를 사용하면 필요한 경우 선택할 최대 9개 이미지를 포함할 수 있습니다. 이 이미지 그리드를 호스트하는 홈 섹션에서 사용자는 이미지를 클릭하여 앱에서 제공하는 다른 기능 영역으로 이동할 수 있습니다.

이 홈 섹션은 실제로 두 개 이상 표시 가능한 섹션 너비에 걸쳐 있는 영역이 될 수 있습니다. 예를 들어 필요한 경우 약간 더 많은 공간을 차지하도록 이미지의 홈 섹션을 오른쪽으로 가로로 확장되게 할 수 있습니다. 다음 그림과 같이 Kelley Blue Book 앱의 오른쪽에는 그리드 범위가 있습니다. 나머지 이미지에 액세스하려면 가로로 이동하도록 그으면 됩니다. 이 경우 허브 컨트롤 홈 섹션의 너비는 2배입니다.

Kelley Blue Book 앱의 응용 프로그램 허브 UI

사용자를 너무 혼란스럽게 만들 수 있으므로 세로로 스크롤되는 이미지 그리드는 만들지 마세요.

홈 섹션에서 시작하지 않음

허브 컨트롤을 사용하여 앱의 기능 영역으로 이동하기 위한 메뉴나 허브와 같이 동작하는 홈 섹션이 있더라도 앱이 열릴 때 이 시작 부분을 방문 지점으로 만들 필요는 없습니다. 효과를 극대화하기 위해 일부 다른 섹션을 먼저 표시하게 선택할 수도 있습니다. 예를 들어 동영상과 재생 시간을 표시하는 앱이 있는 경우 앱 하위 영역에 대한 선택 목록이 있는 홈 섹션을 포함할 수 있습니다. 여기서 사용자가 그다지 흥미를 보이지 않는 항목을 방문하게 하지 않고 가장 인기 있는 최신 동영상의 그래픽을 표시하는 섹션을 포함할 수 있습니다. 이렇게 하면 사용자는 더 눈길을 끄는 이미지를 접하게 됩니다.

eBay 앱을 열 때 홈 섹션에서 시작하지 않습니다. 대신에 이 디자인에서는 사용자가 해당 시점의 추천 특가 상품이 있는 섹션에서 시작합니다. 오른쪽으로 그으면 시청, 판매, 구매, 메시지의 앱 하위 영역으로 이동하기 위해 클릭할 응용 프로그램 허브 홈 섹션으로 이동됩니다. 맨 위에는 검색 텍스트 상자를 사용한다는 것에 주목하세요. 이 기능은 항목을 빠르게 찾기 위해 맨 위에 배치할 유용한 UI 요소입니다.

eBay 앱의 응용 프로그램 허브 UI

사용자를 너무 혼란스럽게 만들 수 있으므로 세로로 스크롤되는 이미지 그리드는 만들지 마세요.

UI 기능 영역의 사용자 지정 메뉴

Microsoft에서 제공하는 허브 컨트롤 대신 다른 기능을 사용할 수 있습니다. 허브는 상위 수준에 여러 섹션을 포함하는 기능을 제공합니다. 이러한 섹션이 필요하지 않을 수도 있습니다. 다음 그림과 같이 단일 페이지에 간단한 목록을 포함할 수 있습니다. 이 페이지는 앱이 열릴 때 사용자에게 보이는 페이지가 됩니다. 이 앱은 이동할 각 하위 영역의 텍스트 제목과 설명 왼쪽에 아이콘을 사용합니다.

Easy Diary 앱의 응용 프로그램 허브 UI

고유의 예술적인 방식으로 제공되는 탐색 가능한 하위 영역이 포함된 그래픽 배경을 사용하는 고유한 조작 환경을 사용자에게 제공하기로 결정할 수 있습니다. 자신만의 브랜드 이미지를 구축하기 위해 이렇게 할 수도 있습니다. 이는 몇몇 유형의 엔터테인먼트 앱에 더욱 적합합니다. 다음은 시각적인 효과가 뛰어난 홈페이지의 예입니다.

MyComic 앱

비슷한 응용 프로그램을 단일 응용 프로그램으로 결합

이미 설명한 것처럼 앱에 확실히 구별되는 기능 영역이 충분히 있어서 이러한 기능을 그 자체로 독자적인 개별 앱으로 분할하는 것을 고려했을 수도 있습니다. 이렇게 할 필요가 없습니다. 그대로 단일 앱으로 유지할 수 있습니다. 앱이 열릴 때 표시되는 기본 화면이 단일 앱을 구성하는 실제 하위 응용 프로그램에 액세스할 수 있는 시작 위치 역할을 할 수 있습니다. 이 기본 응용 프로그램 허브 섹션은 사용자가 앱 아이콘을 클릭하고 앱을 시작할 때 표시되는 페이지가 됩니다.

포함할 기능에 해당하는 각 고유 영역에 대한 개별 앱을 만들지 않는 것이 좋습니다. 이와 관련된 문제는 사용자가 한 앱을 종료한 후 다른 앱을 시작해야 한다는 것입니다. 사용자가 조작할 9개의 서로 다른 앱이 있다고 가정해 봅니다. 사용자가 시작할 단일 앱을 만들고 이 단일 시작점에서 앱의 여러 영역에 액세스하는 것이 좋습니다. 앱 디자이너는 사용자가 중앙 허브로 들어와서 하나의 중앙 화면에서 디자이너가 제공하는 모든 것을 볼 수 있기를 원합니다.

탐색 수준

앱의 기능을 어떻게 분할하고 사용자가 어떤 탐색 수준을 거치게 할지 결정하는 것은 어려운 일입니다. 홈 섹션이 있는 허브 컨트롤을 사용하고 있는 경우에는 사용자가 목록에서 선택을 탭할 때 어떤 UI가 표시될지를 결정해야 합니다. 항목을 선택하면 허브 컨트롤을 벗어나 단일 페이지나 피벗 컨트롤과 같은 새 UI 컨트롤로 이동됩니다. 아래 표시된 음악 허브 홈 섹션을 사용하여 이에 대해 설명하겠습니다.

음악 응용 프로그램 허브

음악 허브의 경우 라디오 선택은 듣고 있는 라디오 방송국을 변경할 수 있는 단일 UI 페이지입니다. 이 하위 영역에서는 추가로 탐색할 목록, 허브 또는 피벗 컨트롤을 추가로 사용하지 않습니다. 하지만 홈 섹션의 음악 선택은 포함된 노래의 다양한 뷰를 제공합니다. 다음 그림에서는 음악 선택에 대해 탐색할 UI 트리의 일부를 보여 줍니다.

음악 허브의 음악 탐색 트리

음악 영역에 있을 경우 가로로 스크롤할 수 있는 피벗 컨트롤이 표시됩니다. 음악에서 항상 처음 방문하는 피벗 페이지는 아티스트 피벗 항목입니다. 여기에서 다양한 피벗 항목을 통해 왼쪽 또는 오른쪽으로 트래버스할 수 있습니다. 각 피벗 항목을 통해 선택해야 하는 노래를 서로 다른 방법으로 볼 수 있습니다.

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

배경 이미지 사용

허브 컨트롤을 사용하여 모든 섹션 뒤에 펼쳐지는 이미지를 표시할 수 있습니다. 항상 동일한 이미지를 포함하거나, 때때로 프로그래밍 방식으로 이미지를 변경하여 테마를 변경할 수 있습니다. 앱을 사용할 때 사용자의 관심과 관련성이 있는 이미지를 표시할 수 있습니다. 너무 복잡하지 않고 그 위에 있는 UI 콘텐츠를 가리지 않는 이미지를 사용하세요.

배경 이미지

여러 홈 패널

탐색할 하위 영역 목록이 포함된 두 개 이상 섹션이 필요할 수 있습니다. 어떤 이유로 탐색 영역을 두 개의 개별 목록으로 구분할 수도 있습니다. 이 경우 둘 다 홈 섹션 역할을 하는 두 개의 섹션을 포함하는 것입니다.

기본 시작 화면

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

Easy Diary 앱의 로그인 페이지 UI

관련 항목

허브

피벗