Mobile design matters - iOS and Android - presentation version in eng
description
Transcript of Mobile design matters - iOS and Android - presentation version in eng
![Page 1: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/1.jpg)
Mobile Design matters! - iOS and Android
2012/07/25 by Light Lin
![Page 2: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/2.jpg)
Chapter Matters
Fundamental
Icon
Fonts
Layout
Image output
Extendable button or image
![Page 3: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/3.jpg)
Before we start… There is something…
![Page 4: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/4.jpg)
Guideline is not a limitation!
![Page 5: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/5.jpg)
![Page 6: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/6.jpg)
iOS – Fundamental Update every year…
![Page 7: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/7.jpg)
3.5” 480px
320px
Screen Size and Resolution iPhone
3GS before: 480x320px, 163
iOS – Fundamental
![Page 8: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/8.jpg)
3.5” 960px
640px
Screen Size and Resolution iPhone
3GS before: 480x320px, 163ppi
4 after: 960x640px, 326ppi
iOS – Fundamental
![Page 9: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/9.jpg)
9.7” 1024px
768px
Screen Size and Resolution iPhone
3GS before: 480x320px, 163ppi
4 after: 960x640px, 326ppi
iPad
2 before: 1024x768px, 132ppi
iOS – Fundamental
![Page 10: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/10.jpg)
9.7” 2048px
1536px
Screen Size and Resolution iPhone
3GS before: 480x320px, 163ppi
4 after: 960x640px, 326ppi
iPad
2 before: 1024x768px, 132ppi
New iPad: 2048x1536px, 264ppi
iOS – Fundamental
![Page 11: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/11.jpg)
iOS – Icon Retina is critical, but what it is?...
![Page 12: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/12.jpg)
I’m also Retina, if you back away…
![Page 13: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/13.jpg)
See, I’m Retina
Retina definition Steve jobs: At a distance of 10" to the human eye (or retina), a pixel density of 300PPI is
the maximum that an eye can distinguish.
![Page 14: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/14.jpg)
No float number in pixel world
iOS – Icon
![Page 15: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/15.jpg)
What should take care Clear edge
iOS – Icon
![Page 16: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/16.jpg)
What should take care Clear edge
Symmetry
iOS – Icon
![Page 17: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/17.jpg)
What should take care Clear edge
Symmetry
Size in even
iOS – Icon
14x14 7x7
13x13 6.5x6.5
Not symmetric
![Page 18: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/18.jpg)
What should take care Clear edge
Symmetry
Size in even
Border width
iOS – Icon
26x14, 2px inner border
26x14, 3px inner border
25x13, 3px inner border
![Page 19: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/19.jpg)
What should take care Clear edge
Symmetry
Size in even
Border width
Details modify
iOS – Icon
![Page 20: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/20.jpg)
What tools to use Use shape layer in Photoshop
Use Illustrator as assistant
iOS – Icon
![Page 21: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/21.jpg)
iOS – Fonts The default is Helvetica…
![Page 22: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/22.jpg)
iOS supports many fonts
iOS – Fonts
![Page 23: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/23.jpg)
iOS – Layout Provide useful information…
![Page 24: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/24.jpg)
Coordinate system The coordinate system are still 320x480 and 1024x768
iOS – Layout
480point
320point
1024point
768point
![Page 25: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/25.jpg)
Retina display Retina factors
iOS – Layout
iPhone 3GS before iPhone 4 after
It looks the same size on screen, but different in pixel
![Page 26: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/26.jpg)
Make the layout Design in retina size, treat 2 pixels as 1 point
iOS – Layout
![Page 27: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/27.jpg)
Mark the text Mark the size in half value
iOS – Layout
![Page 28: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/28.jpg)
Mark the color RGBa to define color, not #RRGGBB, a0 ~ a1.0 for opacity.
iOS – Layout
![Page 29: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/29.jpg)
Text attributes Font size
Color (r0-255 g0-255 b0-255)
Opacity (a0 ~ a1.0)
Alignment (left/center/right)
Normal, Bold, Italic
Shadow color (r0-255 g0-255 b0-255)
Shadow offset(x offset, y offset)
iOS – Layout
![Page 30: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/30.jpg)
System components Understand every pixel of them, use them, and don’t define
every details if needless.
iOS – Layout
![Page 31: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/31.jpg)
Official forum iOS UI elements and guideline in Apple iOS developer
iOS – Layout
![Page 32: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/32.jpg)
iOS magic number: 44
![Page 33: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/33.jpg)
iOS magic number: 44 Visual rhythm
iOS – Layout
![Page 34: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/34.jpg)
iOS magic number: 44 Visual rhythm
Reference size for tapping
iOS – Layout
![Page 35: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/35.jpg)
iOS magic number: 44 Visual rhythm
Reference size for tapping
6.85mm for iPhone, and 8.46mm for iPad
iOS – Layout
![Page 36: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/36.jpg)
iOS magic number: 44 Visual rhythm
Reference size for tapping
6.85mm for iPhone, and 8.46mm for iPad
Reference for layout
iOS – Layout
![Page 37: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/37.jpg)
iOS – Image output Fit the size might not be the best…
![Page 38: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/38.jpg)
How to crop image Don't ignore shadow
iOS – Image output
![Page 39: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/39.jpg)
How to crop image Don't ignore shadow
Keep it simple
iOS – Image output
26x27
25x25
14x19
35x21
22x28 44x44
44x44
44x44
44x44
44x44
![Page 40: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/40.jpg)
How to crop image Don't ignore shadow
Keep it simple
Make it tappable
iOS – Image output
26x27 44x44
Hard to tap
![Page 41: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/41.jpg)
Style of system components It’s needless to style the system components
iOS – Image output
?
![Page 42: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/42.jpg)
Image filename Add suffix -@2x to image filename for Retina display
iOS – Image output
favorite.png [email protected]
![Page 43: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/43.jpg)
App icon Rounded corners
Drop shadow
Reflective shine (preventable)
iOS – Image output
![Page 44: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/44.jpg)
Distributing iOS App And some snaps of app
iOS – Image output
Description Non-retina iPhone and iPod touch (in pixels)
Retina iPhone and iPod touch (in pixels)
Size for iPad (in pixels) Size for high-resolution iPad (in pixels)
Application icon(required) 57 x 57 114 x 114 72 x 72 144 x 144
App icon for the App Store (required)
512 x 512 1024 x 1024 (recommended)
512 x 512 1024 x 1024 (recommended)
Launch image (required) 320 x 480 640 x 960 768 x 1004 (portrait) 1024 x 748 (landscape)
1536 x 2008 (portrait) 2048 x 1496 (landscape)
Small icon for Spotlight search results and Settings (recommended)
29 x 29 58 x 58 50 x 50 (Spotlight search results) 29 x 29 (Settings)
100 x 100 (Spotlight search results) 58 x 58 (Settings)
Document icon (if necessary for custom document types)
22 x 29 44 x 58 64 x 64 320 x 320
128 x 128 640 x 640
Web clip icon(recommended) 57 x 57 114 x 114 72 x 72 144 x 144
Toolbar and navigation bar icon (optional)
Approximately 20 x 20 Approximately 40 x 40 Approximately 20 x 20 Approximately 40 x 40
Tab bar icon (optional) Approximately 30 x 30 Approximately 60 x 60 Approximately 30 x 30 Approximately 60 x 60
Default Newsstand cover icon for the App Store (required for Newsstand apps)
At least 512 pixels on the longest edge
At least 1024 pixels on the longest edge
At least 512 pixels on the longest edge
At least 1024 pixels on the longest edge
![Page 45: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/45.jpg)
iOS – Extendable button or image Save your time…
![Page 46: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/46.jpg)
Define the buttons The un-extendable area at left and top
iOS – Extendable button or image
leftCapWidth 5px
horizontal stretch area 1px
vertical stretch area 1px
topCapHeight 5px
This is what should provided
![Page 47: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/47.jpg)
Only 1px is stretchable
iOS – Extendable button or image
leftCapWidth 5px
horizontal stretch area 1px
vertical stretch area 1px
topCapHeight 5px
![Page 48: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/48.jpg)
Use of image
iOS – Extendable button or image
This is what should provided
![Page 49: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/49.jpg)
Texture issue
iOS – Extendable button or image
This is just enough!
340x340
40x40
![Page 50: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/50.jpg)
iOS – Summary iOS devices
iPhone 3GS before: 480x320px; iPhone 4 after: 960x640px
iPad1/2: 1024x768px; new iPad: 2048x1536px
Retina: a pixel density that an eye can’t distinguish
Icon
Clear edge、Symmetry、Size in even、Border width、Details modify
Fonts
Helvetica is the default, support 58 fonts
![Page 51: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/51.jpg)
iOS – Summary iOS – Layout
The coordinate system does not double
44 as reference
Image output
Shadow, Simple, Tappable
Add suffix -@2x to retina images
Extendable button or image
Define the buttons, only 1px is extendable, use of image
Texture images
![Page 52: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/52.jpg)
Why iOS earns more?
![Page 53: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/53.jpg)
![Page 54: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/54.jpg)
Android – Fundamental Lots of differences in versions…
![Page 55: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/55.jpg)
Screen Size Small
Under 3 inches (7.5 cm), at least 426x320dp
Normal (baseline)
3 inches (7.5 cm) to around 4.5 inches (11.5 cm), at least 470x320dp
Large
4.5 inches (11.5 cm) to around 10 inches (25 cm), at least 640x480dp
Extra-large
Over 10 inches (25 cm), at least 960x720dp
Android – Fundamental
![Page 56: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/56.jpg)
Screen Resolution ldpi 120dpi
mdpi 160dpi (baseline)
hdpi 240dpi
xhdpi 320dpi
Android – Fundamental
ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)
![Page 57: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/57.jpg)
Size and Resolution
Android – Fundamental
Low density(120) ldpi
Medium density(160) mdpi
High density(240) hdpi
Extra high density(320) xhdpi
Small screen QVGA (240x320) 480x640
Normal screen WQVGA400 (240x400) WQVGA432 (240x432)
HVGA (320x480) WVGA800 (480x800) WVGA854 (480x854) 600x1024
640x960
Large screen WVGA800 (480x800) WVGA854 (480x854)
WVGA800 (480x800) WVGA854 (480x854) 600x1024
Extra Large screen
1024x600 WXGA (1280x800) 1024x768 1280x768
1536x1152 1920x1152 1920x1200
2048x1536 2560x1536 2560x1600
![Page 58: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/58.jpg)
Android – Icon Flexibility and optimization…
![Page 59: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/59.jpg)
Concept of density They all look the same size
Android – Icon
ldpi, Samsung Galaxy Y, 133ppi
mdpi, Samsung Galaxy Ace, 165ppi
hdpi, Samsung Galaxy S Plus, 233ppi
xhdpi, Samsung Galaxy SII HD LTE ,316ppi
![Page 60: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/60.jpg)
Four sizes of images They just look the same size
Android – Icon
96x96 72x72 48x48 36x36
ldpi mdpi hdpi xhdpi
![Page 61: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/61.jpg)
Do not provide big image only! Do not use big image and shrink by device
The memory is really limited
Android – Icon
![Page 62: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/62.jpg)
Do not provide big image only! Do not use big image and shrink by device
The memory is really limited
The result of resampling would be suck
Android – Icon
![Page 63: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/63.jpg)
Do not provide big image only! Do not use big image and shrink by device
The memory is really limited
The result of resampling would be suck
Details optimization
Android – Icon
![Page 64: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/64.jpg)
Android defines an unit: DP DP(Density-independent pixel)
PPI/DPI:How many pixels/dots per inch
DP/DIP:The size of a pixel in mdpi(160ppi)
1 DP = 1 pixel in mdpi(160ppi) = 0.15875mm
Android – Icon
1dp => 0.15875mm
![Page 65: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/65.jpg)
Android defines an unit: DP DP(Density-independent pixel)
PPI/DPI:How many pixels/dots per inch
DP/DIP:The size of a pixel in mdpi(160ppi)
1 DP = 1 pixel in mdpi(160ppi) = 0.15875mm
1 DP contains different numbers of pixel in different resolutions
Android – Icon
ldpi(120ppi) xhdpi(320ppi) hdpi(240ppi) mdpi(160ppi)
![Page 66: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/66.jpg)
Android defines an unit: DP DP(Density-independent pixel)
PPI/DPI:How many pixels/dots per inch
DP/DIP:The size of a pixel in mdpi(160ppi)
1 DP = 1 pixel in mdpi(160ppi) = 0.15875mm
1 DP contains different numbers of pixel in different resolutions
Android – Icon
ldpi(120ppi) xhdpi(320ppi) hdpi(240ppi) mdpi(160ppi)
![Page 67: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/67.jpg)
Android defines an unit: DP DP(Density-independent pixel)
PPI/DPI:How many pixels/dots per inch
DP/DIP:The size of a pixel in mdpi(160ppi)
1 DP = 1 pixel in mdpi(160ppi) = 0.15875mm
1 DP contains different numbers of pixel in different resolutions
Android – Icon
ldpi(120ppi) xhdpi(320ppi) hdpi(240ppi) mdpi(160ppi)
1dp = 1px 1dp = 0.75px 1dp = 1.5px 1dp = 2px
![Page 68: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/68.jpg)
Make them look the same size The proportions in different resolutions
Start from mdpi(keep it multiple of 4)
Their looked sizes on Phone are different from PC
Android – Icon
48x48dp icon
mdpi(160ppi)
48x48px
hdpi(240ppi)
72x72px
ldpi(120ppi)
36x36px 96x96px
xhdpi(320ppi)
(7.62x7.62mm)
![Page 69: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/69.jpg)
3:4:6:8 ratio The 3:4:6:8 ratio
Make icons with vector
Modify them after resize
Android – Icon
48x48dp icon
mdpi(160ppi)
48x48px
hdpi(240ppi)
72x72px
ldpi(120ppi)
36x36px 96x96px
xhdpi(320ppi)
(7.62x7.62mm)
3 4 6 8 : : :
![Page 70: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/70.jpg)
Android vs. iOS It’s possible using UI stuff of iOS for xhdpi and mdpi
Most android tablets are mdpi
Android – Icon
ldpi(120ppi) xhdpi(320ppi) hdpi(240ppi) mdpi(160ppi)
4/4S after 326ppi
The new iPad 264ppi
3GS before 163ppi
iPad 1/2 132ppi
Google Tablet Nexus 7 216ppi (1280x800)
Google Galaxy Nexus 316ppi (1280x720)
Google Nexus S 233ppi (480x800)
Motorola XOOM 149ppi (1280x800)
![Page 71: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/71.jpg)
Android – Fonts Droid Sans before 3.0; Roboto after 4.0…
![Page 72: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/72.jpg)
Only default font Could embed other fonts in app
Android – Fonts
3.0 before 4.0 after
![Page 73: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/73.jpg)
Android – Layout Start from mdpi...
![Page 74: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/74.jpg)
Density! Size! Density means screen resolution, ex. 120dpi, 160dpi…
Size means the physical size expressed by dp unit
Layout should be flexible
Android – Layout
![Page 75: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/75.jpg)
dp for all size, except text by sp
All size unit is dp, except text by sp, they get the same definition
sp makes text bigger or smaller with system preference
in xhdpi(320ppi) 1dp = 1sp = 2px
in hdpi(240ppi) 1dp = 1sp = 1.5px
in mdpi(160ppi) 1dp = 1sp = 1px
in ldpi(120ppi) 1dp = 1sp = 0.75px
dp = px * (160 / ppi)
Android – Layout
![Page 76: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/76.jpg)
Four screen sizes Google defines four screen sizes
Extra-large at least 960dp x 720dp
Large at least 640dp x 480dp
Normal at least 470dp x 320dp
Small at least 426dp x 320dp
Android – Layout
![Page 77: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/77.jpg)
Compatibility issue Market distribution of Android devices:
Android – Layout
ldpi mdpi hdpi xhdpi
small 2.3% 2.4%
normal 0.7% 26.2% 57.8% 0.9%
large 0.3% 2%
xlarge 7.4%
Note: This data is based on the number of Android devices that have accessed Google Play within a 7-day period ending on May 1, 2012.
![Page 78: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/78.jpg)
Phone and tablet Size of phone and tablet
Define layout in mdpi
480x320dp mainly for phone, 640x360dp if necessary
1024x600dp(7“) and 1280x800dp(10”) for tablet
Android – Layout
Google Tablet Nexus 7 216ppi (1280x800) => 948x592dp
Google Galaxy Nexus 316ppi (1280x720) => 648x364dp
Google Nexus S 233ppi(800x480) => 549x329dp
Motorola XOOM 149ppi (1280x800) => 1374x635dp
![Page 79: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/79.jpg)
Mark layout of Android Express color with ARGB, A for 0-255(255 means opaque)
Android has more options to define color
Android – Layout
![Page 80: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/80.jpg)
Android’s 48dp theory 48dp is about 7.62mm
44 point is 6.85mm on iPhone, 8.46mm on iPad
8dp space between buttons
Android – Layout
![Page 81: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/81.jpg)
Themes Holo Dark
Holo Light
Holo Light with dark action bars
Android – Layout
Settings in Holo Dark. Gmail in Holo Light. Talk in Holo Light with dark action bar.
![Page 82: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/82.jpg)
Be familiar with system components
Android – Layout
![Page 83: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/83.jpg)
Planning and work out It’s hard for designer to implement the layouts
Android – Layout
![Page 84: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/84.jpg)
Useful information from design The sufficient information designer provide, the efficient
engineer implement
Android – Layout
![Page 85: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/85.jpg)
Android – Image output Four times per image…
![Page 86: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/86.jpg)
Four images for four densities Provide four images for four densities by folders
drawable-xhdpi/ awesomeimage.png
drawable-hdpi/ awesomeimage.png
drawable-mdpi/ awesomeimage.png
drawable-ldpi/ awesomeimage.png
Android – Image output
![Page 87: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/87.jpg)
Normal as a baseline of size 320x480dp(px) for phone
1024x600dp(px) and 1280x800dp(px) for tablet
Android – Image output
![Page 88: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/88.jpg)
Distributing Android App 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).
Android – Image output
![Page 89: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/89.jpg)
Android – Extendable button or image
Do something smart…
![Page 90: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/90.jpg)
9‐patch image
Define extendable areas with drawing black lines around
9‐patch doesn’t shrink to small
Android – Extendable button or image
This is what you need to provide.
![Page 91: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/91.jpg)
Scalable area and Fill area
Scalable area
Top and left lines define area to extend
Fill area Right and bottom lines define area to fill content
Android – Extendable button or image
Adjust to make 9‐patch Add 1px around image and draw the black line
Width scalable area
Height scalable area
Horizontal content fill area
Vertical content fill area
The content area are defined by right and bottom lines. (in reality, the black lines wouldn’t display)
![Page 92: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/92.jpg)
How extendable images work
Android – Extendable button or image
Defined 9‐patch image What happened What we get
![Page 93: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/93.jpg)
Android – Summary Android devices
Four densities: ldpi, mdpi, hdpi, xhdpi
Four sizes: small, normal, large, extra-large
Icon
Make them look the same size
3:4:6:8 ratio
Fonts
Only default font
It’s able to embed other fonts
![Page 94: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/94.jpg)
Android – Summary Layout
Flexibility
480x320dp for phone; 1024x600 and 1280x800 for tablet
Be familiar with theme and system components
Image output
Four images for four densities
Extendable button or image
9-patch image
![Page 95: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/95.jpg)
I think you know why now…
![Page 96: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/96.jpg)
Conclusions and suggestions Finally…
![Page 97: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/97.jpg)
The modification of details
![Page 98: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/98.jpg)
Habits and guideline for system
![Page 99: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/99.jpg)
The limitation and convenience from screen
![Page 100: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/100.jpg)
The different styles from systems
![Page 101: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/101.jpg)
Layout flexibility and tolerance
![Page 102: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/102.jpg)
The modification of details
Habits and guideline for system
The limitation and convenience from screen
The different styles from systems
Layout flexibility and tolerance
Conclusions and suggestions
![Page 103: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/103.jpg)
Appendix iOS Human Interface Guidelines
Android User Interface Guidelines
phone-size.com
Helvetica的由來
![Page 104: Mobile design matters - iOS and Android - presentation version in eng](https://reader034.fdocuments.in/reader034/viewer/2022051110/54c82d5a4a7959e93d8b45c3/html5/thumbnails/104.jpg)
Thanks for your time~ Q&A?