如何在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圖片的需求，怎麼做比好? 我想了幾個方案：

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

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

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

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

從這張圖，就可以知道，在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的尺寸，應該會是主流的規格。

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

 

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

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

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