如何在Illustrator 上設定Android的製圖環境

使用illustrator繪製介面的人不多，而且網路上可以參考的文章也很少，記得我第一次接觸到介面設計時，公司交接給我的是一份又一份的紙本文件，所有的標式方式都是以人工的方式進行標示，因為頁面很多，有時會由不同人來進行文件標示，每個人標的都不太一樣，最後刻出來的介面就得經過不斷的修正與調整。

為了統一標示，所以我找了很多文章，但大多的文章頂多跟你說明一些像素原理，還有單位的轉換，真正教你怎麼設定或怎麼標示的文章不多。

於是，我只好自己摸索。與工程師溝通後，也找到一些比較好的製圖的方式，這篇文章我主要說明如何在illustraor 上設定android的製圖環境。

基本上，繪製android的介面前，我先大略解釋一下什麼是px(pixel)，什麼是ppi(pixel per inch)跟dpi(dots per inch)，當然有很多文章可以參考，如果己經了解，可以直接跳過，看我最後的設定。

• 像素(px)

  大家都很熟悉，就是電腦上圖片所顯示的單位，我們常常說的，圖片是1920px*1080px ，指就是以像素做為單位。

• 每英吋像素(ppi)

  指的是每一英寸上有多少像素，而我們一般在看螢幕的細膩度就是在看這個單位，每一隻手機的尺寸都不相同，所以ppi是一個比較各家手機畫面細緻度的一個「物理標準」。而ppi是用螢幕對角線的長度所計算出來的，所以各家手機廠商的長寬比不同，計算出來的ppi也就會不一樣，這裡只要記得一個原則就好，在相同的解析度下，手機的尺寸越大，ppi就越低，簡而言之，ppi就是螢幕像素的物理密度。舉個例，htc m8的手機尺度是5吋，m7是4.7吋，一樣是1920px*1080px的解析度，誰的ppi高?  答案是m7。

• 每英吋點(dpi)

  指的是每一英吋上有幾個點，而點(dots)是什麼? 看指的是什麼。也就是說，如果有人跟我說dpi，我必需要知道他講的是什麼的dpi，dpi是需要被定義與指定的，例如印刷與螢幕對於dpi的需求也就不同，印刷至少要300dpi，而在螢幕的圖片只需要72dpi就夠了。而在電腦或手機的螢幕上的1dot=1px的條件下，ppi跟dpi指的相同的事情。

就是因為每一家andorid裝置的尺寸都不太一樣，所以google必需制定一個標準(前面所提的dpi需要被定義或指定)，規定以160dpi為基礎，往上延申尺寸，也就是說在每英吋160點的條件下，1dot就等於1px，此外以「獨立像素(dp)」做為開發andorid介面的單位，請參考下圖。

http://developer.android.com/design/style/devices-displays.html

而身為一個介面設計師，最想知道的是，到底要用多大的尺寸來繪製介面?因為在電腦上是以px作為單位，而andorid是以dp作為單位，1dp到底要等於多少px是我們在意的事情。

http://screensiz.es/phone

這個網站有提供相對的倍率做為參考，px density的倍率就是大略的比率， 300%指的就是1dp=3px，如果不想深究(我想大概也不需要花太多時間去深究)，就以這個比例下去繪製，誤差會很小。

以上如果都看不太懂也沒關係，就照我下面的設定下去畫就對了

以1920px*1080px作為繪製尺寸

而我個人的習慣，我會以1920px*1080px，作為繪製的尺寸，因為這個尺寸是主流的高階手機規格，從4.7~6吋的螢幕目前都是以這個尺寸為主，想知道自己的手機是什麼尺寸，就直接截圖，丟回電腦看就知道了，就目前的手機來看，大概都是這樣的尺寸。

將cadtools的比例設為3:1

這個我就不多說了，設成3:1，不懂的看這篇文章。
Illustrator專用標示文件工具 CAD-tools

使用cut&slice me 切圖

而切圖的部份，就交給cut &slice me 去處理，一次滿足所以有的dpi，我是屬於放大縮小派的，因為我覺得這樣省事，而且要做介面的mock up 或demo也比較方便。

繪製時盡量符合material design的規範與標準

google 出了一份material design的設計準則，
material design
個人建議可以google的guideline作為繪製的準則，雖然他的guideline上是以dp作為單位，根據我的實作經驗，在1920px*1080px的大小繪製介面，會完全match material design的尺寸。

任何的元件，盡量以8dp的倍數作為尺寸標準

在material design的標準下，你會發現大多的元件都是以8dp的倍數作為尺寸標準，而在px的環境下，要乘3倍去繪製，也就是說要畫一個8dp*8dp的正方型，用24px*24px 下去畫就對了。

字體大小1sp=3px

sp是android的字體單位，而在字體大小的設定上，1sp會等於3px，也就是如果要模擬12sp的大小，將字體也設定為px，用36px下去做對了，之後我會針對字體的部份再做說明。

基本上按上我建議的設定下去做，繪製出來的介面誤差會很小，剩下的就是在不同裝置上的微調了，在我的經驗中，除了比較舊的機型有些會跑版外，基本上大部份都符合我預期的設定，當然這些都是我自己實作出來的經驗，繪製介面的方式有很多，如果有更好的方式，也都歡迎交流。