데스크톱 환경은 처음부터 적응형으로, 연결된 디스플레이나 창 내에서 다양한 크기를 지원합니다. 적응형 UI를 만들어 다양한 Android 기기를 지원합니다. 적응형 레이아웃은 데스크톱 환경에 필수적이며, 사용자가 앱 창의 크기를 원활하게 조절할 수 있도록 지원합니다.
데스크톱 환경에 맞게 앱을 준비하려면 먼저 앱의 UI를 조정하고 밀도 및 입력 상호작용 디자인으로 진행하세요. 자세한 내용은 적응형 레이아웃을 참고하세요. 디자인 실습을 연습하려면 적응형 디자인 실습을 참고하세요.
창에서 생각하기
그룹화 및 포함을 사용하여 창 기반 레이아웃 접근 방식을 채택합니다. 콘텐츠는 시각적 컨테이너를 사용하거나 화이트 스페이스를 사용한 암시적 그룹화를 통해 구성할 수 있습니다. 이러한 창은 확장, 제한, 숨기기, 이동 또는 팝업으로 표시할 수 있으므로 유연합니다. 창을 사용한 디자인은 다양한 모바일 기기에서 일관된 환경을 만드는 프로세스를 간소화하며 현재 그리드와 통합하여 복잡한 레이아웃 정렬을 간소화할 수 있습니다.
권장사항
배율
확장된 화면은 콘텐츠를 위한 공간을 더 많이 제공하지만 추가 공간과 시청 거리와 같은 인체공학적 요소를 고려해야 합니다. 타이포그래피는 더 멀리 있거나 키보드로 입력하는 사용자가 편안하게 볼 수 있도록 약간 확대해야 합니다.
확장 및 연결된 디스플레이에서는 UI 요소와 유형이 조정되며 화면 해상도에 따라 배율이 다를 수 있습니다.
기존 서체 스케일 디자인에서 한두 단계 위를 사용하거나 데스크톱 및 확장 디스플레이용으로 설계된 전문 서체 스케일을 구현하는 것이 좋습니다. 디자인에서 의견이 반영된 조정을 통해 편집 품질을 높일 수 있습니다.
이미지도 확대되어 화면 전체에 표시됩니다. 이렇게 하면 사용자가 식물을 더 자세히 볼 수 있지만 공간을 효율적으로 사용하지는 않습니다. UI 요소를 구성할 때 이 점을 염두에 두세요.
콘텐츠 및 UI 요소
이제 콘텐츠가 그룹화되고 확장되었으므로 일부 콘텐츠 UI도 중단점에 더 적합하도록 이동하거나 업데이트할 수 있습니다.
콘텐츠의 각 창 내에서 콘텐츠가 적응할지 여부와 방법을 결정합니다. 콘텐츠 자체를 살펴봅니다. 목록 행이 카드로 변경되면 콘텐츠의 상호작용 효율성과 스캔 가능성이 떨어지나요? 구성요소는 다양한 중단점에서 다르게 동작할 수 있습니다. 너비나 가시성을 조정하거나 구성요소를 전환할 수도 있습니다.
창 내에서 각 UI 요소와 복사의 최대 너비를 결정합니다. UI 요소가 전체 너비로 늘어나거나 왜곡되어서는 안 됩니다. 창 내에서 최대 패딩과 여백을 설정합니다. 카피는 줄 길이를 제한하여 편안한 읽기를 지원해야 합니다. 짧은 형식의 광고 문구는 60자(영문 기준)로 제한하고 긴 형식의 콘텐츠는 더 길게 만들 수 있습니다.
권장사항
단계적 노출을 사용합니다. 사용자가 창 크기를 늘리면 더 많은 콘텐츠가 표시될 수 있나요? 추가 콘텐츠가 클릭 수를 줄여 생산성을 높이는지 아니면 혼란을 야기하는지 고려하세요.
각 창의 콘텐츠는 콘텐츠에 따라 다른 열과 그리드 구조로 리플로우하여 레이아웃을 변경할 수 있습니다. 예를 들어 캐러셀이 있는 세로 그리드는 기능 캐러셀이 있는 벽돌 그리드로 업데이트될 수 있습니다. 요소의 수직 변경을 고려하고 제약 조건 및 프레젠테이션 변경과 결합합니다. 콘텐츠 소비에 따라 이와 같이 구성요소를 이동하지 않는 것이 좋을 수도 있습니다.
사용자가 가독성과 생산성을 극대화하기 위해 레이아웃을 원하는 대로 조정할 수 있도록 하는 것이 좋습니다.
탐색
콘텐츠와 UI 요소를 적응시킨 후 콘텐츠 창이 서로 및 탐색 계층 구조와 상호작용하는 방식을 결정합니다. 탭하여 세부 콘텐츠로 이동하는 대신 추가 화면 공간을 사용하여 세부정보와 지원 콘텐츠를 나란히 표시할 수 있습니다.
- 탐색 메뉴를 사용하는 경우 인체 공학적 설정을 개선하기 위해 하단 표시줄이 화면 측면의 탐색 레일로 업데이트되어야 합니다. 하단 탐색 메뉴를 늘리지 마세요.
- 탭과 같은 보조 탐색의 경우 최대 너비로 고정하여 정확하게 탐색할 수 있도록 하는 것이 좋습니다.
- 앱 바는 해당 콘텐츠 창에 고정할 수도 있지만 탐색 계층 구조를 혼동하지 않도록 해야 합니다.
밀도
데스크톱 환경은 입력 정밀도와 화면 크기로 인해 상호작용 밀도와 시각적 밀도가 모두 달라질 수 있습니다.
- 컴팩트한 휴대전화 레이아웃에 비해 사용자에게 부담을 주지 않으면서 표 데이터와 같은 시각적 요소의 밀도를 높일 수 있습니다. 콘텐츠 밀도를 선택사항으로 간주하고 항상 레이아웃 내에서 텍스트 크기 조정을 허용하며 유형 크기를 하드 설정하지 마세요.
- 구성요소의 클릭 타겟이 더 정확해야 합니다. 구성요소 주변의 내재된 클릭 타겟으로 인해 잘못된 클릭이 발생할 수 있습니다.
입력
입력이 추가되면 사용자의 상호작용 패턴도 추가됩니다.
사용자에게 마우스와 키보드가 있는 경우 앱은 마우스 오버 상태와 포커스를 고려해야 합니다.
- 마우스, 스타일러스와 같은 포인터 입력에 마우스 오버 상태를 추가합니다.
- 사용자가 접근성을 위해 Tab 키를 사용하여 탐색할 때 요소의 포커스 상태를 캡처합니다.
- 커서가 사용자에게 상호작용과 앱 상태를 전달하는 데도 도움이 될 수 있으므로 커서 상태를 고려하세요.
추가 상태를 사용하면 효율성이 향상될 수 있습니다.
- 마우스 오른쪽 버튼 클릭 기능에는 빠른 기능 액세스를 위한 컨텍스트 메뉴가 포함될 수 있습니다.
- 마우스 오버 도움말은 사용자를 온보딩하는 데 도움이 됩니다.
- 단축키는 고급 사용자의 생산성을 높이는 데 도움이 됩니다.
