如何分分钟开发高保真交互原型_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点技巧可以大大加快开发速度;另一方面,我建议先把整体页面框架(核心任务流)开发完整,然后再根据时间(以及精力、预算等)慢慢调整细节,能调多少是多少。

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

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

作者:运气超好

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

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: