brunch

You can make anything
by writing

C.S.Lewis

by 김준범 May 11. 2020

Android VS. iOS (2)

App bar, Toolbar, Tabs

2. App Bars(Action Bars) VS. Navigation Bars


안드로이드에서 상단 영역의 bar를 App bar(기존에는 Action bar로 불렸음)라고 한다. 주로 현재 화면의 이름과 액션 버튼이 적용되어 있다. 화면의 이름은 좌측에 배치되어 있고, 액션 버튼은 우측에 배열되어 있다. 액션 버튼은 보통 3개를 넘지 않는다. 3개를 넘을 경우 오버플로우 메뉴에 덜 중요한 액션들을 배치한다.


Android와 iOS 모두 back 아이콘을 사용하고 있지만, 스타일이 다르다. iOS는 back 아이콘 옆에 이전 페이지의 이름이나 'back'을 표기한다. 사용자는 어느 화면으로 돌아갈지 좀 더 명확하게 알 수 있다.


App bar(Android)와 Navigatino bar(iOS)




3. Toolbars

Android와 iOS 모두 Action 버튼은 action bar/navigation bar 외에 toolbar에도 사용할 수 있다.

Material Design에는 하단의 toolbar가 언급되지는 않지만, Google Keep, Google Photos에서 하단 toolbar가 사용된 것을 볼 수 있다.


하단 툴바는 iOS의 많은 앱에서 사용되는 UI 중 하나이다. Action 버튼으로 아이콘이나 텍스트를 사용할 수 있으며, 상태에 대한 설명을 명시하기도 한다.





4. Tabs VS. Segmented Controls

하위 메뉴의 페이지들을 이동하기 위해서 Android에서는 "tabs", iOS는 "segmented controls"가 사용된다.

Android의 tabs는 텍스트만 사용되거나, 아이콘만 사용되거나, 텍스트와 아이콘이 같이 사용될 수도 있다. 그러나 텍스트와 아이콘이 같이 사용되는 경우는 거의 찾아보기 힘들다. iOS의 segmented controls에도 아이콘이나 텍스트가 사용될 수 있으나, 아이콘과 텍스트를 같이 사용할 수는 없다.




원문 출처 :

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


작가의 이전글 Android VS. iOS (1)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari