在可視化大屏設計中，動態滾動列表是一種常見且實用的展示方式，能夠有效地展示大量信息。本文將詳細介紹如何使用Axure制作一個動態滾動的列表展示模塊。
一、準備工作
- 打開Axure軟件：確保你已經安裝并打開了Axure RP軟件。
- 創建新項目：選擇合適的設備尺寸（如大屏常見的1920x1080），創建一個新的項目。
二、制作列表表格
我們將使用Axure的中繼器來制作列表表格。
- 拖入中繼器：從左側的元件庫中拖入一個中繼器到畫布上。
- 設置中繼器列：雙擊中繼器，進入中繼器的編輯界面。在“列”選項卡中，添加以下列：
- 訂單編號
- 地區
- 檢修時間
- 銷毀類型
- 運輸車輛
- 風險預警
- 添加數據：在“數據集”選項卡中，添加示例數據，如圖中所示：
- 202110300001, 廣東省深圳市, 2021-12-15 16:20:30, 物品丟失, 1號車輛, 高風險
- 202110300002, 廣東省廣州市, 2021-12-15 16:20:30, 包裝破損, 2號車輛, 中風險
- 202110300003, 廣東省惠州市, 2021-12-15 16:20:30, 商品毀壞, 3號車輛, 低風險
- 202110300004, 廣東省珠海市, 2021-12-15 16:20:30, 物品丟失, 4號車輛, 中風險
- 設計列表項樣式：回到中繼器的主界面，設計每一項的樣式。可以使用矩形、文本框等元件來展示每一列的數據。
三、創建動態面板
為了實現列表的動態滾動效果，我們需要使用動態面板。
- 拖入動態面板：從元件庫中拖入一個動態面板到畫布上，將其命名為“外部面板”，用于限定列表的可視區域。
- 調整外部面板大小：根據需要調整外部面板的大小，使其能夠容納列表的一部分內容。
- 拖入另一個動態面板：在外部面板內再拖入一個動態面板，命名為“內部面板”，用于放置中繼器。
- 將中繼器放入內部面板：將之前設計好的中繼器拖入內部面板中。
四、設置動態面板交互邏輯
- 設置內部面板的交互：
- 選中內部面板，在右側的“交互”面板中，點擊“添加交互”。
- 選擇“移動”動作，設置移動方向為“垂直”，距離為30像素，動畫為“無”。
- 再添加一個“等待”動作，設置等待時間為2000毫秒（2秒）。
- 最后添加一個“觸發事件”動作，觸發內部面板的“載入時”事件，實現循環滾動。
- 設置外部面板的交互（可選）：如果需要，可以在外部面板上添加一些交互，比如鼠標懸停時暫停滾動等。
五、預覽和調試
- 預覽項目：點擊Axure工具欄中的“預覽”按鈕，查看動態滾動列表的效果。
- 調試：如果發現滾動效果不理想，可以回到Axure中調整移動距離、等待時間等參數，直到達到滿意的效果。
六、總結
通過以上步驟，我們成功使用Axure制作了一個可視化大屏的動態滾動列表展示模塊。這個模塊可以有效地展示大量信息，并且通過動態面板的交互邏輯實現了列表的自動滾動效果。在實際項目中，你可以根據具體需求調整列表的樣式、數據和滾動參數，以達到最佳的展示效果。
希望這篇教程對你有所幫助，祝你使用Axure進行原型設計順利！
?— — 往期推薦 — —
Axure設計的“廣東省網絡信息化大數據平臺”數據可視化大屏-CSDN博客
EQL UI元件庫：Axure設計師的高效利器-CSDN博客
Axure大屏可視化模板：賦能多領域，開啟數據展示新篇章_axre-CSDN博客
2小時完成1天工作量？有了這款Axure移動端元件庫，設計如此簡單-CSDN博客
CRM企業客戶關系管理系統產品原型方案-CSDN博客
Axhub Charts：Axure原型設計的動態數據可視化元件庫-CSDN博客
)
)