(Android 3.2以上不適用)
-----------------
名詞解說
Screen size (螢幕真實尺寸):
可區分為 small, normal, large, and extra large，而不考慮實際的尺寸。對照表請看下圖
Screen density (螢幕顯示密度):
又稱dots per inch (dpi)，指的是在一呎(2.54公分)的螢幕真實尺寸中所運用來顯示圖像的像素。
可區分為: low(ldpi), medium(mdpi), high(hdpi), and extra high(xhdpi)。對照表請看下圖
Orientation (定向):
指的是螢幕是portrait(直式)或是landscape(橫式)
Resolution (解析度):
在美術設計上，並不直接考量解析度的影響。而著重在"螢幕真實尺寸"與"螢幕顯示密度"間的關系。例如設計時要事先定義適用的dpi及適用的尺寸。
在美術實際上設計時，則可考量以下的解析度對照表
我習慣以WVGA800(480x800)為主要的設計標地。
Density-independent pixel (dp):
dp被定義為一個pixel(像素)在一個160 dpi上的範圍。因此從dp轉成pixel的公式為px = dp * (dpi / 160)
如何決定美術設計的目標
解決方法:
查詢最多人使用的螢幕真實尺寸及顯示密度
Google每7天會公佈使用者的數據
如何出圖給程式設計師
解決方法:
當要出圖的時後，請遵守掌握以下檔案分類
res /
drawable/
drawable-ldpi/ // 放置ldip的圖片
drawable-mdpi/ // 放置mdip的圖片
drawable-hdpi/ // 放置hdpi的圖片
drawable-xhdpi/ // 放置xhdpi的圖片
nodpi/ //放置不想被系統依使用裝置放大縮小的圖片
注意: Android在選擇圖片資源的時後，是往低dpi的方向尋找的，若尋找不到則會造成當機。例如:手機只支援到mdpi，而圖片只提供到hdpi，則應用程式會當機
如何設計圖片大小在不同的dpi
解決方法:
只要遵照以下比例原則即可
ldpi : mdpi : hdpi : xhdpi
3 : 4 : 6 : 8
例如: 一張圖片在mdpi是48x48，則其他的dpi尺寸如下
36x36 ldpi
48x48 mdpi
72x72 hdpi
96x96 xhdpi
如何決定圖片類型
解決方法:
從JPEG, GIF, PNG, BMP, WEBP中選擇一種，但考量到圖片會被系統依使用裝置放大縮小，我習慣以PNG為主。
9-patch.png
美術設計師最難掌握的一種特殊圖片類型。雖然這是PNG圖片，但9-patch圖片是被設計來延展使用的，因此必須定義可延展的範圍。原理是利用九宮格的觀念來定義長度(也就是左右)延伸的範圍，及高度(也就是上下)延伸的範圍。實作說明如下:
http://developer.android.com/guide/developing/tools/draw9patch.html
http://blog.kenyang.net/2010/05/draw-9-patch.html
http://meiyitianabc.blog.163.com/blog/static/10502212720115354948909/
http://android10.org/index.php/articlesother/279-draw-9-patch-tutorial
http://radleymarx.com/blog/simple-guide-to-9-patch/
當此類圖片過於複雜時相當難以在美術設計階段即得知結果，因此需要程式人員與美術設計師同步工作才能得知最佳的設計方式。
情境範例:
- 應用程式背景怎麼設計?
- 複雜的構圖: 採用全畫面設計(ex:480x800)。
- 重覆的元素: 則利用程式來重覆構圖(ex:圖片本身只要10x10，利用程式來重覆該圖並貼滿480x800)
- 獨特的四角落設計:則利用9-patch來延伸中間區域，如http://radleymarx.com/blog/simple-guide-to-9-patch/所示
- 按鈕怎麼設計?
- 單純的按鈕底圖: 一率採用9-patch來節省資源。圖片本身一定不可包括文字，讓程式人員動態補上文字即可。如此類的設計
- 圖片+文字: 此處指的是如下圖所示的設計，則直接設計單純圖片並告知文字的位置。文字可被放置在上、下、左、右，且可與圖片有部份(或全部)重疊。如下類的設計:
- 按鈕的狀態設計 (enable/disable, focused/pressed):一般來說enable/disable是二種不同的圖片，需分開設計，但應只是顏色的不同。focused/pressed則應採用9-patch來設計按鈕底圖，按鈕圖片本身並不會有狀態變化，但程式人員應依按鈕狀態變化底圖，如下圖:
沒有留言:
張貼留言