Android — 設計一套標注與切圖,滿足90%以上機種適配

Ivan Wei
4 min readNov 30, 2015

--

本文適用:UI designer, Android Developer

清楚記得在Facebook上某個社團,曾經有人問過Android支持Multiple screen,究竟要出多少套不同Density的切圖?

追求極致與顯示完美的設計師會切多套圖,但在網路行業這樣飛快的敏捷開發節奏,我只出一套標注與切圖,惟有不得已的情況下,大多是小適配手機有顯示的問題,才會多切mdpi或ldpi的圖。除了工作效率更快之外,原因無它,APK的檔案大小會影響留存率!尤其是工具類的App。

在開始講解我的工作習慣之前,如果你還不是很清楚Android如何支持不同Density螢幕的話,可以先K一下官網的Developer guide:
http://developer.android.com/intl/zh-tw/guide/practices/screens_support.html#support

不管是用Illustrator或是Sketch,一般我都把Canvas size設定成720*1136(不包含Status與Navigation bar),主要是為了xhdpi Density的切圖尺寸,但標注的時候仍要使用Baseline(mdpi)為基準,換算每2px等於1dp。

標注 (Layout/Measurement)

雖然主要標注的單位是dp,但有時候也會用到sp或px,以及百分比,怎麼決定要用什麼單位呢?

1.所有可操作的控件或是具体影響可讀性的元件,你希望在不同Density螢幕上Actual/Physical size顯示是一致的,都要用dp,我自己的習慣是文字也都用dp為顯示單位,之前文章提到過的Iconfont,也是一樣。

2.如果是希望文字能隨著用戶在設定參數裡的顯示字級大小變化,才使用sp,且前提要考慮你所有的版面設計支持響應式設計(Responsive design)原則之外,也不擔心字級大小變化而影響到版面的配置與美感,更重要的是在那小螢幕裡寸土寸金,文字變大了,一屏能顯示的內容也就少了,也可能因此失去一些流量。

3.用到px的情況是比較少的,主要會在一些裝飾性的設計元件,例如:圓角、分隔線等,會使用px單位。但這不是鐵律,全看畫面的配置或整体設計規範,來定義各元件的顯示參數即可。

▲上圖為dp, sp, px三種單位類型的標注參照圖,找到對應的顏色即可。

4.如果畫面不是同類型控件的堆疊(例如:List、Grid等),而是有一個較大的元件或單一圖片的時候(例如:Tutorial, Welcome page),我會用百分比去進行Width或是Margin的定義。

▲示意圖裡紫色部份,便是依畫面高度百分比比例決定位置的範例

切圖 (Asset/Resource)

  1. 從Flat design到Material design,視覺設計的趨勢都以大量的色塊為主,因此大多是產出PNG格式的圖片,有用到漸層色或非要帶Alpha channel就產出24bit的格式,少於256色則使用8bit即可。而不管是多少位元的圖片,一律都會再壓縮,習知的工作就屬Web版壓縮器TinyPNG了,如果想要再追求更精減的壓縮,則可以考慮ImageAlpha,它則可以設定顏色數量的參數,這套工具則需要下載Client App。
  2. JPG則視點陣圖的複雜情況,去調整壓縮比,就不多贅述了,通常這類型的圖片盡可能是放在CDN,從雲端拉下來,除非其必要性,才會放在Client。

以上是設計Android UI時應該要有標注觀念,如果有更好的方法或觀點,也歡迎交流分享。

我是Ivan,歡迎關注我的LinkedINMedium,不定期會分享更多的行業觀點、UX與UI設計知識。

--

--

Ivan Wei

UX & Product Design Expert, Lecturer and Design Communicator.