如何分分钟开发高保真交互原型_html/css_WEB-ITnose

产品开发，体验先行。由于软件产品开发的成本比较高，所以在开发之前，往往先由目标用户来验证产品创意的价值，而最高效的方法就是通过高保真交互原型进行测试。

天下武功，唯快不破。在日新月异的互联网市场，产品经理必须迅速评估创意，挑选具有潜力的点子。常规的做法是：各个页面的静态效果图评审通过之后，立即交给开发人员评估高保真交互原型的开发工作量，评估的结果往往是需要两三天，甚至两三周的开发时间。

本文介绍4点快速开发交互原型的方法，在各个页面的静态效果图已经准备妥当的前提下，开发高保真交互原型两三小时都不用，两三分钟轻松搞定！

4点技巧

不懂前端代码（HTML、css、js等）也没关系，我们可以用可视化工具（比如Axure）来开发，这4点技巧都是通用的。

（1）热点跳转

在“网页”上贴一整张高保真效果图，然后在可点击的区域（可能是图片、链接等）上覆盖一个透明的“热区”， 测试用户只要点击该“热区”，就直接跳转到新的“网页”。

如果您用的是Axure（以Axure RP Pro 7.0为例说明）开发，就利用“Hot Spot”热点控件（如下图），直接覆盖在图片的可交互热区上。当然，除了热点控件，你还可以使用 “Rectangle”矩形控件（将其边框和填充色都设置为透明即可）。

图1 Axure中的热点控件

如果您是用前端代码开发，也很简单，直接将一个透明的div绝对定位（position:absolute）到可点击区域上。

就这样，高保真交互原型就开发完了，非常简单、快速。

（2）仅开发那些发生交互区域

一方面，有些页面不需要做任何交互效果。最常见的是“任务流”的最后一个页面，比如，用户的任务是找到收藏列表，用户只要打开收藏列表页就算完成任务，所以这个收藏列表页不需要做任何交互效果，直接贴一整张图。

另一方面，与可用性测试任务流无关的区域也不需要做交互效果。如下图（图2），假设用户的测试任务是购买3D眼镜，那么，网页底部的页脚（footer），以及与3D眼镜无关的其他商品都不需要做热点链接。

图2 仅开发那些发生交互的区域

如果您是用前端代码开发，建议在大背景上（background）先贴一整张效果图；然后，把开发完成的div绝对定位覆盖上去，调整到与背景的效果图一模一样；最后，在div上加背景覆盖掉大背景，非常完美。

（3）整页切换

在原型开发过程中，我们常常遇到有一些局部的效果做起来相当麻烦，需要用到大量的动态面板（或者js），这时，我们换一种思路，把局部的交互做成整页的切换，往往问题就轻松解决了。

比如，在商品列表的操作区，点击“按成交量排序”按钮，如果做“局部刷新”会很麻烦，不如直接跳转到一个新页面（一整张按成交量排列好的静态图片）。

当然，“整页刷新”的效果没有“局部刷新”效果逼真，但毕竟是个原型，允许它“粗糙”一点，却能节省我们大量的开发时间。

（4）将页面中的数据或者链接“写死”

在原型开发过程中，如果要用“真实的”数据，会很累，需要操作数据库，开发有难度也比较耗时。所以，我们在原型中一般都会将页面中的数据或者链接“写死”。

比如，不管从哪个列表项点进来，都跳转到唯一的相同的详情页。又比如，不管输入什么账号密码，都可以登录（跳转）。

如果不影响核心任务，尽量不要用到复杂的数据库或者后台，简简单单跳转页面就行了。

一些注意事项

（1）如果你是用可视化工具开发

可视化工具利用所见即所得的方式，非常方便，但我们也要了解这些软件的限制。如果它的缺陷我们无法接受，那最好一开始就不要选择它来开发，以免浪费时间。

还是以Axure为例，它毕竟是一款专门用来开发低保真原型（线框图）的工具，用它来开发高保真原型，主要的缺点是输出的网页效果不够精细。比如，很难修改一些控件的默认样式（比如文本框）；也不能做到“高度适应”（即如果上方的内容的高度变化，下方的内容不会自动下移）；此外，元素的定位可能有点偏差(特别是有边框的元素)，等等。

此外，如果您懂一点前端代码，也可以对Axure生成的HTML文件及其CSS样式文件进行微调，尽量保证完美呈现。

（2）如果你是用代码开发

用代码开发的话，理论上可以做到跟效果图一模一样，只是相对于可视化工具，需要投入大量的时间和精力。

在实际开发时，一方面，根据我们上面提到的4点技巧可以大大加快开发速度；另一方面，我建议先把整体页面框架（核心任务流）开发完整，然后再根据时间（以及精力、预算等）慢慢调整细节，能调多少是多少。

最后，值得一提的是，设计师或者产品经理务必跟前端开发人员沟通清楚：我们正在开发的这个高保真交互原型，待用户测试结束，就会全部扔掉，所以不必在一些细枝末节的问题上追求完美。

总之，对于一般的交互原型开发，只要掌握一些技巧就能大大减少开发工作量，分分钟就能搞定。

作者：运气超好

微信公众号：用户体验小故事