Some basic information and concepts about designing user interface on iOS and Android.
...
Some basic information and concepts about designing user interface on iOS and Android.
Help designers to quickly have knowledge about how to start and what to prepare when designing app interface on iOS and Android.
PrefaceMainly to establish some principles or concepts about building visual design to iOSand 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 22x1226x14 11.5x6.5 23x13
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. 對具有圓角的物件進行大小調整時，若要保持相同的圓角半徑，勿 直接針對物件進行縮放。有時重新畫一次比較保險。 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 4px border, shadow distance:2px size:2x 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 預設字型 - HelveticaUse 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 MN2. American Typewriter 19. Courier 36. Hiragino Mincho ProN 53. Thonburi3. Apple Color Emoji 20. Courier New 37. Hoefler Text 54. Times New Roman4. Apple SD Gothic Neo 21. DB LCD Temp 38. Kailasa 55. Trebuchet MS5. Arial 22. Devanagari Sangam MN 39. Kannada Sangam MN 56. Verdana6. Arial Hebrew 23. Didot 40. Malayalam Sangam MN 57. Zapf Dingbats7. Arial Rounded MT Bold 24. Euphemia UCAS 41. Marion 58. Zapfino8. Bangla Sangam MN 25. Futura 42. Marker Felt9. Baskerville 26. Geeza Pro 43. Noteworthy10. Bodoni 72 27. Georgia 44. Optima11. Bodoni 72 Oldstyle 28. Gill Sans 45. Oriya Sangam MN12. Bodoni 72 Smallcaps 29. Gujarati Sangam MN 46. Palatino13. Bodoni Ornaments 30. Gurmukhi MN 47. Papyrus14. Bradley Hand 31. Heiti SC (中文字體) 48. Party LET15. Chalkboard SE 32. Heiti TC (中文字體) 49. Sinhala Sangam MN16. Chalkduster 33. Helvetica 50. Snell Roundhand17. 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 beforeThe 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 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 版面上相同類型的圖片，即使內容大小不同，在切圖時也請將他們的大小 統一。 22x28 43x43 35x21 43x43 14x19 43x43 25x25 43x43 26x27 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. 還有一些程式的畫面截圖。 Non-retina iPhone and Retina iPhone and iPod Size for high-resolutionDescription 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 144App 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 (Spotlightresults 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 58for custom document types) 320 x 320 640 x 640Web clip icon(recommended) 57 x 57 114 x 114 72 x 72 144 x 144Toolbar and navigation bar Approximately 20 x 20 Approximately 40 x 40 Approximately 20 x 20 Approximately 40 x 40icon (optional)Tab bar icon (optional) Approximately 30 x 30 Approximately 60 x 60 Approximately 30 x 30 Approximately 60 x 60Default Newsstand cover icon At least 512 pixels on At least 1024 pixels on At least 512 pixels on At least 1024 pixels onfor the App Store (required for the longest edge the longest edge the longest edge the longest edgeNewsstand 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. 別忘了我們在設計的是一些智慧型設備，設計時也動動腦吧～
iOS – Extendable button or image 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 1pxleftCapWidth 5px horizontal stretch area 1px
iOS – Extendable button or image 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當中，定義上方與左側的非延伸範圍方法，被新方法替代，讓我們可 以針對圖片的上, 右, 下, 左個別定義非延伸範圍。很棒吧！
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. 適度運用材質圖片的作法，不要老實地提供一大張圖片。 This is just enough! 17x17 320x300
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 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 HD133ppi 165ppi 233ppi LTE ,316ppi 36x36 48x48 72x72 96x96
Android – Icon Let’s see more details~ 看仔細… That’s why designer should provide four images 這就是為什麼同一個圖像，設計端需要提供四張圖檔 ldpi mdpi hdpi xhdpi 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 ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)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開始進行你的圖示設計。 ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)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的倍數。 ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi) 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. ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi) 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 ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi) 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設備的市場分佈： 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: 手機與平板的尺寸考量： 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為了能夠相容于各種尺寸與解析度的螢幕，設計者必須準備相當多的資料以供程式人員編寫程式
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 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 Content words Content words Content words texting Content words Content words Content words texting 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 Content words Content words Content words texting Horizontal content fill area
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
政男 陳
1–1 of 1 previous next