如何分分钟开发高保真交互原型_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点技巧可以大大加快开发速度；另一方面，我建议先把整体页面框架（核心任务流）开发完整，然后再根据时间（以及精力、预算等）慢慢调整细节，能调多少是多少。
最后，值得一提的是，设计师或者产品经理务必跟前端开发人员沟通清楚：我们正在开发的这个高保真交互原型，待用户测试结束，就会全部扔掉，所以不必在一些细枝末节的问题上追求完美。
总之，对于一般的交互原型开发，只要掌握一些技巧就能大大减少开发工作量，分分钟就能搞定。
作者：运气超好
微信公众号：用户体验小故事