快好知 kuaihz

Axure 教程:中国地图和世界地图

今天,教大家如何用AXURE做可视化视图——中国地图和世界地图。enjoy~

在线演示地址:

中国地图:http://knt5gi.axshare.cn/#g=1&p=可视化视图

世界地图:http://4tinqs.axshare.cn/#g=1&p=可视化案例(面积前十的国家_梵蒂冈)

一、效果介绍

(1)世界各国的地图,连最小的国家梵蒂冈也能找到,里面各国为形状,可以改变颜色、设置交互等。

可视化视图,用一个中继器填入数据即可。以面积世界前十的国家+梵蒂冈为例:

(2)中国地图,里面各省、直辖市、自治区、特区为形状,可以改变颜色、设置交互等。

可视化视图,用一个中继器填入数据即可。以中国gdp排名为例。

二、制作方法

1. 材料准备

如果制作中国地图,需要准备中国各省市的svg图片,制作世界地图的话,需要准备世界各国的svg图片,图片可以在网上下载。

2. 逻辑思路

将准备好的svg图片导入axure后,将它转为形状,这样就可改变颜色和设置交互,但是形状形状之间会挡住,这时就需要用热区圈出形状的真实区域。

交互思路是,鼠标移入热区时,选中形状,移出是,取消选中形状形状选中时,显示标签(标签显示该形状名称),形状取消选中时,隐藏标签。

可视化逻辑,做一个中继器,里面有形状名和数据,当选中形状是,对该形状的名称进行筛选,得到对应的数据,并显示出来。

3. 具体交互

(1)各国家形状的交互

(2)热区的交互

该原型非常实用,但制作也不是很复杂复杂,但是耗时较久。

制作完成后,以后使用方便,仅需简单填写中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:中国地图  中国地图词条  世界地图  世界地图词条  教程  教程词条  Axure  Axure词条  
原型

 Axure原型设计丨页面滑动效果

在原型展示时,有些页面过长,需要可以上下滑动,如何让页面能够拖动鼠标实现上下滑动?效果图如下:可直接点击链接查看页面滑动效果:https://btuqkp.ax...(展开)

原型

 Axure8.0轻松制作简单拖动...

跟技术撕逼一个效果,花费大量时间也无法交流出来,干脆动手做一个算了,有图说明一切,同时分享给各位产品经理,先看看效果。大神勿喷效果很简单软件版本axure 8....(展开)

原型

 Axure RP 9 教程:模拟...

最近疑似陷入财务困境的小黄车,共享单车ofo公司,遭到用户争相索还199元人民币的押金,小黄车陷入风口浪尖之中。(o)……不过呢,今天要讲的不是ofo的困境,不...(展开)