미디어 앱

안드로이드 오토모티브 OS(AAOS)를 사용하면 차량 화면에서 미디어 앱의 콘텐츠를 탐색하고 재생할 수 있습니다. 사용자는 스마트폰 없이도 구글 플레이 스토어에서 미디어 앱을 차량에 직접 다운로드할 수 있습니다.

이 페이지는 다음 섹션으로 구성되어 있습니다.

공간 모델

이 미디어 앱 템플릿 소개에서는 주요 요소, 각 요소가 제공하는 기본 기능, 그리고 이러한 요소들을 하나로 묶는 아키텍처에 대해 설명합니다.

각 요소의 작동 방식에 대한 자세한 설명은 다음 섹션에서 제공됩니다.

해부

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

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

이 샘플 레이아웃은 이러한 요소들의 가능한 배치 방식 중 하나를 보여줍니다. 예를 들어, 화면 크기에 따라 기본 탐색 및 앱 컨트롤을 단일 가로 막대에 배치하는 대신 세로로 쌓아 올릴 수 있습니다. 탐색 계층 구조에 대한 자세한 설명은 다음 섹션에서 확인할 수 있습니다.

기본 탐색

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

이 예시는 일반적인 탭 배열 방식을 보여줍니다.

사용자는 앱 바에서 홈, 재생 목록 등의 탭을 선택하여 미디어 콘텐츠의 최상위 보기로 이동할 수 있습니다 .

앱 바에서 탭을 선택하면 현재 화면이 다른 최상위 앱 화면으로 바뀝니다 .

앱 제어

앱 컨트롤(아래 예시의 오른쪽 상단 참조)은 브랜딩이나 기본 탐색에 사용되지 않는 앱 바 영역을 차지합니다. 이를 통해 현재 미디어 앱의 인앱 검색 및 설정 기능에 접근할 수 있습니다.

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

앱 바에서 설정 메뉴를 선택하면 앱 설정에 접근할 수 있는 오버레이 창이 열립니다 .

앱 컨트롤이 선택되면 탐색 가능한 콘텐츠 위에 오버레이가 열리고 앱 바가 앱 헤더로 변경됩니다 .

탐색 가능한 콘텐츠 공간

탐색 가능한 콘텐츠 공간 내에서 사용자는 콘텐츠를 스크롤하고 z축 공간을 통해 개별 항목으로 이동하여 계층 구조의 연속적인 레벨로 내려갈 수 있습니다.

여러 단계를 거치는 탐색 과정은 운전자의 인지 부하를 증가시키기 때문에, 구글은 정보 구조를 가능한 한 적은 단계로, 비교적 단순하게 유지할 것을 권장합니다.

최상위 탐색 가능 콘텐츠 레벨에서는 사용자가 그리드(여기에 표시된 것처럼) 또는 목록 중에서 선택할 수 있습니다 .

탐색 가능한 콘텐츠에서 선택하면 더 자세한 내용이 표시되는 다음 단계가 열립니다 .

재생 제어

미디어 앱의 재생 제어 기능은 상황에 따라 두 가지 형태 중 하나로 나타날 수 있습니다.

  • 최소화된 제어 막대(모든 보기에서 사용 가능)
  • 재생 화면(전체 제어 막대가 겹쳐진 화면)

다음 애니메이션 예시에서는 이 두 가지 형태가 화면 하단에서 번갈아 나타납니다.

최소화된 컨트롤 바

최소화된 제어 막대는 탐색 가능한 콘텐츠 공간의 최상위 수준, 콘텐츠 위에 떠 있습니다. 이 막대는 현재 재생 중인 콘텐츠에 대한 정보와 함께 사용자가 재생을 제어할 수 있는 기본적인 기능을 제공합니다.

콘텐츠 재생이 시작되면 사용자가 미디어 콘텐츠를 탐색하는 동안 최소화된 제어 막대가 계속 표시됩니다. 이 막대는 새 미디어 앱을 선택하거나 사용자가 최소화된 제어 막대를 탭하여 재생 화면을 표시할 때까지 유지됩니다.

재생 화면

전체 제어 막대는 재생 보기에서만 사용할 수 있으며 콘텐츠 위에 표시됩니다. 최소화된 제어 막대에서 제공하는 기능 외에도 전체 제어 막대는 각 미디어 앱에서 정의한 더욱 다양한 제어 기능을 제공할 수 있습니다.

최소화된 제어 막대를 제어 터치 영역 외부 아무 곳에서나 선택하면 여기에 표시된 것처럼 전체 화면 재생 오버레이(재생 보기)로 확장됩니다 .

재생 보기 오버레이는 탐색 가능한 콘텐츠 공간 위에 표시되며, 최소화된 제어 막대는 추가 제어 기능이 포함된 전체 제어 막대로 대체됩니다.

상호작용 모델

AAOS는 차량용 화면에 미디어 콘텐츠를 표시하고 사용자가 차량에 최적화된 환경에서 콘텐츠를 탐색하고 재생할 수 있도록 합니다.

자동차에서 미디어 앱이 작동하는 방식

AAOS는 차량 내 미디어 앱의 재생 및 탐색 환경을 처리하는 API 세트를 포함합니다. 이러한 API를 통해 앱 개발자는 다음과 같은 표준 미디어 앱 템플릿을 활용할 수 있습니다.

  • 탐색 및 재생 제어
  • 미디어 콘텐츠를 탐색할 수 있는 보기
  • 앱 내 검색 및 설정에 대한 앱 제어 기능

이 템플릿은 두 가지 방식으로 차량 내 인포테인먼트(IVI) 환경을 지원합니다.

  • 자동차 제조업체는 자사 차량과 브랜드에 맞춰 인터페이스의 모양과 느낌을 맞춤 설정할 수 있습니다.
  • 앱 개발자는 콘텐츠를 인터페이스에 연결하여 여러 차량 및 제조업체에서 앱 브랜드를 반영하는 일관된 경험을 제공할 수 있습니다.

Google은 디자인 기초디자인 원칙 에서 논의된 것과 같은 안전 고려 사항 및 원칙을 기반으로 미디어 앱의 기본 사용자 경험을 설계합니다. AAOS용으로 개발된 앱의 기능을 방해하지 않고도 이러한 사용자 경험의 일부를 자체 인포테인먼트 시스템에 맞게 조정할 수 있습니다.

예를 들어, 자동차 제조사마다 미디어 앱의 외관이나 사용감이 다를 수 있지만, 미디어 앱 사용자는 어떤 차를 운전하든 익숙한 앱의 조작 방식을 사용하게 됩니다. 또한, 같은 차종 내에서는 미디어 앱을 바꿔도 기본적인 탐색 및 재생 기능은 변하지 않습니다.

이 섹션에서는 미디어 앱의 최상위 앱 탐색 방식에 대해 설명합니다.

사용자는 미디어 앱의 최상위 콘텐츠 보기 사이를 앱 바를 사용하여 탐색하며, 앱 바에는 다음과 같은 탐색 요소가 포함될 수 있습니다.

  • 기본 탐색 탭(또는 변형)
  • 앱 선택기(선택 사항)

앱 바에는 앱 아이콘과 앱 컨트롤도 포함될 수 있으며, 이는 앱 브랜딩로그인, 설정, 검색 에서 설명합니다.

기본 탐색 탭

미디어 앱 내 콘텐츠 보기의 기본 탐색은 일반적으로 앱 바에 최대 4개의 탭으로 구성됩니다(화면이 매우 작아 탭을 표시할 공간이 부족한 경우는 제외). 이러한 탭을 통해 사용자는 앱 계층 구조의 최상위 수준에 있는 콘텐츠 보기 사이를 이동할 수 있습니다.

사용자가 탭을 선택하면 해당 탭의 콘텐츠 보기에서 사용자가 이전에 했던 상호 작용을 반영하는 위치로 이동합니다. 예를 들어, 동일한 미디어 앱 세션 중에 탭의 콘텐츠를 이전에 스크롤한 적이 있다면 사용자가 해당 탭으로 돌아올 때 스크롤 위치가 유지됩니다.

앱 바의 탭을 사용하면 사용자가 콘텐츠 보기 간에 좌우로 이동할 수 있습니다.

주요 탐색 변형

각 주요 내비게이션 항목은 일반적으로 아이콘과 레이블이 모두 포함된 탭으로 표시됩니다. 아이콘은 한눈에 알아보기 쉽게 하고 레이블은 의미를 명확히 해주기 때문에, 둘 다 포함하면 운전자의 인지 부담을 줄여줍니다.

이 앱 바에는 각 탭에 대한 아이콘과 레이블이 포함되어 있습니다.

하지만 특정 상황에서는 다른 탐색 전략을 사용할 수 있습니다.

  • 레이블만 표시: 화면 높이가 충분하지 않아 아이콘과 레이블이 모두 포함된 탭과 적절한 양의 콘텐츠를 모두 표시할 수 없는 경우
  • 서랍형 메뉴: 화면 너비가 탭을 모두 표시하기에 충분하지 않은 경우
  • 탭 없음: 기본 탐색 옵션이 하나만 있는 경우
특정 경우에는 앱 바에 아이콘과 레이블(위에서 아래로)이 있는 탭 대신 다음과 같은 탐색 전략 중 하나가 포함될 수 있습니다. 레이블만 있는 탭, 탭 대신 서랍형 메뉴, 또는 탭이 없는 단일 최상위 콘텐츠 보기.

앱 선택기

앱 선택기는 다른 미디어 앱에 빠르게 접근할 수 있도록 해줍니다. 앱 선택기를 제공할지 여부는 사용자가 결정할 수 있습니다. 예를 들어, 미디어 앱 전환 메커니즘으로 사용 가능한 모든 앱 목록만 제공하는 것을 선호할 수도 있습니다.

말풍선 아이콘
앱 브랜딩
앱 아이콘 배치는 앱 선택기를 포함할 수도 있고 포함하지 않을 수도 있습니다.
앱 바가 화면 상단이나 하단에 위치할 경우, 앱 선택기는 일반적으로 앱 바의 오른쪽에 배치됩니다.

앱 선택기를 실행하면 다른 미디어 앱에 접근할 수 있습니다. 사용자가 다른 앱을 선택하면 해당 앱이 표시됩니다.

앱 선택기에서 이용 가능한 일반적인 앱들입니다.

앱 바 위치 지정

미디어 템플릿을 포함한 모든 AAOS 템플릿에서 앱 바의 위치를 ​​지정할 수 있습니다. 앱 바는 항상 같은 위치에만 표시된다면 화면 상단, 하단 또는 측면에 나타낼 수 있습니다. 또한 앱 바 안에 탭과 앱 컨트롤을 쌓아서 배치할 수도 있습니다.

인지 부하를 최소화하고 안정적인 사용자 경험을 보장하기 위해 앱 바와 그 기능은 인포테인먼트 시스템 전체에서 항상 동일한 위치에 표시되어야 합니다.

콘텐츠 세부 정보 보기

이 섹션에서는 미디어 앱에서 콘텐츠를 탐색하는 방법과 사용자가 더 자세한 정보를 볼 수 있는 하위 보기로 이동하는 방법을 설명합니다.

미디어 앱에서 콘텐츠를 탐색하는 과정은 다음과 같습니다.

  • 콘텐츠 그리드 또는 목록 보기
  • 탐색 가능한 콘텐츠 항목(즉, 플레이 가능한 항목이 아닌 항목 모음을 나타내는 항목)을 선택하여 해당 항목에 대한 자세한 보기로 이동합니다.

콘텐츠 항목의 상세 보기는 콘텐츠 공간의 하위 레벨에 있으며, 그리드 또는 목록 형식으로 표시됩니다. 사용자는 앱 헤더의 '뒤로' 버튼을 사용하여 하위 레벨에서 상위 레벨로 이동할 수 있습니다.

콘텐츠의 그리드 보기 및 목록 보기

미디어 콘텐츠는 그리드 보기, 목록 보기 또는 동일한 콘텐츠 공간에서 두 가지를 조합한 형태로 표시될 수 있습니다. 콘텐츠는 하위 제목으로 구분된 카테고리로 구성될 수 있습니다. 사용자는 세로 스크롤을 통해 그리드 또는 목록을 탐색합니다.

콘텐츠 공간의 최상위 레벨에는 그리드 및 목록 형식이 표시됩니다. 두 형식 모두 모든 레벨에서 사용할 수 있습니다.

사용자는 콘텐츠 공간을 탐색하면서 앨범이나 재생 목록과 같은 탐색 가능한 콘텐츠 항목을 선택하여 해당 항목의 상세 보기(앨범의 노래 또는 재생 목록의 개별 항목)로 이동할 수 있습니다. 사용자가 이러한 방식으로 콘텐츠 공간의 더 깊은 곳으로 이동하기 시작하면 화면 상단에 앱 헤더가 나타나고, 이 헤더에는 사용자가 이전 단계로 돌아갈 수 있는 기능이 포함되어 있습니다.

앱 헤더의 뒤로 가기 화살표를 탭하면 사용자는 콘텐츠 공간의 최상위 레벨로 돌아갑니다.

사용자가 콘텐츠 그리드 또는 목록을 스크롤할 때 화면 상단의 앱 바(또는 앱 헤더)는 고정된 상태로 유지되고 콘텐츠는 그 뒤로 스크롤됩니다.

콘텐츠가 고정된 앱 바 뒤로 스크롤됩니다.

미디어 재생

이 섹션에서는 미디어 앱의 재생 작동 방식에 대해 설명합니다.

사용자는 다음 두 가지 방법 중 하나로 미디어 재생을 제어할 수 있습니다.

  • 재생 보기(전체 화면, 모든 제어 기능 포함)
  • 최소화된 제어 막대(최소한의 제어 기능만 제공하며, 모든 보기에서 사용 가능)

재생 화면

재생을 시작하려면 사용자는 콘텐츠 공간에서 앨범이나 노래와 같은 재생 가능한 항목을 선택하고, 재생 화면이 전체 콘텐츠 공간을 차지하게 됩니다. 재생 화면에는 선택한 콘텐츠의 메타데이터와 재생 컨트롤이 표시됩니다. 사용자는 이러한 컨트롤과 제스처를 사용하여 재생을 제어할 수 있습니다.

재생 제어

재생 제어는 제어 막대에 표시되며, 제어 항목이 5개 이상인 경우 제어 막대를 확장할 수 있습니다(아래 "재생 제어 위치" 참조). 앱에서 큐를 구현하는 경우 앱 헤더에 큐에 접근할 수 있는 기능이 포함됩니다.

사용자가 재생 가능한 콘텐츠를 선택하면 재생 화면이 나타납니다.
컨트롤이 5개 이상일 경우, 사용자는 컨트롤 바를 확장하고 오버플로 버튼(오른쪽 하단)을 사용하여 추가 컨트롤에 접근할 수 있습니다.

재생 제어 위치

미디어 서비스 전반에 걸쳐 일관된 사용을 보장하기 위해 컨트롤 모음의 맨 아래 행(컨트롤 모음이 펼쳐지지 않은 경우 유일한 행)에는 다음 그림에 표시된 순서대로 컨트롤이 표시되어야 합니다. 컨트롤 모음이 펼쳐졌을 때만 나타나는 맨 위 행은 최대 t=5개의 사용자 지정 작업을 위해 예약되어 있습니다.

앱에서 이전 또는 다음 버튼을 사용하지 않는 경우, 이러한 버튼은 사용자 지정 동작으로 대체될 수 있습니다.

맨 아래 행의 컨트롤은 위 예시와 아래 표에 표시된 순서대로 나타나야 합니다.
위치 단추

맨 왼쪽

사용자 지정 작업

중도좌파

이전 또는 사용자 지정 작업

센터

재생/일시정지

중도 우파

다음 또는 사용자 지정 작업

맨 오른쪽

컨트롤이 5개 이상인 경우 오버플로 어포던스 또는 사용자 지정 액션

제스처

사용자는 재생 보기의 컨트롤을 사용하는 것 외에도 제스처를 사용하여 보기를 최소화할 수 있습니다.

화면 어디에서든 아래로 스와이프하면 재생 화면을 최소화된 제어 막대로 접을 수 있습니다.

최소화된 컨트롤 바

사용자가 콘텐츠 재생 중에 재생 화면을 벗어나면 재생 화면에 있던 제어 막대가 최소화된 제어 막대로 축소됩니다. 이 최소화된 제어 막대에는 현재 재생 중인 콘텐츠에 대한 정보와 재생, 일시 정지 등의 기본 제어 버튼이 표시됩니다. 또한, 최소화된 제어 막대를 통해 사용자는 현재 재생 중인 노래나 다른 콘텐츠가 재생되는 동안 다른 미디어를 탐색할 수 있습니다.

최소화된 제어 막대는 사용자가 재생 화면을 종료한 후에도 계속 사용할 수 있는 제어 막대의 간소화된 버전입니다.

사용자는 (위의 제스처에서처럼) 아래로 스와이프하거나 (여기에서처럼) 왼쪽 상단 모서리의 아래쪽 화살표를 탭하여 재생 화면을 최소화할 수 있습니다.

대기줄

미디어 앱이 재생 대기열 기능을 구현한 경우, 재생 화면의 앱 헤더에 대기열 선택 버튼이 포함됩니다. 이 버튼을 선택하면 현재 재생 중인 콘텐츠와 재생 예정인 콘텐츠가 시간 순서대로 정렬된 스크롤 가능한 목록으로 표시됩니다. 일부 미디어 앱은 이전에 재생한 콘텐츠도 대기열에 표시할 수 있습니다.

대기열에는 예정된 콘텐츠와 현재 재생 중인 콘텐츠가 표시됩니다.

최소한 대기열에는 대기 중인 각 항목의 제목이 표시됩니다. 앱 개발자는 각 항목에 대한 썸네일 이미지도 제공할 수 있습니다. 또한 현재 재생 중인 항목을 나타내는 아이콘을 제공할 수 있으며, 해당 항목의 경과 시간을 표시하여 현재 재생 중임을 나타낼 수도 있습니다. 하지만 자동차 제조업체는 썸네일, 아이콘 또는 경과 시간 중 어떤 항목을 표시할지 또는 숨길지 선택할 수 있습니다.

사용자는 목록을 스크롤하여 대기열에서 원하는 항목을 선택하면 재생 화면에서 즉시 재생할 수 있습니다. 재생할 항목을 선택하지 않고 재생 화면으로 돌아가려면 대기열 또는 뒤로 가기 버튼을 선택하면 됩니다.

이 섹션에서는 미디어 앱에서 검색 및 설정에 대한 로그인 및 앱 제어 기능이 어떻게 작동하는지 설명합니다.

사용자는 앱 바 또는 앱 헤더의 앱 컨트롤을 사용하여 앱 설정 및 앱 내 검색에 액세스합니다. 자동차 제조업체는 검색 오버레이를 설계하고, 앱 개발자는 콘텐츠를 Android Automotive OS API와 연결합니다. 앱 개발자는 앱의 설정 오버레이 및 로그인 흐름의 모든 측면을 설계합니다.

로그인

사용자가 로그인이 필요한 앱(일반적으로 플레이 스토어에서 앱을 설치한 후)을 열려고 하면 앱 개발자가 제공하는 로그인 절차를 거치게 됩니다. 앱 로그인이 선택 사항인 경우, 앱 설정에 로그인 옵션을 추가하여 사용자가 해당 옵션에 접근할 수 있도록 할 수 있습니다.

로그인 절차에는 다음 중 하나 이상이 포함될 수 있습니다.

  • 구글 로그인: 사용자가 구글 계정을 사용하여 로그인할 수 있도록 합니다.
  • 휴대폰 로그인: 차량 화면에 PIN 코드를 표시하여 사용자가 휴대폰에 입력하도록 하거나, 반대로 휴대폰에서 차량 화면에 PIN 코드를 입력하도록 하는 방식
  • 표준 로그인: 사용자가 차량 화면에서 앱에 사용할 사용자 이름과 비밀번호를 입력하는 방식입니다.

Google 로그인을 지원하는 앱의 경우 기본 로그인 옵션으로 Google 로그인을 권장합니다. 이 옵션을 사용하면 그림과 같이 기존 Google 계정을 확인할 수 있습니다.

구글 계정을 확인하세요.

로그인 흐름의 더 많은 예시와 이를 만드는 방법에 대한 지침 은 로그인 페이지를 참조하세요.

앱 컨트롤은 미디어 앱의 인앱 검색 및 앱 설정으로 구성됩니다. 앱 개발자는 둘 중 하나 또는 둘 다를 구현할 수 있습니다.

앱 컨트롤은 일반적으로 화면 상단이나 하단에 위치한 앱 바의 탭 오른쪽에 나타납니다.
앱 내 검색.
  • 앱 바에서 앱 내 검색 기능을 사용할 수 있도록 지원할 수 있습니다. 앱 개발자는 앱에 검색 기능을 구현할지 여부를 결정할 수 있습니다.
  • 운전 중일 때는 검색 기능이 운전에 최적화된 키보드를 표시하여 음성 입력을 지원합니다. 차량이 주차된 경우에는 일반 키보드가 표시됩니다. 두 키보드 모두 직접 디자인하거나 Google에서 제공하는 키보드를 맞춤 설정할 수 있습니다.
앱 설정.
  • 앱 바에 앱 내 설정 기능을 표시할 수 있도록 지원할 수 있습니다. 앱 개발자는 앱에 설정 기능을 구현할지 여부를 결정할 수 있습니다.
  • 이 설정 기능에는 앱 사용에 필요한 설정(예: 계정 정보, 앱 환경 설정, 로그인 및 로그아웃 기능)과 차량 내 미디어 청취와 관련된 설정(예: 선정적인 콘텐츠 차단)만 포함되어야 합니다.
  • 운전 중에는 설정 메뉴가 표시되지만 앱 설정에 접근할 수 없음을 나타내기 위해 흐릿하게 표시되거나 다른 방식으로 수정됩니다. 차량이 주차되면 이 메뉴는 앱 설정이 포함된 오버레이 화면을 표시합니다. 앱 개발자는 디자인 설정 에 설명된 대로 앱에 맞는 오버레이 화면을 디자인합니다.

역할 분담

아래 표는 통일된 미디어 앱 경험을 보장하기 위한 자동차 제조업체와 앱 개발자의 디자인 역할을 요약한 것입니다.

미디어 경험의 측면 자동차 제조업체의 디자인 역할 앱 개발자의 디자인 역할

미디어 앱 탐색하기

앱 바의 위치를 ​​결정하고 앱 바에 표시될 수 있는 앱 탐색 및 컨트롤을 지원합니다.

앱 바 탭에 표시할 최상위 콘텐츠 뷰를 결정하고 필요에 따라 아이콘과 레이블을 제공합니다.

방문 계획 탐색 탭

콘텐츠 세부 정보 보기

그리드 또는 목록 항목의 크기와 내용을 결정하고 콘텐츠 하위 수준에 앱 헤더를 구현합니다.

각 레벨에서 탐색 가능한 미디어 콘텐츠의 형식(그리드 또는 목록)과 구성을 결정합니다.

플랜 탐색 화면을 방문하세요

미디어 재생 중

적절한 미디어 메타데이터와 재생 컨트롤을 포함하는 재생 보기 및 최소화된 제어 막대를 구현하고, 앱 내 사용자 지정 작업에 대한 컨트롤도 포함하세요. 재생 보기에서 대기열을 표시하는 기능을 제공하고 대기열에 스타일을 적용하세요.

컨트롤 바에 사용자 지정 동작을 구현할지 여부와 해당 동작에 대한 아이콘을 제공할지 여부를 결정합니다. 재생 대기열을 구현할지 여부와 현재 재생 중인 트랙을 표시하는 기능을 제공할지 여부를 결정합니다.

재생 제어 사용자 지정 페이지를 방문하세요.

로그인, 설정 및 검색

앱 바에 검색 및 설정 기능을 제공하고, 검색 키보드를 디자인하며, 필요에 따라 사용자를 로그인 화면으로 연결합니다.

필요한 경우 로그인 흐름(샘플 코드에서 발췌) 및 설정 화면을 제공하세요.

로그인디자인 로그인 및 설정 페이지를 방문하세요.

브랜드 귀속

모든 콘텐츠 화면에 앱 아이콘을 표시하고 타사 앱의 색상을 강조 색상으로 적용할 위치를 선택하세요.

앱 아이콘을 제공하고 강조 색상을 지정하세요.

Display 앱 브랜딩 페이지를 방문하세요.

앱 체크리스트

이 목록을 사용하여 AAOS 미디어 템플릿 내에서 앱을 표시하는 데 필요한 모든 디자인 요소를 제공했는지 확인하십시오.

디자인 요소 관련 디자인 작업 관련 기술 과제 및 샘플 코드

탐색 요소:

  • 최대 4개의 탐색 탭에 사용할 수 있는 흑백 벡터 아이콘 및 레이블

계획 탐색 탭

콘텐츠 계층 구조를 구축하세요

브라우징 뷰 요소:

  • 콘텐츠 스타일은 탐색 보기 형식(그리드 또는 목록, 하위 카테고리 제목)을 지정합니다.

플랜 브라우징 보기

콘텐츠 스타일 적용

재생 요소:

  • 앱에서 사용하는 모든 사용자 지정 재생 동작에 사용할 수 있는 흑백(검정 또는 흰색) 벡터 아이콘(각 상태별로 별도의 아이콘).
  • 대기열 항목의 썸네일 이미지 (선택 사항)
  • 현재 재생 중인 대기열 항목 아이콘 (선택 사항)

재생 컨트롤 사용자 지정

대기열 지침

사용자 지정 재생 동작 추가

로그인 요소:

  • 맞춤형 로그인 화면 (UAMP Automotive 앱의 샘플 코드를 기반으로 수정)

로그인

UAMP 자동차 앱

로그인 활동 추가

설정 요소:

  • 설정 오버레이 화면 - 세로 모드 레이아웃 (볼보 폴스타 2 크기: 1068 x 1425dp; 1152 x 153px)
  • 설정 오버레이 화면 - 가로 모드 레이아웃 (자동차 참조 크기: 1075 x 806dp; 1024 x 768px)

디자인 설정

설정 활동을 추가합니다

브랜딩 요소:

  • 풀컬러 벡터 앱 아이콘
  • 포인트 색상

브랜딩 요소를 제공하세요

앱 아이콘을 지정 하고 기본 테마를 사용자 지정하세요 .

사용자 지정 화면 제작 지침

AAOS에서 사용되는 미디어 앱의 대부분 기능은 사용자 지정 화면을 디자인할 필요가 없습니다. 단, 설정과 로그인 부분은 예외입니다. 사용자가 앱 설정에 접근할 수 있도록 하려면 설정 화면을 디자인해야 합니다. 또한, 앱에 로그인이 필요한 경우 로그인 흐름을 제공해야 하는데, 이는 유니버설 안드로이드 뮤직 플레이어 의 샘플 코드를 참고하여 사용자 지정할 수 있습니다.

이 일반적인 스타일 가이드라인은 사용자 지정 설정 화면과 사용자 지정 로그인 화면 모두에 적용됩니다. 이 가이드라인을 활용하면 차량 주차 중이거나 낮이든 밤이든 언제든지 차량 화면에서 최적의 디자인을 볼 수 있습니다.

설정 및 로그인에 대한 추가 지침은 앱 설정을 참조하세요.

요구 수준 지침

해야 하다

앱 개발자는 다음을 수행해야 합니다.

  • 설정 화면과 최상위 로그인 화면을 종료할 수 있는 닫기 버튼을 제공하세요.
  • 최상위 화면 이후의 모든 화면에서 뒤로 가기 버튼을 제공해야 합니다.
  • 닫기 또는 뒤로 가기 버튼을 화면 왼쪽 상단에 배치합니다.
  • 배경과 아이콘 또는 텍스트 간의 명암비를 최소 4.5:1로 유지하십시오.
  • 기본 텍스트에는 최소 32dp, 보조 텍스트에는 최소 24dp의 권장 글꼴 크기를 사용하십시오.
  • 터치 타겟은 권장 최소 크기인 76 x 76dp 이상으로 유지하십시오.

해야 한다

앱 개발자는 다음과 같은 사항을 고려해야 합니다.

  • 모든 화면과 오버레이에 어두운 테마를 사용하세요.
  • 모든 화면에 로고 또는 앱 아이콘을 포함하세요.
  • 강조색을 사용할 때는 브랜드 요소 로 제공된 것과 동일한 색상을 사용하십시오.
  • 텍스트 문자열은 권장 최대 길이 인 120자 이내로 유지하십시오.
  • 가능한 경우 터치 대상 간에 최소 24dp의 거리를 확보하십시오.

5월

앱 개발자는 다음과 같은 일을 할 수 있습니다.

  • 앱에 로그인 및 설정 기능을 포함할지 여부를 결정하세요.

이론적 해석

미디어 앱 개발자가 직접 디자인한 화면은 다음과 같아야 합니다.

  • 표준 미디어 앱 탐색 패턴 및 디자인 규칙을 지원합니다.
  • AAOS의 디자인 원칙과 시각적 기반을 반영합니다.