【产品技能】原型设计规范

对于产品经理来说，设计原型是一项最基本的工作。原型集产品需求、页面布局和页面交互在一起，能较清晰展现产品信息架构。原型作为一项产品需求的沟通工具，面向的阅读者包括领导、客户、开发、UI、产品经理等，每个人资质不同，对原型的理解会出现偏差。因此制定相关的原型设计规范，提高原型的可阅读性显得较为必要。

原型分为高保真和低保真两种。低保真原型较为粗糙，一般只画出页面大体布局和页面跳转流程，低保真原型面向对产品需求已非常熟悉的人。一般是时间非常紧迫，来不及做高保真原型才设计低保真原型。相比低保真原型，高保真原型可阅读和理解性远远高于低保真原型。

目录结构

目录结构是指axure生成页面后，页面左侧的目录结构，由各个页面组成。槽糕的页面目录和页面命名让人看不懂页面的逻辑结构，无从入手阅读，清晰的目录结构，页面命名对理解整个原型非常重要。我们都知道，word的目录结构是很清晰的，原型的页面目录结构可参考word目录划分页面目录。这样让人清晰很多。一级页面为1、2、3、4...，二级页面为1.1、1.2、1.3....如下图所示。

版本说明

在建立原型时增加变更版本说明页面，并在每次修改完成后添加修改记录。

页面宽度与高度

为增加原型逼真度，可按照终端类型的标准设置页面的大小，WEB原型可设置页面宽度为1280px，不限高度，WAP可设置宽度为320px，不限高，手机客户端可设置页面大小为480*800px。

页面布局

整个原型以灰色为主调，过多颜色会干扰视觉设计，页面布局可参考主流网站的页面架构，部分页面架构如下图所示。

交互标注

为点击、滑动等交互事件加上标注，以便阅读者明白此处有交互。

页面注释

在页面右边加上注释，明确页面各个部分的详细需求、交互跳转及操作提示，使阅读者更详细的理解需求，页面注释也是一个梳理需求和业务逻辑的过程，页面注释非常重要。

控件规范

字体、颜色：中文字体一般设置为宋体或微软雅黑，英文字体为默认的Arial，整个原型字体类型最好不超过3种，保持统一。字体颜色以黑色为主，字号默认为13。

文本框：单行文本框统一高度，多行文本宽度保持一致，高度自行设置，标注是否必填。

按钮：按钮大小统一，分清可点与不可点。

弹出层：弹出层大小统一，居中。

笔者一直提倡原型即文档，文档即原型。制定良好的原型设计规范，统一设计标准，提高原型的可阅读性，不仅可以降低用户对界面的识别认知门槛，使相关人员更好更快的理解产品需求，在产品演示中也能使相关人员更好的沟通，后续在撰写PRD时不用费心费力，开发人员也不会对需求理解出现偏差。以下附上笔者原型设计的例子作为参考：http://shujuhoutai.sinaapp.com/#p=1__业务概览