電腦螢幕與手機螢幕PPI的關係

關於 ppi (pixel per pnch)每英吋像素,在前幾篇文章有提到。

這篇來討論一下,關於 ppi 在電腦螢幕與手機螢幕之間的關係。

1inchpx

上圖的視窗,對於常常在使用繪圖軟體的人應該不會陌生,解析度通常是預設72 ppi,也就是指在1英吋裡會有72個像素,我們也可以隨意的去調整ppi的值,所以在電腦的操作上,ppi 指的就是這件事。

那這跟手機螢幕所指的 ppi 有什麼關係? 就定義(「每英吋裡有多少相素」)來看都是一樣的。

手機的螢幕 ppi 的計算公式如下:

ppicount從上面的公式來看,我們一樣可以得到手機螢幕的 ppi 。為什麼要用對角線來算,因為各家的尺寸不同,用對角線最公平啦,~

那我們再看下一張圖。

squareppi

想像這張正方型的圖片,就是手機螢幕,那這個正方型的 ppi 是多少? 首先我們先把 z 的長度,透過斜邊公式計算出來,再根據 ppi 的公式求得,一個1英吋72*72解析度的螢幕,ppi大約也是72,但其實這樣的算法是多此一舉,一定會是72 ppi,因為只是不同單位在轉換而己,而且電腦螢幕與手機螢幕的像素應該都是接近「正方型」的,所以在正方型的像素的條件下,未必要用對角線來求 ppi,只要知道寬、高,也是可以求算ppi。

重點是想討論一下,如果在製圖時,將製圖的尺寸設成手機螢幕的物理尺寸,然後再調整 ppi 的值,是不是一個可行的方式?

例如m7的螢幕尺寸是4.1(inch)*2.3(inch), ppi 是468,那將數值作為繪圖尺寸,應該是可行的?

感覺上好像是可以4.1*468=1919, 2.3*468=1076, 其實己經很接近原來的1920*1080的解析度了。

但實際上應該不好操作,因為要考慮到切圖、還有單位的換算、還有不同裝置的尺寸大小…

那不如就用預設的72 ppi,在1920*1080上製圖就好…

以上只是我鑽牛角尖思考,當然這篇一點都不實用…

廣告

如何在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,會隨寬度調整大小。

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

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