时间:2021-07-01 10:21:17 帮助过:248人阅读
天下武功,唯快不破。在日新月异的互联网市场,产品经理必须迅速评估创意,挑选具有潜力的点子。常规的做法是:各个页面的静态效果图评审通过之后,立即交给开发人员评估高保真交互原型的开发工作量,评估的结果往往是需要两三天,甚至两三周的开发时间。
本文介绍4点快速开发交互原型的方法,在各个页面的静态效果图已经准备妥当的前提下,开发高保真交互原型两三小时都不用,两三分钟轻松搞定!
4点技巧
不懂前端代码(HTML、css、js等)也没关系,我们可以用可视化工具(比如Axure)来开发,这4点技巧都是通用的。
在“网页”上贴一整张高保真效果图,然后在可点击的区域(可能是图片、链接等)上覆盖一个透明的“热区”, 测试用户只要点击该“热区”,就直接跳转到新的“网页”。
如果您用的是Axure(以Axure RP Pro 7.0为例说明)开发,就利用“Hot Spot”热点控件(如下图),直接覆盖在图片的可交互热区上。当然,除了热点控件,你还可以使用 “Rectangle”矩形控件(将其边框和填充色都设置为透明即可)。
图1 Axure中的热点控件
如果您是用前端代码开发,也很简单,直接将一个透明的div绝对定位(position:absolute)到可点击区域上。
就这样,高保真交互原型就开发完了,非常简单、快速。
一方面,有些页面不需要做任何交互效果。最常见的是“任务流”的最后一个页面,比如,用户的任务是找到收藏列表,用户只要打开收藏列表页就算完成任务,所以这个收藏列表页不需要做任何交互效果,直接贴一整张图。
另一方面,与可用性测试任务流无关的区域也不需要做交互效果。如下图(图2),假设用户的测试任务是购买3D眼镜,那么,网页底部的页脚(footer),以及与3D眼镜无关的其他商品都不需要做热点链接。
图2 仅开发那些发生交互的区域
如果您是用前端代码开发,建议在大背景上(background)先贴一整张效果图;然后,把开发完成的div绝对定位覆盖上去,调整到与背景的效果图一模一样;最后,在div上加背景覆盖掉大背景,非常完美。
在原型开发过程中,我们常常遇到有一些局部的效果做起来相当麻烦,需要用到大量的动态面板(或者js),这时,我们换一种思路,把局部的交互做成整页的切换,往往问题就轻松解决了。
比如,在商品列表的操作区,点击“按成交量排序”按钮,如果做“局部刷新”会很麻烦,不如直接跳转到一个新页面(一整张按成交量排列好的静态图片)。
当然,“整页刷新”的效果没有“局部刷新”效果逼真,但毕竟是个原型,允许它“粗糙”一点,却能节省我们大量的开发时间。
在原型开发过程中,如果要用“真实的”数据,会很累,需要操作数据库,开发有难度也比较耗时。所以,我们在原型中一般都会将页面中的数据或者链接“写死”。
比如,不管从哪个列表项点进来,都跳转到唯一的相同的详情页。又比如,不管输入什么账号密码,都可以登录(跳转)。
如果不影响核心任务,尽量不要用到复杂的数据库或者后台,简简单单跳转页面就行了。
一些注意事项
可视化工具利用所见即所得的方式,非常方便,但我们也要了解这些软件的限制。如果它的缺陷我们无法接受,那最好一开始就不要选择它来开发,以免浪费时间。
还是以Axure为例,它毕竟是一款专门用来开发低保真原型(线框图)的工具,用它来开发高保真原型,主要的缺点是输出的网页效果不够精细。比如,很难修改一些控件的默认样式(比如文本框);也不能做到“高度适应”(即如果上方的内容的高度变化,下方的内容不会自动下移);此外,元素的定位可能有点偏差(特别是有边框的元素),等等。
此外,如果您懂一点前端代码,也可以对Axure生成的HTML文件及其CSS样式文件进行微调,尽量保证完美呈现。
用代码开发的话,理论上可以做到跟效果图一模一样,只是相对于可视化工具,需要投入大量的时间和精力。
在实际开发时,一方面,根据我们上面提到的4点技巧可以大大加快开发速度;另一方面,我建议先把整体页面框架(核心任务流)开发完整,然后再根据时间(以及精力、预算等)慢慢调整细节,能调多少是多少。
最后,值得一提的是,设计师或者产品经理务必跟前端开发人员沟通清楚:我们正在开发的这个高保真交互原型,待用户测试结束,就会全部扔掉,所以不必在一些细枝末节的问题上追求完美。
总之,对于一般的交互原型开发,只要掌握一些技巧就能大大减少开发工作量,分分钟就能搞定。
作者:运气超好
微信公众号:用户体验小故事