Axure高保真教程:自動滾動的排名表格

1 評論 7039 瀏覽 8 收藏 6 分鐘

編輯導語:如何利用中繼器,制作一個可以自動滾動的排名表格,讓信息可以更好地被展示?本篇文章里,作者對如何在Axure里制作可自動滾動的排名表格一事做了示例,一起來看一下。

排名表格是數據可視化里面一個常用的工具,所以作者今天就教大家在Axure里面如何制作一個能過自動滾動的排名表格,我們以閱讀排行榜為案例教程。

一、制作完成后應具備以下效果

  1. 自動輪播滾動的效果,自動輪播排名表的信息。
  2. 易維護的效果,我們通過中繼器來制作,后續維護內容只需要在中繼器表格里填寫文字和導入圖片,自動生成交互效果,從而提高表格的復用性。

二、制作材料準備

主要材料包括中繼器元件、矩形元件、圖片元件、文本標簽、外框和圖標。

外框主要是由圖片文字而成,你們可以根據你們的需要來設置即可。

表頭的話你們可以用矩形或者表格來制作,案例中用6個矩形制作,你們也可以根據你們所需要的展示的內容來添加或者刪除

中繼器是最重要的元件,后續的元件都是放在中繼器內部。從左一次為排名文本、圖片元件、博主名稱文本、閱讀量文本、點贊數文本、評論數文本和總分值文本。如下圖所示擺放,和上面的表頭的標題內容一一對齊。

中繼器的表格我們也是設置7列,分別對應上面中繼器表格內的7個元件,no列對應排名文本,pic列對應圖片元件,name列對應博主名稱文本,yueduliang列對應閱讀量文本,dianzan列對應點贊數文本,pinglun列對應評論數文本,fenzhi對應總分值文本。

在中繼器內導入對應的文本和圖片,中繼器背景顏色設置為交替顏色,分別選擇白色和淺藍灰色,這樣就有間隔不同顏色的效果。

三、交互設置

我們通過設置文本的交互,將中繼器里no列的值設置到元件排名文本,name列的值設置到元件博主名稱文本,yueduliang列的值設置到元件文本,dianzan列的值設置到元件點贊數文本,pinglun列的值設置到元件評論數文本,fenzhi的值設置到元件總分值文本。

然后用設置圖片的交互,將中繼器表格里pic列的圖片設置到中繼器里的圖片元件。

完成上述操作后,我們選擇中繼器表格,通過鼠標右鍵將中繼器轉為動態面板,將動態面板的這個狀態(默認是state1)復制幾個,具體看你的數據量。案例中的數據量為20,默認顯示前5個,所以我們總共需要4個state

復制完成后,我們將數據內容導入到state2到4面板里的中繼器表格中。

最后我們寫循環輪播的的交互,在動態面板載入是,我們設置動態面板的狀態為next,勾選向后循環,增加向上滑動的動畫效果并設置動畫時間(動畫時間決定了滾動的速度,時間越久,速度越慢),勾選循環間隔,循環間隔的時間要和動畫時間一致。

這樣我們就完成了用中繼器表格制作自動滾動的排名表格的原型模板了,以后使用只需要在動態面板里每個state的中繼器表格中填寫導入具體內容即可,自動生成表格輪播的效果

那以上就是本期教程的全部內容了,感興趣的同學們可以動手試試,謝謝您的閱讀,我們下期見,88~

 

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

題圖來自Unsplash,基于CC0協議

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

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 實話實話,拿出來分享的,都是有藏一手的,按照這里面說的執行,就是個半成品

    來自上海 回復