brunch

You can make anything
by writing

C.S.Lewis

by 김준범 May 22. 2020

Android VS. iOS (5)

List, Table, Header

11. Lists VS. Tables


List는 대부분의 앱에서 찾아볼 수 있는 가장 일반적이고 기본적인 컴포넌트이다.  Android에서 List는 여러 줄로 만들어진다. iOS에서는 list를 table이라고 부르며, 여러 셀로 이루어져 있다.


Android에서 list의 스타일은 single-line list, two-line list(메인 텍스트와 서브 텍스트로 구성) 그리고 multi-line list(메인 텍스트와 2개 이상의 서브 텍스트로 구성)가 있다. 썸네일과 체크박스, 라디오 버튼, 스위치 버튼과 같은 리스트 컨트롤이 list에 적용될 수 있다.

보통 메인 액션이 list의 좌측에 배치되고, 보조적인 액션이 list의 우측에 배치된다.


iOS의 table은 Android의 list와 비슷하지만, 알아두어야 할 사항들이 있다.


1) Phone에서, Android는 list의 메인타이틀과 서브 텍스트가 수직으로 배열된다. 서브 텍스트는 설명이나 값이 될 수 있다. iOS는 two-line 스타일과 single-line style 두 가지 모두를 가지고 있다. 메인타이틀은 cell의 좌측에 배치되고, 값은 cell의 우측에 배치된다. 공간이 넓은 tablet에서는, Android의 row는 iOS와 비슷하게 메인타이틀과 서브 텍스트가 한 줄에 나란히 배열이 된다.


2) iOS의 row는 Android보다 사용성이 더 좋다. 하위 메뉴가 있을 때 화살표 인디케이터를 보여줘서 사용자가 리스트를 누르면 다른 화면으로 간다는 것을 알 수 있다. 그러나 Android에서는 리스트가 정보만을 보여주는 것인지, 다른 화면으로 갈 수 있는 것인지 알 수가 없다. 둘 다 똑같은 형태를 하고 있기 때문이다.


3) iOS의 table은 두 가지 형태를 가지고 있다. 일반 table과 그룹 table이다. 일반 table은 구분선이 있는 흰색 화면으로 표시된다. 내용이 있는 cell이 거의 없어도, 나머지 영역에 구분자를 표시한다. 그룹 table은 회색 배경 위에 표시된다. 첫 번째 그룹은 내비게이션 바 사이와 다음 그룹 사이에 여백을 가지고 있다. Android는 한 가지 스타일만 있으며, 두 가지 다른 리스트를 구분하기 위해 구분선을 사용한다.





12. Subheaders VS. Grouped Table Headers & Section Headers


Android의 subheader와 iOS의 header는 서로 다른 콘텐츠를 가지고 있는 그룹 리스트 또는 그리드 리스트를 구분하기 위해 사용된다. iOS는 두 가지 스타일을 사용한다. 1) Grouped Tables는 완전히 다른 정보를 가지고 있는 그룹을 구분하기 위해 사용된다. 2) Section Headers는 일반 Table에서 사용되며, 다른 날짜에 찍힌 사진들이나 다른 이름의 연락처들과 같이 유사한 데이터 형식을 정렬하기 위해 사용된다.


Android의 subheader는 sentence case를 사용한다. iOS의 grouped table header는 "UPPERCASE"를 사용하고, 일반 table의 header는 "Title Case"를 사용한다.

스크롤을 하면, Android subheader는 다음 subheader가 올라올 때까지 스크린의 상단에 고정된다. iOS의 section header와 동일하게 동작하는 형태이다. Grouped table의 header는 이런 식으로 동작하지는 않는다.


원문 출처:

https://medium.com/@chunchuanlin/android-vs-ios-compare-20-ui-components-patterns-part-1-ad33c2418b45


작가의 이전글 Android VS. iOS (4)

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari