如何在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介面的單位,請參考下圖。

andorid_size

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

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

http://screensiz.es/phone

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

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

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

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

  2. 將cadtools的比例設為3:1

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

  3. 使用cut&slice me 切圖

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

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

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

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

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

  6. 字體大小1sp=3px

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

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

 

廣告

對「如何在illustrator 上設定Android的製圖環境」的一則回應

  1. 我想請問一下, 如果Ps or Ai檔案設定72ppi . 1280*720(我的手機解析) 這樣我設計的畫面就是以2x (xhdpi)為主嗎?
    另外如果我想以1x當基準繪製ui再放大, 是否要設定較低解析的螢幕尺寸來設計畫面?

    1. 沒錯唷!!~~

      第二點,解析度就是72ppi,不用變喔,只是做小再放大,要考慮到線條的問題~~
      如果1x時,是用1px粗的線條,放大成3X一樣是1px唷!

留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s