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

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

之前的文章有提到過,關於切圖一事,我大多交給工具來處理 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 設定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,會隨寬度調整大小。

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

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