mobile design matters - ios and android - presentation version in cht

行動裝置介面設計 Mobile Design ma.ers!

2012/07/25 by Light Lin

主要內容 � 基本介紹

� 圖示

� 字型

� 版面安排

� 圖片輸出

� 延伸性的按鈕或圖片

開始之前，有件事… 需要先說⼀一下…

官方規範不是限制！

iOS – 基本介紹每年都在更新…

3.5” 480px

320px

螢幕像素與解析度 �  iPhone

�  3GS 之前: 480x320px, 163

iOS – 基本介紹

3.5” 960px

640px


�  3GS 之前: 480x320px, 163ppi �  4 之後: 960x640px, 326ppi


9.7” 1024px

768px



�  iPad �  2 之前: 1024x768px, 132ppi


9.7” 2048px

1536px



�  iPad �  2 之前: 1024x768px, 132ppi �  New iPad: 2048x1536px, 264ppi


iOS – 圖示 RePna很重要，但它是什麼？

我也是RePna，只要你站遠⼀一點

我是RePna

RePna的定義 Apple: 肉眼分辨不出兩個單獨的圖元

像素沒有小數點

iOS – 圖示

設計時要注意 �  邊緣清晰

iOS – 圖示


�  對稱性

iOS – 圖示


�  對稱性

�  偶數尺寸

iOS – 圖示

14x14 7x7

13x13 6.5x6.5

Not symmetric


�  對稱性

�  偶數尺寸

�  線條寬度

iOS – 圖示

26x14, 2px inner border




�  對稱性

�  偶數尺寸

�  線條寬度

�  細節調整

iOS – 圖示

用哪些工具 �  使用Photoshop的shape進行設計

�  Illustrator進行輔助

iOS – 圖示

iOS – 字型預設字型是HelvePca…

iOS支援很多字型

iOS – 字型

iOS – 版面安排提供效的資訊…

座標系統 �  座標系統依然是320x480與1024x768

iOS – 版面安排

480point

320point

1024point

768point

RePna的作用 �  RePna的實際狀況


iPhone 3GS before iPhone 4 aXer

手機上看起來⼀一樣大，實際上不同像素大小

版面標示 �  用RePna版面設計，把2像素當做1點


文字標示 �  以1/2的值標示大小


顏色標示 �  0~255標示顏色，0~1.0表示透明度，1.0表示不透明


可用文字屬性 �  大小

�  顏色(以rgb, 0至255方式設定)

�  透明度(以0至1.0方式設定，1.0為不透明)

�  對齊(齊左/置中/齊右)

�  ⼀一般，粗體，斜體 �  陰影顏色(以rgb, 0至255方式設定)

�  陰影位置(x軸位移距離，y軸位移距離)


瞭解系統元件 �  瞭解所有系統元件，使用它，不需要定義所有細節


開發者網站 �  蘋果開發者網站的iOS介面元件與規範


iOS的魔術數字: 44

iOS的魔術數字: 44 �  視覺的律動

版面安排


�  點選範圍的參考大小

版面安排



�  在iPhone上是6.85mm，在iPad上是8.46mm

版面安排



�  在iPhone上是6.85mm，在iPad上是8.46mm

�  版面安排的參考

版面安排

iOS – 圖片輸出切得剛剛好不見得好…

切圖注意事項 �  別把陰影切斷

iOS – 圖片輸出


�  讓事情單純⼀一點


26x27

25x25

14x19

35x21

22x28 44x44

44x44

44x44

44x44

44x44


�  讓事情單純⼀一點

�  讓使用者好點選


26x27 44x44

不好點選

系統元件樣式 �  如無必要，不要重製系統元件


?

輸出檔名 �  RePna的圖檔請在主檔名後面加上@2x


favorite.png [email protected]

App圖示 �  圓角

�  陰影

�  反光效果(只有這個可以關閉)


發佈iOS App準備圖片 �  還有⼀一些程式的畫面截圖


DescripPon Non-‐rePna iPhone and iPod touch (in pixels)

RePna iPhone and iPod touch (in pixels) Size for iPad (in pixels) Size for high-‐resoluPon

iPad (in pixels)

ApplicaPon 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 Seangs (recommended)

29 x 29 58 x 58 50 x 50 (Spotlight search results) 29 x 29 (Seangs)

100 x 100 (Spotlight search results) 58 x 58 (Seangs)

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 navigaPon bar icon (opPonal) Approximately 20 x 20 Approximately 40 x 40 Approximately 20 x 20 Approximately 40 x 40

Tab bar icon (opPonal) 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 – 延伸性的按鈕或圖片你可以節省⼀一些時間…

定義延伸按鈕 �  左側與上方的非延伸範圍

iOS – 延伸性的按鈕或圖片

左邊界 5px

水平延伸區域 1px

垂直延伸區域 1px

上邊界 5px

這就是設計需要提供的

只有1px在作延伸


左邊界 5px

水平延伸區域 1px

垂直延伸區域 1px

上邊界 5px

圖片的運用



材質圖片


這樣就可以了

340x340

40x40

iOS – 小結 �  iOS設備

�  iPhone 3GS前: 480x320px; iPhone 4後: 960x640px

�  iPad1/2: 1024x768px; new iPad: 2048x1536px �  RePna: 肉眼分辨不出兩個獨立的單元

�  設計圖示 �  邊緣清晰、對稱、偶數尺寸、線條寬度、細節調整

�  字型 �  系統字型HelvePca, 58種支援字型

iOS – 小結 �  版面安排

�  座標系統沒有變兩倍 �  44的參考

�  圖片輸出 �  注意陰影、單純化、好點選 �  RePna圖檔名要加@2x

�  延伸按鈕與圖片 �  延伸按鈕的實作、1px的延伸範圍，延伸圖片的運用 �  材質圖片的作法

為什麼iOS比較賺？

Android – 基本介紹每個版本都差很多…

螢幕尺寸 �  Small 小於3吋(7.5公分), 最少 426x320dp

�  Normal (baseline) 3吋 (7.5公分)到4.5吋(11.5公分)之間, 最少470x320dp

�  Large 4.5吋(11.5公分)到10吋(25公分)之間, 最少640x480dp

�  Extra-‐large 大於10吋(25公分), 最少960x720dp

Android – 基本介紹

螢幕解析度 �  ldpi 120dpi

�  mdpi 160dpi (baseline)

�  hdpi 240dpi

�  xhdpi 320dpi


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

尺寸與解析度組合


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 – 圖示注意彈性與最佳化…

密度的概念 �  他們看起來都⼀一樣大

Android – 圖示

ldpi, Samsung Galaxy Y, 133ppi

mdpi, Samsung Galaxy Ace, 165ppi

hdpi, Samsung Galaxy S Plus, 233ppi

xhdpi, Samsung Galaxy SII HD LTE ,316ppi

四種尺寸的圖片 �  他們只是看起來⼀一樣大

Android – 圖示

96x96 72x72 48x48 36x36

ldpi mdpi hdpi xhdpi

不要只給大圖 �  不要直接使用大圖讓裝置縮小使用

�  行動裝置的記憶體很有限

Android – 圖示


�  行動裝置的記憶體很有限 �  重新取樣的結果會很糟

Android – 圖示


�  行動裝置的記憶體很有限 �  重新取樣的結果會很糟 �  細緻化

Android – 圖示

Android定義了DP �  DP(Density-‐independent pixel)

�  PPI/DPI：⼀一英吋中有多少像素/點 �  DP/DIP：⼀一像素在mdpi(160ppi)時的大小

�  1 DP = 1 pixel in mdpi(160ppi) = 0.15875mm

Android – 圖示

1dp => 0.15875mm



�  1 DP = 1 pixel in mdpi(160ppi) = 0.15875mm �  不同解析度下，1 DP所能包含的像素數目是不同的

Android – 圖示

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



�  1 DP = 1 pixel in mdpi(160ppi) = 0.15875mm �  不同解析度下，1 DP所能包含的像素數目是不同的

Android – 圖示


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

讓他們看起來⼀一樣大 �  注意不同解析度的比例

�  從mdpi(保持4的倍數)開始

�  手機跟電腦上看起來不⼀一樣大

Android – 圖示

48x48dp的圖示

mdpi(160ppi)

48x48px

hdpi(240ppi)

72x72px

ldpi(120ppi)

36x36px 96x96px

xhdpi(320ppi)

(7.62x7.62mm)

3:4:6:8的比例 �  圖示設計注意3:4:6:8的比例

�  以向量的方式製作 �  縮放後進行針對性微調

Android – 圖示

48x48dp的圖示

mdpi(160ppi)

48x48px

hdpi(240ppi)

72x72px

ldpi(120ppi)

36x36px 96x96px

xhdpi(320ppi)

(7.62x7.62mm)

3 4 6 8 : : :

Android vs. iOS �  可將iOS的視覺元件共用於xhdpi與mdpi

�  目前的android tablet幾乎都是mdpi

Android – 圖示


4/4S aXer 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 – 字型 3.0之前是Droid Sans, 4.0用Roboto…

只有系統字型 �  可嵌入其他字型資料

Android – 字型

3.0 before 4.0 aXer

Android – 版面安排從mdpi開始…

密度！尺寸！ �  密度指螢幕解析度，如120dpi, 160dpi… �  尺寸指螢幕實際物理大小，以dp單位表示 �  版面規劃必須具有「彈性」

Android – 版面安排

尺寸用dp，文字用sp �  尺寸單位為dp，文字大小則用sp，兩者定義相同

�  sp會根據使用者設定偏好而有所調整 �  xhdpi(320ppi)中 1dp = 1sp = 2px �  hdpi(240ppi)中 1dp = 1sp = 1.5px �  mdpi(160ppi)中 1dp = 1sp = 1px �  ldpi(120ppi)中 1dp = 1sp = 0.75px

�  dp = px * (160 / ppi)


四種螢幕尺寸 �  Google定義了四種尺寸

�  Extra-‐large 最少960dp x 720dp �  Large 最少640dp x 480dp �  Normal 最少470dp x 320dp �  Small 最少426dp x 320dp


兼容性的考量 �  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.

手機與平板考量 �  手機與平板的尺寸考量

�  在mdpi完成與標示版面編排 �  針對手機以480x320dp為主，必要時提供640x360dp

�  針對平板以1024x600dp(7吋)以及1280x800dp(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的版面標示 �  顏色用ARGB的表示方式，a的數值為0-‐255(255為不透明)

�  Android在顏色指定有更多選擇


Android的48dp理論 �  48dp約為7.62mm

�  蘋果的44 point在iPhone上為6.85mm，在iPad上為8.46mm �  8dp的間隔距離


佈景主題的設定 �  Holo Dark �  Holo Light �  Holo Light with dark acPon bars


Seangs in Holo Dark. Gmail in Holo Light. Talk in Holo Light with dark acPon bar.

熟悉系統元件


設計規劃與實踐 �  要設計人員將版面實作出來很難


設計資訊的提供 �  設計所提供的資訊愈充足，程式製作也愈有效率


Android – 圖片輸出⼀一張圖片要做四次…

四組密度的圖檔 �  提供四種解析度使用的圖檔，以資料夾分開儲存

drawable-‐xhdpi/ awesomeimage.png

drawable-‐hdpi/ awesomeimage.png

drawable-‐mdpi/ awesomeimage.png

drawable-‐ldpi/ awesomeimage.png

Android – 圖片輸出

Normal為尺寸基準點 �  針對手機可用320x480dp(px) �  針對平板可用1024x600dp(px)與1280x800dp(px)


發布Android app準備圖片 �  ApplicaPon 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.

�  PromoPonal Graphic (opPonal) 180w x 120h, PNG or JPEG (no alpha), Full bleed, no border in art.

�  Feature Graphic (opPonal) 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 – 延伸性的按鈕或圖片聰明人做聰明事…

9-‐patch圖片 �  在圖片的四周畫黑線，以定義延伸範圍

�  9-‐patch不做縮小處理

Android – 延伸性的按鈕或圖片


Scalable area 與 Fill area �  Scalable area

�  上方與左側的黑線定義延伸範圍

�  Fill area �  下方與右側的黑線定義內容放置範圍


準備好圖片在四周增加1px並畫上黑線

水平延伸範圍

垂直延伸範圍

水平內容範圍

垂直內容範圍

內容受到下方與右側黑線所影響黑線本身在實際運用時並不會顯示出來

延伸性圖片的運作


定義9-‐patch 實際上發生的事最後獲得的東西

Android – 小結 �  Android設備

�  四種密度: ldpi, mdpi, hdpi, xhdpi �  四種尺寸: small, normal, large, extra-‐large

�  設計圖示 �  讓他們看起來⼀一樣大 �  3:4:6:8的比例

�  字型 �  只有系統字型 �  可以內嵌字型

Android – 小結 �  版面安排

�  版面彈性的考量

�  手機以480x320dp為主；平板以1024x600與1280x800為主

�  佈景主題與系統元件的熟悉

�  圖片輸出 �  四種解析度使用的圖檔

�  延伸按鈕與圖片 �  9-‐patch圖片的應用

這下你知道了吧?

結論與建議總算到了這⼀一步…

設計細節的微調

系統的操作習慣與規範

螢幕呈現的限制與操作便利性

系統之間風格的差異性

版面彈性與容許值

� 設計細節的微調 � 系統的操作習慣與規範 � 螢幕呈現的限制與操作便利性 � 系統之間風格的差異性 � 版面彈性與容許值

結論與建議

附錄 �  iOS Human Interface Guidelines

�  Android User Interface Guidelines �  phone-‐size.com

�  HelvePca的由來

謝謝指教~ Q&A?