為什麼375×667是移動端原型設計的最佳分辨率

ADVERTISEMENT

部分PM在設計移動端產品的時候,往往是隨意畫了個原型尺寸或者上網找個模板套進去,當然也有部分知道用375×667比較好,但是不知其所以然。接下來,我來講清楚為什麼以及前世今生。

ADVERTISEMENT

原型尺寸的曆史

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

好比iPhone剛出來的時候,設計iOS APP原型使用iPhone自身分辨率320×480就是最合適的。

後來隨著Android崛起,各種國產機盛行,屏幕割裂嚴重,部分PM使用720×1280設計原型,或者繼續沿用之前的尺寸320×480。

再後來iPhone6/6plus發布,屏幕分辨率的分裂也越來越嚴重。

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

確定適配屏幕的方案

考慮到屏幕分辨率已經有數百種,並且兼顧用戶量少的機型沒有價值。所以一一兼顧所有的屏幕是不現實的事情。

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

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

手機屏幕分辨率的分布

Android分辨率分布

ios分辨率分布

ADVERTISEMENT

先考慮iPhone的原型尺寸

iPhone的分辨率是從320×480,到640×960,到640×1136,到750×1334,一直演變到1242×2208。

由於主要是750×1334最大、所以考慮它作為原型設計尺寸,然後看是否可以兼顧其他分辨率。

而第二分辨率占比是1242×2208,是1.5倍的等比關係。

第三分辨率640×1136,約等於0.85的關係。

至於其他的分辨率占比已經很低,不是等比關係。可以在碰到情況的在處理,甚至不處理。

所以iOS APP的視覺稿用750×1334來做比較適合,對於1242×2208,如果要求高就單獨設計,要求不高就等比放大即可。而640×1336,直接等比縮小即可。

對於iOS APP的原型,我們PM隻需考慮等比關係即可,那就是750×1334。考慮到畫原型的時候方便與否,最好使用375×667。另外也是iOS官方定義的iphone6/6s/7的邏輯分辨率。

再考慮Android的原型尺寸

iPhone的分辨率太分散,隻考慮占比最大的前幾個,720×1280、1080×1920、480×854、540×960,總計占比77%。

其中720×1280是和750×1334等比關係,同理1080×1920,480×854,540×960都是約9:16。

所以其實還是一回事,原型直接使用375×667。

為什麼不使用1280×720作為標準

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

另外就是大部分PM、UI使用的是是iPhone,所以更願意以iPhone的邏輯分辨率來設計罷了。

包括Adobe的原型設計工具Experience Design CC也是推薦以375×667來設計,或者次選320×640。

延伸一下內容

建議使用iPhone6/iphone6s/iphone7來做了原型之後,使用手機來預覽效果。

如果你使用Axure設計原型的話,建議375×667-20,這樣方便在手機上直接查看原型。減去狀態欄20px是因為Axure導出的原型在iOS上無法隱藏它。

查看原型效果

分享一下我用該方法做出的原型,

ADVERTISEMENT

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

總結

視覺設計領域,當下的通用做法是用iPhone6s的尺寸750×1334來設計,已經是形成了行業的規範。但是,產品設計領域並沒有形成,其實還是有一定必要的。

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

相關閱讀

浪子,公眾號langzisay,善用Axure寫PRD,人人都是產品經理專欄作家。

本文原創發布於人人都是產品經理。未經許可,禁止轉載。

ADVERTISEMENT