Axure 教程:用中繼器做漏斗圖

5 評論 5682 瀏覽 16 收藏 4 分鐘

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

你知道如何在Axure里面怎么樣用中繼器做一個漏斗圖嗎?一起來看看吧~

制作完成后的效果如下圖所示:

在線演示地址:http://ije8g9.axshare.cn/#g=1&p=環形圖http://ije8g9.axshare.cn/#g=1&p=%E9%A5%BC%E5%9B%BE

功能介紹

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

制作方法

1. 材料準備

準備多個高度相同,寬度不同的梯形,填上不同的顏色。梯形的制作,可以由3個矩形通過布朗運算得到。梯形命名為梯形1、梯形2、梯形3……,梯形1是最大的放在最上的梯形。制作完成后,把所有放在中繼器中,水平分布,上下居中。如下圖所示:

2. 中繼器內表格制作

如下圖所示,根據需求做好表格,最大的值一定要發在一個個格子。

no:按123456……順序排下去即可

name:具體名稱

quantity:數量。

3. 中繼器內交互

(1)每項加載時

如果no=1,那么除了顯示梯形1,其他梯形全部影藏。

如果no=2,那么除了顯示梯形2,其他梯形全部影藏

……以此類推,具體如下圖所示:

4. 標簽制作

做一個標簽,如下圖所示,默認隱藏。

思路:鼠標移入梯形的時候,顯示標簽,標簽跟隨鼠標移動,讓小標題的值=Item.name,數值=Item.quantity。

鼠標移出的時候,隱藏標簽即可。

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

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

 

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 看了好久終于看懂了,太省略了。對我這種小白很不友好,感謝樓主!

    來自重慶 回復
  2. 原型預覽及下載地址:
    https://axhub.im/pro/1882d0a30c3301c9

    來自廣東 回復
  3. 樓主內容略有隱藏啊

    來自湖北 回復
    1. 只是講解大概的思路,如果每一步詳細介紹的話,10萬字都不夠寫

      來自廣東 回復
    2. 請問下梯形中的百分比是如何實現的呢

      來自湖北 回復