产品原型设计的参考步骤

产品的原型设计实现一般区分整体和局部，整体上更多考虑信息架构的设计，如功能结构、导航、菜单、布局排版等方面的，局部上更多考虑功能上的交互设计，如按钮点击、反馈、页面切换、局部模块的整体展示等。从设计实现的角度来看，由总到分逐渐细化的过程是比较适合的。下面从整体和局部实例两个部分来讲解原型设计的步骤。

确定产品的整体结构

犹如现在盖房子时的地基和框架结构，整个结构决定了将来的房型样子，及房子是否稳固。而产品的结构设计则决定了产品未来的功能导航结构。一般来讲，我们在做需求分析的时候，都会把几个主要的功能点抓出来，这几个功能点就可以浓缩一下形成产品的初步功能结构。比如要做一个合同管理的功能，要求实现合同信息管理，合同履约管理，合同统计报表等功能，这里列出来的核心功能点就是主要结构。再比如我们要做一个会员管理的功能，注册和登录是必不可少的功能点，那么就可以将其列为会员管理下的两个基本结构。其实每个产品最终确定下来的一级导航栏里面的各个栏目就是产品的功能结构。

确定产品的布局排版

结构确定了之后，就需要对每一个产品页面进行元素的排版，排版之前，一般都会先对页面进行布局设计的考虑。通常我们做产品设计的时候，都会遵循一些已有产品总结出来的布局结构，比如三行三列布局，三行两列布局等，再如左导航右内容的形式，左内容右导航的形式等，这些都是大的布局结构，是整体页面的布局排版。细分到具体页面内容的时候，就需要对每一个内容块的展示位置进行布局，如企业网站首页的一般内容有图片新闻，通知通告，公司新闻，产品介绍，产品展示等等，我们需要对这些内容块进行一定的设计布局，这里的布局结构取决于设计人员对内容编排的把握，不同的布局会产生不同的效果。如电子商务网站，对内容块和广告块的布局排版就非常讲究，因为不一样的布局，所带来的用户点击量和转化率是不一样的。这种情况下，即对某一类产品的布局把握不好的时候，可以参照已有成熟产品的内容布局，因为它们已经有运营数据在支撑。

确定产品的功能模块

布局排版决定了某个产品功能模块的放置位置，接着就可以一块一块的确定原型设计内容，使其接近于最终产品的展示样式。这个时候就要用到原型设计的实例了，比如图片新闻，我们可以用幻灯片效果来做，比如产品展示，我们可以用跑马灯效果来做，具体采用什么样的交互效果来实现功能块要求展示的内容，取决于产品设计人员的把握、用户的需求及用户体验，其中用户体验是比较大的一块，就拿幻灯片效果来说，是否需要设计数字导航键，是否需要自动播放，是否需要设计缩略图等等，这些都需要仔细考虑之后再做决定，这个可以在设计产品时候多多讨论沟通，多看看别人的设计效果。譬如电子商务网站首页的Banner图片轮播效果，就是幻灯片效果，各大电商网站的设计大同小异，就完全可以借鉴参考。

这样三个步骤下来，产品的低保真原型就出来了，比较简单的产品，可以直接拿着低保真原型去做演示和写PRD文档，虽然这样的原型不带任何交互效果，但基本上还是可以说清楚产品功能的，结合细化之后的文档进行说明。然后我们所面对的通常都不是简单的产品，因此最起码要到中保真程度原型，结合交互的效果来达到我们的设计目的。要细化这样的交互设计，就需要在产品功能模块的原型设计上更进一步，把每个功能模块的原型完善，补充交互设计和基本的内容排版样式，通常可以按照如下的步骤进行设计：

结合原型设计工具的特性，确定功能模块实现的原理

每个实例原型都是一个单独的功能模块或交互效果，当你通过某款原型设计工具去实现的时候，都会有相应的实现原理。其实原理就是要让你自己明白这个东西到底是怎么做出来的，要怎么去做。如果这个都不明白的话，后面就无从下手了。因此做实例原型之前，原型设计工具的使用基础很重要，必须对工具已经有了一定的熟悉和了解，否则对着一个实现要求，没有任何想法，脑子一片空白，这样肯定是做不出东西来的。这个需要一个过程来培养，多看看别人设计的原型，弄清楚人家是怎么做，然后尝试着自己做一遍，最后想想有没有可以改进的地方。实际动手多了，自然而然的就会有感觉了，等到你看到一些简单的功能要求，只要看一下需求，就知道怎么用工具去画原型的时候，基本上就差不多了，当然对于一些复杂的功能，还是要好好理清思路的。因此，在做实例原型之前，一定要想清楚怎么去做，然后才开始动工，选择相应的组件把框架搭建出来。

对每个功能模块进行相对详细的交互设计

基础的准备工作包含添加组件元素，设置组件排版布局，设置组件属性（命名、大小、方位、颜色、文本等）。基础工作都做完了之后，就可以开始做交互设计了。这里的设计包括组件自身的可变效果，如鼠标移入、移出、悬停等；交互的事件，如鼠标单击的触发事件、鼠标的移入移出触发事件等；逻辑的设定，包括判断逻辑，跳转逻辑，反馈逻辑等。这部分对你的逻辑思维能力有比较高的要求，特别是做比较复杂的交互效果，思路一定要清晰，否则判断的条件一多，就很容易乱掉。而且在交互设计过程当中所用到的很多逻辑，最终都需要体现到你的PRD文档当中，因此不管是设计前的分析，还是设计后的总结，都是很考验逻辑能力的，要能够将产品的功能模块从前到后串联起来，这里推荐大家在设计原型之前，把对应的原型模块的操作流程图先画出来，理清思路，当然一定要结合实际产品下实际用户的操作场景去设计，切忌盲目主观的想当然。

交互效果的反复调试