axure8.0快速入门新手教程:地图

2017年4月15日 阅读:2,786

现在有关于地图的设计越来越多了,因为这个手机的GPS定位功能,地图更是让众多的软件开发商使用得恰到好处。比如高德使用地图来导航,微信使用地图来位置共享,甚至最近流行的摩拜单车更是使用地图来寻找共享单车。一些只懂axure基础的人画产品原型往往是使用一张图片来表示地图,但如果你让老板看到你画的产品原型中,地图是一个拥有可拖动放大缩小等逼真功能的逼真地图,那相比于别人你是不是更容易进入老板的视线呢?

制作这么一个地图的原型也不复杂,学会了以后使用就是分分钟的事,这里就不多说废话了,这一章就教大家如何结合axure8.0和百度地图来制作逼真的地图原型。

第一步:拖拉摆放好相关控件

其实就4样东西,一个手机壳外表、一个蓝底蓝框的矩形,一个白底白框的矩形和一个内联框架。其中白底白框的矩形正中间有“搜地点、查公交、找线路”字样。

第二步:设置内联框架的属性

设置内联框架的框架目标为map.html,框架滚动条为从不显示,预览图片为地图。

第三步:制作map.html文件

首先,进入百度的地图开放平台(http://lbsyun.baidu.com/),【开发】——【地图生成器】

然后,设置定位中心点,设置地图和添加标注,可根据自己的需求设置参数,也可以使用默认参数。我这里使用的都是默认参数。

接着,获取代码以及申请秘钥

点击下方的获取代码按钮生成地图代码,点击右方的申请密钥按钮获取密钥字符串,如果不知道如何申请,也可以查看上方的《了解如何申请密钥》。

最后,修改并保存地图代码

将地图代码拷贝出来,对地图代码做两个地方的修改后保存成map.html文件,并将map.html放在原型生成的html文件夹根目录上。

打开原型的html代码,就可以看到地图了,还可以在地图上进行拖动、放大、缩小等等操作。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之地图
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/04/15/438/

5条评论

  • 钟燕 2017年6月12日在下午2:39

    你好

    • 维度 2017年6月13日在上午11:40

      大家好才是真的好

  • 晓艳 2017年6月8日在上午11:14

    🙁 好吧。这点可以是Axure 需要改进一点。

  • 晓艳 2017年6月7日在下午3:50

    在Axure Preview 下或发布到Axure Share 下都看不到地图。要将工程生成html后才能看到地图。。。。版主是不是遇到一样的情况呢?

    • 维度 2017年6月7日在下午5:48

      这是肯定的