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

33 評論 124944 瀏覽 493 收藏 7 分鐘

部分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的關系。

至于其他的分辨率占比已經很低,不是等比關系??梢栽谂龅角闆r的在處理,甚至不處理。

所以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們了解一下。

相關閱讀

善用Axure寫PRD,移動PD需要梳理這些流程圖

善用Axure寫PRD,全局規范一個都不能少

善用Axure寫PRD,徹底丟棄Word和PPT

善用Axure寫PRD,APP文本框通用的輸入規則

善用Axure寫PRD,2種模式7種方法解析頁面加載邏輯

善用Axure寫PRD,產品邏輯的5種呈現方法

#專欄作家#

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 375×667只是最初的像素,現在已經沒有了,他只是代表一個比例吧。真正作圖的時候是不是要做1.5、2倍的圖啊,也就是按750X1334要不然放大了不就模糊了。另外 dpi設置成多少啊300嗎 ?

    來自江蘇 回復
  2. ①考慮到方便與否就用 375*667。為什么呢?
    ②邏輯分辨率不太理解哇
    ③720*1280和720*1334為什么是等比關系?

    回復
  3. 這原型畫風,一下回到了70年代,之前320.568.現在是375.667

    回復
  4. 這個原型鏈接怎么不見了?我想看看 ?

    來自廣西 回復
    1. 來自上海 回復
  5. 很好記,iPhone6的1334*750的一半

    來自浙江 回復
  6. 為什么不做成自適應的,原件什么尺寸都不需要計算

    來自浙江 回復
    1. 你做過了嗎?
      不管是pm設計原型,還是ui畫視覺稿,還是rd寫前端頁面,都是不可以全部自適應的。
      都是基于主尺寸來設計,然后上下去適應視圖。

      來自上海 回復
    2. 做過一點,不多

      來自浙江 回復
  7. iPhone的分辨率太分散,只考慮占比最大的前幾個,720×1280、1080×1920、480×854、540×960,總計占比77%。
    這句話,是說“Android”的分辨率太分散吧,錯別字?

    來自廣東 回復
    1. 嗯,打錯了

      回復
  8. 不錯

    回復
  9. 再考慮Android的原型尺寸下 這一節有一處錯誤,應該是Android。

    來自湖北 回復
  10. 原型圖很炫,不過就是少了數據交互這方面的。業務流程方面沒有呈現出來。

    來自上海 回復
  11. 請問你上面文里設計的原型尺寸是減了20PX來畫的么?

    來自廣東 回復
    1. 對的,看相關文章里面講了為什么以及去看我的原型demo。

      來自上海 回復
  12. 請問手機屏幕分辨率的分布數據可以從哪個網站獲得?。?/p>

    來自廣東 回復
    1. 友盟,annie之類的都會有。

      來自上海 回復
    2. 好的,謝謝

      來自美國 回復
  13. 原型畫成這樣開發怎么看

    來自福建 回復
    1. 難道你想怎么樣 搜說了是原型

      來自北京 回復
  14. 只想對作者說四個字:相見恨晚!
    謝謝作者了!?。?! ??

    來自北京 回復
    1. 不客氣,對大家有幫助就行。

      來自上海 回復
  15. 請問你是用Axure設計的原型嗎?

    來自浙江 回復
    1. 全部用Axure畫出,點擊可以查看原型http://51prd.com/demo2/

      來自上海 回復
    2. 嗯,看到啦,感覺畫的好好啊,我是剛入行,Axure用的還不是那么好

      來自浙江 回復
  16. 原型畫的不錯

    來自北京 回復
    1. 馬馬虎虎吧

      來自上海 回復
  17. 閃電約感覺應該叫閃電陪 或者 約飯 約語音 約視頻 約電影…更貼主題吧 感謝尺寸介紹與原型分享~

    來自北京 回復
    1. 嗯啊,定位有點像后來支付寶發布的到位模塊。

      來自上海 回復
  18. 感謝科普~之前一直是用320*568的~

    來自日本 回復
    1. 兩三年前用320*568,還是可以的。

      來自上海 回復
  19. 這么屌,這個你都這么清楚

    來自上海 回復