为啥375x667是移动端原型设计的最佳分辨率

Posted 2023-03-23

参考技术A 为什么375x667是移动端原型设计的最佳分辨率

2017-03-19阅读659

转自：浪子说（ID：langzisay）

出处：http://langzipm.mikecrm.com/kTIuq7Q

部分PM在设计移动端产品的时候，往往是随意画了个原型尺寸或者上网找个模板套进去，当然也有部分知道用375x667比较好，但是不知其所以然。

接下来我来讲清楚为什么以及前世今生。

一、原型尺寸的历史

既然是设计移动端原型，理论上来说最佳的原型尺寸最好是和你的目标用户手机尺寸保持完全一致。

好比iPhone刚出来的时候，设计ios APP原型使用iPhone自身分辨率320x480就是最合适的。

后来随着android崛起，各种国产机盛行，屏幕割裂严重，部分PM使用720x1280设计原型，或者继续沿用之前的尺寸320x480。

再后来iPhone6/6plus发布，屏幕分辨率的分裂也越来越严重。

此时最好有一种通用方案来解决这个问题，兼顾所有的屏幕分辨率。

二、确定适配屏幕的方案

考虑到屏幕分辨率已经有数百种，并且兼顾用户量少的机型没有价值。所以一一兼顾所有的屏幕是不现实的事情。

所以大家都是兼顾用户量使用最多的几款分辨率。用户量很小的屏幕不处理。

如果有必要的话，部分屏幕单独处理。

三、手机屏幕分辨率的分布

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上无法隐藏它。

八、查看原型效果

分享一下我用该方法做出的原型，或者访问网址http://51prd.com/demo2/

如果你用iphone6/6s/7在手机上请用safari打开该网址并发送到桌面，可以查看所有页面以及交互，和一个真实的APP，仅仅差了逻辑和视觉。

九、总结

视觉设计领域，当下的通用做法是用iPhone6s的尺寸750x1334来设计，已经是形成了行业的规范。但是产品设计领域并没有形成，其实还是有一定必要的。

所以我就从原型设计层面普及一下这个来龙去脉，供新手PM们了解一下。

移动APP设计入门级：真实的前后端原型长啥样?

　　只会画功能原型图的不是产品经理，不过产品经理如果不会画原型那战斗力也是打了不少折扣，不仅仅因为原型是对功能展示上的设计，更由于产品原型实际是用户实际需求、业务流程、系统规范等多种过程产物的结晶。本文适合入门级的移动端产品经理，在思考、设计、制作客户端及后台原型时可做参考

　　产品原型是产品的重要保密文档，因此选取了一个目前已中止且相对简单的产品做介绍，便于刚入门的初级产品经理尽快上手。之后会陆续针对较为复杂，或是多插件APP进行进阶型的产品设计说明。

　　一、在做原型之前

　　需求调研、需求获取、各种沟通、各种材料这里就不多说了，产品设计相关文章或书籍一把一把的，大家可以主动去看看。这里强调一点：

　　用户想要的，并非都是用户需要的。

　　举个栗子：用户想要给单据加关键字，其实只是需要个标签分类;用户要修改提交的内容，其实有时候只是缺少草稿功能。抓准用户真实需求，才是设计过程中的首要。

　　所以，少年，请先不要急着打开Axure。

　　二、原型长什么样?

　　原型内容基本包括：流程图、页面展示、字段说明、交互操作、规则说明、特殊备注等。

　　业务流程图：

　　

 

　　业务流程是产品设计的核心，如果连要实现什么目的、如何实现都没搞清楚，那产品也没啥意义了。至于是需要做业务流程图、泳道图、序列图、页面流程图等，则根据不同项目产品实际情况， 关键是：要能看懂! 不少流程图，洋洋洒洒几大页，不明觉厉，到需求评审的时候，解释个流程都要花半天，就更别指望敬爱的程序猿能在开发的时候细看了。

　　页面导航：

　　

 

　　根据菜单或核心功能块设置产品导航，我个人习惯再根据不同业务状态区分页面，这样自己和开发都能比较清楚是在什么层级页面、页面目的等，这个看自己的习惯，能清楚表达功能结构即可。

　　内容与说明：

　　

 

　　比较简单的页面，可直接在页面上标注内容、条件、交互及具体说明。如果是比较复杂的逻辑流程模块，建议针对模块，独立设计流程图、模块全局说明、规则描述、字段说明等，这个会在后续针对较复杂流程的产品设计中细说。

　　在这个过程中，当你做完一个模块的关联页面设计，可以闭着眼睛在脑海中，模拟自己作为用户在各个页面上实际操作，可以帮助你发现并及时修改一些小问题。

　　管理后台设计：

　　经常看到有分享移动端设计的文章，不过很少看到介绍移动端的同时有提到后台的，难道大家移动端和管理后台是不同的人设计的吗?反正作为移动产品经理的本汪一直都是自己默默做后台原型的(心酸脸)。

　　

 

　　

 

　　移动APP的后端核心功能集中在 数据类或业务操作类 ，该APP主要功能是实现某类商城的在线订购、订单售后等目的，而后端主要用户是平台运营人员，核心目标是对前端订单进行操作，因此后端设计的重点就在于：

　　前端基础数据配置

　　业务数据分类聚合

　　单据流转处理(重点)

　　用户权限

　　报表分析

　　建议入门级的产品经理同步多考虑后台的实现，对业务逻辑梳理很有好处。一般情况下我会先设计移动端，然后再设计对应管理后台，最后再迭代调整以实现前后端业务打通顺畅。

　　最后的一些话：

　　产品原型其实只是用来表达自己设计想法的，即便没有Axure，使用普通纸笔一样可以拿出实用的产品原型图(当然能提高效率，何乐而不为?)。

　　多思考多练习，一定没坏处。

　　少喝“不明觉厉”的产品鸡汤。要不就彻底弄懂它们为己所用，不然若干年后可能会有一种“听过很多道理，却依然过不好这一生”的感觉。

　　产品经理有时容易走上“虽然我什么都不会，但其实我很牛逼”的歪路，乖，踏实些，好吗?