이 가이드는 기본 Android UX 패턴과 Material Design을 사용하여 기존 iOS 모바일 디자인을 Android로 변환하여 Android 디자인을 시작하는 데 도움이 됩니다.
디자인 패리티를 위해 윤곽선이 표시되고 효율성을 위해 정렬됩니다. 공유 기본 디자인 시스템을 따르는 경우 Material 3 대신 자체 시스템으로 디자인을 변환할 수 있습니다. Android와 iOS 모두 콘텐츠가 먼저라는 아이디어를 준수합니다.
그런 다음 브랜딩은 색상, 유형, 도형으로 제공될 수 있습니다. 이렇게 하면 콘텐츠 가독성이 향상될 뿐만 아니라 일관성을 더 쉽게 만들 수 있습니다.
iOS 디자인으로 시작
시작하기 전에 iOS 앱의 사본을 만드세요. iOS 앱은 막대, 뷰, 컨트롤의 세 가지 영역으로 나뉩니다. 이 구조를 사용하여 변환 작업을 진행할 수 있으며 스타일 지정은 마지막에 진행합니다.
Android 앱의 일부를 확인하세요.
1. iOS 시스템 UI 삭제
상태 표시줄과 홈 표시기를 삭제합니다. 지금 이렇게 하는 것이 더 간단합니다.
2. 프레임 크기 조정
Android 컴팩트 크기 조정(412dp)을 사용할 수 있습니다. 하지만 창 클래스 크기 내에서도 다양한 기기를 고려하세요. 예를 들어 작은 화면을 수용하기 위해 360dp에서 테스트하고 모든 창 클래스 크기에 맞게 조정합니다.
3. Android 시스템 막대로 바꾸기
Android 시스템 UI는 사용자의 기기 및 설정에 따라 다를 수 있지만 기본 시스템 UI를 표시하면 디자인에 더 많은 컨텍스트를 제공할 수 있습니다. 상단에 알림 표시줄을 배치하고 하단에 동작 탐색 또는 3버튼 탐색 메뉴를 배치합니다.
자세한 내용은 Android 시스템 막대를 참고하세요.
4. 탐색에 따라
탭바 (하단 탐색)를 탐색 메뉴로 바꿉니다.
흐름 지도를 다시 살펴보세요. iOS 앱에서 더보기 메뉴를 사용하고 있나요? (HIG 권장사항에서는 이 패턴을 사용하지 않는 것이 좋습니다.) 항목을 5개 이하로 유지하고 하단 탐색 메뉴를 기본 탐색으로 유지하며 프로필 또는 설정과 같은 보조 항목을 상단 앱 바로 이동할 수 있는지 평가하거나 FAB로 변환할 수 있는 기본 액션이 있을 수 있습니다.
기본 탐색은 항상 상위 뷰 (흐름 지도의 섹션 최상위 수준)에 있어야 합니다. 하위 뷰 (상위 뷰 아래의 모든 항목)는 탐색 계층 구조에서 더 높고 모달이 아닌 경우 기본 탐색을 포함할 수 있습니다.
적절한 아이콘과 라벨로 하단 탐색 메뉴를 업데이트합니다. 두 플랫폼 모두 탐색 대상 간의 측면 이동을 방지합니다.
5. 탐색 메뉴에서 상단 앱 바로
섹션별로 나누세요. 먼저 상위 뷰를, 그런 다음 하위 뷰를 나누세요. 앱 바는 왼쪽(탐색 및 제목)과 오른쪽 으로 구성됩니다.
앱에서 하단 탐색 메뉴 대신 탐색 창 메뉴를 사용하는 경우 모든 상위 뷰에 창 아이콘이 표시됩니다.
앱에 레일 또는 창이 없는 경우 상위 뷰에 기본 탐색 아이콘이 표시되지 않습니다.
제목은 Android의 앱 바에서 기본적으로 왼쪽 정렬됩니다.
하위 뷰는 탐색 아이콘 위치에 위쪽 화살표를 표시합니다. 뒤로와 혼동하지 마세요. 위쪽 화살표는 사용자 흐름에서 앱의 탐색 계층 구조를 통해 사용자를 한 수준 위로 이동하는 반면, 뒤로 또는 가장자리 스와이프는 시스템 탐색에 있으며 사용자를 뒤로 이동하고 앱에서 사용자를 내보내기도 합니다.
모달 뷰는 어떤가요? 전체 화면 모달 (예: 동영상 플레이어 및 이미지)의 경우 탐색 아이콘이 모달을 닫는 닫기로 변경되어야 한다는 점을 제외하고는 하위 뷰 앱 바와 유사합니다.
6. 약간 더 많은 모달리티
사용자의 주의를 작업에 집중하는 데 가장 적합한 큰 모달 뷰로 시작합니다. iOS에서는 사용자가 아래로 스와이프할 수 있는 시트로 표시되는 경우가 많습니다.
앱 바 바꾸기를 완료합니다. iOS 시트 모달의 경우 상단 시트 부분과 배경 미리보기를 전체 화면 대화상자 앱 바로 바꿉니다.
보너스: iOS 모달 시트가 하단 시트로 변환될 수 있는지 확인합니다.
액션 및 활동 시트에서 하단 시트로. (이제 공유 시트도 변환할 수 있습니다.)
알림에는 시스템 대화상자를 사용합니다. 사용자가 어떤 방식으로든 확인해야 하는 중요한 정보에 사용하는 경우 시스템 대화상자로 바꿉니다. 이 시점에서 모든 입력 및 선택 도구도 바꿔야 합니다.
7. 형제 콘텐츠
탭 또는 뷰 페이저 또는 스와이프 탭. iOS에서 세그먼트화된 컨트롤을 사용하는 경우 Android의 탭으로 변환됩니다. 둘 다 동일하지는 않지만 유사한 정보 뷰 간에 필터링하는 방법으로 작동합니다. Android 탭은 일반적으로 앱 바에 연결되며 콘텐츠 간에 스와이프할 수 있다는 추가 이점이 있습니다.
8. 콘텐츠 및 컨트롤
제약조건 또는 크기 조정 동작 설정 방법에 따라 대부분의 콘텐츠가 이미 크기 조정되었을 수 있습니다. 하지만 이 시간을 활용하여 여백을 설정하세요. 16dp는 작은 화면에서 좋은 표준입니다.
기준선 그리드는 구성요소의 경우 8dp 그리드, 유형 및 아이콘의 경우 4dp를 기반으로 합니다. 8pt 그리드는 iOS에서 잘 작동하므로 두 플랫폼 모두의 시작점으로 고려해 보세요.
컨트롤. 이러한 전환을 Android 전환으로 바꿉니다. Android 체크박스와 라디오 버튼을 사용합니다. Android에는 이러한 모든 기능이 포함되어 있습니다.
양식이 있는 경우 iOS 텍스트 필드를 Android 텍스트 필드로 바꿉니다. Material에는 윤곽선 또는 채우기와 같은 옵션이 있으므로 브랜딩에 가장 적합한 옵션을 선택하세요.
Material 목록은 iOS 테이블 셀과 비교할 때 몇 가지 차이점이 있습니다.
- 구분선은 드물게 사용됩니다.
- 시각적 노이즈를 최소화하기 위해 목록에 표시기가 사용되지 않습니다.
- 크기는 8dp 그리드를 준수합니다.
9. 스타일
색상: UI 색상은 색 구성표 에 어셈블된 강조, 시맨틱, 표면 색상으로 구성됩니다. 이러한 색상은 역할별로 UI에 적용됩니다.
유형: 시스템 글꼴을 사용하는 경우 San Francisco를 바꿉니다. Roboto는 Android의 기본 시스템 글꼴입니다. 하지만 테마 설정 및 다운로드 가능한 Google 글꼴을 사용하여 브랜드의 고유한 스타일을 표현하는 것이 좋습니다.
아이콘: 같은 의견입니다. SF 기호를 사용하는 경우 모두 Material 아이콘 또는 기호로 변환되었는지 다시 한번 확인하세요. 브랜드에 적합한 변형을 선택하세요. 모든 플랫폼에서 Material 아이콘을 사용할 수 있다는 것을 알고 계셨나요?
모션: Android와 iOS에는 고유한 모션 디자인이 있으며 각 플랫폼에 맞게 존중해야 합니다. Material 모션은 유익하고 집중적이며 표현됩니다. 리플은 터치 피드백을 제공하기 위해 구성요소에 사용되는 고유한 강조표시입니다. 모션 시스템은 컨테이너 변환, 공유 축, 페이드 스루, 페이드 애니메이션을 활용하는 전환 패턴 집합입니다. 디자인의 요소에 영구 컨테이너가 있는지, 요소 간의 관계, 요소가 어떻게 들어가거나 나가야 하는지 고려하세요.
10. 정리
프로토타입을 변환하는 경우 이 시점에서 다시 연결하는 것이 좋습니다. 기본 탐색을 다시 살펴보세요. 그런 다음 앱 바를 살펴보세요. 위로와 뒤로의 차이점을 기억하고 Android에 적합한 페이지 전환을 선택해야 합니다 (9단계에서 설명).
완전히 작동하는 프로토타입이 준비되어 있어야 하며 크기를 조정했으므로 핸드오프할 준비가 되었습니다.
스타일 및 구성요소 가이드
기존 디자인 시스템 또는 스타일 가이드가 있는 경우 iOS 가이드와 함께 사용하는 것처럼 Material Design과 함께 사용할 수 있는 자체 기본 스타일 (색상, 유형, 아이콘, 도형)이 있을 수 있습니다. Material Theming을 사용하면 색상, 유형, 도형으로 브랜드의 고유한 스타일을 사용하여 Material 구성요소를 맞춤설정할 수 있습니다.
플랫폼별 가이드라인을 보유하는 것은 멀티 플랫폼 제품에서 흔한 일이며 자체 디자인 시스템을 더 사용자 중심적으로 만들 수 있습니다.
마지막으로, 디자인 시스템이 없는 경우 모든 앱 또는 제품에 완전 맞춤 디자인 시스템이 필요한 것은 아닙니다. 원시트 스타일 가이드를 만드는 것이 좋습니다. 스타일 가이드는 디자인의 기본 사양을 간략하게 설명하는 문서입니다. 브랜딩 가이드라인에는 스타일 가이드가 포함되는 경우가 많습니다.
이 가이드는 Android용으로 복사하여 스타일(또는 기호, 구성요소, 라이브러리)을 업데이트하는 소스로 사용할 수 있습니다.