为什么375x667是移动端原型设计的最佳分辨率
为什么375x667是移动端原型设计的最佳分辨率
2017-03-19阅读659
转⾃：浪⼦说（ID：langzisay）
部分PM在设计移动端产品的时候，往往是随意画了个原型尺⼨或者上⽹个模板套进去，当然也有部分知道⽤375x667⽐较好，但是不知其所以然。
接下来我来讲清楚为什么以及前世今⽣。
⼀、原型尺⼨的历史
既然是设计移动端原型，理论上来说最佳的原型尺⼨最好是和你的⽬标⽤户⼿机尺⼨保持完全⼀致。
好⽐iPhone刚出来的时候，设计iOS APP原型使⽤iPhone⾃⾝分辨率320x480就是最合适的。
后来随着Android崛起，各种国产机盛⾏，屏幕割裂严重，部分PM使⽤720x1280设计原型，或者继续沿⽤之前的尺⼨320x480。
再后来iPhone6/6plus发布，屏幕分辨率的分裂也越来越严重。
此时最好有⼀种通⽤⽅案来解决这个问题，兼顾所有的屏幕分辨率。
⼆、确定适配屏幕的⽅案
考虑到屏幕分辨率已经有数百种，并且兼顾⽤户量少的机型没有价值。所以⼀⼀兼顾所有的屏幕是不现实的事情。
所以⼤家都是兼顾⽤户量使⽤最多的⼏款分辨率。⽤户量很⼩的屏幕不处理。
如果有必要的话，部分屏幕单独处理。
三、⼿机屏幕分辨率的分布手机app设计模板
Android分辨率分布
ios分辨率分布
四、先考虑iPhone的原型尺⼨
iPhone的分辨率是从320x480，到640x960，到640x1136，到750x1334，⼀直演变到1242x2208。
由于主要是750x1334最⼤、所以考虑它作为原型设计尺⼨，然后看是否可以兼顾其他分辨率。
⽽第⼆分辨率占⽐是1242x2208，是1.5倍的等⽐关系。
第三分辨率640x1136，约等于0.85的关系。
⾄于其他的分辨率占⽐已经很低，不是等⽐关系。可以在碰到情况的在处理，甚⾄不处理。
所以iOS APP的视觉稿⽤750x1334来做⽐较适合，对于1242x2208，如果要求⾼就单独设计，要求不⾼就等⽐放⼤即可。⽽640x1336，直接等⽐缩⼩即可。
对于iOS APP的原型，我们PM只需考虑等⽐关系即可，那就是750x1334。考虑到画原型的时候⽅便与否，最好使⽤375x667。另外也是iOS官⽅定义的iphone6/6s/7的逻辑分辨率。
五、再考虑Android的原型尺⼨
iPhone的分辨率太分散，只考虑占⽐最⼤的前⼏个，720x1280、1080x1920、480x854、540x960，总计占⽐77%。
其中720x1280是和750x1334等⽐关系，同理1080x1920,480x854，540x960都是约9:16。
所以其实还是⼀回事，原型直接使⽤375x667。
六、为什么不使⽤1280x720作为标准
可以，如果你们的⽤户以Android为主，或者你们的PM都是⽤的Android⼿机。
另外就是⼤部分PM、UI使⽤的是是iPhone，所以更愿意以iPhone的逻辑分辨率来设计罢了。
包括Adobe的原型设计⼯具Experience Design CC也是推荐以375x667来设计，或者次选320x640。
七、延伸⼀下内容
建议使⽤iPhone6/iphone6s/iphone7来做了原型之后，使⽤⼿机来预览效果。
如果你使⽤Axure设计原型的话，建议375x667-20，这样⽅便在⼿机上直接查看原型。减去状态栏20px是因为Axure导出的原型在iOS上⽆法隐藏它。
⼋、查看原型效果
如果你⽤iphone6/6s/7在⼿机上请⽤safari打开该⽹址并发送到桌⾯，可以查看所有页⾯以及交互，和⼀个真实的APP，仅仅差了逻辑和视觉。
九、总结
视觉设计领域，当下的通⽤做法是⽤iPhone6s的尺⼨750x1334来设计，已经是形成了⾏业的规范。但是产品设计领域并没有形成，其实还是有⼀定必要的。
所以我就从原型设计层⾯普及⼀下这个来龙去脉，供新⼿PM们了解⼀下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。