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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何分分钟开发高保真交互原型_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3958字，纯文字阅读大概需要6分钟。

内容图文

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

本文介绍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点技巧可以大大加快开发速度；另一方面，我建议先把整体页面框架（核心任务流）开发完整，然后再根据时间（以及精力、预算等）慢慢调整细节，能调多少是多少。

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

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

作者：运气超好

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

内容总结

以上是互联网集市为您收集整理的如何分分钟开发高保真交互原型_html/css_WEB-ITnose全部内容，希望文章能够帮你解决如何分分钟开发高保真交互原型_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端