原型图规范 1. 尺寸

对于手机端、PC端、平板、车机等不同的产品形态，最大的区别是尺寸。

在画原型图之前，我们要做的就是先把页面原型尺寸给定下来。

可以参考的规范有：手机端首屏的尺寸设置为 375×667 px。

注：375 × 667 是首屏高度，也就是原型图的最小高度，并不是原型的固定高度，当内容很多时，直接把高度拉长到合适的内容即可。下边提到的PC端尺寸也是这个道理。

状态栏：375 × 20 px

导航栏：375 × 44 px

底部tab：375 × 49 px

这个规范的尺寸是使用的 iPhone8 的尺寸，产品经理火的那几年就是这个尺寸火，所以用这个尺寸的多。

你同样的也可以使用其他常用的手机端尺寸，这没有固定限制。

我比较建议用这个尺寸，因为很多Axure组件也都是按照这个尺寸去做的，适配的比较好。

对于PC端，尺寸可以按照 1440×900px。

虽然当前使用最多的屏幕尺寸是1920×1080。

对于原型图1440的宽度，如果是左边是原型图，右边写需求描述的话，在屏幕上可以正好展示出原型图+需求描述，不用左右滑动去看。

对于平板，建议直接使用 768×1024 px。

2. 颜色

对于原型图的颜色，我们可以分别来看：

1）有UI设计师参与的

我们可以考虑使用中性色，中性色是指不强烈的色彩，常见的就是黑白灰。

在选择黑白灰时，我很推荐的是Axure色板中自带的颜色，在画原型时直接选取使用就行。

另外一些大厂规范中，都有自己的中性色定义，你也可以选择使用。不过我不建议你花费太多时间去处理颜色。

如下图，左边是用Axure中的黑白灰，右边是使用的Arcodesign的中性色，在画原型时，整体上影响并没有那么大。

虽然右边的更好点，如果你要用其它中性色，可以将颜色收藏进Axure的色板中，方便下次使用。

2）没有UI设计参与的

比如说后台，可以添加一些颜色。

后台一般都是内部使用，对样式没有太高要求，也不会让UI进行设计；

因为后台一般都是使用现成的UI组件进行开发的，比如Antdesign、Element等；

具体什么颜色，可以用万能的蓝色作为主色调，使用其他颜色作为辅助即可。

对于语义色，来表达成功、警告、错误语义，可以选择红绿黄进行使用即可。

3. 文字

对于文字，涉及到字体、字号、粗细、行间距等。

字体

可以使用 Arial，也就是Axure默认的字体。

同样的，也可以使用苹方、微软雅黑，这两个字体则需要单独安装。

不过当你通过Axure打包发布出去时，如果对方没有安装对应的字体，将则不会展示为苹方/微软雅黑字体进行展示。

对方查看的效果和你看的效果会不一样，我正在找处理方案，目前还没找到。

字号、字重

也就是字体大小、字体粗细，对于字体大小、粗细，还有颜色，影响的信息层级关系。

我们直接看规范：

一级标题：20px、加粗，颜色#000000

主标题：18px、选择性加粗，颜色#000000

次标题：16px、选择性加粗，颜色#000000

小标题：14px、选择性加粗，颜色#000000

正文：14px、选择性加粗，颜色#000000/#333333

辅助文字：14px/12px，不加粗，颜色#333333/#555555

次级文字：12px/10px，不加粗，颜色#555555/#7F7F7F

注：对于文字的大小，前提是在 375×667、1440×900 的页面尺寸下的。如果你使用的尺寸过大，对应的字号也需要加大。

这个规范不用记，可以用字号 14 作为标准，层级高的字号+2，加粗、颜色加重即可，层级低的字号就-2，不加粗，颜色浅一些。

行间距

在原型中不重要，Axure时会根据字体大小自动调整行间距，如果文字内容过多时，可以手动进行加大间距。

4. 图标

原型中如果是「图标+文字说明」一起出现，不用管图标，直接使用圆形或矩形代替即可。

占位符太丑，不建议用。

颜色不要使用太深的中性色。如下图示例：

如果只有「图标」，可以选择能表达具体含义的图标。

从iconfont、iconpark中搜索复制svg格式粘贴到Axure使用即可。

如下图中的扫一扫、设置、播放图标。

如果你觉得使用圆形或矩形表达图标的意思不明显，或者是不想找图标，就在加个「icon」文字，或者直接用写文字。

如下图的扫一扫、设置、播放，直接使用文字说明即可。

对于头像、图片等，都可以加个文字说明。

如果是没有UI介入设计，当需要确定图标时，则需要产品经理确定，同样的去iconfont、iconpark中找到图标，按前端要求提供过去即可。

5. 图片

图片在原型中不需要使用真实图片，直接使用矩形代替即可。

Axure中自带的图片元件太丑了，不建议用。

可以再加上文字说明，来表达这是图片，比如加个img，或者根据图片特性，如封面、头像，都是可以的。

原型中的图片规范可以按照宽高比，比如 4:3，3:2，16:9，1:1。

当然这个没那么严格，如果你想规范些，可以这样用。

6. 圆角

圆角在原型中不重要，如果你想使用圆角，可以按照2的倍数调整。

圆角在UI中的作用很大，而且规范还挺多，原型中就无所谓了。

7. 阴影

阴影不重要。如果想使用阴影，可以将阴影使用纯黑色号000000，透明度30%，模糊5。

8. 对齐

对齐是版式设计的基本原则，使用工具进行对齐即可。

具体采用「左对齐、右对齐、上对齐、底对齐、居中对齐」，你可以按照布局来，比如靠右的元件，使用右对齐。

9. 分布

分布是指将页面内容使用水平分布、垂直分布的方式进行平均分布，来保证页面元素之间的间距相同。

当相同的元素多次出现时，我们可以使用分布快速调整，让页面更规范。

10. 间距

间距没有那么重要，但是规范的原型一定要有会有间距。

间距分为上下左右间距，分为模块与模块间的间距，子模块与子模块的间距，元素与元素之间的间距。

对于整个移动端来说，可以使用 5 的倍数调整间距。

对于尺寸较大的PC端原型，可以按照 10 的倍数调整间距。

也可以直接将元件结合「对齐、分布」直接调整，不用关注具体间距。

根据我们之前提到的设计原则「亲密性」，属于同组的内容间距小，不同组的内容间距大。11、组件规范

组件是就是可以直接拿过来的元件组合。

对于每个组件都是通过基础的形状、文字、颜色、尺寸、间距等进行组合形成的。

就是UI设计中的原子化设计。

当完成基础的形状、文字、颜色、尺寸、间距等规范确定后，进行基础元素的组合即可得到规范的组件。

你可以基于上边的规范去制定自己的产品组件库，可以快速使用规范的组件。12、内容的贴合性

在画原型时，可以将原型中的内容尽量填写为真实内容，使用极值状态，将内容最多、数据最多的情况画出来。

总结

规范建立好是为了使用，我们了解清楚原型的规范后，可以在画原型时往规范上靠，慢慢的养成好习惯。

一个规范好看的原型图在求职面试、评审的时候，会是个加分项。

当然，不要过度遵循规范，原型图不是UI图，重要的是使用原型将功能表达出来。

对于刚入门的产品经理来说，原型图是日常的基本工作。

本文由人人都是产品经理作者【王大鹿】，微信公众号：【产品大鹿】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议。