如何在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 設定iphone6 及iphone6 plus 的製圖環境

這篇主要是介面如何在illustrator設定iphone6與 iphone6+ 的製圖環境。

過去iphone4s到5的改版加高了螢幕(480pt→568pt),對於介面的佈局影響不大,麻煩的反而是設計風格的調整,從寫實變成扁平化的風格,花了我好一段時間去調整app;

而iphone5→iphone6、6+的改版,我想才是設計師頭大的改版,應該還有蠻多人不知道怎麼處理,我找了一些資料,中文可以參考的資料不多,如果有興趣可以參考以下的網站:

The weirdness of the iPhone 6 Plus resolution and how to work around it

The Curious Case of iPhone 6+ 1080p Display

The Ultimate Guide To iPhone Resolutions

在ai要用什麼樣的尺寸來繪製iphone6、6+的界面,同時又能兼容iphone5的尺寸,這其實有點麻煩,原因在於iphone5與iphone6、6+的「可視範圍」根本不一樣…基本上就像是在iphone上做RWD…3種尺寸,同時又有@1X、@2X、@3X圖片的需求,怎麼做比好? 我想了幾個方案:

要看方案前,我們來比較以下裝置尺寸的大小,

iphone dimension

這張圖使用point作為的單位(pt-point是工程師在刻 ios介面統一的單位,跟android的dp類似),從上圖我們可以知道,iphone4s跟iphone5寬度一樣,iphone5高度略高,所以用iphone5為基礎去繪製介面的情況下,會超出iphone4高度的可視範圍,但我們可以去忽略它,因為使用者在操作介面時,用下滑的手勢就看的到內容,所以對於介面上的佈局影響不大。

iphone4andiphone5size-02

這張圖就可以看出,iphone4s到iphone5的改版,介面就只差在高度不同。

可是從iphone6、6+之後,除了尺寸變高外,寬度也變寬,可視的範圍整個變大,對使用者來說,當然是好事,因為可以看到的資料也就變多了,而開發app的設計師與工程師臉就綠了,因為同時要考慮三種寬度的繪製尺寸。

behance on iphone

從這張圖,就可以知道,在iphone5、6、6+的畫面上,資料的長度就會不一樣(紅框處),所以可能的作法就是固定左右的邊距,而資訊的區域,隨裝置大小來變動資訊量。

最直覺的做法就是刻三個不同的版…標三種不同的尺寸,也就是要做三種設計,再針對每一個裝置來進行設定…我想這應該是在考驗設計師與ios工程師的耐心吧!

所以我提供ai繪製的解決方案如下,

  • 方案一:只做2倍iphone5的版本,iphone6跟6+,就不要理他,讓系統自己去render出尺寸。
  • 方案二:做3倍的iphone6的版本,但設計時同時要考慮到iphone5、iphone6+的佈局。
  • 方案三:三個尺寸都做。

注意:以上方案是以ai為繪製工具,並且以pt做為單位基礎。

如果是方案一,

是以iphone5的版本刻,以640px*1136px的大小繪製,cadtools比例調整成2:1,iphone6跟iphone6+的畫面讓系統自己render,優點就是做一次就結束,缺點是,iphone6跟iphone6+的圖還有字會糊掉,就看大家強迫症的輕重了…

cadtools工具請看這篇

選擇方案一,會有一份設計稿,一分標示稿,@1x、@2x的素材包(cut&slice me @3x的版本還在開發中)

先講方案三,

全部都刻,在ai的設定如下:

  • iphone5 : 640px*1136px的大小下去繪製,cadtools比例調整成2:1來做標示。
  • iphone6:以750px*1334px 的大小繪製,cadtools比例也是2:1做為標示,icon的圖示,可以與iphone5的共用,都是@2X的大小。
  • iphone6+:以1242px*2208px的大小繪製,cadtools比例調成3:1來做標示,用裁圖工具,裁成@1X、2X、3X的圖。

所以最後應該會有三份設計,三份的尺寸標示稿,還有一份@1x、@2x、@3x的素材包,優點當然就是全部的尺寸都齊了,缺點就是很花時間…。

值得注意的是在iphone6+上,他會自動downsizing成1080px*1920px(原尺寸除以1.12)的尺寸…但這就不必理他了,因為不是我們可以控制的。但值得注意的事,ios有一個44pt的最小點擊區域原則,但是因為downsizing的關係,在iphone6+的畫面上,可能會不小心打破這個規則,也就是說假設你畫了一個112pt *112pt的元件,在畫面上會自動downsizing成100pt*100pt。

方案二,

也是我可能會採取的方式,但如果要採取這種方式,最好對於介面的尺寸與距離都有一定的敏感度與經驗,新手當然建議全刻過一次,可以更加熟練,ai設定如下:

設定一個1125(375*3)px*2001(667*3)px的繪製區域,cadtools比列調成3:1,在繪製版面時,因為要考慮到iphone5、與iphone6+的寬度,對於非固定寬度的物件,要有最小寬度限制,裁圖也是交給裁圖工具一次搞定。

在這樣的繪製條件下,只需要出一份設計稿,一份標示圖,一份@1x、@2x、@3x的素材包。

要注意的是,什麼樣的物件大小是要固定的,什麼樣的物件大小是可以變動的,一開始就要想好,而且最好要標示「最小寬度」,讓iphone5可以正常的顯示,這樣的優點就是出一次圖就可以解決,缺點就是要去想像iphone6+多出來的寬度(736-667=69pt)會填入什麼樣的內容。當然還有更好的方式,就是出一份完整的設計guideline,將所有有物件模組化,在不同的裝置下如何顯示,都能夠提供清楚的說明,這樣往後只需要標示大略的版面配置,物件的部份請工程師按照guideline的方式去處理,應該也可以省不少事。

但在這樣的方案下,mockup只能做iphone6的,所以除非客戶有特別要求,否則iphone6的尺寸,應該會是主流的規格。

我簡單示範一次我會怎麼標示:

iphone6_mark-03

 

上圖是我以1125px*2001px所繪製出來的圖,我的標示會分三種顏色,灰色跟紅色藍色,灰色代表是固定尺寸,不可變動,紅色是最小寬度(for iphone5),藍色則是auto,會隨寬度調整大小。

這樣的標示方式,我想應該也就夠清楚了~~但建議還是要多與工程師溝通做法,畢竟做法掌握在工程師手中,溝通才是解決問題的根本之道啊!!

以上是我個人建議的方案,如果有任何疑問,或有更好的做法都歡迎討論 :)。

 

 

 

 

Illustrator專用標示文件工具 CAD-tools

這次來介紹一下一套我常用的標示工具CAD-tools,這套工具是由Hot-Door所開發的ai插件,安裝後就可以像autocad一樣,在ai的文件進行標示的動作。一般比較常用在空間設計上,但用在進行介面的標示,也是非常好用的!

Hot Door

但這套軟體本身並不便宜,所以…google大神快拜…

因為我是用ai 來進行介面的繪製,基本上我不會再把圖出到ps來進行標示,目前我還沒找到比CAD-tools 更方便的方法。至於ps的話,有很多工具可以選擇,如果有興趣可以參考這篇文章:

標示文件神器:specKing

這套軟體的安裝方式就像一般的AI的插件安裝方式一樣,安裝後會在視窗裡找到這套插件

Image 1

同時工具區,也會出現cad-tools的可用工具按鈕,基本上會使用到的工具不多,通常進行介面的標示只會用到:垂直距離、水平距離、資訊的標示(顏色、字體大小、圓角…)、還有比例設置功能,大概這樣就很夠用了。

2015/03/30補充 :在進行標示時,請先至 視窗 / CADtools / 顯示CAD單位 →將單位設置成「」,這裡的點代表的就是px,其他設定還有小數點,暫時用不到。

  1. 平行尺寸-通過線:標示平行尺寸的距離
  2. 垂直尺寸-通過線:標示垂直尺寸的距離
  3. 標示:標示文字內容
  4. CAD比例:調整比例,如果是2:1,就是你畫一個10px*10px的物件,標出來的值會是5*5。這超好用,因為不用再去計算@2x或@3x;透過比例的設定,如果是要出@3x的圖,將CAD比例設成3:1,標出來的值假設是1(單位:點),洽好就是android(XXHDIP)的1dp。所以我都出大圖,透過比例功能的轉換成pt或dp的單位,這之後會非常省事。

cadtools02

要特別注意的是,標時文件時,會在圖層中產生一個維度層,用來紀錄每個標示的內容,而我在標示時,通常會再建立一個measure block圖層,來進行標示,可以參考下圖:

cadtools03

通常我會利用measure block來測量距離,標示完後,就直接取消顏色留下路徑,但如果刪除路徑,那維度層的標示也會同時消失,所以把measure block分開於其他圖層,是為了讓文件乾淨,不要跟其他物件混在一起,方便管理。

最後標示完的文件會像這樣:

cadtools04

超有成就感的呢!!

最後要再強調一下,給工程師的文件一定要清楚,如果不確定怎麼標示,在標示時可以與工程師溝通,正確的文件標示,可以降低溝通成本,通常我標示完文件過去,就很少再回來了,所以標示清楚與準確對於一個好的介面設計師而言是很重要的,此外怎麼將與工程師的溝通成本降到最低,那就是建立一個完整的設計guideline,怎麼建立? 這之後我再說明吧!

有任何問題,或有更好的方法都歡迎提出唷!