Android VS. iOS (9)
정리와 요약
정리
Navigation
Android는 내비게이션을 하는 수단으로 주로 navigation drawer를 사용한다. 그러나 요즘은 tab과 bottom navigation이 사용성이 더 좋기 때문에 점점 더 많이 쓰이고 있다. iOS는 navigation을 위해 항상 tab bar를 사용한다.
App Bar/Navigation Bar
Android의 App bar에는 화면의 제목이 좌측에 있고, 우측에는 액션 버튼들이 있다. iOS에서는 제목이 navigation bar의 중앙에 위치하고, 액션 버튼들이 우측이나 좌측에 위치한다.
Toolbars
Android와 iOS의 bottom toolbar에는 액션 텍스트, 액션 아이콘 또는 상태 표시를 적용한다.
Tabs VS. Segmented Controls
두 번째나 하위 단계를 내비게이션 하기 위해 Android는 두 가지의 tab을 사용한다. : 고정된 탭, 스크롤할 수 있는 탭과 swipe를 통해 뷰를 이동하는 것이다. iOS는 2-5개의 아이템을 담을 수 있는 segmented control을 사용한다.
Buttons
Android와 iOS는 각각의 기본 버튼 스타일이 있더라도 디자이너는 버튼 스타일이 사용자를 혼동스럽게 하지 않도록 목적에 맞게 디자인할 필요가 있다. 한 가지 유의할 점은 Android는 버튼을 포함한 모든 누를 수 있는 텍스트에 UPPERCASE를 사용한다는 것이다.
Floating Action Buttons VS. Call to Action Buttons
Android는 화면의 메인 액션에 특유의 떠 있는 액션 버튼을 사용한다. FAB는 쉽게 터치할 수 있도록 우측 하단에 위치한다. iOS의 call to action button은, tab bar의 중앙에 위치하며 보통 다른 tab의 스타일과 다른 모양을 하고 있다.
Bottom Sheets VS. Action Sheets & Activity Views
iOS는 오래전부터 하단에 action sheets를 사용하고 있었고, Android도 iOS를 따라서 한 손 사용자를 위해 하단에 Bottom sheet를 적용하게 되었다.
Dialogs VS. Alerts
Dialog는 경고를 하거나 옵션을 제공하거나 확인하는 용도로 사용된다. Android와 iOS는 메인 액션 버튼을 우측에, 취소와 같은 서브 액션 버튼을 좌측에 배치한다. 버튼의 텍스트는 간단하고 명확해야 한다. 예, 아니오 대신에 동사를 사용하는 것이 좋다.
Full-Screen Dialogs VS. Modal Views & Popovers
Android의 full-screen dialog와 iOS의 modal view 또는 popover는 Phone에서는 full screen으로 나타난다. 그러나 tablet에서는 그렇지 않다.
Snackbars & Toasts VS. Auto-Close Alerts
Snackbars, toast와 alerts는 액션이 수행된 후 피드백을 주는 용도로 사용된다.
Lists VS. Tables & Cells (Rows)
Android는 리스트에서 연관된 콘텐츠를 구분하는데 divider보다는 공간을 사용한다. Android는 완전히 구분되는 콘텐츠를 구분할 때만 divider를 사용한다.
iOS는 table에서 cell을 구성할 때 divider를 사용한다. iOS의 누를 수 있는 cell은 다음 화면이 있다는 인디케이터를 사용하여 Android보다 좋은 사용성을 보여주고 있다. iOS의 table은 plan과 grouped table의 두 가지 타입이 있다.
Subheaders VS. Grouped Table Headers & Section Header
Android는 subheader만 사용하지만, iOS는 그룹 된 table에서는 talbe header를 사용하고 plain table에서는 section header를 사용한다.
List Controls
Android와 iOS는 single selection, multi selection, 재정렬을 하기 위해 그들만의 list control을 사용한다. 각각의 platform에 맞는 컨트롤을 사용해야 한다.
Menus VS. Pickers & New Screens
Android는 메뉴를 사용하고, iOS는 짧은 list에는 picker를, 긴 list에는 새 화면을 사용한다.
Grid Lists VS. Collection Views
기본적으로 Android와 iOS는 비슷한 grid/Collection view를 사용한다.
Cards
Card-style UI는 Android Material Design의 주요 피쳐이지만, iOS도 비슷한 디자인을 사용하고 있다.
Date/Time Pickers
Android와 iOS는 각각 다른 date/time pickers를 사용한다.
Dividers
Android는 divider를 사용하지만 iOS는 확실히 구분되는 콘텐츠를 구분하기 위해 group table을 사용한다.
Text Fields
Android와 iOS는 각각 다른 text fields를 사용한다. text filed의 입력 양식에 따라 적절한 키보드를 제공해야 한다.
Sliders
Android와 iOS는 각기 다른 Slider를 사용하고 있지만 형태는 유사하다.
Search
Android는 persistent search와 expandable search를 사용하고, iOS는 prominent search와 minimal search를 사용한다. iOS는 search bar를 navigation bar 뒤에 숨기기도 해서 사용자는 search bar를 사용하기 위해 swipe down 해야 한다.
Delete and Other Actions
Android는 delete와 같은 액션을 하기 위해 먼저 아이템을 선택해야 한다. iOS는 swipe를 사용하여 삭제할 수 있다. iOS 사용자는 또한 편집 모드에서 아이템을 삭제하거나 아이템들을 선택하고 다른 액션들을 수행할 수 있다.
Select Texts
Android에서는 전통적으로 텍스트가 선택되면 복사, 잘라내기, 전체 선택 등의 액션 버튼들이 있는 app bar가 나타났다. Android도 현재는 iOS처럼 선택된 텍스트 위에 액션 버튼들이 있는 툴바를 보여준다.
Progress & Activity
액션의 진행 상태가 예측 가능하고 측정 가능하면 progress bar를 사용한다. 그렇지 않으면 spinner를 사용한다.
Icons: Share VS. Action
Android와 iOS는 각각 다른 share 아이콘이 있다. Android의 share 아이콘을 iOS에 사용하지 말라. 그 반대도 물론이다.
Status Bars
Android와 iOS의 status bar는 기본적으로 시간, 배터리, Wifi신호, 통신 신호 정보를 보여준다. Status bar를 swipe down 하여 notification center를 나타나게 할 수 있다.
Navigation Bars VS. Home Buttons
Android의 navigation bar는 뒤로, 홈, 최근 앱의 세 개의 키가 있다. iOS는 홈 키 하나만 있다. 두 번 연속으로 누르면 최근 앱이 나타난다. iOS에서는 navigation bar에 back 버튼이 반드시 있어야 한다.
요약
최근 몇 년 동안 Android는 Android만의 작동방식이 있기는 하지만, 의 작동방식과 UI가 iOS와 계속 비슷해져 갔다. Google이 플랫폼에 상관없이 UI 스타일을 통일하려 해왔던 것 같다. 앞으로 Android와 iOS의 UI가 점점 더 비슷해질 것이라는 예측을 할 수 있다. 사용자와 개발자 모두에게 좋은 일이다.
Android Material design이나 iOS human interface guideline에 정의되어 있지 않은 UI 컴포넌트들도 있다. 그러나 그렇다고 그런 컴포넌트들을 사용하지 말라는 것은 아니다. 어떤 상황에서는 기본 UI 컴포넌트의 한계로 인해 사용성을 해결하기 위해 다른 플랫폼으로부터 UI를 차용하여 커스터마이징해야 할 수도 있다. 중요한 점은 사용 방식이나 컴포넌트가 사용자를 혼란스럽게 하는지이다.
여기 소개된 패턴들은 모든 앱에 직접적으로 적용될 수는 없다. 각기 다른 시나리오와 요구사항에 맞춰 적절히 조정되어야 할 것이다. 두 가지 플랫폼에서 더 나은 컴포넌트와 동작 방식을 알 수 있기를 바란다.
