编辑导读：在产品经理开始画Web产品原型之前，一定要清楚使用什么尺寸来画出原型的页面。本篇文章作者详细介绍了Web产品原型尺寸的常用规范和相关步骤，并对每个步骤需要注意的问题进行了梳理分析，与大家分享。

原型尺寸，是指PM画产品原型的时候，页面该采用什么样的宽高px。即默认视图下的页面宽度是多少px，高度是多少px。

通常我们PM选择1200px/1280px/1400px等宽度尺寸来画原型，但是你们知道为什么应该用这样的尺寸吗？以及所有的Web产品都应该用这样的尺寸吗？

希望通过这篇文章来给大家普及一下Web产品的原型尺寸的常用规范。接下来带着大家按照如下四个步骤来理解为什么应该用这样的尺寸。

一、明确产品所在容器

首先抛出一个概念：我们的Web产品都是存在于某个容器内部的。乍一看大家估计会有点懵逼，容器是什么？

开发同学都知道容器是个很常用的概念，比如APP端内嵌H5网页都是基于Webview容器来开发界面和交互的。

对于产品经理来说，只要能够理解“自己的产品是显示在相应容器内部并且依赖容器展示界面和功能”这个概念就可以了。

下图罗列了几种常见Web产品对应的容器，给大家一个直观的理解。

二、容器决定产品边界

由于我们的产品是在容器内部，所以容器的可展示区域(可以简单理解为webview容器大小)决定了我们产品的显示区域。

1. 默认状态下的可展示区域，就是PM经理需要遵循的原型尺寸。
2. 如果容器支持缩放大小，意味着需要考虑原型在不同大小展示区域下的布局效果。
3. **的展示区域，往往接近屏幕分辨率。
4. 最小的展示区域，往往是默认的原型尺寸。 部分产品可以缩放得更小，此时展示左上区域或者页面模块按一定规则缩小。

三、确定最终原型尺寸

Web产品是指在电脑上使用的各种产品。包括Web网页端产品、PC客户端产品(比如钉钉)、平台产品内第三方应用(比如钉钉)。

这里咱们以“Web网页端产品”来顺着刚刚的逻辑，然后得到最终的原型尺寸(另外2种Web产品类型的原型尺寸，大家有兴趣可以自行研究或者期待我的后续文章)

• Web网页端产品，是放在浏览器这个容器里面的。
• 原型尺寸可以采用浏览器的默认展示区域，此时接近于屏幕分辨率。
• 为了保证自己的电脑可以查看完整的原型，所以我的Web产品原型尺寸需要小于我的电脑当前的分辨率1440*900px(可在电脑配置中进行调整)。
• 为了保证项目的设计&开发&测试等童鞋可以查看完整的原型，所以我们需要考虑下他们的屏幕分辨率，比如有个1280*800px。
• 当你的产品最终供所有用户查看，那么需要兼顾大部分用户的屏幕分辨率，通过查询当前电脑屏幕分辨率分布情况来查询出主流屏幕的最小宽度1280px。
• 由于考虑到左右两侧可能还会放置广告位以及返回顶部等按钮，原型宽度**小于1280px。

综上所述，Web网页端产品的最佳原型尺寸可以采用宽度1200px，高度自适应。

高度会根据页面内容多少而经常不同。对于首页等主要页面，PM**考虑首屏内需要露出核心功能内容。此时还需要减掉菜单栏&标题栏&网址栏&书签栏等高度。

四、如何画出原型尺寸？

那么如何画出规范的原型尺寸？接下来我以Axure RP 9.0讲解详细的步骤，并且讲述Web网页端插屏的两种样式效果。

1. 页面宽度1200px，内容1200px；相对浏览器居中对齐；如果小于1200px则显示靠左部分。
2. 页面宽度无限大，内容1200px；相对浏览器居中对齐；如果小于1200px则显示靠左部分。