Axure教程:動態柱狀統計圖

編輯導語:統計圖在我們日常生活中十分常見,那麼,如何做出動態化的柱狀統計圖,既讓客戶看得清晰,也看得賞心悅目?本篇文章裡,作者總結了如何利用Axure繪製動態柱狀統計圖的流程,一起來看一下。

Axure教程:動態柱狀統計圖

我們在畫原型圖時經常會遇到各種統計圖,一個動態的統計圖演示給客戶或領導看時會更容易加分,本文先將為大家教學如何繪製動態柱狀統計圖。

平時工作中會遇到許多需要進行統計的地方,如何快速畫出既美觀又實用的統計圖呢,本文將先帶大家解答如何繪製動態柱狀統計圖。

演示效果:

https://hc4wih。axshare。com

一、動態柱狀統計圖繪製教程

首先,我們開啟Axure後,繪製相應的基礎線段和文字描述(本文引數僅供參考,請根據實際需要繪製引數)。

Axure教程:動態柱狀統計圖

選取一個矩形框,將高度設定為:1,寬度和填充顏色根據使用場景調整,此處我將矩形放置“10月”上方中心位置,方便後面動態效果展示。

Axure教程:動態柱狀統計圖

接著我們進行互動效果的設定。

選擇【載入時-設定尺寸-當前元件】,高度設為:66,動畫效果:線性 500毫秒。

Axure教程:動態柱狀統計圖

接著我們複製已設定好的矩形框,分別複製在不同的“月份上方”,對已複製的矩形框調整需要的尺寸高度。

Axure教程:動態柱狀統計圖

最後我們可以根據美觀效果,在不同的矩形高度上方設定數字座位高度的顯示並對數字進行命名,將數字進行隱藏,對矩形設定互動【載入時-顯示-數字-逐漸-1000毫秒】,這樣我們整個的動態柱狀統計圖就做出來啦~

Axure教程:動態柱狀統計圖

下期將為大家詳細介紹如何繪製動態折線統計圖及動態餅狀圖~~

本文由 @畫圖仔 原創釋出於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Pexels,基於CC0協議。

頂部