Mobile design matters - iOS and Android

Download Mobile design matters - iOS and Android

Post on 17-Aug-2014

11.804 views

Category:

Design

3 download

DESCRIPTION

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

<ul><li> Mobile Design matters! 2012/07/03 by Light Lin </li> <li> Chapter Matters Preface Target iOS/Android Basement Icon Fonts Layout Image output Extendable button or image Suggestions </li> <li> 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 </li> <li> Target Help designer to have basic knowledge about mobile device UI Help planner to know what should get from designer </li> <li> iOS matters!The guideline should not be a limitation. </li> <li> 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 </li> <li> 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 </li> <li> iOS Icon There is no float number in pixel world All the suggestions for icon design are based on the design target of 960x640 &amp; 2048x1536 display, and might not be compatible with 480x320 &amp; 1024x768 display.960x6402048x1536 480x3201024x768 </li> <li> iOS Icon When dealing with the edge of icon, make it clear with aligning with integer pixel unit. </li> <li> iOS Icon Keep in mind to have symmetry when dealing with shape. </li> <li> 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 </li> <li> 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 </li> <li> iOS Icon When changing size of object, shift with 2px each time. 2px 1/2 11x6 22x1226x14 11.5x6.5 23x13 </li> <li> 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 </li> <li> 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) </li> <li> iOS Icon Dont use 1-pixel line, use 2-pixel, if you want it solid. 480x320 or 1024x768 1 pixel2 pixel (0.5 ) </li> <li> iOS Icon Sometimes it might be necessary to modify details after re-sizing icons. Icon </li> <li> 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 </li> <li> 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 </li> <li> 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.() </li> <li> 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 </li> <li> 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 =&gt; 1374x635dp =&gt; 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) </li> <li> 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 </li> <li> 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 </li> <li> 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. </li> <li> Android Layout Ready-to-use elements Tabs Lists Grid Lists Scrolling Spinners Buttons Text Fields Seek Bars Progress &amp; Activity Switches Dialogs Pickers Please go Android developer to be familiar with those elements. </li> <li> 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. </li> <li> Android Layout The more useful information designers provided, the more effective engineers implement. </li> <li> Android Image output Dont be depressed so quick, its just going to start For compatible with devices with different sizes and densities, designers should prepare lots of stuff for engineers to implement </li> <li> Android Image output Need I provide all the stuff about densities and sizes!!!??? !!!??? For density issue: Yes! Please provide images for ldpi, mdpi, hdpi, and xhdpi ldpi, mdpi, hdpi, xhdpi For size issue: Yes for the main target, and maybe for minor. </li> <li> Android Image output Provide four sets of images in folders separately by density. If you generate a 100x100 image for mdpi devices, you should generate the same resource in 75x75 for ldpi, 150x150 for hdpi, and 200x200 for xhdpi devices. mdpi100x100ldpi, hdpi, xhdpi 75x75, 150x150, 200x200 drawable-xhdpi/ awesomeimage.png drawable-hdpi/ awesomeimage.png drawable-mdpi/ awesomeimage.png drawable-ldpi/ awesomeimage.png </li> <li> Android Image output Provide layout with normal size. normal 320x480dp(px) could be a good idea for phone. 320x480dp(px) 1024x600dp(px) and 1280x800dp(px) for tablet with 7 inches and 10 inches. 1024x600dp(px)1280x800dp(px)710 </li> <li> Android Image output What you should prepare for Android app basically. Android appapp Application icon(required) 512x512 PNG with alpha; Max size of 1024KB, could be 464 x 464 pixel shape with 48 pixels on each side for padding 2 8 screenshots(required) 320w x 480h, 480w x 800h, or 480w x 854h; PNG or JPEG (no alpha) Full bleed, no border in art. Promotional Graphic (optional) 180w x 120h, PNG or JPEG (no alpha), Full bleed, no border in art. Feature Graphic (optional) 1024w x 500h, PNG or JPEG (no alpha) with no transparency. Use a safe frame of 924x400 (50 pixel of safe padding on each side). </li> <li> Android Extendable button or image Do something smart Android deals extendable images with concepts just like iOS, but different in ways to make AndroidiOS </li> <li> Android Extendable button or image In Android, the extendable images are called 9patch images. Android9patchiOS Unlike iOS, Android deals the definitions about extendable areas with drawing black lines around the image. iOSAndroid 9patch images dont scale down, they only scale up. So its best to start as small as possible. 9patch9patch If you want buttons like these This is what you need to provide. </li> <li> Android Extendable button or image The black lines actually have different meanings. Scalable area The area defined to extend, with the top and left lines. Top for width, and left for height. Fill area In default, the scalable area also limits the area of contents, but sometimes we want the area for contents could be larger. Fill area is optional and defined to fill the content like text or images, with the right and bottom lines. Fill areaScalable areaAdjust to make 9patch Add 1px around image The content area are defined by right and and draw the black line bottom lines. (in reality, the black lines wouldnt display) Width scalable area Vertical content lpb Button label fill area Content words Content words Content words texting Content words Content words Content words texting Content words Content words Content words texting Content words Content words Content words texting Height...</li></ul>