史上最实用的原型设计规范（二）

风舟说

这是关于原型设计规范的第二篇文章。

最早听说原型设计规范这个词，还是刚入行没多久，处于自我感觉超级好的打鸡血阶段，有时候接到新的项目或产品需求，一天可以画几十张原型图，反正就是各种堆砌图标、组件和文字，加链接跳转，最后简单的左右居中对齐，这样的状态持续了小半年之久，一句话总结是：熟练无比，乐此不疲！

直到有一天，公司组织开了个内部产品分享会，主题是什么样的原型最适合开发（设计）？

其中有个环节是让每个产品经理当场演示自己的原型HTML ，其他产品和各项目组主设、主程评价打分。已经不记得当时我得了多少分，反正轮到我讲的时候全程面红耳赤，感觉分分钟要被开除的节奏。在总结的阶段，有个UI转岗的资深女产品重点提了原型设计规范，概括性的讲了几分钟。此后，我就有意识的开始查阅搜集产品原型设计规范的相关文章和资料。

一、产品原型图有哪几种？（多图预警）

归纳可分为三种：分别为原型草图（需求版）、低保真原型（标注版）、高保真原型（交互版）。

原型草图（国外版） 原型草图（国内版） 低保真原型（标注版）

以上三种原型图，最常见的是低保真原型，需求评审或开发时经常使用。高保真原型一般只有公司层面的汇报或者产品商务演示才需要用到。而在沟通需求的时候，会使用手绘版的原型草图来辅助理解。

但是，真正适合UI设计和程序开发的原型图，其实是灰模原型。

二、什么是灰模原型？

>>灰模原型是基于信息架构和功能列表的

>>灰模原型一般使用尺寸：375*667 或 320*480（App）

>>制作灰模原型时，一定要所有组件之间的对齐，需对齐到像素级

>>所有的元素，除了组件自带的颜色，只用黑白灰三色

>>只用最基本的矩形、直线表现整个原型，矩形可变换成圆形、三角形等，现在我会增加灰度的ICON

>>不用设计交互，所有页面分开展示，每个功能的状态都需要表明

灰模原型

关于灰模原型，我会在原型说明的文章中详细阐述，这里仅将这个原型的要素先列出来。

三、常用元素大小尺寸说明

页面布局高度说明 字体大小及间距

PS:若尺寸记忆繁琐，亦可参考将iPhone 6的尺寸缩小1倍作为原型尺寸。

四、页面编号规则说明

关于页面编号我使用的是文档的编号规则，a.b.c.d ,最多到4级，使用页面标题名称作为页面名。

页面编号

这样编号的好处有两点：

>>可以很清楚的看出来每个页面父子层级关系，便于快速理解功能信息结构。

>>可以很清楚的看到页面层级数量，若出现4级或以上页面，就需要重新思考产品页面层级是否合理（层级越多，产品易用性越差）。

关于原型的元素组件命名，我一般都默认不命名，只在做动态交互的时候，针对可触发的元素进行统一命名。如果想要全面了解命名规则，可以搜索UI切图命名规范。