Android VS. iOS (7)
Grid List, Card, Menu, Picker, Divider..
14. Grid Lists VS. Collection View
Grid list는 이미지와 같은 일련의 콘텐츠에 주로 사용된다. Android에서는 특별한 정보나 액션을 제공하기 위해 header나 footer가 적용될 수 있다. iOS에서는 collection veiw로 이미지 베이스의 콘텐츠를 보여준다.
첫 번째 화면의 하단에서 그리드 타일을 잘리게 보여줌으로써 콘텐츠가 더 있다는 것을 보여줄 수 있다. grid list와 collection view 모두 선택하면 상세 화면으로 들어갈 수 있다.
Image source : Google Material Design & iOS Human Interface Guidelines15. Cards
Cards는 UI 디자인에 오랫동안 사용되어 왔다. Google이 Material Design을 2015년에 발표하고 나서, Card는 android design의 대표적인 UI가 되었다. Card UI는 다양한 크기의 디바이스에 적용할 때 유용하다. Cards는 여러 가지 크기의 화면에서 리사이징 되거나 재 정렬될 수 있다. 그리고 카드에는 텍스트, 이미지, 차트 등의 다양한 정보를 표현할 수 있다.
iOS는 가이드라인에서 Card UI를 정의하고 있지는 않지만, iOS 앱에서도 유사한 디자인을 찾아볼 수 있다.
시각적인 스타일은 Android는 card에서 그림자를 강조하고 있으나, iOS10에서는 평평하게 보여주고 있다. (iOS 11 이후에는 그림자가 적용되었다.)
Image source : Google Material Design Guidelines
Image source : Facebook Design16. Menus VS. Pickers & New Screens
Android의 메뉴는 작은 dialog처럼 생겼다. 차이점은 dialog는 반투명한 검은색 배경에 화면 가운데 나타나지만, menu의 위치는 선택한 아이템의 위치에 나타난다는 것이다. Menu는 dialog보다 사용자의 동작을 덜 간섭한다.
Menu는 다음의 세 가지 상황에서 나타난다. 1) Action bar나 list의 overflow icon을 선택했을 때. 2) drop down 메뉴를 선택했을 때. 3) lable과 value를 가지고 있는 두 줄짜리 라인 스타일의 리스트 행을 선택했을 때
iOS는 이런 형태의 메뉴를 사용하지 않는다. label과 value를 가지고 있는 리스트 행을 선택하면, phone에서는 새로운 화면에서 checkmark가 있는 옵션 리스트를 보여주고, tablet에서는 메뉴 테이블을 보여주기 위해 popover가 사용된다.
"picker"가 대안으로 사용되기도 한다. picker는 선택할 수 있는 값의 리스트를 스크롤할 수 있도록 보여준다. 값이 있는 리스트의 cell을 선택하면, picker가 cell 및에서 올라오거나 화면의 하단에서 슬라이드 되며 나타난다.
Pickers는 옵션이 많지 않은 화면에서 주로 사용된다. 옵션 리스트가 길다면, 옵션 테이블을 새 창으로 띄우는 것이 낫다.
17. Date/Time Picker
Android와 iOS 모두 기본 date/time picker를 가지고 있다. Android는 특정 날짜(일, 월, 년)를 선택하기 위한 date picker와 time picker가 있다. iOS는 네 가지 종류의 picker가 있다. 1) 월, 일, 년을 보여주는 picker 2) 시, 분, 초 그리고 선택적으로 AM/PM을 보여주는 시계 3) 날짜와 시간을 보여주는 picker 4) 시와 분을 보여주는 카운트다운 타이머이다.
18. Dividers
콘텐츠를 분류할 때 divider가 사용된다.
Android는 두 가지 타입의 divider가 있다. 1) Full-bleed divider는 뚜렷하게 구분되는 콘텐츠를 분류하는 데 사용된다. 2) Inset divider는 서로 연관된 콘텐츠를 분류하는 데 사용된다.
iOS는 가이드라인에 divider에 대한 정의가 없다. iOS는 grouped table를 사용해서 두 그룹 사이의 회색 영역으로 구분을 한다. iOS는 table 안에서 inset divider를 사용한다.
Android는 행을 구분하기 위해 주로 공간을 사용해서 연관된 데이터로 구성된 행 사이에는 divider를 잘 사용하지 않는다.
Android에서 리스트의 좌측에 아이콘이나 이미지가 적용되었을 경우, 텍스트의 좌측 끝에서 화면의 우측 끝까지 가로지르는 inset divider가 사용된다. iOS에서는 cell에 icon이 적용되었을 경우는 Android와 같은 형태의 divider를 적용하지만, 이미지가 적용되었을 경우 divider가 이미지의 좌측 끝에서부터 시작한다.
19. Text Fields
Android의 Text field는 사용자의 입력이 필요할 때 나타난다. 세 가지 타입이 있다. 1) Single line 2) Multi line 3) Full-width 이다. 2017년에 Android는 한 가지 타입을 추가했다. : 가이드 라인을 추가한 텍스트 영역이다.
입력 포멧의 종류에 따라, 적절한 키보드 타입이 제공되어야 한다. Android와 iOS 모두 여러 가지의 키보드 타입을 제공하고 있다. 기본적으로 세 가지 타입으로 분류될 수 있다. 1) 숫자 키보드(iOS에는 number pad와 phone pad가 있다.)는 전화번호, 신용카드 번호나 비밀번호를 입력한다. 2) 텍스트 키보드는 이르을 입력하는데 사용한다. 3) 혼합 키보드는 이메일 주소나 URL을 입력하는데 사용한다.
Android와 iOS 모두 커뮤니케이션을 돕는 지표로써 placeholder, 아이콘, 이미지 등을 text field 안에 적용하고 있다. Android는 text field에 포커스가 가거나 채워질 때 placeholder가 위 쪽으로 떠오른다. 이것은 text field가 모두 채워진 생황에서도 사용자가 label을 알 수 있게 하는 아주 좋은 디자인이다. iOS에서는 placeholder를 사용할 수 있다면 별도의 label이나 설명을 사용하지 않도록 하고 있다.
iOS는 텍스트 필드가 채워지거나 포커스가 있을 때 clear 버튼이 text field의 우측에 나타나서 사용자가 한 번의 tap으로 모든 텍스트를 지울 수 있도록 제공하고 있다. Android는 기본 text field에는 이러한 디자인이 적용되어있지 않지만 Search bar에서는 찾아볼 수 있다. Android에서는 text filed를 커스터마이징 해서 우측에 clear all 버튼을 적용할 수 있다.
Android 가이드라인은 글자 수나 에러 메시지를 보여주는 helper text도 제공하고 있다.
20. Sliders
Slider는 볼륨이나 밝기, 채도 등 강한 정도를 반영하는 설정을 조정하기 위한 컴포넌트이다. 보통 가장 작은 값이 좌측에 위치하고 가장 큰 값이 우측에 위치한다. Android와 iOS 모두 bar의 좌우측에 강한 정도를 나타내는 아이콘을 적용하기도 한다.
Android의 Slider에는 두 가지 타입이 있다. 1) Continuous Slider는 사용자가 범위 내의 아무 값을 선택할 수있다. 2) Discrete slider는 사용자가 10, 20과 같이 특정 값을 선택할 수 있다.
Android는 정확한 값을 입력할 수 있도록 text box를 제공하기도 한다.
원문 출처 :
