切圖的細節-不會消失的一像素

前陣子跟另一位設計師討論到關於切圖的細節,所以特別寫了這篇文章來討論。

之前的文章有提到過,關於切圖一事,我大多交給工具來處理 cut&slice me,而這套工具的使用,有一個條件,是要用最大的解析度做為切圖的基礎,再生成不同解析度的圖片,也就是我先做大3x,再透過工具縮成1x,而在程式批次縮小的過程,我想大概自動化的流程就是:平面化→縮小→輸出。所以如果我畫了一個 3px*3px 的 block,照他的規則,應該會自動產生出 @1x 的 1px*1px、@2x的2px*2px及 @3x的3px*3px  的切圖,如下圖。

3pxdottest2


從上圖中可以知道 3px*3px  的 block 會分別縮小成不同解析度下需求的尺寸。

接下來問題來了,如果繪製的圖小於 3px*3px 會發生什麼事情?我們先來看 2px*2px 的 block 輸出成切圖的結果。

2pxdottest

很明顯的 2px*2px 的 block在 @2x跟@1px 的條件下,己經是縮小的極限了,不會再更小,所以停留在 1px。

那如果是 1px*1px的block,會是什麼樣的情況?

1pxdottest

最小就是1px,不會再更小了,因此我們就可以知道,小於1px的大小在平面化再縮小成切圖的時候,是沒有意義的。

但光是這樣的討論還不夠,會那麼在意切圖的細節,原因在於設計 icon 時,會用到線條,而且線條不會剛好切在每個格點,或是帶有孤度…等等,因此線條或區塊間通常會有間隙,所以我用一個比較極端的方式來比較,存在不同像素的間隙時,切出來的圖會有什麼不一樣。

cols

我先畫了一些固定高度為 6px 長方型,然後給他們不同的間隙,在還沒做切圖之間,我們大概可以猜想一下,切圖會變成什麼樣子,高度在 @3x 的時候會是 6px,@2x時會是4px,@1x時會是2px;而寬度的部份,根據我上面的測試,寬度為 3px 的時候,@2x 會是 2px,@1x 會是 1px,而寬度為 2px 時,在 @2x 之後都是 1px,寬度是 1px 的情況下就都是 1px。

但間隙會怎麼處理,如果照這樣的規則,切出來的圖一定會分不出來間隙,但我們可以直接看結果:

mixnobg

@3x 的情況下,應該沒什麼太大的問題,間隙還是很清楚,但是在 @2x 跟 @1px 的情況下,間隙小於 1px 的情況下,發現電腦會自動幫你補上灰色,有些原本應該要是黑色的區塊,也變灰色了,雖然我不太知道灰色是怎麼決定的,但我想應該是透過補差法的方式而來的,但這就是電腦在做的事情了;我們要知道的是,在遠看的情況下,它依然還保有一定的辨視度。

但更神奇的是,電腦補的不是實色的灰色,而是半透的顏色(*png才會的格式才會保有透明度),如下圖:

mixwithbg

我們可以發現,這些灰色,是帶有透明度的黑色,所以在不同的背景色上,做大圖來縮小圖,只要符合解析度的需求餵圖,間隙的感覺不會消失,這些小於 3px 的間隙會用某種方式來呈現,所以 1 像素永遠不會消失。正常螢幕解析度看是像這樣的:

normalview2

 

以上大概就是我的測試結果。

但對於介面設計還有 icon 的繪製有什麼樣的建議,電腦會自動幫你補足這 1px 的間隙,如果切出來的圖會歪,那大概就是對齊的問題了,另一點就是如果要保有比較好的銳利度,或許算好px再繪製icon,會是比較好的方式,當然這就比較困難一些。

但一般人的眼睛很難去辨視 1px 的差異,尤其是在高解析度的螢幕上那就更難了,所以對齊倒是可以努力去方向,那就回到我的另一篇文章(如何在illustrator上設定完美像素(pixel perfection)中所提的,對稱圖形盡量用偶數去算,比較不會有歪掉的感覺。

以上小小討論,如果有任何錯誤或補充,歡迎討論。

廣告

介面設計實用工具整理

工具不在多,在於精。 不定期補充,歡迎推薦!

Android


iOS


AI

  • Cadtools – HotDoor  || 標示工具(付費軟體,google大神求解)

PS


Tools


免費素材資源


wireframe tools

  • justinmind || 好用的wireframe 工具
  • axure || 網站、app,架構 pm 必備工具

Prototyping – 基本

  • invisionapp || 簡易,未付費只能用一個專案
  • pop || 台灣團隊的作品,未付費能使用兩個專案

Prototyping – 進階

  • origami || 這套後面是facebook的團隊在開發維護的,但要有程式基礎
  • pixate || 比origami易上手,被google收購,免費開放使用!
  • hype 3 || 免程式碼   Akane Lee 推薦~
  • principle || 新推薦!

推薦部落格


 

一些對岸的教學網站

台灣加油啊!

如何在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專用標示文件工具 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,怎麼建立? 這之後我再說明吧!

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

4am democracy 海報視覺分析(part2)

黃金分割比率(golden raito), 指的是1:1618的矩型,這矩型從何而來,如果有興趣的話,可以去google一下。基本上黃金比例矩型,是從許多生物的觀察中,並透過數學得到一個無理數的規則,可能是神奇海螺鸚鵡螺螺紋的規則、人類手臂的長度、自然美景…等等,總之在這樣的比例下,可能會符合生物的生長規則,同時也可能會符合人類的於視覺上美感的感受。

 

那運用在海報的設計上是不是有相同的規則呢?有興趣的人可以參考這一本書《Geometry of Design:Studies in Proportion and Composition(設計幾何學:發現黃金比例的永恆之美)》,或許可以得到一些答案

 

但本篇的重點,在於這一次4am democracy 的海報,是否符合黃金分割準則,我想就一步一步來檢驗,到底這張海報是如何去做版面上的配置?到底圖要多大?高度、寬度怎麼決定?真的一切是憑設計師的美感嗎? 或許是,但是美感還是有規則可尋,就讓我繼續看下去~

 

這張海報網路上有兩種尺寸3461×6295(px)、3980×6260(px),我認為3980×6260(px)是原始稿,所以我以這個尺寸當作分析的標準,如果對於另一個尺寸有興趣的,也可以動手試試看。
shot1
一開始先在標題、段落、圖片,標示上對齊的參考線,可以找到一些對齊的規則,好奇的是,這些高度,對齊的位置怎麼決定的?接下來,我將在圖面上加上黃金分割比率的參考線,黃金分割比率要怎麼畫,請參考這裡。先從圖的上方,畫出一個黃金比例的矩形,如下圖。

 

shot2_
從圖中我們可以看到,畫出來的矩形下緣,會超出海報的下緣,也就是說,這張海報小於黃金矩型的尺寸,但是從中我們己經可以發現幾個有趣的交點,這些交點決定了photo1上方邊界的位置(B)及左下角(A)的位置(沿著圓弧)。

 

shot3_
接下來就是photo1的下方高度要怎麼決定,只要知道photo1下方的高度,就可以知道photo1的高度,先將原來尺寸從左上到右下標示出另一條對角線(紅線),找到交點E,與photo1之間的距離,恰好大致等於海報下方邊界到photo1之間的距離,因此我們就可以找出photo1的大小。
shot4_
最後,我們要找出photo2的位置,先從寬度找起,寬度是從交點C往上延伸,會發現 交點C上的垂直線條,剛好切到photo2的左側,寬度大概知道了,接下來比較複雜的地方是高度,先從剛剛畫出來的黃金矩型,找出中點的水平線,會發現photo2的上緣恰好在黃金矩型中間的位置,photo2上方邊界位置決定,可是高度怎麼進定的?圖中中線到交點D的垂直距離,似乎還不足photo2的高度,多的那段高度是怎麼出來的?其實就是兩個矩型高度的差距(黃色方塊處),寬度高度確定後,photo2的大小與位置大致上就出來了。

 

透過上述的方法,就可以找出這兩張圖大致上定位的方式,當然其他文字或許也有比較特殊的定位方式,就留給有興趣的人去檢驗吧!

 

當然有人會覺得,一張海報有需要用到特別去運用黃金分割率來配置嗎? 當然憑經驗豐富設計師的美感,在無意的情況下的設計,可能會恰好符合黃金分割,但是那是在不斷的調整與修正的情況下,得到的一個結果,但考慮到這張海報僅只有三天的時間就要刊出,我想為了時間也是有經過一些巧思來快速的進行版面的配置。

 

最後我從設計幾何學這本書中,得到一句話,或許可以解釋大多數人對於黃金比例的疑惑:
「數學上的表示模數,僅能用來驗證人類直覺的洞察力;黃金分割準則,亦僅用來定義藝術家直覺認定的理想比例,因為這是一種檢驗方式,非常一套創作體系。(Adolphe Mouron, 1901-1986)

 

所以,黃金分割準則,只是用來驗證作品,不建議直接用來當創作工具;基本功還是很重要,不斷的發想,不段的修正,在大自然的定律下,美感自然就會碰巧的符合黃金分割準則;走捷徑,可能只會限制創作力的發揮。
以上個人小小心得~~歡迎指教。