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協議
評論
我國地圖原型預覽及下載地址:
https://axhub.im/pro/29a8f172520b70e2
世界地圖原型預覽及下載地址:
https://axhub.im/pro/b8dffc64f4e57f25
下你妹,明明是賣。
人家設計不需要時間呢,又不是做公益
謝謝謝謝寫
那就寫清楚。簡書大把的騙人去下載,然后要錢的