카드 디자인 가이드라인

카드는 Wear OS에서 가장 쉽게 액세스할 수 있는 표시 경로 중 하나입니다.

카드를 통해 사용자는 작업을 완료하는 데 필요한 정보와 작업에 쉽게 액세스할 수 있습니다. 사용자는 시계 화면에서 스와이프하여 피트니스 목표 달성 현황을 확인하고 날씨를 알아보는 등 다양한 작업을 할 수 있습니다. 카드를 사용하여 앱을 시작하거나 필수 작업을 빠르게 실행할 수도 있습니다.

사용자는 시계에서 보고 싶은 카드를 선택할 수 있습니다. 사용자는 시계와 호환 앱 양쪽에서 카드를 관리할 수 있습니다.

UX 원칙

다음 표는 카드 UX 원칙을 설명합니다.

즉시

예측 가능

관련됨

카드는 사용자가 자주 발생하는 작업을 빠르게 완료할 수 있도록 설계되었습니다. 콘텐츠를 쉽게 이해하도록 중요한 콘텐츠를 명확한 정보 계층 구조로 표시합니다. 각 카드 내의 콘텐츠는 항상 사용자 작업에 중점을 두어야 합니다. 이렇게 하면 사용자가 카드에서 볼 수 있는 정보를 예측할 수 있으므로 회상력이 높아집니다. 사용자는 어디서나 시계를 착용합니다. 카드의 콘텐츠가 사용자의 상황과 어떻게 관련되는지 고려하세요.

가이드라인

카드를 만들 때는 다음 가이드라인에 유의하세요.

단일 작업에 집중

각 카드를 달리기 시작과 같은 단일 작업에 집중시킵니다.
한 카드에서 너무 많은 작업을 지원합니다.

작업별로 별도의 카드 만들기

앱에서 여러 작업을 지원하는 경우, 앱이 지원하는 각 작업별로 별도의 카드를 만드는 것이 좋습니다. 예를 들어, 피트니스 앱의 경우 목표 카드와 운동 활동 카드를 만들 수 있습니다.

카드

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

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

최신 데이터 업데이트 표시

사용자가 시계에 표시된 데이터가 얼마나 최근 데이터인지 알 수 있어야 합니다. 캐시된 데이터는 마지막으로 업데이트된 시점이 사용자에게 유용하다면 이 시점을 표시합니다.

카드

적절한 데이터 새로고침 빈도 사용

기기의 배터리 수명에 미치는 영향을 고려하여 적절한 카드 업데이트 속도를 선택합니다. 심박수, 걸음 수와 같은 플랫폼 데이터 소스를 사용하는 경우 Wear OS에서 업데이트 속도를 제어합니다.

빈 상태

카드에는 두 가지 유형의 빈 상태가 있습니다. 두 가지 모두에 PrimaryLayout을 사용하는 것이 좋습니다.

오류 또는 권한

사용자에게 카드에서 설정이나 환경설정을 업데이트해야 한다고 알립니다.

로그인

로그인 카드에 명확한 클릭 유도 문구를 제공합니다.

대화상자 예시

오류, 권한, 설정에 대화상자 상태를 사용합니다.

카드

진행 중인 활동 표시

앱이 운동 추적 또는 음악 재생과 같은 장기 실행 활동을 실행하면 하나 이상의 타일 중 하나에 진행 중인 활동의 진행 상황을 표시해야 합니다.

앱에서 사용자가 이러한 활동을 시작할 수 있는 카드도 지원하는 경우 사용자 혼동을 최소화하기 위해 다음을 실행하세요.

  • 진행 중인 활동이 이미 진행 중임을 나타냅니다.
  • 사용자가 이러한 카드를 탭하면 앱을 실행하고 진행 중인 활동을 표시합니다. 진행 중인 활동의 새 인스턴스를 시작하지 않습니다.

카드

요구사항

기본 데이터
활동을 설명하는 기본 콘텐츠입니다.

라벨
활동의 상태를 표시합니다.

타일 모션

카드에 애니메이션을 추가할 때 다음 원칙에 유의하세요.

사용자가 변경사항을 이해하도록 지원하기

걸음 수 차트의 진행률과 같은 카드의 정보를 업데이트하는 경우 강조합니다.
예기치 않게 값 간에 전환되었습니다.

미리보기

사용자가 시계와 휴대전화의 카드 관리자에 표시되는 콘텐츠를 확인할 수 있도록 카드 미리보기를 추가합니다. 각 카드에는 대표 미리보기 이미지가 1개 있을 수 있습니다. 이미지는 다음 요구사항을 충족해야 합니다.

요구사항

  • 400x400픽셀로 애셋을 내보냅니다.
  • 원형 미리보기 이미지를 제공합니다.
  • 단색 검은색 배경을 사용합니다.
  • PNG 또는 JPEG로 저장합니다.
  • 앱에서 많이 사용되는 언어로 현지화된 애셋을 추가합니다.
시계의 카드 관리자에 표시되는 카드 미리보기 휴대전화의 카드 관리자에 표시되는 카드 미리보기
카드가 콘텐츠로 채워지는 미리보기를 표시합니다.
빈 상태를 표시하거나 페이지로 나누기 UI에 카드 아이콘을 표시하거나 카드 주위에 획을 배치합니다.

레이아웃 예시

다음은 디자인 권장사항에 따른 카드의 일반적인 사용 사례를 보여줍니다. 자세한 내용은 카드를 참고하세요.

목표 추적

운동 시작

운동 시작

운동 시작

운동 요약

타이머 시작

현재 심박수

심박수

다음 알람

명상

명상

뉴스

날씨

다음 이벤트

소셜 네트워크

미디어 재생