為什么375x667是移動端原型設(shè)計的最佳分辨率

2017-03-19閱讀659

轉(zhuǎn)自：浪子說（ID：langzisay）

出處：http://langzipm.mikecrm.com/kTIuq7Q

部分PM在設(shè)計移動端產(chǎn)品的時候，往往是隨意畫了個原型尺寸或者上網(wǎng)找個模板套進去，當(dāng)然也有部分知道用375x667比較好，但是不知其所以然。

接下來我來講清楚為什么以及前世今生。

一、原型尺寸的歷史

既然是設(shè)計移動端原型，理論上來說最佳的原型尺寸最好是和你的目標用戶手機尺寸保持完全一致。

好比iPhone剛出來的時候，設(shè)計iOS APP原型使用iPhone自身分辨率320x480就是最合適的。

后來隨著Android崛起，各種國產(chǎn)機盛行，屏幕割裂嚴重，部分PM使用720x1280設(shè)計原型，或者繼續(xù)沿用之前的尺寸320x480。

再后來iPhone6/6plus發(fā)布，屏幕分辨率的分裂也越來越嚴重。

此時最好有一種通用方案來解決這個問題，兼顧所有的屏幕分辨率。

二、確定適配屏幕的方案

考慮到屏幕分辨率已經(jīng)有數(shù)百種，并且兼顧用戶量少的機型沒有價值。所以一一兼顧所有的屏幕是不現(xiàn)實的事情。

所以大家都是兼顧用戶量使用最多的幾款分辨率。用戶量很小的屏幕不處理。

如果有必要的話，部分屏幕單獨處理。

三、手機屏幕分辨率的分布

Android分辨率分布

ios分辨率分布

四、先考慮iPhone的原型尺寸

iPhone的分辨率是從320x480，到640x960，到640x1136，到750x1334，一直演變到1242x2208。

由于主要是750x1334最大、所以考慮它作為原型設(shè)計尺寸，然后看是否可以兼顧其他分辨率。

而第二分辨率占比是1242x2208，是1.5倍的等比關(guān)系。

第三分辨率640x1136,約等于0.85的關(guān)系。

至于其他的分辨率占比已經(jīng)很低，不是等比關(guān)系?？梢栽谂龅角闆r的在處理，甚至不處理。

所以iOS APP的視覺稿用750x1334來做比較適合，對于1242x2208，如果要求高就單獨設(shè)計，要求不高就等比放大即可。而640x1336，直接等比縮小即可。

對于iOS APP的原型，我們PM只需考慮等比關(guān)系即可，那就是750x1334。考慮到畫原型的時候方便與否，最好使用375x667。另外也是iOS官方定義的iphone6/6s/7的邏輯分辨率。

五、再考慮Android的原型尺寸

iPhone的分辨率太分散，只考慮占比最大的前幾個，720x1280、1080x1920、480x854、540x960，總計占比77%。

其中720x1280是和750x1334等比關(guān)系,同理1080x1920,480x854，540x960都是約9:16。

所以其實還是一回事，原型直接使用375x667。

六、為什么不使用1280x720作為標準

可以，如果你們的用戶群以Android為主，或者你們的PM都是用的Android手機。

另外就是大部分PM、UI使用的是是iPhone，所以更愿意以iPhone的邏輯分辨率來設(shè)計罷了。

包括Adobe的原型設(shè)計工具Experience Design CC也是推薦以375x667來設(shè)計，或者次選320x640。

七、延伸一下內(nèi)容

建議使用iPhone6/iphone6s/iphone7來做了原型之后，使用手機來預(yù)覽效果。

如果你使用Axure設(shè)計原型的話，建議375x667-20，這樣方便在手機上直接查看原型。減去狀態(tài)欄20px是因為Axure導(dǎo)出的原型在iOS上無法隱藏它。

八、查看原型效果

分享一下我用該方法做出的原型，或者訪問網(wǎng)址http://51prd.com/demo2/

如果你用iphone6/6s/7在手機上請用safari打開該網(wǎng)址并發(fā)送到桌面，可以查看所有頁面以及交互，和一個真實的APP，僅僅差了邏輯和視覺。

九、總結(jié)

視覺設(shè)計領(lǐng)域，當(dāng)下的通用做法是用iPhone6s的尺寸750x1334來設(shè)計，已經(jīng)是形成了行業(yè)的規(guī)范。但是產(chǎn)品設(shè)計領(lǐng)域并沒有形成，其實還是有一定必要的。

所以我就從原型設(shè)計層面普及一下這個來龍去脈，供新手PM們了解一下。