今天，教大家如何用AXURE做可視化視圖——中國地圖和世界地圖。enjoy~

在線演示地址：

中國地圖：http://knt5gi.axshare.cn/#g=1&p=可視化視圖

世界地圖：http://4tinqs.axshare.cn/#g=1&p=可視化案例（面積前十的國家_梵蒂岡）

一、效果介紹

（1）世界各國的地圖，連最小的國家梵蒂岡也能找到,里面各國為形狀，可以改變顏色、設(shè)置交互等。

可視化視圖，用一個中繼器填入數(shù)據(jù)即可。以面積世界前十的國家+梵蒂岡為例：

（2）中國地圖，里面各省、直轄市、自治區(qū)、特區(qū)為形狀，可以改變顏色、設(shè)置交互等。

可視化視圖，用一個中繼器填入數(shù)據(jù)即可。以中國gdp排名為例。

二、制作方法

1. 材料準備

如果制作中國地圖，需要準備中國各省市的svg圖片，制作世界地圖的話，需要準備世界各國的svg圖片，圖片可以在網(wǎng)上下載。

2. 邏輯思路

將準備好的svg圖片導(dǎo)入axure后，將它轉(zhuǎn)為形狀，這樣就可改變顏色和設(shè)置交互，但是形狀與形狀之間會擋住，這時就需要用熱區(qū)圈出形狀的真實區(qū)域。

交互思路是，鼠標(biāo)移入熱區(qū)時，選中形狀，移出是，取消選中形狀。形狀選中時，顯示標(biāo)簽(標(biāo)簽顯示該形狀名稱)，形狀取消選中時，隱藏標(biāo)簽。

可視化邏輯，做一個中繼器，里面有形狀名和數(shù)據(jù)，當(dāng)選中形狀是，對該形狀的名稱進行篩選，得到對應(yīng)的數(shù)據(jù)，并顯示出來。

3. 具體交互

（1）各國家形狀的交互

（2）熱區(qū)的交互

該原型非常實用，但制作也不是很復(fù)雜復(fù)雜，但是耗時較久。

制作完成后，以后使用方便，僅需簡單填寫中繼器的內(nèi)容，即可擁有完美的效果，所以強烈推薦給各位使用。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議