Android APP界面與程式的溝通
Android 機種繁雜，製作 APP 的界面相對複雜，Google 公布了一套方法，不簡單，有時經過兩三個專案合作後，界面設計師和程式設計師都還沒法溝通順暢，也不能讓每個美術設計師都去學 coding 啊！
最近遇到這事，我把 Android 筆記找出來，整理如下。
【Android 要設計幾種螢幕？】
在印刷和網站時代，設計的規範不難理解：
* 印刷用，300dpi，紙張大小 A4/ Letter/ A3...
* 網站用，72dpi，螢幕大小 1024 x 768 pixel
Dot Per Inch 就是每英吋點數，或叫 ppi (Pixel Per Inch每英吋像素數量)。
印刷到如今還如此，因為Printer和印刷機早超過眼睛需求，Epson 印表機當年達到1400dpi 大家好驚訝，現在，根本沒人在乎印表機細致度了，只在乎列印速度、防水、多功能等...因為再高，眼睛也無法分辨。
從前螢幕一直是72dpi（為什麽呢？），差別只在對角線幾吋的差別，4吋手機、10吋 Pad、42吋電視，沒人在細緻度上做文章，所以對 Android 來說，只要用比例代替尺寸就解決了啊！比如寬360 x 高480像素的螢幕上，如果一個正方形按鈕寬120 x 高120 像素，就標示寬33% x 25%即可，遇到不同尺寸螢幕按鈕就能等比例縮放。
好景不長，有個傢伙叫 Steve Jobs，他就愛改革不能偏安！他覺得手機螢幕是得整天盯著看的，那麽粗多傷眼啊！（我想他是老花眼了）所以他把 Apple 產品改成 Retina（視網膜）螢幕（手機300dpi；平板260dpi；電腦200dpi），螢幕細緻度跟印表機一樣，超過眼睛視網膜分辨極限！
從此Android各廠商展開「解析度大戰」，如 htc New One （M8） 5吋螢幕有 1920 x 1080， 441dpi！就是把一台 42 吋電視硬塞進口袋裏啊！
如果就把一個正方形按鈕設成螢幕寬度的33% x 高度的25%，
* htc One (M8) 看是高約2.3cm x 寬約3.6cm，算個大按鈕。
* 華碩平板電腦Trio TX201 11.6吋的螢幕，也是 1920 x 1080，那個按鈕在這臺小電腦裏高4.8cm x 寬6.4cm，比魔術方塊還大，能叫按鈕嗎！
* 另一個問題，本來120 x 120是正方形，但HTC 和華碩都變成長方形了！
Android 的機種多不勝數，每臺有不同螢幕尺寸、細緻度、長寬比等變數，可能尺寸比例失調問題，也可能變形問題，該怎麼解決？
【Android 專用的尺寸單位「dp」】
Android 第一支手機叫HTC G1 Dream，這臺手機的螢幕規格是：
3.2吋，320 x 480 pixel, 160 dpi。
這規格在 Android裏叫「mdpi」，在這元祖手機上的 1像素叫「1dp」或「dip」就是「Density-independent pixel」（與密度關聯的像素）。
舉例來說，如果按鈕設成80 x 80 pixel，
* 在G1裏是高 0.5 x 寬 0.5吋；
* 在另一支 3.2吋，640 x 960，320dpi 的手機裏，因為解析度是兩倍，就成了寬 0.25 x 高0.25吋了，剩一半大！
但如果設定80 x 80 dp，Android 會自動調整成160 x 160 pixel，尺寸看起來還是0.5 x 0.5吋，讓排版看起來仍然相同。
最近遇到這事，我把 Android 筆記找出來，整理如下。
-----------------------------------------------------------------
【Android 要設計幾種螢幕？】
 |
| 2013年7月，Android 有11868種機型！ |
* 印刷用，300dpi，紙張大小 A4/ Letter/ A3...
* 網站用，72dpi，螢幕大小 1024 x 768 pixel
Dot Per Inch 就是每英吋點數，或叫 ppi (Pixel Per Inch每英吋像素數量)。
印刷到如今還如此，因為Printer和印刷機早超過眼睛需求，Epson 印表機當年達到1400dpi 大家好驚訝，現在，根本沒人在乎印表機細致度了，只在乎列印速度、防水、多功能等...因為再高，眼睛也無法分辨。
從前螢幕一直是72dpi（為什麽呢？），差別只在對角線幾吋的差別，4吋手機、10吋 Pad、42吋電視，沒人在細緻度上做文章，所以對 Android 來說，只要用比例代替尺寸就解決了啊！比如寬360 x 高480像素的螢幕上，如果一個正方形按鈕寬120 x 高120 像素，就標示寬33% x 25%即可，遇到不同尺寸螢幕按鈕就能等比例縮放。
從此Android各廠商展開「解析度大戰」，如 htc New One （M8） 5吋螢幕有 1920 x 1080， 441dpi！就是把一台 42 吋電視硬塞進口袋裏啊！
如果就把一個正方形按鈕設成螢幕寬度的33% x 高度的25%，
* htc One (M8) 看是高約2.3cm x 寬約3.6cm，算個大按鈕。
* 華碩平板電腦Trio TX201 11.6吋的螢幕，也是 1920 x 1080，那個按鈕在這臺小電腦裏高4.8cm x 寬6.4cm，比魔術方塊還大，能叫按鈕嗎！
* 另一個問題，本來120 x 120是正方形，但HTC 和華碩都變成長方形了！
Android 的機種多不勝數，每臺有不同螢幕尺寸、細緻度、長寬比等變數，可能尺寸比例失調問題，也可能變形問題，該怎麼解決？
【Android 專用的尺寸單位「dp」】
 |
| MDPI 3.2 inch, 320 x 480 px, 160 dpi |
3.2吋，320 x 480 pixel, 160 dpi。
這規格在 Android裏叫「mdpi」，在這元祖手機上的 1像素叫「1dp」或「dip」就是「Density-independent pixel」（與密度關聯的像素）。
舉例來說，如果按鈕設成80 x 80 pixel，
* 在G1裏是高 0.5 x 寬 0.5吋；
* 在另一支 3.2吋，640 x 960，320dpi 的手機裏，因為解析度是兩倍，就成了寬 0.25 x 高0.25吋了，剩一半大！
但如果設定80 x 80 dp，Android 會自動調整成160 x 160 pixel，尺寸看起來還是0.5 x 0.5吋，讓排版看起來仍然相同。
以元祖 G1為基礎，Android 定義了 ldpi（120dpi）, mdpi（160dpi）, hdpi（240dpi）, xhdpi（320dpi）, xxhdpi（480dpi）, 幾種規格，最近又新增了超細緻的xxxhdpi（640dpi），螢幕光點密度一個比一個比一個高，但只要用 dp 當標準，都會自動縮放沒問題。
【怎麼開始設計？】
如用向量軟體（如 Illustrator, Firework, Sketch），圖案縮放不會造成模糊，可把畫面設成 MDPI 320 x 480（暫忽略dpi，因電腦都設72dpi），等繪圖、切圖完，以1倍、4倍輸出成 mdpi 和 xxxhdpi 兩包即可。
提醒：跟從前學的不同，從前手機運算能力弱，先出成從 mdpi 到 xxxhdpi不同的5個 folder，同一張圖在每個 folder 名稱相同，Android 會依照設備去抓最接近尺寸的圖稍微縮放。但現在手機運算能力超強（比一年前的電腦還強吧！），只要出最大的圖，手機會自動縮放，對手機來說很容易，但少了好幾包圖片，軟體還能瘦身。
如果你堅持用點陣軟體（Photoshop 等...），因為點陣圖放大會變形，所以只能縮小，那就只能把畫面設成 mdpi 的四倍，即1280 x 1920 pixel，依照這個比例輸出1倍的 xxxhdpi 和25%的 mdpi 兩包了。
個人覺得Adobe 的 Photoshop、Illustrator 系列做 APP 不太好用，PS的問題是得要放大，比如常用的12級字在320 x 480時看起來很自然，但到 1280 x 1920 時跟螞蟻差不多大，只好把字放大成100多級，我們很清楚12級和20級的差異，但100級和150級的大小差異沒這麽直覺，設計容易失準頭。
Illustrator 的問題是切圖不準確，會跑掉，有時一兩個像素的差別在螢幕上就看起來很怪。Photoshop 的切圖功能雖比 Illustrator 強但在同一個位置只能切一種方式，比起專為 UI 設計開發的 Sketch 可以把各種不同的切圖存在一個 Folder 裏，還可以切好幾種試試看，Photoshop 是龐大又難用。
但 Sketch 雖然強大、快速又好用，卻只有 Mac 版！用 Windows 的人只有另尋他法，或者繼續讓 Adobe 殘害。
其實很久以前 Adobe 併購 Aldus 時也買了它的 Fireworks，這軟體很適合做網頁和 APP，向量和點陣整合、切圖好快，但不知為何 Adobe 卻把這好東西給弄殘了，聽說不更新了。
對 Adobe 的思維感到不解啊！
【怎麼跟程式溝通？】
你會疑惑，既然只要 xxxhdpi 就好了，前面出一包 mdpi 要幹嘛？
那是跟程式溝通用的。
如果你的溝通對象是程式設計師（就是電腦裏沒有繪圖軟體，打開也不會用的人）而不是前端工程師（會寫程式，電腦裏也有繪圖軟體，你可以把 AI 檔直接給他的人），他會要你把所有的圖都切成透明背景的 png 檔，然後給他一張沒切的整個頁面視圖，把每個按鈕、Menu bar、icon 的長、寬、色彩、檔名都標示給他。
他不是整你，是因為雖然你切好圖了，但塗色、漸層、長寬、位置、動態等，在 Android 裏面可以用數字設定而不用把圖打包到 APP 裏，Android 規定，APP 上限50mb，數字輸入可以減肥，也加快運作速度。
如果他夠勤快，每個不知道資訊的圖，直接打開 mdpi 裏面同名檔案，就有長寬，色彩也可簡單的用工具測出來。
但他們通常沒這麽勤快，所以你要在整頁視圖上標示這些資訊，你要用 mdpi 把尺寸標出，可用 Markman 這個大陸開發的軟體把所有尺寸標示好，工程師可以看一張圖就好，如此貼心，當然會做得更快咯！
就這樣，供大家參考，這篇文章一方面提供資訊，另方面也複習知識用，寫錯了請告訴我哦！
附註：mdpi 的規格 寬320 x 高480 是 4:3 的比例，放大成 xxxhdpi 就是 寬1280 x 高1920 。
現在很多 Android 手機是做成 16:9 （iOS 是 16:10 ），如果你的目標手機也是，那就設成 寬1080 x 高1920，也就是 Full HD 規格。
其實，除非滿版貼圖才有影響，如果 icon 是會調整尺寸及位置。另外，Android App，為了適應各種螢幕，像 iOS 那樣100%符合設計位置尺寸不太容易，take easy！
【怎麼開始設計？】
提醒：跟從前學的不同，從前手機運算能力弱，先出成從 mdpi 到 xxxhdpi不同的5個 folder，同一張圖在每個 folder 名稱相同，Android 會依照設備去抓最接近尺寸的圖稍微縮放。但現在手機運算能力超強（比一年前的電腦還強吧！），只要出最大的圖，手機會自動縮放，對手機來說很容易，但少了好幾包圖片，軟體還能瘦身。
如果你堅持用點陣軟體（Photoshop 等...），因為點陣圖放大會變形，所以只能縮小，那就只能把畫面設成 mdpi 的四倍，即1280 x 1920 pixel，依照這個比例輸出1倍的 xxxhdpi 和25%的 mdpi 兩包了。
個人覺得Adobe 的 Photoshop、Illustrator 系列做 APP 不太好用，PS的問題是得要放大，比如常用的12級字在320 x 480時看起來很自然，但到 1280 x 1920 時跟螞蟻差不多大，只好把字放大成100多級，我們很清楚12級和20級的差異，但100級和150級的大小差異沒這麽直覺，設計容易失準頭。
Illustrator 的問題是切圖不準確，會跑掉，有時一兩個像素的差別在螢幕上就看起來很怪。Photoshop 的切圖功能雖比 Illustrator 強但在同一個位置只能切一種方式，比起專為 UI 設計開發的 Sketch 可以把各種不同的切圖存在一個 Folder 裏，還可以切好幾種試試看，Photoshop 是龐大又難用。
但 Sketch 雖然強大、快速又好用，卻只有 Mac 版！用 Windows 的人只有另尋他法，或者繼續讓 Adobe 殘害。
其實很久以前 Adobe 併購 Aldus 時也買了它的 Fireworks，這軟體很適合做網頁和 APP，向量和點陣整合、切圖好快，但不知為何 Adobe 卻把這好東西給弄殘了，聽說不更新了。
對 Adobe 的思維感到不解啊！
【怎麼跟程式溝通？】
你會疑惑，既然只要 xxxhdpi 就好了，前面出一包 mdpi 要幹嘛？
那是跟程式溝通用的。
如果你的溝通對象是程式設計師（就是電腦裏沒有繪圖軟體，打開也不會用的人）而不是前端工程師（會寫程式，電腦裏也有繪圖軟體，你可以把 AI 檔直接給他的人），他會要你把所有的圖都切成透明背景的 png 檔，然後給他一張沒切的整個頁面視圖，把每個按鈕、Menu bar、icon 的長、寬、色彩、檔名都標示給他。
 |
| 大陸做的 Markman，可以在標示上給你很多幫助 http://www.getmarkman.com/ |
如果他夠勤快，每個不知道資訊的圖，直接打開 mdpi 裏面同名檔案，就有長寬，色彩也可簡單的用工具測出來。
但他們通常沒這麽勤快，所以你要在整頁視圖上標示這些資訊，你要用 mdpi 把尺寸標出，可用 Markman 這個大陸開發的軟體把所有尺寸標示好，工程師可以看一張圖就好，如此貼心，當然會做得更快咯！
就這樣，供大家參考，這篇文章一方面提供資訊，另方面也複習知識用，寫錯了請告訴我哦！
------------------------------------------------------------
附註：mdpi 的規格 寬320 x 高480 是 4:3 的比例，放大成 xxxhdpi 就是 寬1280 x 高1920 。
現在很多 Android 手機是做成 16:9 （iOS 是 16:10 ），如果你的目標手機也是，那就設成 寬1080 x 高1920，也就是 Full HD 規格。
其實，除非滿版貼圖才有影響，如果 icon 是會調整尺寸及位置。另外，Android App，為了適應各種螢幕，像 iOS 那樣100%符合設計位置尺寸不太容易，take easy！
留言
張貼留言