아이패드와 관련된 부분
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UEBestPractices/UEBestPractices.html#//apple_ref/doc/uid/TP40006556-CH20-SW29
여기도 참고 : 자세하게 제시하고 있음
http://redleaf.tistory.com/tag/UI%EA%B0%80%EC%9D%B4%EB%93%9C
http://blog.daum.net/starziai/4
출처 : http://gustlr.egloos.com/3390111
1. 화면사이즈
아이폰의 화면사이즈는 320*480 입니다. 버뜨. 비유티. BUT 이 사이즈로 디자인 작업을 하면 안됩니다.
디자인 사이즈는 뷰를 전체를 사용하는 게임류를 제외하고는 상단에 StatusBar 가 붙기 때문에 (안테나 나오는 부분)
이 부분의 사이즈를 빼고 디자인을 해야 합니다. 그래서 디자인 사이즈는 기본적으로320*460 픽셀입니다.
2. 아이콘
아이폰에는 아이콘이 총 2개가 필요합니다. 한개는 아이폰에 설치했을때 바탕화면에 보이는 아이콘이고 하나는 앱스토어에서 설명페이지에서 보이는 아이콘입니다.
아이폰용 아이콘의 사이즈는57*57픽셀, 앱스토어용 아이콘사이즈는 170*170 픽셀입니다.
기본적으로 둘다 올리면 자동으로 모서리가 라운딩처리가 됨으로 이것을 염두해 두고 외곽을 박스라인으로 처리하거나 그러면
실제 올라갔을때 좀 곤란한 경우를 당하니 유의하셔야 합니다.
* 아이폰의 내장된 콘트롤들중 탭콘트롤에 사용되는 아이콘의 사이즈도 57*57입니다. 이 사이즈가 안맞을 경우 화면에 아예 표시가 안되는 경우가 발생합니다.
3. 파일포맷
JPG도 사용이 가능은 하지만 무조건 PNG 타입으로 넘겨야 합니다.
4. 기타필요한 것
앱스토어에 등록시 미리보기 이미지가 필요합니다. 이미지의 사이즈는 320*480 으로 세로보기 모드로 만들어야 합니다.
이 이미지는 앱의 미리보기 임으로 이미지 자체를 꾸미거나 하는것보다 앱의 동작내용을 스크린샷으로 떠서 다듬는 수준에서
끝나야 합니다. 자기 나름 잘해보겠다고 이 이미지를 일명 뽀샵처리 하시면 대략 난감해집니다 @@;;
------------------------------------------------------------------------------------------------
아이폰은 웹이나 출판디자인보다 제약사항이 많습니다. 이런 제약때문에 오히려 작업시 더 편하기도 하지요.
가장큰 제약은 "사이즈" 입니다. 기본적으로 화면사이즈의 제약에 따른것도 있지만 콘트롤에 디자인을 입히는 작업을 할때 사이즈가 정확하지 않으면 상당히 보기 싫은 결과물이 나오곤 합니다.
다음은 아이폰에서 사용되는 내장콘트롤들입니다. 내장 콘트롤들의 명칭을 알고 있으면 기획하시는 분이나 개발자분과 더 원활한 커뮤니케이션이 될것으로 생각됩니다.
이 콘트롤중에서는 디자인을 입힐 수 있는것이 있고 없는것이 있습니다.
아이폰은 "뷰(View)" 라는 화면페이지위에 콘트롤들을 얹어서 표현을 합니다. 얹는다는 표현처럼 콘트롤끼리 뭉쳐서 디자인적으로
구현을 하면 안되는 경우가 종종 발생합니다. 특히 그라데이션이나 여러개의 콘트롤들을 거쳐서 하나가 되는 문양, 도안등은
대략 "님앙 ~ 제발 다시요~" 라고 리테이크 맞을 공산이 큽니다. ^ㅡ^
첨부된 이미지는 실제 아이폰에 사용되는 콘트롤들의 사이즈임으로 참고하시면 되겠습니다.
1. UIView (뷰)
디자인의 가장 기본적인 영역입니다. 아무것도 없습니다. 걍 이런게 있구나 라고 생각하시면 됩니다.
이위에 아래의 콘트롤들을 적절히 올리고 조합해서 앱을 제작합니다. 물론 OpenGL 같은 그래픽 API 를 사용해서 실시간으로 그려주는것도 있지만 게임이나 차트의 경우게 사용하고 일반적인 경우에는 거의 이미지뷰를 사용합니다.
2. UIImageView (이미지뷰)
뷰라고 하지만 실제로는 그냥 이미지처럼 사용을 합니다. 겹치기도 가능하고 리사이즈도 물론 가능합니다. 실제 디자인된 이미지들은 대부분 이 이미지뷰를 사용해서 시각적으로 구현을 합니다.
3. UITableView (테이블뷰)
많 이 사용되는 뷰중의 하나입니다. 유의할점은 각 라인(Row)들이 별개의 또다른 뷰라는 것입니다. 테이블뷰를 디자인할때에는 사이즈에 구애를 받을 필요가 없습니다. 리스트 내부에 들어갈 수 있는 요소는 "이미지","텍스트","버튼" 정도입니다. 다른 것들도 넣을 수 있긴 하지만 효율성의 문제로 그렇게 자주 사용하지는 않습니다.
테이블뷰는 기본적으로 아래와 같은 두가지 타입이 있습니다. 왼쪽것은 Plain, 오른쪽은 Group 타입입니다.
오 른쪽의 이미지를 보시면 Section Footer 라는 부분이 있는데 테이블뷰는 상단과 하단의 영역에 다른 뷰(이미지뷰나 다른 콘트롤들)를 넣을 수 있습니다. 따라서 디자인 하실때도 이 영역부분을 어떻게 할지 한번 생각을 해보시는 것이 좋습니다.
배경색 지정가능합니다.
4. UITextView (텍스트뷰)
HTML 의 TextArea와 같은 녀석입니다. 항상 박스처럼되있음으로 백그라운드로 넣어주시면 됩니다. 좀 신경을 쓴다면 텍스트뷰에 들어가는 글자들의 폰트속성인데 디자인하시는 분이 자기가 맘에 든다고 아무 폰트나 막 넣어서 이 폰트로 해 달라고 그러면 곤란합니당 ~ 여기 들어가는 폰트는 윈도우폰트가 아니라 맥(정확히는 아이폰에 들어간 OSX)의 폰트를 기준으로 해야 합니다.
5. UIWebView (웹뷰)
내 장된 브라우저입니다. 그냥 웹뷰라고들 하지요. 웹뷰의 경우 투명하게 만들수 있습니다. 따라서 배경을 넣을수도 있지요. 배경을 넣으실때는 웹뷰가 들어가는 영역을 정확히 표현을 해 주어야 합니다. (이미지에 영역을 찍으라는게 아니라 커뮤니케이션상으로 말이죠)
6. UIButton (버튼)
아래는 기본적으로 있는 버튼인데 실제로는 별로 사용하지 않지요. 보통은 Custom 타입으로 해서 사용을 합니다만.
반드시 그 부분이 이미지(UIImageView)인지 버튼인지를 명시해야 합니다. 안그러면 프로그래머들은 그냥 UIImageView를 써버릴지도 몰라요. 커스텀버튼의 경우 클릭시 반전효과가 자동으로 처리가 됩니다.
7. UIPickerView, UIDatePicker (피커뷰, 데이트피커뷰)
디자인하기 참 애매한 녀석입니다. 보통의 경우 이 녀석은 디자인대상에서 제외가 됩니다. 그냥 아래와 같이 기본타입으로 쓰는 것이 더 낫기 때문에 디폴트로 사용을 합니다.
이 녀석에 대해 약간 설명할것이 있는데요. 모바일웹을 만들때 <select><option>~</option></select> 태그를 넣은 부분이
이 피커뷰로 보이게 됩니다. 모바일웹을 구현할때는 이 부분을 미리 알고 계셔야 합니다.
8. UINavigationBar (네비게이션바)
가장 많이 사용되는 녀석중의 하나입니다. 왼쪽의 뾰죽한 버튼은 "Navigation Item" 이라고 부르고 글자가 들어간 부분은
"Navigation Title" 라고 부릅니다. 이 콘트롤은 너비와 높이 사이즈만 정확히 맞추면 어떤식으로 색을 입히건 디자인을 해도 상관없습니다. 물론 단색이 아니래 그라디이션이나 이미지라면 버튼과의 조화를 염두해 두고 디자인을 하셔야 합니다.
특히 만약 한방향으로만 동작하는 앱이 아니라 회전이 가능한 앱이라면 회전되었을때의 디자인까지 고려해서 작업을 해야 합니다.
** 사이즈엄수!! **
9. UITabBar (탭바)
탭 바의 경우 좀 독특한 구조를 가집니다. 기본적으로 5개까지의 아이콘을 넣을수 있습니다. 그 이상의 아이콘의 경우에는 아래 두번째의 "More" 아이콘이 5번째에 나오게 됩니다. 따라서 버튼의 수를 얼마를 할것인가에 따라서 디자인이 약간 달라질수 있습니다.
각각의 탭 아이콘에 들어가는 아이콘 사이즈는 57*57 픽셀입니다.
10. UISearchBar (서치바, 검색바)
주 로 검색을 위해서 사용되는 콘트롤입니다. 어떤식으로 디자인해서 줘도 상관없습니다. ^ㅡ^ 이유는. 이 녀석이 원래 좀 안이쁜 녀석이기 때문에 텍스트필드와 이미지뷰를 이용해서 별도의 검색부분을 만드는 경우가 많습니다. 대충 이런 녀석이 있구나 란것만 아시면 되겠습니다.
11. UIMenuBar (메뉴바)
많이 사용되는 콘트롤중의 하나입니다. 네비게이션바와 거의 유사합니다. (외형적으로는) 디자인적으로도 거의 유사하기 때문에 따로 설명은 안드리겠습니다.
12. UISegmentedControl (세그먼트콘트롤)
거의 디폴트로 사용하는 콘트롤입니다. 이것을 디자인해서 바꿔달라 그러면 괜한 시간낭비라고 한소리 들으실겁니다. ^^ 걍 아래 디폴트 세그먼트콘트롤중에 하나로 넣으시면 됩니다. 딱히 앞에다가 아이콘을 넣고 싶다. 이런건 가능합니다.
13. UIProgressBar (프로그레스바)
역시 디폴트로 사용되는 녀석입니다. 달리 손델바가 없는.. 디폴트로 아래의 두가지 타입이 있습니다.
14. UISlider (슬라이더)
양끝점과 Thumb에 대한 디자인을 입힐 수 있습니다. 하지만.. 이것또한 거의 디폴트로 사용되는 녀석입니다.
15. UISwitch (스위치)
역시 거의 디폴트로 사용하는 콘트롤입니다. 따로 설명은 제외하겠습니다.
16. UIActivateIndicator (엑티비티)
대기상태를 보여주기 위해서 사용합니다. 3가지의 타입이 있는데 (마지막 타입은 White 라서 화면에 안보인다는 -_-)
역시 거의 디폴트로 사용을 합니다. 만약. 이것을 다르게 보이고 싶다하면 따로 디자인을 해도 상관은 없습니다. 물론 그렇게 되면 이 콘트롤말고 이미지뷰를 사용해서 구현이 되겠지만요..
*
근본적으로 스마트폰 (아이폰이 아니더라도)은 PC가 아님으로 기계 자체가 가진 능력부터 제한적인 녀석입니다.
따라서 디자인을 하실때도 무조건 화려하고 이쁜 디자인이 주가 되는것이 아니라 "효율적인 네비게이션의 구현" 이
디자인의 중점이 되어야 합니다.