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

Preface
Mainly to establish some principles or concepts about building visual design to iOS
and 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 iPad
以下關於iOS介面設計上的所有建議與注意事項，均是基於支援Retina螢幕顯示
的裝置為基礎所進行。如果您在閱讀時感到困惑，請針對這點先進行確認

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.
以下的圖示建議，主要以「960x640或2048x1536為畫面設計目標」為前提所提出，請勿與應用於
480x320與1024x768的作法混淆。

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, don’t 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
22x12

26x14

11.5x6.5
23x13

iOS – Icon
 Use border wide with even number if you want it solid.
若要呈現清楚的邊線，請以偶數設定線段寬度，以免在縮小為1/2時產生模糊邊緣。

26x14, 2px inner border



iOS – Icon
 If you want a resize an object with the same corner-radius, don’t 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
 Don’t use 1-pixel line, use 2-pixel, if you want it solid.
所有的畫面轉換到480x320 or 1024x768時都會縮小一半，因此勿使
用1 pixel寬的線條，請用2 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



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.
在上述的規範下，建議直接在 photoshop下利用shape完成icon的設
計(簡單的icon)，不建議透過illustrator的智慧型物件，因為有時細節
的調整反而容易造成更大的麻煩，但可以透過illustrator產生shape。

iOS – Fonts
Default font - Helvetica
預設字型 - Helvetica
Use default to make the consistency in system. If you want to use other font style, make sure that’s
supported in target system.
利用預設字型來營造整體(指系統)的協調性。假如你要使用其他字型，請確認系統有支援。

iOS – Fonts
 So far in iOS 5.1, it has 58 fonts in system.
在iOS 5.1中，內建的字型有58種。
 In iOS 6 preview removes DB LCD Temp and add Avenir, Avenir Next, Avenir Next Condensed, and
Symbol fonts.
在iOS 6 preview版本少了DB LCD Temp字型，並增加了Avenir, Avenir Next, Avenir Next
Condensed, 以及Symbol等四種字型。

1. Academy Engraved LET 18. Copperplate 35. Hiragino Kaku Gothic ProN 52. Telugu Sangam MN
2. American Typewriter 19. Courier 36. Hiragino Mincho ProN 53. Thonburi
3. Apple Color Emoji 20. Courier New 37. Hoefler Text 54. Times New Roman
4. Apple SD Gothic Neo 21. DB LCD Temp 38. Kailasa 55. Trebuchet MS
5. Arial 22. Devanagari Sangam MN 39. Kannada Sangam MN 56. Verdana
6. Arial Hebrew 23. Didot 40. Malayalam Sangam MN 57. Zapf Dingbats
7. Arial Rounded MT Bold 24. Euphemia UCAS 41. Marion 58. Zapfino
8. Bangla Sangam MN 25. Futura 42. Marker Felt
9. Baskerville 26. Geeza Pro 43. Noteworthy
10. Bodoni 72 27. Georgia 44. Optima
11. Bodoni 72 Oldstyle 28. Gill Sans 45. Oriya Sangam MN
12. Bodoni 72 Smallcaps 29. Gujarati Sangam MN 46. Palatino
13. Bodoni Ornaments 30. Gurmukhi MN 47. Papyrus
14. Bradley Hand 31. Heiti SC (中文字體) 48. Party LET
15. Chalkboard SE 32. Heiti TC (中文字體) 49. Sinhala Sangam MN
16. Chalkduster 33. Helvetica 50. Snell Roundhand
17. 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<[familyNames count]; ++indFamily) {
NSLog(@"Family name: %@", [familyNames objectAtIndex:indFamily]);
fontNames = [[NSArray alloc] initWithArray:
[UIFont fontNamesForFamilyName:
[familyNames objectAtIndex:indFamily]]];
for (indFont=0; indFont<[fontNames count]; ++indFont) {
NSLog(@" Font name: %@", [fontNames objectAtIndex:indFont]);
}
}

iOS – Layout
Make useful information to help engineers implement your design
提供有用的資訊給程式人員，以完成你的設計
Although the Retina display on iPhone 4 after and the new iPad are 960x640px and 2048x1536px, their sizes of area are still
480x320 and 1024x768.
雖然具有Retina螢幕的iPhone 4以及the new iPad有960x640與2048x1536像素的畫面尺寸，但尺寸的標示依舊是以
480x320與1024x768來進行。

iOS – Layout
 The sizes of area are still 480x320 or 1024x768.
雖然螢幕是960x640px或2048x1536px, 但座標標示依舊是
480x320point或1024x768point。

2048px 1024point
960px 480point

1536px 640px 768point 320point

Size of screen Size of area

iOS – Layout
 Always keep in mind that everything would shrink into half.
永遠要記住：每個元件都會縮小一半。

960px 480px

640px
320px

iPhone 4 after iPhone 3GS before

The new iPad: 2048x1536px iPad 2 before: 1024x768px

iOS – Layout
 The position of an object means the coordinate x and y at the top-left
corner point.
物件座標指的是物件最左上角的點所在之x, y值。

iOS – Layout
 Put your objects at the coordinate with even number of x and y, and
treat 2px as 1point.
放置元件時，座標需位於偶數的像素座標，並將2像素視為1點進行
標示。

iOS – Layout
 Describe your position with coordinate 480x320 or 1024x768, definitely
not 960x640 or 2048x1536.
把2px當做1，以480x320或1024x768的座標模式標示所有元件的位置
與尺寸。

iOS – Layout
 Define font size with even number, and mark with half, do not use other
font meaninglessly.
以偶數設定字級大小，並以1/2的大小標示，使用預設的系統字型
Helvetica Neue。

iOS – Layout
 Use RGBa to define color, don’t use #RRGGBB, a0 ~ a1.0 to define
opacity.
使用r255 g255 b255的方式標示顏色，並用a0至a1.0表示透明度，
a1.0表示不透明。

iOS – Layout
 The properties of text(UILabel actually) that could be set.
可以定義的文字屬性
 Font size
字級大小
 Color (r0-255 g0-255 b0-255)
顏色(以rgb 0至255方式設定)
 Opacity (a0 – a1.0)
透明度(以0至1.0方式設定，1.0為不透明)
 Alignment (left/center/right)
文字對齊(齊左/置中/齊右)
 Normal, Bold, Italic
一般，粗體，斜體
 Shadow color (r0-255 g0-255 b0-255)
陰影顏色(以rgb 0至255方式設定)
 Shadow offset(x offset, y offset)
陰影位置(x軸位移距離，y軸位移距離)

iOS – Layout
 You need to know every pixel in view, but don’t need to define all details
on it unless you don’t want the default set.
你需要知道系統元件的一切，但不需要一一定義他們的所有細節，
除非你不要他的預設值或樣式。

iOS – Layout
 The status bar height: 20 point (1 point means 2pixel in Retina display,
and means 1pixel in non-Retina)
預設的系統列高度：20點(1點意指Retina螢幕中的2像素，非Retina螢
幕中的1像素)

iOS – Layout
 The Navigation bar/Toolbar default height: 44 point
導覽列/工具列預設高度：44點

 By default, what properties need you provide
 Title text 標題文字內容
 Bar color (actually tintColor which let you define the bar’s main color with
keeping the gradient and reflective effects)
導覽列/工具列的顏色(並保有漸層與反光效果)
 Button label 按鈕文字

iOS – Layout
 The system-provided icons for navigation bar/toolbar:
系統所提供的導覽列/工具列圖示
 Action 顯示動作表
 Camera 顯示相片集
 Compose 新訊息
 Bookmarks 顯示書籤
 Search 搜尋
 Add 新增
 Trash 刪除
 Organize 移動項目
 Reply 回應項目
 Stop 取消動作
 Refresh 重新整理
 Play 播放
 FastForward 快轉
 Pause 暫停
 Rewind 倒回

iOS – Layout
 The Tab Bar default height: 49 point
頁籤列預設高度：49點

 By default, what properties need you provide
 Each tab label text
每個頁籤的文字內容
 Each tab icon image (gray with alpha background, the suggested size is
30x30pts, but the maximum size should be 48x32pts)
每個頁籤的圖示 (使用灰階透明背景圖片，官方的建議大小為30x30pts，
實作上可接受的最大圖示為48x32pts)

iOS – Layout
 The system-provided icons for tab in tab bar:
系統所提供的頁籤圖示
 Bookmarks 書籤
 Contacts 聯絡人
 Downloads 下載
 Favorites 我的最愛
 Featured 精選內容
 History 歷史動作
 More 其他頁籤項目
 Most Recent 最新內容
 Most Viewed 最受歡迎內容
 Recents 最近取得項目
 Search 搜尋
 Top Rated 排行榜

iOS – Layout
 Table-view has two kinds of appearance: Plain and Grouped
表格有兩種呈現方式：一般清單與群組清單

Plain Grouped

iOS – Layout
 The table-cell has four styles
about title and subtitle for
implement on both Plain and
Grouped table-view
表格的儲存格依照需要，提供
了四種樣式(注意其中主標題
與副標題的呈現)
 Default
 Subtitle
 Value 1
 Value 2

iOS – Layout
 The system-provided table-view elements for extended functionality of
table views:
系統所提供的表格檢視延伸功能元件
 Checkmark 選取記號
 Disclosure indicator 揭露顯示
 Detail disclosure button 詳細資料揭露顯示
 Row reorder 列序調整
 Row insert 插入新列
 Delete button control 刪除鈕揭露顯示
 Delete button 刪除列確認鈕

iOS – Layout
 Apple’s magic number on iOS: 44.
蘋果在iOS上的魔術數字：44。
 You could often find the 44 rhythm in iOS layout.
你可以經常在iOS的介面上發現44 points這個排版的運用數值。
 44x44 point is also a recommend minimum size to make a tap target (like a button or list item)
easily and reliably tappable by Apple’s Mobile HIG (Human Interface Guidelines).
44x44這個大小同時也是蘋果的介面規範中所建議的最小點選區域。
 Physically, the 44 points on iPhone is 6.85mm, and 8.46mm on iPad.
實際上44 points在iPhone上是6.85mm，在iPad上是8.46mm.
 Keep this value in mind when designing layout.
在進行版面安排時，需將這個數值謹記在心。

iOS – Layout
 Review all the iOS UI elements and guideline in Apple iOS developer
務必到蘋果的開發者網站看過一次他們的iOS介面元件與規範

iOS – Image output
Fit the size might not be the best
切得剛剛好不見得好
All the images for iOS should include one set for non-Retina supported devices and the other for Retina
supported devices.
所有針對iOS介面所提供的圖片，都需要針對不支援Retina與支援Retina螢幕的裝置各提供一份，兩者
的圖片大小為1:2的比例。

 Don’t miss the shadow
切圖時注意陰影的範圍

 Make sure they are the same size
版面上相同類型的圖片，即使內容大小不同，在切圖時也請將他們的大小
統一。

22x28 43x43

35x21 43x43

14x19 43x43

25x25 43x43

26x27 43x43

 Don’t make your button image too small to tap.
別讓你的按鈕圖片小到難以點選。
 Apple suggest the standard touch area should be 44x44pt.
在Apple的UI規範中，建議的最小點選範圍為44x44pt。
 Even image is small, the touchable area should be large enough.
就算圖片比較小，點選的範圍也要夠大。
 As in most things, compromise is sometimes necessary. Suggest to hold the 44x30pt or
30x44pt as a minimum.
很多時候，還是得妥協。但請守住最小點選範圍維持在44x30pt或30x44pt這個關
卡。

26x27 44x44

Hard to touch

 You don’t need to re-produce the system components.
不要重製系統元件。
 If you want to re-customize UI of system components, think if it’s really necessary.
如果你打算將系統元件的樣式重新自訂，請仔細思考其必要性。

Is this kind of style modification for system components really
needed for your app? Think about it!
你的應用程式真的有需要改變系統元件的樣式嗎？
仔細思考一下吧～

 Don’t forget users who use iPhone 3GS before.
出圖時須針對Retina與非Retina設備提供對應大小的圖片
 Add suffix -@2x to image filename for Retina display.
Ex.:
image filename for non-Retina device: star.png
image filename for Retina device: star@2x.png
對於針對Retina螢幕所提供的圖片，請在主檔名加上後綴@2x，開發工具會完成
接下來的事。

favorite.png favorite@2x.png

 What you should prepare for iOS app basically. (apple developer)
當你要發布iOS app時，基本上針對app本身需要準備這些圖片。
 And some screenshots 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)

iOS – Extendable button or image
You don’t need to be so tired
你可以不用這麼累
Since we are designing the UI for those smart devices, we may design these stuff smart.
別忘了我們在設計的是一些智慧型設備，設計時也動動腦吧～

 Produce a extendable button image, and define the extendable area
製作按鈕的背景圖片時，需定義左側與上方的非延伸範圍，以針對內容的
大小作對應的調整。
leftCapWidth 8px 1px stretchable area

This is what you
should provide!

All the right area left would be right non-
stretchable part

Red dash line area is left non-stretchable part Blue dash area is the part that is stretchable

topCapHeight 5px

vertical stretch area 1px

leftCapWidth 5px

horizontal stretch area 1px

 This is how it works, the stretchable area is only 1px.
可以延伸的範圍只有1px。

topCapHeight 5px

vertical stretch area 1px

leftCapWidth 5px

horizontal stretch area 1px

 In iOS 5, this method stretchableImageWithLeftCapWidth:topCapHeight: has been
replaced by resizableImageWithCapInsets which defines the fixed region of a given
image in top, left, bottom, right. That’s so great!
在iOS 5 SDK當中，定義上方與左側的非延伸範圍方法，被新方法替代，讓我們可
以針對圖片的上, 右, 下, 左個別定義非延伸範圍。很棒吧！

 Image could do the same think like extendable button. (actually, that’s property
of UIImage for both)
圖片也能像按鈕一樣做延伸性的處理 (事實上兩者都是透過UIImage來進行)

This is what you should provide!

 Wisely use texture image, don’t be so straight to produce a big image.
適度運用材質圖片的作法，不要老實地提供一大張圖片。

This is just enough!
17x17

320x300

Android matters!
Be flexible to handle those complexities.
Sizes and Density!

Android – Basement
 Screen Size 螢幕尺寸
 There are various android devices that have different display size.
由於Android開放性的系統特性，並未對硬體設備進行限制，因此市面上
有許多不同尺寸的相關設備。
 In Google’s way, you could generally sort these devices size into four:
Small screen, Normal screen, Large screen, Extra Large screen.
在Google的官網中，將設備尺寸分為四個等級：Small, Normal, Large,
Extra-large。
 Small
Under 3 inches (7.5 cm), at least 426x320dp resolution
 Normal (baseline)
3 inches (7.5 cm) to around 4.5 inches (11.5 cm), at least 470x320dp resolution
 Large
4.5 inches (11.5 cm) to around 10 inches (25 cm), at least 640x480dp resolution
 Extra-large
Over 10 inches (25 cm), at least 960x720dp resolution

 Screen Resolution 螢幕解析度
 ldpi 120dpi
 mdpi 160dpi (baseline)
 hdpi 240dpi
 xhdpi 320dpi

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

 The combination of size and resolution
 You could find lots of sizes on Android Developer‘s Supporting Multiple Screens.
可以在android developer的網站中看到尺寸與解析度的組合。

Low density(120) Medium density(160) High density(240) Extra high density(320)
ldpi mdpi hdpi xhdpi

Small screen QVGA (240x320) 480x640

WVGA800 (480x800)
WQVGA400 (240x400)
Normal screen HVGA (320x480) WVGA854 (480x854) 640x960
WQVGA432 (240x432)
600x1024

WVGA800 (480x800)
WVGA800 (480x800)
Large screen WVGA854 (480x854)
WVGA854 (480x854)
600x1024

WXGA (1280x800) 1536x1152 2048x1536
Extra Large
1024x600 1024x768 1920x1152 2560x1536
screen
1280x768 1920x1200 2560x1600

Android – Icon
Four wishes come true at once
四個願望，一次滿足
For compatible with different devices, the UI design concept of Android would focus on flexible and
optimization
為了能夠相容于各種尺寸與解析度的裝置，Android的UI設計比較著重在彈性與最佳化

Android – Icon
 Concept of density is really important!
密度的概念很重要！
 The point is: those icons look the same size on different devices, but actually are
images with different sizes.
重點在於，這些圖示在不同手機上看起來都一樣大，實際上卻是不同相素大小的
圖示。

ldpi, mdpi, hdpi, xhdpi,
Samsung Galaxy Y, Samsung Galaxy Ace, Samsung Galaxy S Plus, Samsung Galaxy SII HD
133ppi 165ppi 233ppi LTE ,316ppi

36x36 48x48 72x72 96x96

Android – Icon
 Let’s see more details~
看仔細…
 That’s why designer should provide four images
這就是為什麼同一個圖像，設計端需要提供四張圖檔


36x36 48x48 72x72 96x96

Android – Icon
 Why don’t we just use a large image to shrink?
為什麼不直接使用一張大圖來縮小？
 It would never enough to earn memory . 行動裝置的記憶體是有限的。
 The result of re-rasterize could be suck. 大圖縮小的呈現結果可能會很糟。
 Very unprofessional. 不專業。
 Process of dealing with these images is actually to make your UI more delicate in all
kind of device.
處理這些圖示的過程，實際上是將你的UI針對各個裝置進行細緻化。
 You won’t like that if you tried. 試過你就知道了。

Android – Icon
 Android provide a unit DP(Density-independent pixel) to present a visual pixel that
means the same size in different devices.
為了定義這些「看起來一樣大，實際上卻不同大小」的尺寸，android提供了一個
虛擬像素DP(Density-independent pixel)，它實際上是一個物理尺寸單位。
 DP is the area of 1 pixel in mdpi(160ppi), actually 1/160 inch = 0.00625 inch = 0.15875mm.
DP被定義為一個pixel(像素)在mdpi(160ppi)上的範圍，相當於0.15875mm。因此在不同解
析度下，1 DP所包含的像素是不同的。

a DP = a pixel in mdpi(160ppi) = 0.15875mm

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

Android – Icon
 All if to make them look the same size in different devices.
所有的目的都是為了讓這些畫面在不同解析度的設備上「看起來一樣」
 Remember the ratio in different densities.
記住不同解析度之間的比例。
 Start your icon design from mdpi or xhdpi.
從mdpi或xhdpi開始進行你的圖示設計。


Ratio in pixel 3 : 4 : 6 : 8

12x12px 16x16px 24x24px 32x32px

16x16dp 16x16dp 16x16dp 16x16dp

Android – Icon
 If you start from mdpi, make your icon size with multiple of 4px. If from xhdpi,
make it with multiple of 8px.
如果你從mdpi開始進行，請保持圖示大小為4的倍數；如果從xhdpi開始，
請保持為8的倍數。


36x36px 48x48px 72x72px 96x96px
48x48dp 48x48dp 48x48dp 48x48dp

36x36px 48x48px 72x72px 96x96px
48x48dp 48x48dp 48x48dp 48x48dp

3 : 4 : 6 : 8

Android – Icon
 The basic concept about icon design in Android are about the same as iOS.
Just replace the 1:2 issue with 3:4:6:8.
在圖示設計的基本觀念上，可參考前面iOS的部分內容。但對於1:2的概
念部分需要調整為3:4:6:8的比例。
 For the flexibility in scale, implement you design with vector drawing tools like
illustrator or shape in photoshop.
為了縮放上的考量，在進行圖示設計時，盡量以向量的方式製作較佳。
 For reducing the complexity, it’s needless to emphasize the 3:4:6:8 in details with
integer, just fine tune it after scaling.
為了減少設計時的複雜性，對於像素細節部分不用過份強調 3:4:6:8 的整數概
念，但在縮放後需進行針對性的微調。

Android – Icon
 Comparing with iOS devices.
與iOS裝置的比較。
 Ideally, using the same UI stuff of iOS for xhdpi(with Retina stuff) and mdpi is
possible.
理想上可以將iOS的視覺元件共用於xhdpi與mdpi的部分。
 Btw, the android tablets are mostly mdpi.
順道一提，目前的android tablet幾乎都是mdpi.


iPad 1/2 3GS before The new iPad 4/4S after
132ppi 163ppi 264ppi 326ppi
Google Nexus S
233ppi (480x800)

Motorola XOOM Google Tablet Nexus 7 Google Galaxy Nexus
149ppi (1280x800) 216ppi (1280x800) 316ppi (1280x720)

Android – Fonts
Default font - Droid Sans before 3.0; Roboto after 4.0
預設字型 – 3.0之前是Droid Sans; 4.0之後則採用Roboto
Android supports less font styles than iOS.
相較之下，Android的預設的字型支援性比iOS低了不少。

Android – Fonts
 Basically, Android has system font only.
基本上，Android系統只有系統字型。
 If you want to use other font styles in your app, embed it.
如果你想要在app中使用其他字型，只能再將字型資料嵌入。

3.0 before 4.0 after

Android – Layout
Baseline with mdpi
從mdpi開始
mdpi is actually a baseline for android UI design, and DP is the same size with Pixel in mdpi
mdpi是android介面設計中的基準點，在這個解析度下，DP等於Pixel

Android – Layout
 Size! Density!
在Android的介面設計中，需要謹記在心的要素有兩個：尺寸、密度！
 Size means the screen size physically(would be presented by unit:dp).
尺寸指的是螢幕的實際物理大小，在這邊將會以dp這個單位來表示。
 Density means the dpi(or ppi) of display screen.
密度指的是螢幕的解析度，如120dpi, 160dpi…。
 Be flexible!
你的版面規劃必須要具有「彈性」，時時思考版面在不同比例的螢幕上所呈現的樣
子。

Android – Layout
 Androids use sp(scale-independent pixels) as unit to define font sizes, and use dp(also called dip, device
independent pixels) as unit to define sizes of everything else.
在Android系統中所採用的尺寸單位為dp，定義文字大小時使用的是sp，所有的其他東西則使用
dp。
 Dp and sp actually use the same concept of getting the same physical sizes in display with different densities. Sp
would adjust more with user‘s preference.
實際上dp與sp運用的是一樣的概念，在不同解析度的螢幕上呈現同樣的大小。但sp還會根據使用者設定的偏
好而對字型大小有所調整。
 In mdpi(160ppi), 1dp = 1sp = 1px
在mdpi(160ppi)中，dp與sp都等同於px。
 In xhdpi(320ppi), 1dp = 1sp = 2px
 In hdpi(240ppi), 1dp = 1sp = 1.5px
 In ldpi(120ppi), 1dp = 1sp = 0.75px
 dp = px * (160 / dpi) ; px = dp * (dpi / 160)

12x12px 16x16px 24x24px 32x32px
16x16dp 16x16dp 16x16dp 16x16dp

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

Android – Layout
 Not only density, don’t forget screen size!
你還卡在「解析度」嗎？別忘了還有「螢幕尺寸」這檔事！
 Google defines those four kinds of size :
在Google官方文件中所定義的四種尺寸分類：
 xlarge screens are at least 960dp x 720dp
 large screens are at least 640dp x 480dp
 normal screens are at least 470dp x 320dp
 small screens are at least 426dp x 320dp
 dp = px * (160 / dpi)
 px = dp * (dpi / 160)

Android – Layout
 What should I provide for layout!!!???
說到底，版面的安排到底要怎麼標示!!!???
 You could understand why iOS is more welcome than Android now, huh!
現在可以瞭解到為什麼iOS比Android更受歡迎了吧！
 Let see the devices distribution:
來看一下Android設備的市場分佈：


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.

Android – Layout
 The sizes of phone and tablet considerations: 手機與平板的尺寸考量：

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 your layout in mdpi mode.
在mdpi模式下完成與標示你的版面編排。
 Define screen size for phone with 480x320dp; for tablet with 1024x600dp(7 inches) and
1280x800dp(10 inches).
在版面部份，針對手機以480x320dp為主，必要時提供640x360dp；針對平板則以
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.
如果你願意多花些時間，可以把顏色改為ARGB的表示方式，其中a的數值也改為
0-255(255為不透明)，而非iOS中的0-1.0。
 The android accepts more color expressions in implement, you could get info in
Android developer website.
其實Android在顏色的指定上有更多的選擇，可到官方的開發網站瞭解詳細資訊。

Android – Layout
 Android’s 48dp rhythm.
Android認為48dp是適合使用者點選的大小，換算實際大小約為7.62mm(在實際應用層面上會有些
微的差異)。
 The Apple’s 44 point is 6.85mm on iPhone, and 8.46mm on iPad.
順道一提，蘋果的44 point在iPhone上為6.85mm，在iPad上為8.46mm。
 Spacing between each UI element is 8dp.
每個元件則以最少8dp為間隔距離，特別是點選元件。

Android – Layout
 Based on themes to start your design. Even you don’t set one, it would start with default.
你可以從Android所提供的Holo預設布景主題開始你的設計，就算你什麼都不設定，
也會從系統預設的佈景主題開始(不一定是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, it’s 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.
設計端所提供的資訊越足夠，程式端執行上也越有效率。

Android – Image output
Don’t be depressed so quick, it’s just going to start
別難過得太早，才正要開始
For compatible with devices with different sizes and densities, designers should prepare lots of stuff for
engineers to implement
為了能夠相容于各種尺寸與解析度的螢幕，設計者必須準備相當多的資料以供程式人員編寫程式

 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.
針對螢幕尺寸的考量：提供基本的版面編排資訊，並視需求提供特定比
例或大小的版面資訊。

 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.
也就是說，如果你針對mdpi設計了一個100x100的圖片，就要針對ldpi, hdpi, xhdpi
各自提供75x75, 150x150, 以及200x200的圖片。

 drawable-xhdpi/
awesomeimage.png

drawable-hdpi/
awesomeimage.png

drawable-mdpi/
awesomeimage.png

drawable-ldpi/
awesomeimage.png

 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)各別對7吋與10吋的產品進行版
面規劃。

 What you should prepare for Android app basically.
當你要發布Android app時，基本上針對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 – Extendable button or image
Do something smart
聰明人做聰明事
Android deals extendable images with concepts just like iOS, but different in ways to make
基本上延伸圖片的概念在Android與iOS上是相同的，只是在做法上有些差異

 In Android, the extendable images are called 9‐patch images.
在Android中，延伸性的按鈕或背景圖片被稱為9‐patch圖片，運用與iOS類似的處理方
式達到延伸的效果。
 Unlike iOS, Android deals the definitions about extendable areas with drawing black lines around
the image.
與iOS不同的地方是，Android藉由在圖片的四周畫上黑線，用以定義圖片需要延伸的範圍。
 9‐patch images don’t scale down, they only scale up. So it’s best to start as small as possible.
9‐patch圖片並不做範圍縮小情況的處理，因此在符合需求的條件下，將9‐patch圖片尺寸處理
得越小越好。
If you want buttons like these… This is what you
need to provide.

 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 area為選擇性設定，預設值與Scalable area相同。

Adjust to make 9‐patch Add 1px around image The content area are defined by right and
and draw the black line bottom lines. (in reality, the black lines
wouldn’t display)
Width scalable area
Vertical
content
lpb Button label
fill area
Content words Content words Content words texting
Height Content words Content words Content words texting
scalable Content words Content words Content words texting
area Content words Content words Content words texting
Horizontal content fill area

 No matter iOS or Android, they treat extendable images just like this:
無論是iOS或Android，對延伸性圖片的作法，處理方式其實都像下圖所示：

Defined 9‐patch image What happened What we get

I think you know why now, huh?

Suggestions
 Mobile UI design is a limited design under system’s metaphor and guideline,
mixed with the display and usability.
行動裝置的介面設計是一種具有限制性的設計，系統營造的操作習慣與規
範，硬體上螢幕呈現的限制與操作的便利性，都是設計時需要考慮的因素。
 Be an app just like an app in that system, don’t use iOS element in Android.
在哪個系統，就要像那個系統的程式，不要在Android中使用iOS的元素，反
之亦然。
 In Android’s UI design, it’s very important to focus on the flexibility. Give some
tolerance to your layout, or the compatibility issue would depress you.
對Android的UI設計，應多著重在版面的彈性，並能有一定的容許值，以減
少在設備兼容性部分的處理時間。

Appendix
 iOS Human Interface Guidelines
 Android User Interface Guidelines

Mobile design matters - iOS and Android

More Related Content

What's hot (16)

Viewers also liked (20)

Similar to Mobile design matters - iOS and Android (20)

Recently uploaded (20)

Mobile design matters - iOS and Android