세로 레이아웃에 최적화
사용자가 한 방향으로 스크롤하여 콘텐츠를 탐색할 수 있는 세로 레이아웃을 사용하여 앱 디자인을 단순화합니다.
좋은 예
이 앱의 목표는 사용자를 A 지점에서 B 지점으로 안내하는 것입니다.
나쁜 예
세로 스크롤과 가로 스크롤을 모두 사용하지 마세요. 앱 환경이 혼란스러워질 수 있습니다.
시간 표시
상단에 시간 (오버레이)을 표시합니다. 사용자가 시간을 보는 일관된 위치를 제공하기 때문입니다.
좋은 예
오버레이 상단에 시간을 표시합니다. 사용자가 시간을 보는 일관된 위치를 제공하기 때문입니다.
나쁜 예
임시 대화상자, 확인 오버레이 또는 선택 도구에 시간을 표시합니다. 예를 들어 사용자가 확인 화면을 아주 잠깐만 볼 수 있는 경우입니다.
액세스 가능한 인라인 진입점
접근성을 위해 명확한 아이콘과 라벨을 사용하여 모든 작업을 인라인으로 표시해야 합니다. 설정 및 환경설정의 진입점이 포함됩니다.
좋은 예
가능하면 아이콘과 라벨을 모두 사용하세요.
나쁜 예
아이콘만 사용하여 사용자에게 작업을 실행하도록 합니다.
라벨을 사용하여 사용자 안내
긴 대화상자의 경우 사용자가 콘텐츠를 스크롤할 때 라벨을 사용하여 방향을 파악할 수 있도록 합니다.
좋은 예
페이지 나누기, 라벨, 기타 신호를 사용하여 콘텐츠를 정리하고, 사용자가 혼합 콘텐츠가 있는 더 긴 뷰를 스크롤할 때 방향을 파악할 수 있도록 합니다.
나쁜 예
단일 콘텐츠 유형이 포함된 대화상자의 라벨을 추가합니다.
기본 작업 올리기
기본 작업을 오버레이 상단으로 가져와 앱에서 사용자가 쉽게 작업을 실행할 수 있도록 합니다.
좋은 예
명백한 기본 작업을 상단으로 올립니다.
나쁜 예
매우 긴 페이지의 기본 작업은 하단에 배치합니다.
스크롤 화면에 스크롤바 표시
잘못된 상호작용 기대를 방지하려면 스크롤 화면에서만 scroll-indicator를 사용하세요. 마찬가지로 스크롤 화면에 스크롤 표시기를 추가하여 화면의 어느 지점을 보고 있는지 표시해야 합니다.
좋은 예
전체 뷰가 스크롤되면 스크롤 표시기를 표시합니다.
나쁜 예
스크롤되지 않는 뷰에 스크롤 표시기를 표시하거나 스크롤되는 뷰에 스크롤바를 표시하지 않습니다.
대형 화면 크기에 맞게 반응형으로 디자인
사용하는 구성요소가 사용 가능한 너비를 채우고 스크롤되지 않는 레이아웃의 높이를 고려해야 합니다.
모든 Compose 구성요소는 반응형으로 빌드되지만 디자인을 개선하고 더 큰 디스플레이에서 가치를 추가하기 위한 맞춤설정은 권장됩니다.
좋은 예
콘텐츠가 사용 가능한 너비와 높이를 채우고 전체 화면 요소 (ProgressIndicators, TimeText 등)가 스크롤되지 않는 레이아웃에 반응적으로 조정되도록 합니다.
나쁜 예
화면을 반응형으로 채우지 않거나 사용 가능한 공간을 채우기 위해 콘텐츠의 동작을 조정하지 않는 고정 너비의 구성요소를 사용합니다.
반응형 (퍼센트) 여백 사용
여백 크기가 디스플레이의 성장 곡선에 맞게 조정되도록 백분율 여백을 사용하는 것이 좋습니다.
좋은 예
콘텐츠가 상단과 하단에서 잘리지 않도록 추가 비율 여백을 사용합니다.
나쁜 예
구성요소는 추가 여백 없이 사용 가능한 공간을 채우도록 크기를 조절해서는 안 됩니다.