Axure教程:如何展示表格數據?

3 評論 26868 瀏覽 39 收藏 4 分鐘

通常在系統管理后臺中,使用列表(表格)形式展示數據是最為常見的方式。而在使用Axure設計產品原型時想實現這個數據列表卻不太容易,或許常見的做法就是使用矩形拼湊起來,還有就是直接使用表格控件來布局。但是這都不太方便,首先就是布局麻煩,其次就是數據修改比較麻煩。本文給大家介紹下如何使用表格+中繼器控件實現數據列表。

其實在實際的原型設計過程中,都會在表格+中繼器的基礎上增加個矩形框一起使用。這也是迫于無奈,在Axure上面表格無法實現單元格的合并。

因此通常表格只能把表格做為數據列表中的表頭,然后再利用中繼器的數據填充功能來展示數據部分。當遇到一些需要合并的單元格時,矩形框便發揮了它的強大作用。

下面就著重來講下中繼器如何來顯示數據:

創建中繼器,雙擊進入中繼器刪除里面的初始內容。

創建與表格相同列數的矩形框,高度可自定義,寬度保持與表格對應列相同,給每個元件起個名字(配備自己喜歡的風格,后續數據就會復制當前的樣式)。

在中繼器的屬性(`Properties`)中找到`Repeater`,創建與表格列數相同的列并起名(建議保持與上一步的名稱相同),最后填充示例數據。

注:可以直接在 Excel 中編輯數據,然后直接拷貝到中繼器里面。

選擇中繼器,添加個 Case 用于綁定數據與矩形框的關系。

設置隔行換色效果,在中繼器的 Style 中找到 Item Background 勾選 Alternating ,然后配對奇偶行的前景色。

注:如果在中繼器里面使用矩形框,一定要把其背景色設置為無,不然隔行換色就不起效果,這個教訓慘痛的。

這些便是關于在Axure中實現表格數據實現(點擊查看效果),如遇到一些復雜的要求,可以以此為參考,自由的發揮想象。

PS:

示例源文件下載:數據表格.rp

 

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

題圖來自 Pexels ,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大神都不用中文版嘛

    來自廣東 回復
    1. ?? 沒有啦,習慣而已,相信你也可以。

      來自上海 回復