카드 권장사항

검은색 바탕에 디자인

Wear OS에서는 다음과 같은 두 가지 중요한 이유로 검은색 배경에서 디자인하는 것이 중요합니다.

  • 배터리 효율: 화면에 표시되는 각 픽셀은 전력을 소모합니다. 검은색 배경을 사용하면 활성 픽셀 수를 최소화하여 배터리 수명을 연장할 수 있습니다.
  • 원활한 미적 요소: 검은색 배경은 시계 베젤을 시각적으로 최소화하여 기기 가장자리까지 연속된 표면의 환상을 만들어 줍니다. 이 공간 내에 UI 요소를 포함하면 이 효과가 더욱 향상됩니다.

배경 색상을 항상 검은색으로 설정합니다.
배경을 풀 블리드 이미지 또는 블록 색상으로 설정하지 마세요.

필요한 요소만 포함

선택한 경우 (예: ProtoLayout Material3 PrimaryLayout 사용) Wear OS는 영구 앱 아이콘을 자동으로 표시하며, 이 아이콘은 사용자가 카드 캐러셀을 스크롤할 때 자동으로 표시됩니다. 앱 아이콘은 카드의 일부로 설계 및 추가해서는 안 됩니다.

카드에 동적 테마 설정이 적용된 경우 제공된 앱 아이콘이 흑백인지 확인합니다. 브랜드의 앱 아이콘을 만드는 방법에 관한 Android 제품 아이콘 가이드라인을 확인하세요.

Wear OS는 사용자가 카드 캐러셀을 스크롤할 때 앱 아이콘을 자동으로 표시할 수 있습니다. 카드 디자인에 앱 아이콘을 배치할 필요는 없습니다.
카드 디자인에 앱 아이콘을 추가하지 마세요. 시스템 수준에서도 표시되는 경우 두 번 표시되거나 겹쳐질 수 있습니다.

최소 탭 타겟을 보장하기 위해 앱 제목 숨기기

작은 화면에서 양방향 요소를 위한 충분한 공간을 확보하기 위해 카드가 두 행 (및 하단 섹션)을 사용하는 경우 앱 제목이 숨겨질 수 있습니다. 이렇게 하면 행의 높이가 충분히 확보됩니다 (최소 48dp). 제목은 더 큰 화면 (225dp 이상)에서 다시 표시될 수 있습니다.

작은 화면에서는 두 행의 최소 높이와 탭 타겟이 48dp가 되도록 앱 제목이 숨겨집니다.
소형 화면에서 앱 제목을 숨기지 않고 행이 두 개인 경우 구성요소의 높이가 접근성 표준을 준수하지 않으며 최소 탭 타겟 크기보다 작습니다. 이 예시에서 버튼의 공간이 48dp보다 작으므로 잘립니다.

강조 표시할 기본 사용 사례를 하나 선택합니다.

사용자가 앱 열기, 활동 시작, 자세히 알아보기 등 각 카드로 할 수 있는 작업을 알 수 있도록 하려면 레이아웃에 상호작용 요소를 하나 이상 포함해야 합니다.

이 카드는 몇 가지 옵션을 제공한 후 더 많은 옵션을 볼 수 있는 기능을 제공하므로 효과적입니다.
이 솔루션은 제공되는 옵션이 너무 많아 결정 장애가 발생하기 때문에 사용자에게 도움이 되지 않습니다.

컨테이너를 1개 이상 포함

앱의 각 카드에는 하나 이상의 컨테이너 요소가 포함되어야 하며 완전히 탭할 수 있어야 하며 앱 내 해당 화면으로 연결되어야 합니다. 카드의 정보는 컨테이너 내에 포함되어 있든 별도로 표시되든 연결된 콘텐츠 또는 사용 가능한 작업을 명확하게 전달해야 합니다.

버튼을 사용하는 경우 표준 디자인 규칙을 준수하고 기능을 명확하게 표시해야 합니다.

이 카드는 사용자가 제공된 각 기능에 대해 명확한 탭 어포던스를 통해 작업을 수행할 수 있으므로 효과적입니다.
사용자가 콘텐츠를 탭하여 추가 정보를 볼 수 있다는 점이 명확하지 않아 이 카드는 효과가 떨어집니다.

작업을 즉시 이해할 수 있도록 만들기

시계의 환경은 의미를 전달할 수 있는 충분한 공간이 없으므로 가장 효과적인 카드에는 쉽게 예측 가능한 양방향 구성요소가 있습니다.

효과적인 카드는 사용 가능한 공간을 최대한 활용하여 각 작업의 결과를 명확하게 전달합니다.
이 카드의 작업이 명확하지 않습니다. 앨범 아트가 있는 컨테이너가 사용자를 어디로 연결하며 '재생' 버튼과 다른가요?

시각적으로 작업 우선순위 지정

사용자가 카드에서 가장 중요한 작업을 이해할 수 있도록 상호작용 컨테이너의 시각적 우선순위를 지정해야 합니다.

  • 기본 작업 버튼에는 기본 색상을 사용하세요.
  • 보조 작업에 보조/3차 색상 사용
이 카드는 색조 채우기 스타일을 사용하여 채워진 (기본 및 보조 색상 역할 포함) 카드와 투명한 3차 하단 버튼 역할을 조합하여 사용합니다.
이 카드에는 채워진 스타일 버튼이 너무 많이 사용되어 있으며 모두 기본 색상 역할을 사용합니다.

더 적은 수의 컨테이너로 단순화

카드는 특정 작업을 트리거하기 위해 두 개 이상의 양방향 구성요소를 사용하지 말고 대신 전체 레이아웃을 더 적은 수의 컨테이너로 단순화해야 합니다.

이 카드는 여러 개의 컨테이너를 사용하며 각 컨테이너는 타이머 시작 또는 새 타이머 만들기와 같은 특정 작업을 실행하는 버튼 역할을 합니다.
여기서는 모든 정보가 동일한 위치로 이동하므로 4개의 컨테이너를 사용할 필요가 없습니다.

기능적 목적으로 컨테이너 사용

사용자가 카드 내 각 구성요소의 작동을 예상할 수 있도록 하려면 장식용 또는 구조적 목적으로 컨테이너를 사용하지 않는 것이 좋습니다. 아무것도 실행하지 않는 탭을 방지할 수 있기 때문입니다.

이 솔루션은 카드의 유일한 작업이 생성 흐름이고 다른 모든 콘텐츠가 검은색 배경에 플로팅되어 있기 때문에 작동합니다.
이 카드는 사용자가 모든 컨테이너와 상호작용할 수 있는 것처럼 보이므로 더 혼란스럽습니다.

한눈에 확인할 수 있는 그래프 및 차트 표시

한눈에 볼 수 있는 디자인은 Wear OS 디자인의 핵심입니다. 화면 시간 (약 7초)이 제한적이므로 한눈에 쉽게 이해할 수 있는 명확한 형식으로 필수 정보를 우선적으로 제공하세요.

시계는 휴대전화 환경을 보완하여 주요 세부정보에 빠르게 액세스할 수 있도록 지원합니다.

숫자 또는 통계 정보를 한눈에 빠르게 파악할 수 있도록 표시하고 필요한 경우 사용자가 탭하여 앱에서 자세한 정보를 볼 수 있도록 합니다.
카드에 자세한 숫자 또는 통계 정보 표시