공간 모델

이 미디어 앱 템플릿 소개에서는 기본 요소, 이러한 템플릿이 제공하는 기본 기능 및 이를 하나로 묶는 아키텍처에 대해 설명합니다.

각 요소의 작동 방식에 대한 자세한 설명은 다음 섹션에서 확인할 수 있습니다. 이러한 섹션에 대한 가이드는 이 섹션의 개요를 참조하세요.


분석

미디어 템플릿에는 다음이 포함됩니다.

  • 앱 바기본 앱 탐색앱 컨트롤 (인앱 검색 및 설정용) 기능이 있으며 앱 아이콘을 포함합니다.
  • 탐색 가능한 콘텐츠 공간 – 그리드로 보기 (여기에 표시됨) 또는 목록 보기로 콘텐츠를 표시합니다.
  • 재생 컨트롤 – 여기에 표시된 최소화된 컨트롤 바에는 기본 미디어 메타데이터와 재생 컨트롤이 포함되어 있으며 더 많은 컨트롤이 있는 재생 오버레이에 액세스할 수도 있습니다.
1. 기본 탐색 탭과 앱 컨트롤이 있는 앱 바
2. 탐색 가능한 콘텐츠 공간
3. 재생 컨트롤 (최소화된 컨트롤 바에 여기 표시됨)

이 샘플 레이아웃은 이러한 요소의 가능한 정렬 방법 중 하나만 보여줍니다. 예를 들어 자동차 제조업체는 화면 크기에 따라 기본 내비게이션 및 앱 컨트롤을 하나의 가로 막대에 두기보다는 겹쳐 놓을 수 있습니다. 탐색 계층 구조는 다음 섹션에서 더 자세히 설명합니다.


기본 탐색 메뉴

앱 바의 기본 탐색은 노출된 탭으로 구성됩니다 (드문 경우지만 화면이 너무 작은 경우 제외).

다음 예는 일반적인 탭 정렬을 보여줍니다.

사용자는 앱 바에서 홈 및 재생목록과 같은 탭을 선택하여 미디어 콘텐츠의 최상위 뷰로 이동할 수 있습니다.
앱 바에서 탭을 선택하면 현재 뷰가 다른 최상위 앱 뷰로 대체됩니다.

앱 컨트롤

앱 컨트롤 (아래 예의 오른쪽 상단에 표시)은 브랜딩 또는 기본 탐색에 사용되지 않는 앱 바 부분을 차지합니다. 현재 미디어 앱의 인앱 검색 및 설정 기능에 대한 액세스를 제공합니다.

앱 컨트롤을 선택하면 오버레이가 열립니다. 예를 들어 여기에 표시된 설정 어포던스를 사용하면 설정 인터페이스를 표시하는 오버레이가 열립니다. 사용자가 오버레이를 닫으면 앱의 이전 위치로 돌아갑니다.

앱 바에서 설정 어포던스를 선택하면 사용자가 앱 설정에 액세스할 수 있는 오버레이가 열립니다.
앱 컨트롤을 선택하면 탐색 가능한 콘텐츠 위에 오버레이가 열리고 앱 바가 앱 헤더로 변경됩니다.

탐색 가능한 콘텐츠 공간

탐색 가능한 콘텐츠 공간 내에서 사용자는 콘텐츠를 스크롤하고 z 공간을 통해 개별 항목으로, 연속된 수준의 계층 구조 아래로 이동할 수 있습니다.

여러 단계를 거치면 운전자의 인지 부하가 증가하므로 Google은 가능한 한 적은 수준으로 정보 아키텍처를 비교적 평평하게 유지하는 것이 좋습니다.

탐색 가능한 최상위 수준의 콘텐츠를 사용하면 사용자는 여기 표시된 대로 그리드 또는 목록에서 선택할 수 있습니다.
탐색 가능한 콘텐츠에서 선택하면 더 자세한 내용이 포함된 다음 단계가 열립니다.

재생 컨트롤

미디어 앱의 재생 컨트롤은 상황에 따라 두 가지 형식 중 하나로 표시될 수 있습니다.

  • 최소화된 컨트롤 바 (여러 뷰에서 사용 가능)
  • 재생 뷰 (전체 컨트롤 바가 있는 오버레이)

다음 애니메이션 예에서 이 두 형태는 화면 하단에서 번갈아 표시됩니다.

최소화된 컨트롤바

최소화된 컨트롤 바는 탐색 가능한 콘텐츠 공간의 최상위 수준에서 콘텐츠 위에 떠 있습니다. 현재 재생 중인 콘텐츠에 관한 정보와 재생에 관한 사용자 제어를 위한 기본 어포던스를 제공합니다.

콘텐츠 재생이 시작되면 사용자가 미디어 콘텐츠를 탐색하는 동안 최소화된 컨트롤 바를 사용할 수 있습니다. 이는 새 미디어 앱이 선택되거나 사용자가 최소화된 컨트롤 바를 탭하여 재생 뷰를 표시할 때까지 지속됩니다.

재생 뷰

전체 컨트롤 막대는 재생 뷰에서만 사용할 수 있으며 콘텐츠 위에 떠 있습니다. 최소화된 컨트롤 바에서 사용할 수 있는 어포던스 외에도 전체 컨트롤 바는 각 미디어 앱에서 정의한 더 광범위한 컨트롤을 제공할 수 있습니다.

컨트롤의 터치 영역 외부 어디서나 최소화된 컨트롤 바를 선택하면 다음과 같이 전체 화면 재생 오버레이 (재생 뷰)로 확장됩니다.
재생 뷰 오버레이는 탐색 가능한 콘텐츠 공간 위에 배치되고, 최소화된 컨트롤바는 추가 컨트롤이 있는 전체 컨트롤바로 대체됩니다.