광학 시스루 디스플레이를 위한 명확하고 한눈에 알아볼 수 있는 디자인
Jetpack Compose Glimmer는 유선 XR 글라스와 같은 광학 시스루 (OST) 디스플레이를 위한 Google 디자인 시스템 및 UI 도구 키트입니다. 디자인 시스템은 색상, 유형, 모양 기본 요소부터 구성요소와 가이드까지 재사용 가능한 결정을 제공합니다.
원칙
Jetpack Compose Glimmer는 투명 디스플레이와 안경 폼 팩터에 최적화된 최초의 UI 프레임워크 중 하나입니다. OST는 불투명 화면 디스플레이를 사용하는 대신 실제 세계 위에 직접 프로젝트 조명을 표시합니다. Glimmer는 개발자가 실제 존재감을 유지하는 고대비의 한눈에 보이는 UI를 빌드할 수 있도록 지원합니다.
투명 디스플레이 우선
투명 디스플레이와 안경 폼 팩터를 위해 연구와 색상 과학을 기반으로 최적화되어 사려 깊고 아름다운 광학 시스루 환경을 제공합니다.
하드웨어 입력
상호작용 입력은 유선 XR 글라스의 기능을 중심으로 설계됩니다.
목적에 맞게 설계됨
스타일과 구성요소는 안경에서 바로 사용할 수 있도록 설계되었습니다. Jetpack Compose Glimmer는 투명 디스플레이와 사용자 편의성을 위해 최적화되어 있습니다. 목적에 맞게 설계되었지만 엄격하지는 않습니다. 이를 통해 서체와 색상 외에도 포커스 강조 표시를 맞춤설정할 수 있습니다.
스타일
Jetpack Compose Glimmer의 디자인 언어는 안경에서 최적의 가시성을 제공하는 간소화된 테마를 제공합니다. 색상과 유형은 시맨틱 표현과 앱 결합을 위해 맞춤설정할 수 있습니다. 시각적 디자인 원칙은 명확성, 가독성, 최소한의 방해 요소를 강조합니다. 유선 안경은 시야가 더 넓고 '실제' 간섭이 적을 수 있지만 UI가 방해되지 않도록 하는 것이 좋습니다.
Glimmer에는 OST 안경에 최적화된 기준 테마가 함께 제공됩니다. 색상과 유형은 시맨틱 표현과 앱 결합을 위해 맞춤설정할 수 있습니다. 광학 시스루 디스플레이에서는 검은색이 투명합니다. 어두운 색상은 흐리거나 투명하게 표시되지만 깊이를 만드는 데 사용할 수도 있으므로 디자인할 때 이 점을 염두에 두세요.
색 구성표
글래스 색 구성표 (앱의 색상을 테마로 지정하는 색상 토큰 또는 역할 모음)는 3개의 강조 역할, 6개의 표면 (또는 중립 역할), 해당 on-color로 구성됩니다.
색상 맞춤설정
기본 색상은 브랜드 또는 기본 상호작용 색상을 사용하도록 맞춤설정할 수 있습니다. 선택한 색상의 대비, 채도, 전력 사용량을 고려하세요.
Glimmer의 색상 시스템 및 권장사항에 대해 자세히 알아보세요.
서체
Jetpack Compose Glimmer에는 최적화된 기본 서체 스케일이 있습니다. 각각 세 가지 스타일이 있는 두 가지 역할로 구성된 서체 역할은 목적과 계층 구조를 기반으로 합니다. 자세한 내용은 Glimmer 서체를 참고하세요.
표면 및 깊이
표면에는 콘텐츠가 포함되어 있습니다. 사용자의 시야 내에 콘텐츠나 작업이 포함될 수 있는 명확한 초점을 제공합니다. Glimmer에서는 표면과 깊이에 관한 정보가 더 많이 사용됩니다.
구성요소
구성요소는 UI를 빌드하기 위해 특별히 제작된 빌드 블록입니다. 앱은 구성요소에 Jetpack Compose Glimmer를 사용해야 합니다. OST 안경의 고유한 사용 사례에 최적화되어 있기 때문입니다. 자세한 내용은 Glimmer 구성요소를 참고하세요.
구성요소를 구현할 준비가 되셨나요? Jetpack Compose Glimmer 문서를 확인하세요.
글리머 구성요소는 여러 UX 목적에 걸쳐 있습니다. 일부 구성요소에는 작업 버튼, 커뮤니케이션 진행률 표시기, 포함 스택, 탐색, 입력 음성 표시기가 포함됩니다.