Mobile design matters - iOS and Android

download Mobile design matters - iOS and Android

of 94

  • date post

  • Category


  • view

  • download


Embed Size (px)


Some basic information and concepts about designing user interface on iOS and Android. Help designers to quickly have knowledge about how to start and what to prepare when designing app interface on iOS and Android.

Transcript of Mobile design matters - iOS and Android

  • Mobile Design matters! 2012/07/03 by Light Lin
  • Chapter Matters Preface Target iOS/Android Basement Icon Fonts Layout Image output Extendable button or image Suggestions
  • PrefaceMainly to establish some principles or concepts about building visual design to iOSand Android devices Introduction to basic knowledge of device Suggestions about icon design Introduction of default and supported fonts Layout guide Image output notices Extendible button or image
  • Target Help designer to have basic knowledge about mobile device UI Help planner to know what should get from designer
  • iOS matters!The guideline should not be a limitation.
  • iOS Basement Screen Size and Resolution iPhone: 3.5 inch display iPhone 3GS before: 480x320px, 163ppi iPhone 4 after: 960x640px, 326ppi iPad: 9.7 inch display iPad 2 before: 1024x768px, 132ppi The new iPad: 2048x1536px, 264ppi
  • You are using Retina supported device. Retina All the suggestions about iOS UI design are with assumption that you are using a Retina supported device, such as iPhone 4, iPhone4s, or the new iPadiOSRetina
  • iOS Icon There is no float number in pixel world All the suggestions for icon design are based on the design target of 960x640 & 2048x1536 display, and might not be compatible with 480x320 & 1024x768 display.960x6402048x1536 480x3201024x768
  • iOS Icon When dealing with the edge of icon, make it clear with aligning with integer pixel unit.
  • iOS Icon Keep in mind to have symmetry when dealing with shape.
  • iOS Icon All icons would shrink into half, dont fit odd number as far as possible. 480x320 or 1024x768 14x14 7x7 Not symmetric 13x13 6.5x6.5
  • iOS Icon If you really need to fit odd size, you could still do as so , but still not recommend. 13x13(with 14x14 area) 6.5x6.5(with 7x7 area) Not symmetric 13x13 6.5x6.5
  • iOS Icon When changing size of object, shift with 2px each time. 2px 1/2 11x6 22x1226x14 11.5x6.5 23x13
  • iOS Icon Use border wide with even number if you want it solid. 1/2 26x14, 2px inner border 26x14, 3px inner border 25x13, 3px inner border
  • iOS Icon If you want a resize an object with the same corner-radius, dont transfer the size directly. Sometimes redraw the object would be better. 36x16 36x16 (directly resize) 20x20 Sometimes smart object is not really smart 36x16 (directly resize with smart object)
  • iOS Icon Dont use 1-pixel line, use 2-pixel, if you want it solid. 480x320 or 1024x768 1 pixel2 pixel (0.5 )
  • iOS Icon Sometimes it might be necessary to modify details after re-sizing icons. Icon
  • iOS Icon Be careful with your layer effects. layer style 2px border, shadow distance:1px size:1x 4px border, shadow distance:2px size:2x 4px border, shadow distance:2px size:2x
  • iOS Icon Personally, make your icon in photoshop would be more convenient. It would get into slough with smart objects from illustrator when dealing with details. photoshopshapeicon (icon)illustrator illustratorshape
  • iOS Fonts Default font - Helvetica - HelveticaUse default to make the consistency in system. If you want to use other font style, make sure thats supported in target system.()
  • iOS Fonts So far in iOS 5.1, it has 58 fonts in system. iOS 5.158 In iOS 6 preview removes DB LCD Temp and add Avenir, Avenir Next, Avenir Next Condensed, and Symbol fonts. iOS 6 previewDB LCD TempAvenir, Avenir Next, Avenir Next Condensed, Symbol1. Academy Engraved LET 18. Copperplate 35. Hiragino Kaku Gothic ProN 52. Telugu Sangam MN2. American Typewriter 19. Courier 36. Hiragino Mincho ProN 53. Thonburi3. Apple Color Emoji 20. Courier New 37. Hoefler Text 54. Times New Roman4. Apple SD Gothic Neo 21. DB LCD Temp 38. Kailasa 55. Trebuchet MS5. Arial 22. Devanagari Sangam MN 39. Kannada Sangam MN 56. Verdana6. Arial Hebrew 23. Didot 40. Malayalam Sangam MN 57. Zapf Dingbats7. Arial Rounded MT Bold 24. Euphemia UCAS 41. Marion 58. Zapfino8. Bangla Sangam MN 25. Futura 42. Marker Felt9. Baskerville 26. Geeza Pro 43. Noteworthy10. Bodoni 72 27. Georgia 44. Optima11. Bodoni 72 Oldstyle 28. Gill Sans 45. Oriya Sangam MN12. Bodoni 72 Smallcaps 29. Gujarati Sangam MN 46. Palatino13. Bodoni Ornaments 30. Gurmukhi MN 47. Papyrus14. Bradley Hand 31. Heiti SC () 48. Party LET15. Chalkboard SE 32. Heiti TC () 49. Sinhala Sangam MN16. Chalkduster 33. Helvetica 50. Snell Roundhand17. Cochin 34. Helvetica Neue 51. Tamil Sangam MN
  • iOS Fonts How to get font name in iOS. (implement this in you xCode sdk to get it.) iOS(xCode sdk )// List all fonts on iPhone NSArray *familyNames = [[NSArray alloc] initWithArray:[UIFont familyNames]]; NSArray *fontNames; NSInteger indFamily, indFont; for (indFamily=0; indFamily 648x364dp => 1374x635dp => 948x592dp Define your layout in mdpi mode. mdpi Define screen size for phone with 480x320dp; for tablet with 1024x600dp(7 inches) and 1280x800dp(10 inches). 480x320dp640x360dp 1024x600dp(7)1028x800dp(10)
  • Android Layout Basically, use the same way to mark your layout guide is about enough. iOS If you want to do more for engineers, mark color with ARGB(ex. a127, r255, g0, b255, yes~ the alpha use 0-255 here, 255 means opaque)is better. ARGBa 0-255(255)iOS0-1.0 The android accepts more color expressions in implement, you could get info in Android developer website. Android
  • Android Layout Androids 48dp rhythm. Android48dp7.62mm( ) The Apples 44 point is 6.85mm on iPhone, and 8.46mm on iPad. 44 pointiPhone6.85mmiPad8.46mm Spacing between each UI element is 8dp. 8dp
  • Android Layout Based on themes to start your design. Even you dont set one, it would start with default. AndroidHolo (Holo) Holo Light Holo Dark Holo Light with dark action bars Settings in Holo Dark. Gmail in Holo Light. Talk in Holo Light with dark action bar.
  • Android Layout Ready-to-use elements Tabs Lists Grid Lists Scrolling Spinners Buttons Text Fields Seek Bars Progress & Activity Switches Dialogs Pickers Please go Android developer to be familiar with those elements.
  • Android Layout Designers plan it, engineers implement it. Unlike webpage, its a little hard for designer to implement the layouts by SDK in mobile projects.
  • Android Layout The more useful information designers provided, the more effective engineers implement.