Web產品的列表組件在畫原型的時候比較常見，所以PM有必要深入了解它的各種交互效果和對應的原型畫法。

除了通過表格來畫出簡單列表之外，我們還可以通過中繼器來畫出列表，相應的原型效果請查看https://jg2wis.axshare.com。如需下載本文的AxureRP源文件，請添加作者微信langzipm。

另外作者單獨寫了一篇文章詳細介紹列表組件的高級交互，有興趣的同學可以擴展閱讀如何用Axure畫出Web后臺產品的列表組件：高級交互。

一、使用中繼器畫出列表

如果僅需演示列表效果無需填充數據，請根據下述步驟進行操作。

1、先考慮清楚列表包含多少個字段。從默認元件庫拖動相應數量的“矩形1”到畫布合適位置，修改成合適尺寸。

2、同時選擇列表頭的所有字段名，建議修改為“左側對齊”，填充顏色修改為#F2F2F2，即第一排倒數第二個顏色。線段顏色修改為#D7D7D7，即第一排倒數第三個顏色。

3、同時選擇列表頭的所有字段名，右鍵點擊“設為組合”，然后在右側邊欄設置組合的名稱“列表字段名”。

4、從默認元件庫拖動“中繼器”到列表頭的下方合適位置，命名為“列表字段值”。如果不用填充數據，建議點擊右側邊欄“交互”，刪除默認的“每項加載時”事件。

5、雙擊該中繼器進入內部，從默認元件庫拖動相應數量的“矩形1”到畫布合適位置，修改成合適尺寸。建議修改為“左側對齊”，線段顏色修改為#D7D7D7。

二、填充演示數據到列表

如需填充演示數據到列表中，請根據下述步驟進行操作。

6、根據需求，修改列表所有的字段名，以及可能需要調整字段的數量。

7、點擊“列表字段值”中繼器，右側邊欄切換到“樣式”，點擊數據區域的圖標“右側添加行”按鈕，多次點擊直到數量和列表字段數量相同。

8、在“數據”中輸入演示數據，可以一個一個進行編輯。同時也支持從excel中復制列表數據到這里。

9、點擊“列表字段值”中繼器，右側邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發條件“每項加載時”，添加動作“設置文本”，目標選擇“字段值1”，點擊值后面的fx，進入“編輯文本”彈窗，刪除輸入框中的值，然后點擊“插入變量或函數”選擇item.Column0，然后點擊“確定”按鈕。

10、點擊“設置文本”動作后面的“添加目標”，然后選擇“字段值2”，同理設置它的值為item.Column1。

11、直到設置出最后一個“字段值6”，同理設置它的值為item.Column5。

12、考慮到商品名稱比較長，需要調整下相應的列表項字段名和字段值的寬度保證不需要換行展示。

13、點擊“預覽”按鈕，然后在瀏覽器中查看原型效果。

總結

以上是生活随笔為你收集整理的axure按钮切换颜色_如何用Axure画出Web产品的列表组件：基础画法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。