이 페이지는 Cloud Translation API를 통해 번역되었습니다.

색상

안드로이드 오토모티브 OS의 색상 전략의 기반은 "검은색을 바탕으로 구축"이라는 아이디어입니다. 인터페이스 색상을 검은색에 기반하여 구성함으로써 주간 및 야간 테마 간의 급격한 변화 없이 더욱 일관된 사용자 경험을 제공합니다.

검은색으로 제작하면 자동차 내부와 대시보드에 어두운 소재가 자주 사용되므로 하드웨어와의 조화도 더욱 좋아집니다.

요약 정보 (TL;DR)

• 검정색을 기본 색상으로 선택하여 주야간 운전에 모두 적합한 색상을 구성해 보세요.
• 배경과 아이콘 또는 텍스트 간의 명암비를 최소 4.5:1로 유지하십시오.

• 색상을 최소한으로, 목적에 맞게 사용하세요.
• 회색조로 고도를 표시합니다.
• 투명도와 불투명도를 사용하여 시각적 초점을 유도하세요

---

팔레트와 그라데이션

안드로이드 오토모티브 OS 인터페이스의 다크 테마는 회색조 팔레트를 기반으로 합니다. 이상적으로는 머티리얼 디자인 팔레트의 어두운 색상 변형처럼 추가 색상은 강도를 낮춰야 합니다.

이 섹션에는 색상 팔레트 및 불투명도 정보와 각 구성 요소와 관련된 고도 레벨의 회색조 값을 제공하는 차트가 포함되어 있습니다.

머티리얼 디자인

색상 사용법 및 팔레트

Android 자동차 OS 회색조 팔레트

안드로이드 오토모티브 OS의 회색조 팔레트는 텍스트 및 아이콘과 같은 요소에 사용되며, 운전 환경의 고유한 요구 사항을 충족하도록 설계되었습니다.

이 팔레트는 다음과 같은 조건을 충족할 만큼 충분히 다양해야 합니다.

• 다크 테마 UI의 다양한 사용 사례를 모두 다룹니다.
• 음색 차이를 통해 계층 구조를 정의할 수 있도록 충분한 범위를 제공하십시오.

명암 차이는 그림자가 거의 보이지 않는 완전한 검은색 배경에서도 깊이감을 주는 착시 효과를 만들어냅니다. 충분한 명암 차이를 제공하기 위해 Android Automotive OS의 회색조 팔레트에는 중간 회색이 포함되어 있습니다. 머티리얼 디자인의 회색 계열은 900번 회색부터 시작하여 너무 빠르게 밝은 색상으로 이어집니다. 두 단계 더 밝은 700번 회색은 자동차 환경에는 너무 밝습니다.

포인트 색상

안드로이드 오토모티브 OS 인터페이스의 핵심인 회색조 팔레트 외에도, 시선을 집중시키는 등의 목적으로 다른 색상을 적절히 사용할 수 있습니다.

현재 안드로이드 오토모티브 OS는 공식적으로 "카 액센트"라고 불리는 파란색 계열의 색상을 사용합니다. 채도와 생동감을 높이기 위해 이 파란색은 구글의 기본 파란색에서 약간 벗어나 있습니다. 이러한 색상 조정을 통해 어두운 표면에서도 색상이 더욱 자연스럽게 어우러집니다.

불투명도 값 차트

투명도는 깊이감을 전달하고 머티리얼 디자인의 공간 모델을 강화합니다. 투명도를 효과적으로 사용하려면 사용 사례에 따라 어둡거나 밝은 불투명도 값을 선택하세요.

어두운 부분의 불투명도 값

어두운 불투명도 값을 사용하는 가장 일반적인 경우는 스크림(오버레이)을 만드는 것입니다.

흰색 불투명도 값

이 값들은 주로 텍스트에 사용됩니다. 특히 배경색이 있는 경우에 효과적입니다. 어두운 배경에 단색 회색을 사용하면 너무 탁해 보입니다.

스크림과 텍스트 계층 구조에서 불투명도를 사용하는 방법에 대한 예는 지침 및 예제를 참조하세요.

차이

Android Automotive OS의 기본 안전 지침을 충족하려면 배경과 아이콘 또는 텍스트 간의 명암비가 최소 4.5:1이어야 합니다. 특정 자동차 UI 요소에 명암비가 적용되는 방법에 대한 자세한 내용은 콘텐츠를 읽기 쉽게 만들기를 참조하세요.

하다

하지 않다

지침 및 예시

Android Automotive OS의 다크 UI는 깔끔하고 단순하며, 색상 사용을 최소화했습니다. UI 요소에 적절한 색상, 명암, 투명도 값을 사용하는 것 외에도( 팔레트 및 그라디언트 참조), 모든 색상 및 색상 그라디언트 사용에는 목적이 있어야 합니다.

이 섹션에서는 투명도, 불투명도 및 색상을 적용하여 다양한 목표를 달성하는 방법에 대한 지침과 예시를 제공합니다. 이러한 목표에는 다음이 포함됩니다.

• 배경을 가리는 것
• 일관성 유지
• 사용자의 시선을 주요 동작으로 이끄는 시각적 계층 구조를 구축합니다.
• 목록에서 개체를 구분하기

배경을 가림막으로 가리기

전체 화면 스크림(오버레이)은 사용자가 작업을 수행해야 하는 대화 상자와 같이 사용자의 시야를 방해하는 요소 뒤의 배경을 가리는 데 사용됩니다. 부분 스크림은 알림과 같은 요소의 전환에 주의를 집중시키기 위해 사용됩니다.

색상 일관성 유지

색상은 기억과 인식을 강화하는 강력한 단서입니다. 색상을 활용하여 화면 간 일관성 있는 경험을 만들어 보세요.

하다

하다

하다

하지 않다

시각적 계층 구조 설정

흰색 불투명도 값을 사용하여 일관되고 명확한 시각적 계층 구조를 만드세요. 불투명도 값 88, 72, 56은 어두운 배경에서 편안한 읽기 환경을 조성하면서 접근성 요구 사항을 충족하는 데 필요한 적절한 대비를 제공합니다. 야간 모드에서는 모든 흰색에 96%의 불투명도를 사용하세요.

하다

하지 않다