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

13x13 6.5x6.5

Not symmetric

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)

13x13 6.5x6.5

Not symmetric

iOS – Icon When changing size of object, shift with 2px each time. 變更圖示大小時，每次調整最少以2px為一個單位，以免在縮小為1/2時產生模糊。

26x14

22x12

23x13

11x6

11.5x6.5

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

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. 對具有圓角的物件進行大小調整時，若要保持相同的圓角半徑，勿直接針對物件進行縮放。有時重新畫一次比較保險。

20x20

36x16

36x16 (directly resize)

36x16 (directly resize with smart object)

Sometimes smart object is not really smart

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的應用，需留意縮小時應做的的調整。

4px border, shadow distance:2px size:2x

2px border, shadow distance:1px size:1x

4px border, shadow distance:2px size:2x

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

1. Academy Engraved LET

2. American Typewriter

3. Apple Color Emoji

4. Apple SD Gothic Neo

5. Arial

6. Arial Hebrew

7. Arial Rounded MT Bold

8. Bangla Sangam MN

9. Baskerville

10. Bodoni 72

11. Bodoni 72 Oldstyle

12. Bodoni 72 Smallcaps

13. Bodoni Ornaments

14. Bradley Hand

15. Chalkboard SE

16. Chalkduster

17. Cochin

18. Copperplate

19. Courier

20. Courier New

21. DB LCD Temp

22. Devanagari Sangam MN

23. Didot

24. Euphemia UCAS

25. Futura

26. Geeza Pro

27. Georgia

28. Gill Sans

29. Gujarati Sangam MN

30. Gurmukhi MN

31. Heiti SC (中文字體)

32. Heiti TC (中文字體)

33. Helvetica

34. Helvetica Neue

35. Hiragino Kaku Gothic ProN

36. Hiragino Mincho ProN

37. Hoefler Text

38. Kailasa

39. Kannada Sangam MN

40. Malayalam Sangam MN

41. Marion

42. Marker Felt

43. Noteworthy

44. Optima

45. Oriya Sangam MN

46. Palatino

47. Papyrus

48. Party LET

49. Sinhala Sangam MN

50. Snell Roundhand

51. Tamil Sangam MN

52. Telugu Sangam MN

53. Thonburi

54. Times New Roman

55. Trebuchet MS

56. Verdana

57. Zapf Dingbats

58. Zapfino

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等四種字型。

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

1536px

960px

640px

1024point

768point

480point

320point

Size of screen Size of area

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

960px

640px

480px

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的比例。

iOS – Image output Don’t miss the shadow

切圖時注意陰影的範圍

iOS – Image output Make sure they are the same size

版面上相同類型的圖片，即使內容大小不同，在切圖時也請將他們的大小統一。

26x27

25x25

14x19

35x21

22x28 43x43

43x43

43x43

43x43

43x43

iOS – Image output 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

iOS – Image output 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!

你的應用程式真的有需要改變系統元件的樣式嗎？ 仔細思考一下吧～

iOS – Image output 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

iOS – Image output What you should prepare for iOS app basically. (apple developer)

當你要發布iOS app時，基本上針對app本身需要準備這些圖片。

And some screenshots 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

At least 1024 pixels on the longest edge

At least 512 pixels on the longest edge

At least 1024 pixels on the longest edge

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.

別忘了我們在設計的是一些智慧型設備，設計時也動動腦吧～

iOS – Extendable button or image Produce a extendable button image, and define the extendable area

製作按鈕的背景圖片時，需定義左側與上方的非延伸範圍，以針對內容的大小作對應的調整。

Red dash line area is left non-stretchable part

leftCapWidth 8px 1px stretchable area

Blue dash area is the part that is stretchable

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

leftCapWidth 5px

horizontal stretch area 1px

vertical stretch area 1px

topCapHeight 5px

This is what you should provide!

iOS – Extendable button or image This is how it works, the stretchable area is only 1px.

可以延伸的範圍只有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當中，定義上方與左側的非延伸範圍方法，被新方法替代，讓我們可以針對圖片的上, 右, 下, 左個別定義非延伸範圍。很棒吧！

leftCapWidth 5px

horizontal stretch area 1px

vertical stretch area 1px

topCapHeight 5px

iOS – Extendable button or image Image could do the same think like extendable button. (actually, that’s property

of UIImage for both) 圖片也能像按鈕一樣做延伸性的處理 (事實上兩者都是透過UIImage來進行)

This is what you should provide!

iOS – Extendable button or image Wisely use texture image, don’t be so straight to produce a big image.

適度運用材質圖片的作法，不要老實地提供一大張圖片。

320x300

17x17 This is just enough!

Why iOS sells much better?

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

Android – Basement Screen Resolution 螢幕解析度

ldpi 120dpi

mdpi 160dpi (baseline)

hdpi 240dpi

xhdpi 320dpi

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

Android – Basement The combination of size and resolution

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

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 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, Samsung Galaxy Y, 133ppi

mdpi, Samsung Galaxy Ace, 165ppi

hdpi, Samsung Galaxy S Plus, 233ppi

xhdpi, Samsung Galaxy SII HD LTE ,316ppi

96x96 72x72 48x48 36x36

Android – Icon Let’s see more details~

看仔細…

That’s why designer should provide four images 這就是為什麼同一個圖像，設計端需要提供四張圖檔

96x96 72x72 48x48 36x36

ldpi mdpi hdpi xhdpi

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

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

1dp = 1px 1dp = 0.75px 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開始進行你的圖示設計。

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

3 : 4 : 6 : 8 Ratio in pixel

16x16px 24x24px 32x32px 12x12px

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的倍數。

3 : 4 : 6 : 8

48x48px 48x48dp

72x72px 48x48dp

96x96px 48x48dp

36x36px 48x48dp

48x48px 48x48dp

72x72px 48x48dp

96x96px 48x48dp

36x36px 48x48dp

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

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.

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

3GS before 163ppi

4/4S after 326ppi

The new iPad 264ppi

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

ldpi(120ppi)

1dp = 0.75px

mdpi(160ppi)

1dp = 1px

hdpi(240ppi)

1dp = 1.5px

xhdpi(320ppi)

1dp = 2px

16x16px 16x16dp

12x12px 16x16dp

24x24px 16x16dp

32x32px 16x16dp

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設備的市場分佈：

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.

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

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吋)為主。

Google Tablet Nexus 7 216ppi (1280x800) => 948x592dp

Google Galaxy Nexus 316ppi (1280x720) => 648x364dp

Google Nexus S 233ppi(800x480) => 549x329dp

Motorola XOOM 149ppi (1280x800) => 1374x635dp

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

為了能夠相容于各種尺寸與解析度的螢幕，設計者必須準備相當多的資料以供程式人員編寫程式

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

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

drawable-xhdpi/ awesomeimage.png drawable-hdpi/ awesomeimage.png drawable-mdpi/ awesomeimage.png drawable-ldpi/ awesomeimage.png

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

Android – Image output 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上是相同的，只是在做法上有些差異

Android – Extendable button or image 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.

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

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)

lpb Button label Content words Content words Content words Content words Content words Content words Content words Content words

Content words Content words texting Content words Content words texting Content words Content words texting Content words Content words texting Content words Content words texting Content words Content words texting Content words Content words texting Content words Content words texting

Android – Extendable button or image 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