알림 카드

알림 카드는 시스템이나 앱에서 제공하는 소량의 정보를 시기적절하게 전달합니다.

안드로이드 오토모티브 OS용 카드 디자인은 운전자의 주의 산만을 최소화하도록 설계되었습니다. 카드는 기본적으로 세 가지 버전으로 제공됩니다.

  • 헤드업 알림(HUN) 카드: 현재 화면 위에 잠시 나타나는 알림에 사용됩니다.
  • 알림 센터 카드: 알림 센터에 나열된 알림을 표시하는 데 사용됩니다.
  • 그룹화된 알림 카드: 여러 개의 알림 센터 카드를 하나의 카드로 결합합니다.

이러한 버전 내에서도 메시지 카테고리에 따라 디자인이 약간씩 다를 수 있습니다. 예를 들어, 통화 알림은 내비게이션 알림과 다른 버튼과 아이콘을 사용합니다.

해부

알림 카드는 다양한 요소를 포함할 수 있는 유연한 구성 요소입니다. 주요 버전은 세 가지입니다.

  • HUN 카드: 이 버전은 알림 센터 카드보다 너비가 넓으며, 사용자가 닫을 때까지 현재 화면 위에 표시됩니다.
  • 알림 센터 카드: 이 버전은 HUN 카드보다 폭이 좁으며, 알림 센터의 다른 카드들과 함께 세로 목록으로 표시됩니다.
  • 그룹 알림 카드: 이 버전의 알림 센터 카드는 여러 관련 알림을 하나의 카드에 결합하고, 개별 알림을 표시하도록 확장할 수 있는 컨트롤을 제공합니다.

메시지 유형별 이러한 버전의 변형은 스타일 섹션 에 표시됩니다.

여기에 표시된 것은 동일한 알림 카드의 HUN 버전과 알림 센터 버전이며, 다음과 같은 요소들을 포함합니다.
1. 헤더
2. 콘텐츠 (선택 사항으로 메시지 미리보기를 포함하거나 포함하지 않을 수 있으며, 차량 주행 중에는 미리보기를 숨길 수 있습니다.)
3. 조치
4. 큰 아이콘


여기에 표시된 것은 접힌 버전과 펼쳐진 버전 모두의 그룹 알림 카드이며, 다음과 같은 요소들을 포함합니다.
1. 헤더
2. 콘텐츠
3. 확장/축소 동작
4. 확장/축소 표시기

사양 – HUN 카드

표준 HUN

아바타를 든 HUN

HUN에게 메시지 미리보기를 보내세요

HUN에게 여러 메시지를 보내세요

대형 이미지 HUN

사양 – 알림 센터 카드

표준 알림

메시지 알림(미리보기 포함)

여러 메시지가 포함된 메시지 알림

단일 작업 알림

사양 – 그룹 알림 카드

그룹화된 알림 - 접힘

그룹화된 알림 - 확장됨

레이아웃 크기 조정

이 참조 레이아웃은 다양한 화면 너비와 높이에 맞춰 알림을 조정하는 방법을 보여줍니다. 모든 픽셀 값은 다운샘플링 또는 업샘플링이 발생하기 전의 렌더링된 픽셀 값입니다.

말풍선 아이콘
공들여 나열한 것
다양한 화면 크기에 따른 여백, 키라인 및 패딩.

표준 너비 화면

HUN 카드.


알림 센터 카드.

그룹화된 알림 카드(접힌 상태).

그룹 알림 카드(확장형).

와이드 스크린

HUN 카드.


알림 센터 카드.

그룹화된 알림 카드(접힌 상태).

그룹 알림 카드(확장형).

초광각 및 초대형 스크린

HUN 카드.


알림 센터 카드.

그룹화된 알림 카드(접힌 상태).

그룹 알림 카드(확장형).

다양한 높이의 화면에서 알림의 세로 간격

이 섹션의 세로 간격 사양은 HUN 카드에만 적용됩니다.

짧은 화면

HUN 카드.

키가 큰 화면과 표준 높이 화면

HUN 카드.

스타일

타이포그래피

타입 스타일 글꼴 무게 크기(dp)
본문 1 로보토 정기적인 32
바디 3M 로보토 중간 24
본문 3 로보토 정기적인 24

색상

요소 색상(주간 모드) 색상(야간 모드)
기본 유형/아이콘 하얀색 흰색 @ 88%
보조 유형 흰색 @ 72% 흰색 @ 60%
보조 아이콘 제3자 악센트 제3자 악센트
헤어라인 구분선 흰색 22% 흰색 12%
카드 배경 그레이 868 그레이 900
그라디언트 스크림 검정색 100% - 0% 검정색 100% - 20%

사이즈

요소 크기(dp)
기본 아이콘 44
보조 아이콘 36
중간 크기 아바타 76
둥근 모서리 반경(R2) 8

예시

HUN 카드: 통화, 메시지, 차량 경고 및 내비게이션.
알림 센터 카드: 전화, 메시지, 차량 경고.
그룹화된 알림 카드: 메시지, 확장 및 축소 - 일별.
그룹화된 알림 카드: 메시지, 확장 및 축소 - 야간 모드.

운동

다음 사항들은 알림 과정에서 중요한 부분입니다.

  • HUN 도착 동작
  • 알림을 취소하려면 스와이프 동작을 하세요.
  • 그룹 알림 확장 및 축소 동작

훈족 도착

화면 상단에서 HUN이 아래로 미끄러져 내려오는 움직임은 사용자가 알림이 도착했음을 알아차리는 데 도움이 되며, 알림 센터가 아래로 당겨서 여는 창 형태로 구현된 경우 아래로 스와이프하여 알림에 접근할 수 있다는 힌트도 제공합니다.

스와이프하여 닫기

사용자가 알림을 옆으로 스와이프하여 드래그하는 동작은 알림이 닫히고 있음을 시각적으로 확인시켜주고, 다음 알림이 위로 스와이프하면 목록의 빈 공간이 채워집니다.

그룹 알림 확장 및 축소

그룹화된 알림 카드가 아래쪽으로 늘어나도록 디자인하면 접힌 상태에서 펼쳐진 상태로 부드럽게 전환됩니다.