기본 iOS 앱 디자인과 기본 Android 앱의 차이점

현지 최고의 App Design 을 만들려면 iOS와 Android 플랫폼의 차이점을 명심해야 합니다. 이러한 플랫폼은 기본 응용 프로그램의 모양만 다릅니다. 또한 구조와 흐름 측면에서 다릅니다. 기본 애플리케이션 디자인을 통해 최상의 사용자 경험을 제공하려면 이러한 차이점을 염두에 두어야 합니다.

 iOS 및 Android 용 기본 모바일 애플리케이션에는 특수한 운영 체제 별 기능이 있습니다. Apple 및 Google의 지침은 가능한 경우 플랫폼 제어 탐색 도구 (페이지 컨트롤, 탭 bar, 세그먼트 컨트롤, 테이블 뷰, 컬렉션 뷰 및 분할 뷰)를 사용하는 것이 좋습니다. 사용자는 이러한 컨트롤이 일반적으로 각 플랫폼에서 작동하는 방식에 익숙하므로 표준 컨트롤을 사용하면 앱을 둘러 보는 방법을 직관적으로 알 수 있습니다. iOS와 Android에서 앱이 다르게 보이는 이유와 그 이유를 명확히 하기 위해 iOS와 Android의 상호 작용 디자인 패턴 간의 주요 차이점에 초점을 맞춥니다. 또한 기본 App Design 템플릿과 기본 모바일 애플리케이션 예제를 제공하여 우리가 말하는 것을 시각화 할 수 있습니다.

 

탐색 패턴의 차이점

 화면 간 이동은 모바일 애플리케이션에서 공통적인 조치입니다. 탐색 패턴 과 관련하여 iOS와 Android의 기본 App Design 지침이 서로 다르다는 점을 고려해야 합니다 . Android 기기 하단에는 범용 탐색 표시 줄이 있습니다. 탐색 모음에서 뒤로 버튼을 사용하면 이전 화면이나 단계로 쉽게 돌아갈 수 있으며 거의 ​​모든 Android 앱에서 작동합니다.

글로벌 탐색 바 (Android)

 

반면에, Apple 디자인 방식은 상당히 다릅니다. 글로벌 탐색 바가 없으므로 기본 iOS App Design 에서 글로벌 뒤로 버튼을 사용하여 뒤로 이동할 수 없습니다 . 이는 iOS 모바일 애플리케이션의 디자인에 영향을 줍니다. 내부 화면에는 왼쪽 상단에 뒤로 버튼이 있는 기본 탐색 모음이 있어야 합니다.

뒤로 버튼 (iOS)

 

Apple은 또한 응용 프로그램에서 왼쪽에서 오른쪽으로 살짝 밀기 제스처를 포함하여 이전 화면으로 이동합니다. 이 제스처는 거의 모든 앱에서 작동합니다.

왼쪽에서 오른쪽으로 스와이프 동작 —  돌아 가기 (iOS)

 

이 경우 iOS와 Android의 차이점은 기본 앱의 iOS 기기에서 왼쪽에서 오른쪽으로 스와이프 동작으로 이전 화면으로 돌아 간다는 것입니다. Android 기기에서 동일한 동작으로 탭이 전환됩니다. 그러나 iOS와 달리 Android 장치에는 뒤로 버튼이 있는 아래쪽 탐색 표시 줄이 있어 이전 화면으로 돌아갑니다. 다른 모바일 응용 프로그램과의 일관성을 유지하려면 플랫폼 간의 이러한 차이점을 항상 명심해야 합니다.

 

왼쪽에서 오른쪽으로 스와이프 동작 —  탭 간 전환 (Android)

 

iOS 및 Android에서 인앱 탐색 패턴이 다릅니다.

머티리얼 디자인 가이드 라인에는 몇 가지 탐색 옵션이 있습니다. Android 애플리케이션에 사용되는 잘 알려진 탐색 패턴 중 하나는 탐색 드로어와 탭의 조합입니다.

내비게이션 서랍은 햄버거 메뉴 아이콘을 눌러 왼쪽 또는 오른쪽으로 미끄러지는 메뉴입니다. 탭은 화면 제목 바로 아래에 있으며 컨텐츠 구성을 높은 수준으로 활성화하여 사용자가 앱의 보기, 데이터 세트 및 기능 측면을 전환 할 수 있습니다.

왼쪽 — 서랍 탐색 메뉴 / 오른쪽 — 탭 (자재 디자인)

머티리얼 디자인에는 하단 네비게이션이라는 컴포넌트도 있습니다. 이 컴포넌트는 머티리얼 디자인 네이티브 앱에도 중요합니다. 하단 탐색 막대를 사용하면 한 번의 탭으로 최상위 뷰를 쉽게 탐색하고 전환 할 수 있습니다. 머티리얼 디자인 가이드 라인은 탐색 할 때 혼동을 일으킬 수 있으므로 아래쪽 탐색 및 탭을 동시에 사용하지 않는 것이 좋습니다.

하단 탐색 (재료 디자인)

 

Apple 휴먼 인터페이스 지침에는 서랍 탐색 메뉴와 유사한 표준 탐색 컨트롤이 없습니다. 대신 Apple의 지침에 따라 전역 탐색을 탭 표시 줄에 배치하는 것이 좋습니다. 탭 표시 줄은 앱 화면 하단에 나타나며 앱의 주요 섹션간에 빠르게 전환 할 수 있습니다.

일반적으로 탭 표시 줄에는 대상이 5개를 넘지 않습니다. 보다시피 이 컴포넌트는 머티리얼 디자인의 하단 네비게이션과 비슷하지만 iOS 앱에서 더 일반적으로 사용됩니다.

왼쪽 상단-iOS 세그먼트 컨트롤 / 오른쪽 하단-iOS 탭 표시 줄 (HIG)

 

운영 체제 (탭 및 세그먼트 제어, 하단 탐색 및 탭 표시 줄)에서 유사한 기능을 수행하는 유사한 요소가 있지만 탐색은 여전히 ​​iOS와 Android의 주요 차이점 중 하나입니다. Android의 글로벌 탐색 표시 줄과 iOS의 부족과 같은 객관적인 차이점과 이 두 시스템의 비전 차이가 있습니다.

Apple은 기본 탐색 요소가 포 그라운드에 있어야하며 햄버거 메뉴는 사용자가 매일 수행하지 않는 기능을 저장하는 데만 사용해야 한다고 생각합니다. 반면, Android 애플리케이션의 햄버거 메뉴에서 기본 탐색을 숨기는 것이 일반적입니다.

 

표준 컨트롤에 대한 사용자 정의 보기에는 추가 개발 시간이 필요하며 사용자에게 친숙하지 않습니다.

애플리케이션의 각 요소가 여러 플랫폼에서 동일하게 보이도록 하려면 최고의 모바일 App Design 을 만들려면 추가 개발 노력이 필요합니다 . 가장 복잡한 사용 사례에는 라디오 버튼, 확인란, 토글(on/off처럼 두 상태 중 하나를 선택하는 게 쓰는 키) 등과 같은 기본 컨트롤이 포함되며, 이 컨트롤에는 Android에서 iOS와 유사한 컨트롤을 표시하거나 iOS에서 Android와 같은 컨트롤을 표시하기 위해 사용자 지정 보기 구현이 필요합니다.

각 플랫폼에는 고유한 상호 작용이 있습니다. *좋은 디자인은 각 운영 체제에서 사용자의 습관을 존중하는 디자인입니다. iOS 및 Android 용 모바일 애플리케이션을 설계 할 때 플랫폼 간의 차이점을 염두에 두고 사용자의 기대에 맞는 애플리케이션을 설계하는 것이 매우 중요합니다. 

일반적으로 두 플랫폼에서 다르게 설계된 요소의 한 예로 날짜 선택기가 있습니다. Android 사용자는 iOS에서 일반적으로 사용되는 슬롯 머신 릴 스타일 날짜 선택기에 익숙하지 않습니다. Android에서이 스타일의 날짜 선택 도구를 사용하려면 사용자 정의 보기가 필요하며, 이로 인해 복잡해져 개발의 복잡성과 지속 시간이 증가하고 App Design이 Android 플랫폼에 익숙하지 않게 보일 수 있습니다.

왼쪽 — 표준 iOS 컨트롤 / 오른쪽 — 표준 Android 컨트롤

 

왼쪽 — 표준 iOS 선택기; 오른쪽 — 표준 Android 선택기

 

iOS 및 Android의 버튼 스타일

머티리얼 디자인 가이드 라인에는 플랫과 올림의 두 가지 스타일의 버튼이 있습니다. 이 버튼들은 다른 상황에서 사용됩니다. 머티리얼 디자인의 버튼 텍스트는 일반적으로 모두 대문자입니다. 때때로 우리는 네이티브 iOS 앱에서도 대문자 버튼 텍스트를 발견하지만 대부분 제목을 찾습니다.

왼쪽-표준 머티리얼 디자인 버튼 / 오른쪽 — 표준 HIG 버튼

 

또한 Android에는 부동 액션 버튼과 iOS에는 액션 버튼으로 호출하는 버튼이 있습니다. 부동 작업 버튼은 응용 프로그램의 기본 작업을 나타냅니다. 예를 들어, 메일 앱의 작성 버튼 또는 소셜 네트워크 앱의 새 게시 버튼은 부동 작업 버튼 일 수 있습니다. iOS 앱의 기본 액션과 유사한 디자인은 탭바 중앙에 있는 클릭 유도 문안 버튼입니다.

왼쪽 — iOS의 표준 부동 작업 버튼 / 오른쪽 — Android의 표준 CTA 버튼

 

Android의 기본 바텀 시트와 iOS의 작업 시트 및 활동 보기의 차이점

Android에는 두 가지 유형의 바텀 시트가 있습니다 : 모달 바텀 시트와 영구 바텀 시트 / 모달 바텀 시트에는 두 가지 유형의 컨텐츠가 있습니다. 동작이 다른 모달 바텀 시트와 사용자가 공유 아이콘을 탭한 후 나타나는 앱 목록입니다. 기본 iOS 작업 시트 및 활동보기에서 동일한 유형의 컨텐츠를 찾을 수 있습니다. 그러나 이러한 구성 요소는 Android 하단 시트와 다르게 보입니다.

왼쪽-표준 머티리얼 디자인 바텀 시트 / 오른쪽 — iOS 앱의 작업 시트

 

터치 대상과 그리드의 차이점

iOS와 Android에는 터치 대상에 대한 지침이 약간 다릅니다 (iOS의 경우 44px @ 1x, Android의 경우 48dp / 48px @ 1x). 머티리얼 디자인 가이드 라인에서는 모든 요소를 ​​8dp 정사각형베이스 라인 그리드에 정렬 할 것을 제안합니다.

 

타이포그래피 차이

샌프란시스코는 iOS의 시스템 서체입니다. Roboto는 Android의 표준 서체입니다. Noto는 Roboto에서 지원하지 않는 Chrome 및 Android의 모든 언어에 대한 표준 서체입니다. 각 플랫폼의 인쇄 및 레이아웃 규칙에 세심한 주의를 기울여야 합니다.

왼쪽 — 재료 디자인 타이포그래피 / 오른쪽 — HIG 타이포그래피

 

미세한 상호 작용

디자인에 있어, 첫인상은 일반적으로 사용자에게 마지막입니다.

그렇기 때문에 처음부터 사용자의 관심을 끄는 것이 매우 중요합니다. 응용 프로그램 설계 및 개발하는 동안, 우리는 미세한 상호작용과 애니메이션을 통해 사용자를 위한 정말 매혹적인 경험을 만들 수 있습니다. 두 플랫폼의 상호 작용 및 동작에 관한 주요 규칙과 권장 사항을 정의하고 자세한 예를 살펴 보겠습니다.

초점 및 중요성 — 상호 작용은 사용자의 관심을 앱에서 실제로 중요한 것에 집중하므로 진정 필요할 때만 사용해야 합니다. 두 플랫폼 모두 사용자의 주의를 산만하게 만들고 과도한 애니메이션을 사용하지 않는 것이 좋습니다.

일관성 및 계층 구조 — 상호 작용은 사용자가 요소가 서로 어떻게 관련되어 있는지 보여줌으로써 사용자가 앱에서 자신의 방향을 잡는데 도움이 된다는 것을 명심해야 합니다. 한 화면에서 다른 화면으로 친숙하고 매끄럽고 눈에 잘 띄지 않는 전환으로 사용자의 참여를 유도합니다. 동작은 동작 수행 방법을 나타내며 유용한 제안을 제공합니다.

미세한 애니메이션 사용에 대한 기본 권장 사항은 머티리얼 디자인 가이드 라인과 휴먼 인터페이스 가이드 라인에서 매우 유사하지만 명확하게 정의 된 몇 가지 차이점이 있습니다. 사용자는 이러한 플랫폼 별 전환에 익숙하며 절대적으로 자연스러운 것으로 인식합니다. 그렇기 때문에 사용자 경험을 개선하고 각 플랫폼에서 자연스럽게 보일 수있는 친숙한 상호 작용에 특별한 주의를 기울이는 것이 중요합니다. 

iOS

iOS 사용자는 부드러운 전환, 장치 방향의 유동적 인 변화, 물리 기반 스크롤과 같은 iOS 전체에서 사용되는 미묘한 애니메이션에 익숙합니다. iOS 사용자는 움직임이 의미가 없거나 물리 법칙을 무시하는 것처럼 보일 때 혼란 스러울 수 있습니다. 예를 들어 사용자가 화면 상단에서 아래로 밀어서보기를 표시하면 다시 위로 밀어서 보기를 닫을 수 있습니다. 게임과 같은 몰입 형 환경을 만들지 않는 한 사용자 지정 전환을 기본 제공 애니메이션과 비슷하게 만드는 것이 HIG의 권장 사항입니다.

Android

머티리얼 디자인 가이드 라인에 따르면 전환 중에 변환 된 인터페이스 요소는 발신, 수신 또는 영구로 분류됩니다. 항목이 속하는 범주는 변환 방법에 영향을 줍니다. 애니메이션은 사용자의 주의를 집중시킵니다. UI가 모양을 변경하면 모션은 전환 전후 요소의 배치와 모양 사이에 연속성을 제공합니다.

탐색 전환은 인터페이스와의 전반적인 상호 작용에서 중요한 요소입니다. 앱의 계층 구조를 표현하여 사용자가 자신을 향하도록 도와줍니다. 예를 들어, 전체 화면을 채우도록 요소가 확장되면 확장 동작은 새 화면이 하위 요소임을 나타냅니다. 확장되는 화면은 부모 요소입니다.

부모에서 자식으로의 전환 예 (재료 설계 지침)

 

부모 화면에서 터치하면 내장 된 자식 요소가 들어 올려 확장됩니다. 전환은 부모와 자식 사이의 관계를 강화하면서 자식 화면에 초점을 둡니다. 동일한 부모를 공유하는 화면 (예 : 앨범의 사진, 프로필의 섹션 또는 흐름의 단계)이 동시에 이동하여 관계를 강화합니다. 

동배(비슷한) 스크린은 한 쪽에서 미끄러지면서 들어오고, 형제 스크린은 반대 방향으로 스크린 밖으로 움직입니다.

탭이 같은 높이에 있고 가로로 함께 움직입니다.

 

앱의 최상위 수준에서 대상은 종종 주요 작업으로 그룹화 됩니다 (이는 서로 관련이 없을 수 있음). 이 화면은 불투명도 및 배율과 같은 값을 변경하여 제자리에 전환됩니다.

 

결론

물론 예외도 있습니다 : 일부 iOS 애플리케이션은 Gmail과 같은 Material Design Guidelines를 따르고 일부 Android 앱은 Instagram과 같은 Human Interface Guidelines를 따릅니다.

왼쪽 — iOS의 Gmail / 오른쪽 — Android의 Gmail

 

왼쪽 — iOS의 Instagram / 오른쪽 — Android에서 Instagram

 

그러나 한 가지 분명한 사실은 두 운영 체제 모두에서 기본 구성 요소를 사용하여 모바일 애플리케이션을 설계하는 것이 훨씬 빠릅니다.  ....따라서 Apple 휴먼 인터페이스 지침과 Google의 머티리얼 디자인 구성 요소가 혼합 된 하나의 응용 프로그램 모형을 만든 다음, 사용자    지정 요소로 인해 개발에 많은 시간을 소비하는 것보다 디자인에 시간을 보내는 것이 좋습니다.

 

 

출처: 아래에 링크를 통해 본문을 읽어볼 수 있습니다. (번역하다보니 매끄럽지 못한 점은 양해부탁드립니당)

https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca

Differences between Designing Native iOS Apps and Native Android Apps