guide to mobile app ui

Download Guide To Mobile App UI

Post on 23-Jun-2015

2.065 views

Category:

Technology

7 download

Embed Size (px)

DESCRIPTION

이걸 정리하게 된 이유는 사실, 기획자 디자이너 개발자 요렇게 소통의 파이프라인이 있다치면 그 와중에 혼선이 많아서 이다. 특히 모바일을 처음 접하는 디자이너의 경우에 @_@ 요런 표정으로 개발자와 이야기하다가 =_= 이러다가 잔뜩 썽난 표정으로 나오는 일이 참 많았는데 이미 우리가 잘 아는 그 구글의 모바일 가이드라인과 그 애플의 iOS 가이드라인을 정리했다.

TRANSCRIPT

  • 1.

2. Action bar Navigation bar 3. (iOS) Sunrise calendar (iOS7) (iOS6) iOS () . . (A navigation bar helps users navigate through an information hierarchy and, optionally, manage screen contents.) status bar . 1. 2. 3. 4. 5. 6. (status bar) 4. (iOS) (status bar) SKT3G4:34 PM100% SKT3G4:34 PM100% iOS7 (transparent) . (* , , , , .) . . , . . * , iOS RGB (78,103,200) . hex .BG (255,216,65) 5. (iOS) iOS iOS6 iOS7 . 44px (Retina 88px) . (iOS6) (iOS7) 1 ( ) (iOS6) ( ) (iOS7) ( , barTintColor) (tintColor) (iOS6) (iOS7) * iOS7 . (If you want to use a custom image to replace the default chevron, you also need to create a custom mask image. iOS 7 usesthe mask to make the previous screenstitle appear to emerge fromor disappear intothe chevron during navigation transitions. To learn about the properties that control the Back button and mask image, see UINavigationBar Class Reference.) 6. (iOS) SKT3G4:34 PM100%Readablity (iOS6) iOS . iOS7 iOS6 . * bg x2 () . @2x .Hey btn_menu_top_bar_pressed.pngbtn_menu_top_bar_pressed.pngtop_bar.pngtop_bar@2x.png 7. (iOS) btn_menu_top_bar_pressed.pngbtn_menu_top_bar_pressed.pngInstagram (iOS7) , . .* 34px, Medium 8. (iOS) , Circa News (iOS7)TED(iOS7)Luvocracy (iOS7) iOS * (chevron) iOS7 1. 2. (Back ) 3. iOS7 , Artsy(iOS7)Digg (iOS7) 9. (iOS) (0,0) SKT3G4:34 PM< 100%(0,64) (60,104)contents iOS7 ( ) () . , iOS6 .(150,43)60px 10. (Android) , , . status bar . (* iOS ) iOS . 1. 2. 3. 4. (2 ) (1 ) (3 ) (4 ) 1. 2. 3. 4. 5. 6. 7. 8. ( ) 11. (Android) (1) (2) ( ) (3) . . OS , . 1. (google play twitter) 2. (Instagram, 8 tracks, ) 3. (, hey) . 1 BG Hex (#31B7D5) . 2 3 . * iOS UI . 12. (Android) . hey . Status bar . , . 13. (Android) : : ( / / / ) . . sorting filtering . 14. (Android) . . 1. : 2. (Up caret) : * (Honeycomb) (back) . (Jellybean) .Navigation Drawer , Navigation Drawer , Google Keep (ICS+) 15. (Android) Google Keep (ICS+) 1. - , - - 1 2 2. - - ( ) 1. 2. . - 1 - (3) 3. - 2 - 2 16. (Android) Archive 1. 2. - 1 - 3 ( ) 3. - 1 ( ) ( ) - . 4. - 3 - 5 5. 3 - 1 ( ) ( ) - 3 17. (Android) . Contextual Action Button .Google Music, 8tracks, ( ) . . . . bottom bar . . 18. (Android) . (Google Keep) .1. . - dp . 2. . 3. . - , , .DIP DP (by. ) 1dp 160dpi(mdpi) 1 . 1dp . px = dp * (dpi / 160). 240dpi 1dp 1.5 physical pixel .dp = px / (dpi / 160) UI dp . UI . 19. (Android) ( ) . Q. ! ? A. . UI, OS . . . 20. , OSiOSAndroid (navigation bar) (action bar) < (/ / ) * , 1-2 * iOS 21. Tab 22. iOS . ! . . iOS . 2.x iOS . . CGV 23. OS iOS , OS . iOS iOS . (In general, use a tab bar to organize information at the app level. ) . 2 5 6 . (iTunes) ? . . , . . . iOS iOS . iOS .(iOS) iTunes Music . Music .() Play store Apps . TOP NEW PAID . 24. (iOS) iOS iOS7 (translucent) (Always appears at the bottom edge of the screen) 5 (Displays no more than five tabs at one time on iPhone.) .(Maintains the same height in all orientations.) . (Can display a badgea red oval containing white text and either a number or exclamation pointto communicate appspecific information.) iOS7 . , , . 1. 2. 25. (iOS) iOS 1. - (iOS Retina ) 50 * 50 px ( 96 * 64 px) * 44 * 44px (Retina)2. - . - 20px, Regular (Retina) 3. Normal Pressed, Selected iOS7 Normal Selected 4. Disable - disable 26. (iOS)