안경의 색상

색상은 디스플레이, 환경, 인지도를 고려합니다. 글래스의 색상은 가산 디스플레이의 동작을 지원하고 시각적 편안함을 위해 최적화된 고도로 정제된 팔레트를 사용합니다. 안경의 색상은 실제 환경과 조화를 이루고, 중요한 작업을 나타내거나, 이미지를 표시하거나, 시맨틱 의미를 제공하기 위해 신중하게 사용해야 합니다.

광학 투시 디스플레이에서는 검은색이 투명합니다. 어두운 색상은 흐리거나 투명하게 표시되지만 깊이를 만드는 데 사용할 수도 있으므로 디자인할 때 이 점을 염두에 두세요.

색 구성표

글래스 색 구성표 (앱의 색상을 테마로 지정하는 색상 토큰 또는 역할 모음)는 3개의 강조 역할, 4개의 표면 (또는 중립 역할), 해당 색상으로 구성됩니다. 색상 역할은 모바일 스킴 역할과 유사하며 동일한 방식으로 사용해야 합니다.

디자인 요소는 프레임 하단에 고정해야 합니다.

강조 색상은 제한된 강조로 on color에 사용할 수 있습니다.

대부분의 텍스트 콘텐츠에 흰색 텍스트를 사용합니다. 글꼴 색상은 강조된 텍스트에 사용할 수 있습니다.
모든 콘텐츠에 색상 텍스트를 사용합니다.

색상 맞춤설정

안경의 색상을 맞춤설정할 때는 시야를 최소한으로 가리고 실제 환경과 조화를 이루도록 해야 하며, 다양한 조명 조건에서 가독성을 우선시해야 합니다. 여기에는 밝기와 채도의 균형을 맞추기 위해 색상을 신중하게 보정하는 것이 포함됩니다. 이를 통해 명확한 가독성을 위해 눈에 띄게 하면서도 즉시 식별할 수 있을 만큼 충분한 채도를 유지할 수 있습니다. 기본 색상은 브랜드 또는 기본 상호작용 색상을 사용하도록 맞춤설정할 수 있습니다. 선택한 색상의 대비, 채도, 전력 사용량을 고려하세요.

디자인 요소는 프레임 하단에 고정해야 합니다.

최적화된 브랜드 및 시맨틱 색상

브랜드, 작업 또는 시스템 알림을 나타내는 색상은 다음을 충족해야 합니다.

  • 읽을 수 있을 만큼 밝음
  • 색상으로 식별할 수 있을 만큼 포화됨

전력 사용량

일부 색상은 다른 색상보다 더 많은 전력을 사용하고 더 많은 열을 발생시킵니다. 오른쪽에서 볼 수 있듯이 동일한 톤의 색상을 비교할 때 녹색이 가장 전력 소모가 적고 파란색이 가장 많습니다. 밝히는 픽셀 수를 최소화합니다. 화면이 밝을수록 디스플레이가 더 뜨거워집니다. 화면을 완전히 흰색으로 채우면 열 완화가 발생할 수 있습니다.

디자인 요소는 프레임 하단에 고정해야 합니다.

사용자가 접하게 될 모든 배경 간의 대비를 고려하세요.
다양한 배경의 UI 요소 대비가 너무 낮아 눈의 피로와 가독성 문제가 발생할 수 있습니다.
모든 배경에서 충분한 대비를 유지하려면 포그라운드와 배경 색상의 색조가 70 (7:1)만큼 차이가 나야 합니다. 디자인을 화면 혼합 모드로 설정하여 이를 테스트할 수 있습니다.
채도가 낮은 색상을 사용합니다.
채도가 지나치게 높은 색상을 사용합니다. 이러한 글꼴은 제대로 표시되지 않아 가독성을 저해할 수 있습니다.

맞춤설정된 화면은 피해야 합니다.

디자인 요소는 프레임 하단에 고정해야 합니다.

어두운 컨테이너 색상

컨테이너는 일반적으로 주의를 분산시키지 않고 컨테이너 내 콘텐츠를 표시하는 데 중점을 두어야 합니다.

  • 표면은 대비를 높이기 위해 검은색이어야 합니다.
  • 윤곽선은 눈에 띄지만 미묘해야 합니다.

어두운 표면과 밝은 콘텐츠를 사용합니다.
밝거나 채워진 표면을 사용합니다.

아웃라인을 맞춤설정하여 브랜딩이나 표현력이 풍부한 UI를 추가할 수 있습니다.

기본 색상을 사용합니다. 이러한 기능은 글래스 디스플레이에 맞게 고도로 최적화되어 있습니다.
여러 윤곽선 색상을 사용합니다.

포커스 상태와 기본 상태 윤곽선 간에 맞춤 색상을 조화롭게 조정하세요.

디자인 요소는 프레임 하단에 고정해야 합니다. 파란색으로 윤곽선 포커스 맞춤설정: 포커스 상태 강조 표시는 2개의 윤곽선으로 구성되며, 색상은 레이어 2에 적용되어 포커스 상태를 미세 조정합니다.