스타일

위젯의 스타일을 효과적으로 지정하는 것은 시각적으로 매력적이고 일관성 있는 사용자 경험을 제공합니다. 이 섹션에서는 주요 개념과 색상과 서체를 정의하여 가장 유용한 텍스트를 만드는 기법을 흥미로운 Android 위젯입니다.

색상

색상을 사용하여 스타일을 표현하고 의미를 전달하세요. 적절한 색상 설정 위젯 색상은 가독성, 맞춤설정 가능성, 을 다뤄보실 것을 권해 드립니다.

Material 색상 역할 및 토큰을 사용하여 접근성 대비 가이드라인을 준수합니다. 사용자 생성 색상, 어두운 색상 또는 텍스트 색상과 같은 밝은 테마

자세한 내용은 Material Design 색상 가이드를 참고하세요.

동적 테마

Android 12부터 위젯은 버튼에 기기 테마 색상을 사용할 수 있습니다. 기타 구성요소를 설정할 수 있습니다. 이렇게 하면 다양한 위젯, 홈 화면 아이콘, 배경화면 등을 제공하여 Android 사용자에게 더 일관된 사용자 환경을 제공할 수 있습니다. 제공된 색상 토큰을 사용하면 위젯이 여러 기기에서 제공하는 기기 테마에 통합되어 표시됩니다. 제조업체 및 사용자가 설정한 동적 테마를 사용할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph>
그림 1: 색상 토큰이 표시된 위젯 이미지

밝은 모드 및 어두운 모드

어두운 모드는 대부분 어둡게 표시되는 어두운 버전의 기기 UI입니다. 변경할 수 있습니다. 더 나은 환경을 위해 어두운 모드로 전환하는 사용자가 늘고 있습니다 배터리 수명 및 눈의 편안함을 느낄 수 있습니다. 위젯이 어두운 모드에 맞게 조정되지 않으면 부적절하게 표시되어 사용자를 실망시킬 수 있습니다.

<ph type="x-smartling-placeholder">
</ph>
그림 2: 왼쪽 화면은 밝은 모드이고 오른쪽은 어두운 모드 위젯

서체

서체를 사용하면 글을 읽기 쉽고 아름답게 만들 수 있습니다. 글꼴 크기를 활용하고 명확한 계층 구조를 만들어 사용자의 시야를 가장 중요시하도록 중요한 요소입니다. 줄 간격과 문자 간격 (커닝)에 주의합니다. 를 사용하여 가독성을 개선할 수 있습니다. 특히, 내부의 작은 텍스트 디스플레이에 위젯의 제한된 공간에 배치하면 됩니다.

계층 구조

계층 구조는 글꼴 두께, 크기, 줄 간격, 글자 자간을 지정할 수 있습니다. 업데이트된 서체 스케일로 텍스트 스타일을 다섯 가지 역할로 구성 이름을 붙인 것입니다. 다섯 가지 텍스트 스타일은 디스플레이입니다 헤드라인, 제목, 부제목, 본문입니다. 새로운 역할은 기기에 구속되지 않으므로 훨씬 더 쉽게 적용하는 데 도움이 됩니다.

<ph type="x-smartling-placeholder">
</ph>
그림 3: 다양한 유형의 척도 사용을 보여주는 위젯