這篇主要是介面如何在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,會隨寬度調整大小。

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

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

 

 

 

 

Posted by:Rei

介面設計師

對「如何在illustrator 設定iphone6 及iphone6 plus 的製圖環境」的一則回應

  1. wesley你好:
    我是ui設計方面的新手,在你的blog裡學到很多東西,表達萬分謝意
    目前我ui設計的流程與你相同,在AI設計完成介面後,再到PS做輸出
    這邊有幾個問題要請教
    (1)有時在illustrator上設計的icon尺寸,轉成psd檔之後,某些icon尺寸似乎沒法一致(1、2px的落差)
    (2)原本製作ui介面是以@2x來製作,直接將介面中所有的元件放大1.5倍當作@3x的元件套用會出現問題嗎?(如果原本元件不是偶數倍數)
    (3)將AI的向量元件直接丟到PS時,有時在PS上會看到半透明的邊,程式套圖時,會有產生模糊的邊緣?
    謝謝你~^^

    1. 希望我提供的資訊對你有所幫助:)
      第一個問題:可能要請你提供圖檔測試一下才有辦法知道問題,但從ai直接複製過去的圖,如果是維持智慧型文件的話,尺寸照理來說應該會一致,先檢查你在ai繪圖時是否有無切齊像素格點吧。
      第二個問題:照理來說應該不會有太大的問題,但是要注意的是,一些線條如果沒有「展開」的話,你放大的同時,比例也會跑掉。
      第三個問題:可能要請你提供圖檔,程式套圖時會有模糊邊緣大多是素像不足。

留言

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

WordPress.com 標誌

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

Google photo

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

Twitter picture

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

Facebook照片

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

連結到 %s