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

原型尺寸的歷史

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

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

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

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

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

確定適配屏幕的方案

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

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

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

手機屏幕分辨率的分布

Android分辨率分布

ios分辨率分布

先考慮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上無法隱藏它。

查看原型效果

分享一下我用該方法做出的原型，點擊查看

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

總結

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

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

?

轉載：http://www.woshipm.com/rp/579154.html

?

轉載于:https://www.cnblogs.com/hbolin/p/11572510.html

總結

以上是生活随笔為你收集整理的为什么375×667是移动端原型设计的最佳分辨率：flutter 设计稿尺寸最好也是375×667...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。