안녕하세요. 가람유입니다.
경험이 없을 초창기에는 모바일 어플리케이션을 디자인 하면서 난항을 겪는 부분이 있기 마련입니다.
그 중 한가지가 바로 '버튼의 크기'인데요. :)

iOS에서 기본으로 제공하는 버튼을 사용하는 경우는 예외지만, 대체로 디자인을 하다보면 새로 버튼을 디자인 하기 마련입니다.
하지만, 막상 예상치 못하게 크기가 너무 크거나 작은 경우가 있지요.
과연 사용자가 편리하게 사용할 수 있는 버튼의 크기는 어떻게 고려해야 할까요?
몇 가지 어플리케이션으로 살펴봅시다 (!) 

* 버튼의 크기는 모두 직접 측정하였으며, Shadow나 기타 Stroke에 외부 요인을 일부 배제하고 실질적인 버튼 영역만 계산하고자 하였습니다.
   실질적인 개발과정을 고려해 치수를 대부분 짝수로 맞추고자 하였습니다. (!) 
   + dpi 72의 640x960 기준입니다. 


 
 - 아이폰 어플리케이션 디자인을 하시는 분 들은 실제로 비교해 보시면서 감을 잡으시면 될 것 같네요. :)





'다음' 어플리케이션입니다. 실제 기기로 보시면 텍스트로 이루어진 버튼들은 작은 편 입니다.


그린 몬스터의 Flava 앱입니다. Flava는 대체로 아기자기 하기 보다는 큼직큼직한 버튼들이 눈에 확 들어옵니다. :)


개인적으로 SNS 앱 중 디자인이 가장 예쁘다고 생각하는 Path 입니다. 아기자기함이 바로 매력이라고 생각하는데요.
기기에서는 마냥 아기자기 해보였는데 , 예상외로 수치상으로는 작지 않은 편이네요. 최소한 이 정도 선은 고려하여 디자인 해야하지 않을까 합니다. 


이건 아마 거의 모르실 텐데, VoteSpot 이라는 미국 앱스토어의 어플리케이션입니다.
기기로 보면 버튼이 굉장히 작게만 느껴집니다. (수치상으로 옮겨보니 평균 이네요.)
예전에 이 앱을 써보고 나서 대체 버튼 크기는 어떻게 고려 해야 할까? 라는 의문점이 들었지요. :)

 

좀 감이 오시나요? 

갑자기 이러한 분석을 하게 된 이유는, 어플리케이션 디자인을 하다가 문득 막상 버튼을 만들었는데 "너무 작아서 누르지도 못하면 어떡하지?"
라는 생각이 문득 들었기 때문인데요. 그 해답을 다른 어플리케이션들은 어떻게 해결 했는지 알아보기 위함이였습니다.

참 신기한점은, 막상 수치상으로는 비교적 작지만 구조상으로 조화를 이루며 사람들이 편하게 사용하는 버튼들도 많다는 거예요.
 

결국 결론적으로, 가장 중요한 것은 바로 요 두가지가 아닐까 합니다.
버튼을 버튼답게 스타일링 하는 것과 최소한의 크기는 고려 하는 것(가로, 세로 30 pixel 이상) - 단지 제 소견일 뿐입니다. :)


+ 추가
애플의 iOS 휴먼 인터페이스 가이드 라인 문서가 있더군요. !
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html 

저작자 표시
신고


안녕하세요. 가람유입니다.
오늘은 제 작업물중 하나인 스타벅스 모바일 어플리케이션 PSD를 공유하고자 합니다. :)
프로그래머 분들이 코드를 공유하는 하시는 사이트는 본적이 있는데 국내 디자이너분들이 PSD를 공유하는 사이트는 본적이 없는 것 같아요.  
반응이 좋으면 앞으로 더 많은 공유를 할게요. :)

스타벅스 어플리케이션을 사용하는 사용자들은 무슨 목적으로 사용할까어디에 매장이 있는검색해도 나올만한 단순한 정보를 원하진 않을 텐데.

모바일 카드를 사용하고자 하는 사용자들이 굳이 주문 도중 앱을   에도  번의 번거로운 터치를 해야만 할까? 

별 다른 뎁스 없이 바로 검색을 할 수 있는 편리함.
 매장과 메뉴를 검색 할 수 있는 검색창. 모바일 카드가 담긴 하단 바,  앱을 실행하자 마자 바로 꺼내어 쓸 수 있는 편리함. 마치 지갑에서 꺼내는 듯한 인상. 기존의 스타벅스 앱의 기능을 모두 수용하고 +a로 스벅 매니아들에게 메뉴를 자연스레 홍보할 있도록 구성해 보았다.

아쉽게도 스타일링은 많이 담고있지 않고, 기존 UI에서 많이 벗어 나가있어서 공부 하시는데에 적합하지 않으실 수도 있지만
어플리케이션 디자인 공부하시는 분들께 조금이라도 도움이 될 수 있기를 바라는 마음입니다. ^^;

(+) 여담이지만 희소식을 하나 알려드릴게요. 주목해주세요. +ㅅ+
wit studio 에서는 포토샵에서는 복잡하고 번거로운 GUI디자인을 쉽고 다양하게 도와줄 수 있는 
Codinator 2.0 를 개발 중 이랍니다. (!)
보고있나 adobe.....라고 wit는 패기가 넘칩니다. 힘썌고 강한 wit!


starbucks application.psd


영리적 사용을 절대 금합니다. 사진과 로고의 저작권은 스타벅스에게 있어요.
나쁜 용도로 이용하지 마시고! 열심히 디자인 공부 합시다! (+.+) 모두 화이팅! 
저작자 표시
신고