為什么375x667是移動端原型設(shè)計(jì)的最佳分辨率
2017-03-19閱讀659
轉(zhuǎn)自：浪子說（ID：langzisay）
出處：http://langzipm.mikecrm.com/kTIuq7Q
部分PM在設(shè)計(jì)移動端產(chǎn)品的時(shí)候，往往是隨意畫了個原型尺寸或者上網(wǎng)找個模板套進(jìn)去，當(dāng)然也有部分知道用375x667比較好，但是不知其所以然。
接下來我來講清楚為什么以及前世今生。
一、原型尺寸的歷史
既然是設(shè)計(jì)移動端原型，理論上來說最佳的原型尺寸最好是和你的目標(biāo)用戶手機(jī)尺寸保持完全一致。
好比iPhone剛出來的時(shí)候，設(shè)計(jì)iOS APP原型使用iPhone自身分辨率320x480就是最合適的。
后來隨著Android崛起，各種國產(chǎn)機(jī)盛行，屏幕割裂嚴(yán)重，部分PM使用720x1280設(shè)計(jì)原型，或者繼續(xù)沿用之前的尺寸320x480。
再后來iPhone6/6plus發(fā)布，屏幕分辨率的分裂也越來越嚴(yán)重。
此時(shí)最好有一種通用方案來解決這個問題，兼顧所有的屏幕分辨率。
二、確定適配屏幕的方案
考慮到屏幕分辨率已經(jīng)有數(shù)百種，并且兼顧用戶量少的機(jī)型沒有價(jià)值。所以一一兼顧所有的屏幕是不現(xiàn)實(shí)的事情。
所以大家都是兼顧用戶量使用最多的幾款分辨率。用戶量很小的屏幕不處理。
如果有必要的話，部分屏幕單獨(dú)處理。
三、手機(jī)屏幕分辨率的分布
Android分辨率分布
ios分辨率分布
四、先考慮iPhone的原型尺寸
iPhone的分辨率是從320x480，到640x960，到640x1136，到750x1334，一直演變到1242x2208。
由于主要是750x1334最大、所以考慮它作為原型設(shè)計(jì)尺寸，然后看是否可以兼顧其他分辨率。
而第二分辨率占比是1242x2208，是1.5倍的等比關(guān)系。
第三分辨率640x1136,約等于0.85的關(guān)系。
至于其他的分辨率占比已經(jīng)很低，不是等比關(guān)系。可以在碰到情況的在處理，甚至不處理。
所以iOS APP的視覺稿用750x1334來做比較適合，對于1242x2208，如果要求高就單獨(dú)設(shè)計(jì)，要求不高就等比放大即可。而640x1336，直接等比縮小即可。
對于iOS APP的原型，我們PM只需考慮等比關(guān)系即可，那就是750x1334?？紤]到畫原型的時(shí)候方便與否，最好使用375x667。另外也是iOS官方定義的iphone6/6s/7的邏輯分辨率。
五、再考慮Android的原型尺寸
iPhone的分辨率太分散，只考慮占比最大的前幾個，720x1280、1080x1920、480x854、540x960，總計(jì)占比77%。
其中720x1280是和750x1334等比關(guān)系,同理1080x1920,480x854，540x960都是約9:16。
所以其實(shí)還是一回事，原型直接使用375x667。
六、為什么不使用1280x720作為標(biāo)準(zhǔn)
可以，如果你們的用戶群以Android為主，或者你們的PM都是用的Android手機(jī)。
另外就是大部分PM、UI使用的是是iPhone，所以更愿意以iPhone的邏輯分辨率來設(shè)計(jì)罷了。
包括Adobe的原型設(shè)計(jì)工具Experience Design CC也是推薦以375x667來設(shè)計(jì)，或者次選320x640。
七、延伸一下內(nèi)容
建議使用iPhone6/iphone6s/iphone7來做了原型之后，使用手機(jī)來預(yù)覽效果。
如果你使用Axure設(shè)計(jì)原型的話，建議375x667-20，這樣方便在手機(jī)上直接查看原型。減去狀態(tài)欄20px是因?yàn)锳xure導(dǎo)出的原型在iOS上無法隱藏它。
八、查看原型效果
分享一下我用該方法做出的原型，或者訪問網(wǎng)址http://51prd.com/demo2/
如果你用iphone6/6s/7在手機(jī)上請用safari打開該網(wǎng)址并發(fā)送到桌面，可以查看所有頁面以及交互，和一個真實(shí)的APP，僅僅差了邏輯和視覺。
九、總結(jié)
視覺設(shè)計(jì)領(lǐng)域，當(dāng)下的通用做法是用iPhone6s的尺寸750x1334來設(shè)計(jì)，已經(jīng)是形成了行業(yè)的規(guī)范。但是產(chǎn)品設(shè)計(jì)領(lǐng)域并沒有形成，其實(shí)還是有一定必要的。
所以我就從原型設(shè)計(jì)層面普及一下這個來龍去脈，供新手PM們了解一下。
