起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)為什么375×667是移動(dòng)端原型設(shè)計(jì)的最佳分辨率
部分PM在設(shè)計(jì)移動(dòng)端產(chǎn)品的時(shí)候，往往是隨意畫了個(gè)原型尺寸或者上網(wǎng)找個(gè)模板套進(jìn)去，當(dāng)然也有部分知道用375×667比較好，但是不知其所以然。接下來，我來講清楚為什么以及前世今生。
原型尺寸的歷史
既然是設(shè)計(jì)移動(dòng)端原型，理論上來說最佳的原型尺寸最好是和你的目標(biāo)用戶手機(jī)尺寸保持完全一致。
好比iPhone剛出來的時(shí)候，設(shè)計(jì)iOS APP原型使用iPhone自身分辨率320×480就是最合適的。
后來隨著Android崛起，各種國(guó)產(chǎn)機(jī)盛行，屏幕割裂嚴(yán)重，部分PM使用720×1280設(shè)計(jì)原型，或者繼續(xù)沿用之前的尺寸320×480。
再后來iPhone6/6plus發(fā)布，屏幕分辨率的分裂也越來越嚴(yán)重。
此時(shí)最好有一種通用方案來解決這個(gè)問題，兼顧所有的屏幕分辨率。
確定適配屏幕的方案
考慮到屏幕分辨率已經(jīng)有數(shù)百種，并且兼顧用戶量少的機(jī)型沒有價(jià)值。所以一一兼顧所有的屏幕是不現(xiàn)實(shí)的事情。
所以大家都是兼顧用戶量使用最多的幾款分辨率。用戶量很小的屏幕不處理。
如果有必要的話，部分屏幕單獨(dú)處理。
手機(jī)屏幕分辨率的分布
Android分辨率分布
ios分辨率分布
先考慮iPhone的原型尺寸
iPhone的分辨率是從320×480，到640×960，到640×1136，到750×1334，一直演變到1242×2208。
由于主要是750×1334最大、所以考慮它作為原型設(shè)計(jì)尺寸，然后看是否可以兼顧其他分辨率。
而第二分辨率占比是1242×2208，是1.5倍的等比關(guān)系。
第三分辨率640×1136,約等于0.85的關(guān)系。
至于其他的分辨率占比已經(jīng)很低，不是等比關(guān)系?？梢栽谂龅角闆r的在處理，甚至不處理。
所以iOS APP的視覺稿用750×1334來做比較適合，對(duì)于1242×2208，如果要求高就單獨(dú)設(shè)計(jì)，要求不高就等比放大即可。而640×1336，直接等比縮小即可。
對(duì)于iOS APP的原型，我們PM只需考慮等比關(guān)系即可，那就是750×1334?？紤]到畫原型的時(shí)候方便與否，最好使用375×667。另外也是iOS官方定義的iphone6/6s/7的邏輯分辨率。
再考慮Android的原型尺寸
iPhone的分辨率太分散，只考慮占比最大的前幾個(gè)，720×1280、1080×1920、480×854、540×960，總計(jì)占比77%。
其中720×1280是和750×1334等比關(guān)系,同理1080×1920,480×854，540×960都是約9:16。
所以其實(shí)還是一回事，原型直接使用375×667。
為什么不使用1280×720作為標(biāo)準(zhǔn)
可以，如果你們的用戶群以Android為主，或者你們的PM都是用的Android手機(jī)。
另外就是大部分PM、UI使用的是是iPhone，所以更愿意以iPhone的邏輯分辨率來設(shè)計(jì)罷了。
包括Adobe的原型設(shè)計(jì)工具Experience Design CC也是推薦以375×667來設(shè)計(jì)，或者次選320×640。
延伸一下內(nèi)容
建議使用iPhone6/iphone6s/iphone7來做了原型之后，使用手機(jī)來預(yù)覽效果。
如果你使用Axure設(shè)計(jì)原型的話，建議375×667-20，這樣方便在手機(jī)上直接查看原型。減去狀態(tài)欄20px是因?yàn)锳xure導(dǎo)出的原型在iOS上無法隱藏它。
查看原型效果
分享一下我用該方法做出的原型，點(diǎn)擊查看
如果你用如果iphone6/6s/7在手機(jī)上請(qǐng)用safari打開該網(wǎng)址并發(fā)送到桌面，可以查看所有頁(yè)面以及交互，和一個(gè)真實(shí)的APP，僅僅差了邏輯和視覺。
總結(jié)
視覺設(shè)計(jì)領(lǐng)域，當(dāng)下的通用做法是用iPhone6s的尺寸750×1334來設(shè)計(jì)，已經(jīng)是形成了行業(yè)的規(guī)范。但是，產(chǎn)品設(shè)計(jì)領(lǐng)域并沒有形成，其實(shí)還是有一定必要的。
所以，我就從原型設(shè)計(jì)層面普及一下這個(gè)來龍去脈，供新手PM們了解一下。
相關(guān)閱讀
善用Axure寫PRD，移動(dòng)PD需要梳理這些流程圖
善用Axure寫PRD，全局規(guī)范一個(gè)都不能少
善用Axure寫PRD，APP文本框通用的輸入規(guī)則
善用Axure寫PRD，2種模式7種方法解析頁(yè)面加載邏輯
善用Axure寫PRD，產(chǎn)品邏輯的5種呈現(xiàn)方法
#專欄作家#
浪子，公眾號(hào)langzisay，善用Axure寫PRD，人人都是產(chǎn)品經(jīng)理專欄作家。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
375×667只是最初的像素，現(xiàn)在已經(jīng)沒有了，他只是代表一個(gè)比例吧。真正作圖的時(shí)候是不是要做1.5、2倍的圖啊，也就是按750X1334要不然放大了不就模糊了。另外 dpi設(shè)置成多少啊300嗎 ？
①考慮到方便與否就用 375*667。為什么呢？
②邏輯分辨率不太理解哇
③720*1280和720*1334為什么是等比關(guān)系？
這原型畫風(fēng)，一下回到了70年代，之前320.568.現(xiàn)在是375.667
這個(gè)原型鏈接怎么不見了？我想看看 ?
http://51prd.com/demo/首頁(yè).html
很好記，iPhone6的1334*750的一半
為什么不做成自適應(yīng)的，原件什么尺寸都不需要計(jì)算
你做過了嗎?
不管是pm設(shè)計(jì)原型，還是ui畫視覺稿，還是rd寫前端頁(yè)面，都是不可以全部自適應(yīng)的。
都是基于主尺寸來設(shè)計(jì)，然后上下去適應(yīng)視圖。
做過一點(diǎn)，不多
iPhone的分辨率太分散，只考慮占比最大的前幾個(gè)，720×1280、1080×1920、480×854、540×960，總計(jì)占比77%。
這句話，是說“Android”的分辨率太分散吧，錯(cuò)別字？
嗯，打錯(cuò)了
不錯(cuò)
再考慮Android的原型尺寸下 這一節(jié)有一處錯(cuò)誤，應(yīng)該是Android。
原型圖很炫，不過就是少了數(shù)據(jù)交互這方面的。業(yè)務(wù)流程方面沒有呈現(xiàn)出來。
請(qǐng)問你上面文里設(shè)計(jì)的原型尺寸是減了20PX來畫的么？
對(duì)的，看相關(guān)文章里面講了為什么以及去看我的原型demo。
請(qǐng)問手機(jī)屏幕分辨率的分布數(shù)據(jù)可以從哪個(gè)網(wǎng)站獲得?。?/p>
友盟，annie之類的都會(huì)有。
好的，謝謝
原型畫成這樣開發(fā)怎么看
難道你想怎么樣 搜說了是原型
只想對(duì)作者說四個(gè)字：相見恨晚！
謝謝作者了?。。?！ ??
不客氣，對(duì)大家有幫助就行。
請(qǐng)問你是用Axure設(shè)計(jì)的原型嗎？
全部用Axure畫出，點(diǎn)擊可以查看原型http://51prd.com/demo2/
嗯，看到啦，感覺畫的好好啊，我是剛?cè)胄?，Axure用的還不是那么好
原型畫的不錯(cuò)
馬馬虎虎吧
閃電約感覺應(yīng)該叫閃電陪 或者 約飯 約語(yǔ)音 約視頻 約電影…更貼主題吧 感謝尺寸介紹與原型分享~
嗯啊，定位有點(diǎn)像后來支付寶發(fā)布的到位模塊。
感謝科普~之前一直是用320*568的~
兩三年前用320*568，還是可以的。
這么屌，這個(gè)你都這么清楚