Axure教程:可視化視圖

2 評論 11981 瀏覽 111 收藏 5 分鐘

本文將教大家如何用中繼器做漏斗圖,其中包括了功能介紹與制作方法。

在線演示地址:http://demo.axureshop.com/?url=http://cloud.axureshop.com/t7wlih&buyurl=https://www.axureshop.com/a/1017510.html

總體介紹

  1. 所有圖表(中國地圖、折線圖、排名圖、漏斗圖、環形圖)不需要聯外網,數據也不是寫死的,只需在中繼器或表格中填寫數據即可自動生成圖表,操作簡單。
  2. 大小、顏色、樣式、交互可以自由變換。
  3. 鼠標移入時能顯示具體數據。

制作方法

1. 背景的制作

  1. 可以用矩形添加自己喜歡的顏色,或者直接使用圖片素材作為背景;
  2. 背景制作完成后,使用水平線和垂直線劃分區域(左上,左中,左下,中上,中下,右上,右中,右下);
  3. 用文本或矩形制作標題。

2. 左上區域制作——待處理信息

  1. 用圓形或者圖標做出3個大小相同,顏色不一樣氣泡形狀,水平分布。
  2. 制作3個文本標簽,標簽需和氣泡顏色一致,放置在氣泡下方,垂直居中。
  3. 填上數據即可。

3. 左中區域制作——折線圖

通過中繼器導入數據,自動生成折線圖。制作的方法請參考我之前寫的:axure教程:折線圖

4. 左下區域制作——環形圖

通過在表格中填寫數據,自動生成環形。制作的方法請參考我之前寫的:axure教程:環形圖

5. 中上區域制作——中國地圖

在中繼器中填寫數據,地圖自動顯示效果,制作的方法可以參考我之前寫的:axure教程:中國地圖和世界地圖

6. 中區域制作:表格

  1. 在Axure中拖入一個表格原件;
  2. 在表格內填上標題個數據;
  3. 根據喜歡設置各行的字體顏色,大小,高度,背景顏色。

7. 右上區域制作——top5氣泡圖

  1. 畫5個圓形,設置圓形顏色為透明,邊框顏色根據喜好設置。
  2. 調整圓形大小,填入數據,設置字體大小即可。

8. 右中區域制作——排名圖

通過中繼器導入數據,自動生成排名圖。制作的方法請參考我之前寫的:Axure 教程:用中繼器做排名圖

9. 右中區域制作——漏斗圖

通過中繼器導入數據,自動生成漏斗圖。制作的方法請參考我之前寫的:Axure 教程:用中繼器做漏斗圖

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

有需要原型的小朋友給我留言哦,謝謝閱讀。

 

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 原型預覽及下載地址:
    https://axhub.im/pro/295389d280544cd9

    來自廣東 回復
  2. 大佬

    回復