AxureRP教程–指示地图效果

随着地图API的开放应用,越来越多的网站上提供了指示地图的功能,用来提供地点的定位,路线的查询等。因此也会有网站在设计的时候需要有地图功能模块。用AxureRP来设计指示地图的效果,如果要求不高的话,放一张地图的图片在那里,或者放一个占位符,说明一下是指示地图的功能区,其实也就可以了,用户和开发应该能明白,因为某些约定熟成的东西,不需要讲的太明白。但可以稍微有点交互效果,演示起来会更方便,也更易懂,毕竟随着技术的发展,地图的应用方式也越来越多了。

这里介绍两种指示地图的交互效果,其实应该说是一种,因为现在应用的都是两者兼用的,为了介绍方便,这里分开来讲。第一种是通过点击方向箭头来使地图在固定的框里移动的,第二种是通过拖拽的方式来移动地图。实现原理与跑马灯效果有点类似,通过动态面板里面嵌套动态面板的形式,鼠标单击事件触发动态面板的移动,拖拽的则是鼠标移入移出事件来触发动态面板的移动。

第一种方式为在内部嵌套的动态面板的一个状态里面放一张大的地图,然后固定外部动态面板的显示大小,通过设计四个方向箭头按钮的鼠标单击事件,控制内部动态面板的位移,这样就会变换内部动态面板在外部的显示内容;第二种方式在第一种方式的基础上,去掉方向箭头按钮,改为图片映射层,通过鼠标移入移出来控制地图的移动方向,造出拖拽的效果。这种方式需要设计好图片映射组件的放置点和方位。

?

上面所说的拖拽不是严格意义上的拖拽,只不过利用了鼠标移入移出的事件营造出这样的一个效果。AxureRP 6.0版本新增支持了动态面板的拖拽事件,不知是否为拖拽应用。指示地图的效果只能演示这种比较基础和简单的,现有的一些比如地图放大缩小功能,暂没有很好的办法进行设计演示,如哪位朋友能想到,可以分享一下。此外还有查看大图的按钮,这个是可以实现的,只要定义鼠标单击事件在当前窗口或新窗口打开一张大的地图图片即可。

有时候虽然说原型设计的要求不高,只需要设计出个大概样子就可以了,但是能够设计出来的效果虽然增加了设计时间,但增强了演示效果,也可以提升一下自己使用AxureRP做原型设计的思考能力,对自身还是有帮助的,当然啦,在设计任务时间要求紧的情况是没有办法的,可以尝试将这种效果做成功能模块,用的时候加载一下就好了,时间充裕的时候则做设计完善。

示例在AxureRP 5.5版本下调试通过

《原型设计》微电子杂志? 点此订阅

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

评论已关闭!