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）热区的交互

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

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

本文由 @梓贤Vigo 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

作者暂无likerid, 赞赏暂由本网站代持，当作者有likerid后会全部转账给作者（我们会尽力而为）。


Support author:
Author's Filecoin address:
Or you can use Likecoin to support author: