ldpi: 36x36px (0.75dp)
mdpi: 48x48px (1dp)
hdpi: 72x72px (1.5dp)
xhdpi: 96x96px (2dp)
This ensures that icons look approximately the same physical size on screens of varying densities, while allowing the system to choose the best matching density icon based on the device. Icons are defined using density-independent pixels (dp) to facilitate scaling for different densities.
13. 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.
44. iOS – Image output
Distributing iOS App
And some snaps of app
Non-retina iPhone and Retina iPhone and iPod Size for high-resolution
Description Size for iPad (in pixels)
iPod touch (in pixels) touch (in pixels) iPad (in pixels)
Application icon(required) 57 x 57 114 x 114 72 x 72 144 x 144
App icon for the App Store 1024 x 1024 1024 x 1024
512 x 512 512 x 512
(required) (recommended) (recommended)
768 x 1004 (portrait) 1536 x 2008 (portrait)
Launch image (required) 320 x 480 640 x 960
1024 x 748 (landscape) 2048 x 1496 (landscape)
Small icon for Spotlight search 50 x 50 (Spotlight search 100 x 100 (Spotlight
results and Settings 29 x 29 58 x 58 results) search results)
(recommended) 29 x 29 (Settings) 58 x 58 (Settings)
Document icon (if necessary 64 x 64 128 x 128
22 x 29 44 x 58
for custom document types) 320 x 320 640 x 640
Web clip icon(recommended) 57 x 57 114 x 114 72 x 72 144 x 144
Toolbar and navigation bar
Approximately 20 x 20 Approximately 40 x 40 Approximately 20 x 20 Approximately 40 x 40
icon (optional)
Tab bar icon (optional) Approximately 30 x 30 Approximately 60 x 60 Approximately 30 x 30 Approximately 60 x 60
Default Newsstand cover icon
At least 512 pixels on At least 1024 pixels on At least 512 pixels on At least 1024 pixels on
for the App Store (required for
the longest edge the longest edge the longest edge the longest edge
Newsstand apps)
46. iOS – Extendable button or image
Define the buttons
The un-extendable area at left and top
topCapHeight 5px
This is what
should provided vertical stretch area 1px
leftCapWidth 5px
horizontal stretch area 1px
47. iOS – Extendable button or image
Only 1px is stretchable
topCapHeight 5px
vertical stretch area 1px
leftCapWidth 5px
horizontal stretch area 1px
48. iOS – Extendable button or image
Use of image
This is what
should provided
49. iOS – Extendable button or image
Texture issue
This is just enough!
40x40
340x340
50. 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
51. 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
55. Android – Fundamental
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
59. Android – Icon
Concept of density
They all look the same size
ldpi, mdpi, hdpi, xhdpi,
Samsung Galaxy Y, Samsung Galaxy Ace, Samsung Galaxy S Plus, Samsung Galaxy SII HD
133ppi 165ppi 233ppi LTE ,316ppi
60. Android – Icon
Four sizes of images
They just look the same size
36x36 48x48 72x72 96x96
ldpi mdpi hdpi xhdpi
61. Android – Icon
Do not provide big image only!
Do not use big image and shrink by device
The memory is really limited
62. Android – Icon
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
63. Android – Icon
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
64. Android – Icon
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
1dp => 0.15875mm
65. Android – Icon
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
ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)
66. Android – Icon
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
ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)
67. Android – Icon
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
ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)
1dp = 0.75px 1dp = 1px 1dp = 1.5px 1dp = 2px
68. Android – Icon
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
48x48dp icon (7.62x7.62mm)
ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)
36x36px 48x48px 72x72px 96x96px
69. Android – Icon
3:4:6:8 ratio
The 3:4:6:8 ratio
Make icons with vector
Modify them after resize
48x48dp icon (7.62x7.62mm)
ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)
36x36px 48x48px 72x72px 96x96px
3 : 4 : 6 : 8
70. Android – Icon
Android vs. iOS
It’s possible using UI stuff of iOS for xhdpi and mdpi
Most android tablets are mdpi
Motorola XOOM Google Tablet Nexus 7 Google Nexus S Google Galaxy Nexus
149ppi (1280x800) 216ppi (1280x800) 233ppi (480x800) 316ppi (1280x720)
ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)
iPad 1/2 3GS before The new iPad 4/4S after
132ppi 163ppi 264ppi 326ppi
74. Android – Layout
Density! Size!
Density means screen resolution, ex. 120dpi, 160dpi…
Size means the physical size expressed by dp unit
Layout should be flexible
75. Android – Layout
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)
76. Android – Layout
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
77. Android – Layout
Compatibility issue
Market distribution of Android devices:
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.
78. Android – Layout
Phone and tablet
Size of phone and tablet
Google Nexus S Google Galaxy Nexus Motorola XOOM Google Tablet Nexus 7
233ppi(800x480) 316ppi (1280x720) 149ppi (1280x800) 216ppi (1280x800)
=> 549x329dp => 648x364dp => 1374x635dp => 948x592dp
Define layout in mdpi
480x320dp mainly for phone, 640x360dp if necessary
1024x600dp(7“) and 1280x800dp(10”) for tablet
79. Android – Layout
Mark layout of Android
Express color with ARGB, A for 0-255(255 means opaque)
Android has more options to define color
80. Android – Layout
Android’s 48dp theory
48dp is about 7.62mm
44 point is 6.85mm on iPhone, 8.46mm on iPad
8dp space between buttons
81. Android – Layout
Themes
Holo Dark
Holo Light
Holo Light with dark action bars
Settings in Holo Dark. Gmail in Holo Light. Talk in Holo Light with dark action bar.
86. Android – Image output
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
87. Android – Image output
Normal as a baseline of size
320x480dp(px) for phone
1024x600dp(px) and 1280x800dp(px) for tablet
88. Android – Image output
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).
90. Android – Extendable button or image
9‐patch image
Define extendable areas with drawing black lines around
9‐patch doesn’t shrink to small
This is what you
need to provide.
91. Android – Extendable button or image
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
Adjust to make 9‐patch Add 1px around image and The content area are defined by right and bottom lines. (in
draw the black line reality, the black lines wouldn’t display)
Width scalable area
Vertical
content
fill area
Height
scalable
area
Horizontal content fill area
92. Android – Extendable button or image
How extendable images work
Defined 9‐patch image What happened What we get
93. 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
94. 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
102. Conclusions and suggestions
The modification of details
Habits and guideline for system
The limitation and convenience from screen
The different styles from systems
Layout flexibility and tolerance
103. Appendix
iOS Human Interface Guidelines
Android User Interface Guidelines
phone-size.com
Helvetica的由來