Mobile design matters - iOS and Android - presentation version in eng

Mobile Design matters! - iOS and Android

2012/07/25 by Light Lin

Chapter Matters

Fundamental

Icon

Fonts

Layout

Image output

Extendable button or image

Before we start… There is something…

Guideline is not a limitation！

iOS – Fundamental Update every year…

3.5” 480px

320px

Screen Size and Resolution iPhone

3GS before: 480x320px, 163

iOS – Fundamental

3.5” 960px

640px


3GS before: 480x320px, 163ppi

4 after: 960x640px, 326ppi

iOS – Fundamental

9.7” 1024px

768px




iPad

2 before: 1024x768px, 132ppi

iOS – Fundamental

9.7” 2048px

1536px




iPad

2 before: 1024x768px, 132ppi

New iPad: 2048x1536px, 264ppi

iOS – Fundamental

iOS – Icon Retina is critical, but what it is?...

I’m also Retina, if you back away…

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.

No float number in pixel world

iOS – Icon

What should take care Clear edge

iOS – Icon


Symmetry

iOS – Icon


Symmetry

Size in even

iOS – Icon

14x14 7x7

13x13 6.5x6.5

Not symmetric


Symmetry

Size in even

Border width

iOS – Icon

26x14, 2px inner border




Symmetry

Size in even

Border width

Details modify

iOS – Icon

What tools to use Use shape layer in Photoshop

Use Illustrator as assistant

iOS – Icon

iOS – Fonts The default is Helvetica…

iOS supports many fonts

iOS – Fonts

iOS – Layout Provide useful information…

Coordinate system The coordinate system are still 320x480 and 1024x768

iOS – Layout

480point

320point

1024point

768point

Retina display Retina factors

iOS – Layout

iPhone 3GS before iPhone 4 after

It looks the same size on screen, but different in pixel

Make the layout Design in retina size, treat 2 pixels as 1 point

iOS – Layout

Mark the text Mark the size in half value

iOS – Layout

Mark the color RGBa to define color, not #RRGGBB, a0 ~ a1.0 for opacity.

iOS – Layout

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

System components Understand every pixel of them, use them, and don’t define

every details if needless.

iOS – Layout

Official forum iOS UI elements and guideline in Apple iOS developer

iOS – Layout

http://developer.apple.com/library/ios/

http://www.idev101.com/code/User_Interface/sizes.html

iOS magic number: 44

iOS magic number: 44 Visual rhythm

iOS – Layout


Reference size for tapping

iOS – Layout



6.85mm for iPhone, and 8.46mm for iPad

iOS – Layout



6.85mm for iPhone, and 8.46mm for iPad

Reference for layout

iOS – Layout

iOS – Image output Fit the size might not be the best…

How to crop image Don't ignore shadow

iOS – Image output


Keep it simple


26x27

25x25

14x19

35x21

22x28 44x44

44x44

44x44

44x44

44x44


Keep it simple

Make it tappable


26x27 44x44

Hard to tap

Style of system components It’s needless to style the system components


?

Image filename Add suffix -@2x to image filename for Retina display


favorite.png [email protected]

App icon Rounded corners

Drop shadow

Reflective shine (preventable)


Distributing iOS App And some snaps of app


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




iOS – Extendable button or image Save your time…

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

Only 1px is stretchable


leftCapWidth 5px

horizontal stretch area 1px

vertical stretch area 1px

topCapHeight 5px

Use of image


This is what should provided

Texture issue


This is just enough!

340x340

40x40

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

iOS – Summary iOS – Layout

The coordinate system does not double

44 as reference

Image output

Shadow, Simple, Tappable

Add suffix -@2x to retina images


Define the buttons, only 1px is extendable, use of image

Texture images

Why iOS earns more?

http://articles.businessinsider.com/2012-03-06/research/31125761_1_ios-android-market-share

Android – Fundamental Lots of differences in versions…

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

Screen Resolution ldpi 120dpi

mdpi 160dpi (baseline)

hdpi 240dpi

xhdpi 320dpi


ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)

Size and Resolution


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

Android – Icon Flexibility and optimization…

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

Four sizes of images They just look the same size

Android – Icon

96x96 72x72 48x48 36x36

ldpi mdpi hdpi xhdpi

Do not provide big image only! Do not use big image and shrink by device

The memory is really limited

Android – Icon



The result of resampling would be suck

Android – Icon



The result of resampling would be suck

Details optimization

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

Android – Icon

1dp => 0.15875mm





1 DP contains different numbers of pixel in different resolutions

Android – Icon

ldpi(120ppi) xhdpi(320ppi) hdpi(240ppi) mdpi(160ppi)






Android – Icon







Android – Icon


1dp = 1px 1dp = 0.75px 1dp = 1.5px 1dp = 2px

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)

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 : : :

Android vs. iOS It’s possible using UI stuff of iOS for xhdpi and mdpi

Most android tablets are mdpi

Android – Icon


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)

Android – Fonts Droid Sans before 3.0; Roboto after 4.0…

Only default font Could embed other fonts in app

Android – Fonts

3.0 before 4.0 after

Android – Layout Start from mdpi...

Density! Size! Density means screen resolution, ex. 120dpi, 160dpi…

Size means the physical size expressed by dp unit

Layout should be flexible

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)

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

Android – Layout

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.

http://developer.android.com/about/dashboards/index.html

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

http://developer.android.com/design/style/metrics-grids.html

Mark layout of Android Express color with ARGB, A for 0-255(255 means opaque)

Android has more options to define color

Android – Layout

http://developer.android.com/reference/android/graphics/Color.html



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



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.

http://developer.android.com/design/style/themes.html



Be familiar with system components

Android – Layout

http://developer.android.com/design/building-blocks/index.html

http://developer.android.com/design/building-blocks/index.html

Planning and work out It’s hard for designer to implement the layouts

Android – Layout

Useful information from design The sufficient information designer provide, the efficient

engineer implement

Android – Layout

Android – Image output Four times per image…

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

Normal as a baseline of size 320x480dp(px) for phone

1024x600dp(px) and 1280x800dp(px) for tablet


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).


http://support.google.com/googleplay/android-developer/bin/answer.py?hl=en&answer=1078870

Android – Extendable button or image

Do something smart…

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.

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 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)

How extendable images work


Defined 9‐patch image What happened What we get

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

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


9-patch image

I think you know why now…

http://articles.businessinsider.com/2012-03-06/research/31125761_1_ios-android-market-share

Conclusions and suggestions Finally…

The modification of details

Habits and guideline for system

The limitation and convenience from screen

The different styles from systems

Layout flexibility and tolerance

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

Appendix iOS Human Interface Guidelines

Android User Interface Guidelines

phone-size.com

Helvetica的由來



http://developer.android.com/guide/practices/ui_guidelines/index.html

http://developer.android.com/guide/practices/ui_guidelines/index.html

http://phone-size.com/



http://www.inside.com.tw/2012/03/19/%E7%B4%80%E9%8C%84%E7%89%87%EF%BC%9A%E8%A8%AD%E8%A8%88%E4%B8%89%E9%83%A8%E6%9B%B2%EF%BC%88%E4%B8%80%EF%BC%89%E3%80%8Ahelvetica%E3%80%8B

http://www.inside.com.tw/2012/03/19/%E7%B4%80%E9%8C%84%E7%89%87%EF%BC%9A%E8%A8%AD%E8%A8%88%E4%B8%89%E9%83%A8%E6%9B%B2%EF%BC%88%E4%B8%80%EF%BC%89%E3%80%8Ahelvetica%E3%80%8B

Thanks for your time~ Q&A?