Android VS. iOS (3)
Buttons, Bottom Sheets VS. Action Sheets
5. Buttons
기본적으로, Android와 iOS 버튼의 차이는 대소문자와 스타일밖에 없다.
Android 버튼은 주로 2가지 스타일이 있다. "flat"과 "raised" 버튼이다. 두 가지 버튼은 다른 상황에서 사용된다. 예를 들면, 카드 스타일의 UI에는 raised 버튼이 어울리지 않는다. 왜냐하면 raised 버튼은 카드들 사이에서 너무 튀어 보이며 그림자가 복잡해 보여서 UI를 깔끔하고 심플하지 않게 만들기 때문이다. 카드나 다이얼로그, 푸터에는 Flat 버튼이 잘 어울린다.
Material 디자인 가이드라인은 flat과 raised 버튼만 소개되어 있지만, Google Play에서는 색이 채워지지 않고 외곽선만 있는 ghost 버튼과 그림자가 없는 rised-buttons-like 버튼도 사용되고 있다. Ghost 버튼은 iOS의 normal 버튼과 비교될 수 있고, raised-buttons-like 버튼은 pressed 버튼과 비교될 수 있다.
Android 버튼에는 대문자 텍스트가 적용된다. iOS 버튼에는 주로 첫 글자만 대문자인 Title Case가 적용되지만, 가끔 앱스토어의 OPEN이나 UPDATE 같은 ghost 버튼에는 대문자 텍스트가 적용된다. 그리고 iOS 10 지도 앱의 "Book a Table"과 "Directions"에는 첫 글자만 대문자인 텍스트가 사용되고 있다. iOS에서의 대소문자 규칙은 일관적이지는 않아 보인다.
6. Floating Action Buttons VS. Call to Action Buttons
FAB라 불리는 Floating Action Buttons는 Android 5.0의 Material Design에서 처음 등장했다. 화면의 우측 하단에 위치하며, 한 손으로 조작하는 사용성에 적합하게 만들어져 있다. 한 손으로 핸드폰을 조작할 때에는 액션바의 버튼들을 누르기가 힘들어진다. FAB는 액션바와 하단 영역의 중간 정도에 위치하여 보다 눈에 띄게 적용되기도 한다.
FAB에는 앱의 주요 액션이 적용된다. 예를 들면, 메일 앱의 메일 쓰기 버튼이나 SNS 앱에서 새 게시물 쓰기 버튼 등이 FAB에 적합한 액션들이다.
iOS에서는 tab bar의 중앙에 Call to action button이라 불리는 주요 액션을 하는 버튼이 있다. CTA 버튼은 처음에는 다른 버튼들 사이에서 눈에 띄게 하기 위해 다른 색상이 적용되는 경우가 많았지만 요즘에는 CTA버튼을 사용하는 패턴이 사용자들에게 익숙해져서 다른 버튼들과 같은 스타일로 적용되는 경우가 많다. Medim의 post 쓰기 버튼과 Instagram의 새로운 사진 등록 버튼이 좋은 예이다.
7. Bottom Sheets VS. Action Sheets & Activity Views
Android의 bottom sheet은 2015년에 등장했지만, iOS에서는 비슷한 디자인을 예전부터 사용하고 있었다. Android는 한 손으로 조작을 할 때의 이슈를 해결하기 위해 이 디자인을 채택했다.
Android의 bottom sheet은 두 가지 형태를 가지고 있다. modal bottom sheet과 persistent bottom sheet이다.
Android의 modal bottom sheet은 두 가지의 형식이 있다. 1) 서로 다른 액션이 있는 bottom sheet, 2) "공유"를 선택했을 때 나타나는 앱 리스트이다. 전자는 iOS의 Action Sheet와 유사한 형태이고, 후자의 것은 iOS에서 "Action"아이콘을 선택했을 때 나오는 activity view와 같은 것이다. Android의 modal bottom sheet은 리스트 방식 또는 그리드 방식으로 적용할 수 있다.
persistent bottom sheet는 메인 콘텐츠와 bottom sheet가 같은 중요도를 가지고 동시에 그 정보들을 봐야 할 필요가 있을 때 사용된다. Map 앱을 예를 들면, 위쪽의 영역에서는 지도를 보여주고, bottom sheet에서는 해당 위치에 대한 상세 정보를 보여준다. 음악 앱에서는, 상단에서는 앨범 커버를 보여주고, 하단에서는 음악을 플레이하기 위한 컨트롤을 보여준다.
iOS의 Human Interface Guidelines에는 안드로이드의 persistent bottom sheet와 같은 컨트롤을 찾을 수 없지만, iOS의 빌트인 앱인 Map과 Music에서 유사한 UI를 확인할 수 있다.
원문 출처:
