文档介绍：前言
什么是原型呢?
产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体、形象和生动。就我个人而言,目前使用频率最多,最高效,交互效果最好的原型工具是axure。今天给大家介绍一些我在工作中使用axure的经验。主要从交互设计中涉及的三个主要步骤进行说明:

一、主要页面原型
在进行主要页面原型设计之前,交互设计师需要:
一份主要的任务流程图(或是用例,一般由产品经理提供)
一份主要功能列表(一般由产品经理提供)
网站信息架构(信息架构在一些公司是需要交互设计师来完成的)
对于前期调研结果的理解
如何做“主要页面原型”
1. 在建立项目的初期就开始定义Master
项目一开始启动,如果可以稍微掌握哪些区块未来将是共享区块,那么就开始建立Master,比如网站的Header / Footer / 导览选单(Navigation),或者广告版位等等。越早使用,越可以节省其它页面设计的重复工作。

Master的定义
RP library
网上有很多资源,如:/post/6285。也可以自己制作适合产品的library。

网上的library资源
“任务流程图”,“功能列表”将主要的页面原型制作出来。
这时可以包括一些必要的交互动作。一些详细的,比如出错提示等交互可以不用考虑。

主要的页面列表
用途:
主要的页面原型可以用于产品初期的讨论会、测试以及产品介绍会。
应注意几点:
。着眼于大局,不要纠结细枝末节
在制作原型的初期请把所有精力都放在流程的优化和布局设计上面吧,不要把时间浪费在视觉设计上,那样绝对是得不偿失。
因为我们的原型方案还没有最终通过,肯定要通过多次迭代才能确定方案,太多的视觉设计就是浪费时间;
再者,如果原型做的十分逼真,在产品讨论会上,视觉的元素会很快抓住大家的眼球,到时就会有领导来质疑你的界面是不是该换成蓝色,按钮是不是再精致一些这样的问题。没有人会专注于你的交互设计了。
,用纸和笔画一些纸面原型,整理一下思路。
,迭代的。

二、页面流程图
在确定主要页面之后,我们可以开始细化页面流程了。页面流程图有利于向大家展示自己的想法,也有利于思路的整理。毕竟axure上面的交互点是散的,通过页面流程图,我们可以整理所有的页面上的交互行为,避免遗漏;在向他人展示的时候,也可以一目了然的看出需要的操作步骤是多少。
我倾向于将主要任务列出来,然后画出所有任务的页面流程图。

页面流程图
页面流程图要素
由于axure中没有斜线,在表现流程的时候有些受限。我会在流程图中表现以下几点:
操作步骤的名称和编号
 
开始和结束
页面的名字
点击的位置
操作说明和箭头
步骤序号
用途
可以与他人沟通流程、整理思路细化流程。
应注意的几点
如果项目时间有限,页面流程可以画在纸上。但还是建议在交互设计保留这一步。
为了减少沟通成本,在绘制页面流程图时,最好有一定的规范和标准。
三、完善原型
页面的主要页面和页面流程确定之后,就可以完善原型了。这时可以叫上产品部的同事一起来完成原型的细节工作。
如何完善原型
1. 按照页面流程中所考虑的交互过程,体现在原型上面。出错,提示等交互细节也应有体现。这时你可能会用到变量、层等高级axure技巧。

点击定时操作弹出层的操作
2. 增加说明
选中某个控件,在右边区域可以为此控件增加说明。

增加描述

增加描述后的前台页面,点击黄色图标显示说明提示层
如果对于说明区域的属性不满意,可以修改属性:

修改属性
不过这种增加描述的方式可能会干扰整个页面,很容易让浏览者以为是一个页面元素。也可以采取一种原始的方法为控件增加说明文字:

文字补充说明
3. 为页面编号
当原型不再需要修改时,我们需要为原型页面编号,这样有利于与视觉设计师、前端沟通。
用途
测试、产品需求文档编写参考、视觉设计参考、前端设计参考等。
应注意的几点
1. 不要过于追求技术表现
原型有些交互效果做出来会很花费时间,我建议不要过于追求技术表现效果,可以用些文字来说明交互效果。Axure软件的初衷是快速的设计原型,如果在一些技术方面交互设计师花费很多时间的话,就有些顾此失彼了。还是把真实的效果交给前端去实现吧。
2. 为了减少沟通成本,在完善原型