아이콘 마커

아이콘 마커는 공간 주석 시스템의 일부입니다. 아이콘 마커를 사용하여 실제 객체에 주석을 추가합니다.

UI 요소가 있는 아이콘 마커와 없는 아이콘 마커의 개요

원칙

상황별: 아이콘 마커는 실제 객체 또는 지점에 고정됩니다.

간결함: 아이콘 마커는 공간 앵커를 축약한 시각적 표시기입니다.

사용 및 게재위치

아이콘 마커는 사용자 환경에서 관심 있는 객체를 표시하는 아이콘 버튼과 같은 UI 요소입니다. 아이콘 마커는 공간 앵커링에 사용되는 공간 마커의 한 유형입니다.

권장사항

아이콘 마커를 사용하여 실제 객체에 주석을 추가합니다.

금지사항

아이콘 버튼이 더 적합한 경우 장식 요소 또는 실제 객체가 아닌 주석에 아이콘 마커를 사용합니다.

다른 Jetpack Compose Glimmer 구성요소를 마커와 페어링하여 사용자의 주변 환경에 관한 더 명확한 정보나 유용한 정보를 제공할 수 있습니다.

권장사항

점진적 노출을 사용하여 사용자가 추가 정보를 탐색할 수 있도록 합니다.

금지사항

추가 UI로 마커를 오버로드하면 사용자의 환경에 더 큰 간섭이 발생합니다.

콘텐츠와 라벨은 다양한 방향으로 배치할 수 있습니다. 마커와 연결된 UI는 공간 UI로 작동해야 합니다. 즉, 표시된 객체의 실제 거리가 일정한 각도 DP 크기를 사용하여 UI 크기에 반영되어야 합니다.

관련 제품에 연결된 두 개의 반짝이는 카드와 마커 시각적 혼란을 방지하기 위해 마커를 명확하게 정의하고 뷰 내의 마커 수를 제한합니다. 여러 마커가 필요한 경우 점진적으로 볼 수 있는 하나의 더 눈에 띄는 마커로 클러스터링합니다.

주

아이콘 마커는 아이콘 버튼과 매우 유사합니다. 주요 차이점은 사용 중지 상태가 아닌 비대화형 상태가 있다는 것입니다.

아이콘 마커에는 비대화형 및 대화형 변형이 있습니다. 관심 장소를 표시하는 것과 같이 비대화형 상태로 실제 세계에 주석을 추가합니다.

사용 가능한 추가 정보가 있는 경우 버튼 어포던스가 있는 대화형 상태를 사용할 수 있습니다. 사용자가 아이콘 마커를 탭하면 추가 정보가 포함된 Glimmer 카드가 표시됩니다.

분석

아이콘 마커 자체는 고정된 UI 정렬 및 방향을 허용하는 패딩이 있는 작은 아이콘 버튼 UI 요소입니다. 아이콘 마커는 아이콘 대신 크거나 작은 점을 사용할 수도 있습니다. 상호작용 상태에는 버튼 상태를 나타내는 시각적 어포던스가 포함됩니다.

아이콘 마커에는 포커스, 눌림, 사용 설정과 함께 대화형 및 비대화형 상태가 있습니다.

패딩

가로 및 세로로 배치된 UI에는 중간 패딩이 있고 대각선으로 쌍을 이루는 요소에는 기본 패딩이 0dp입니다.

가로 및 세로 요소의 기본 12dp 패딩

정렬

UI 요소는 가로, 세로 또는 대각선 지점에 배치할 수 있습니다.

상단 중앙 및 상단 오른쪽에 정렬된 Glimmer UI 요소

방향

콘텐츠는 사용자를 향해 표시되어야 하며, 중력을 고려하여 콘텐츠가 정돈된 느낌을 주어야 합니다.

맞춤설정

일관된 시각적 어포던스를 유지하려면 아이콘 마커를 맞춤설정하지 마세요. 하지만 연결된 UI 요소의 방향과 정렬을 맞춤설정할 수 있습니다.

속성 맞춤설정 기본값
아이콘 예 큰 점, 작은 점, 아이콘
패딩 아니요 상단 중앙, 중앙 오른쪽, 하단 중앙, 중앙 왼쪽 = 중간 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단 = 0dp
정렬 예 TopLeft, TopCenter, TopRight, CenterLeft, CenterRight, BottomLeft, BottomCenter, BottomRight
방향 예 RotateToLookAtUser: 회전 각도와 관계없이 점이 사용자를 향해 빌보드됩니다.