編輯導(dǎo)讀：Web產(chǎn)品的單選組件在畫原型的時候比較常見，所以產(chǎn)品經(jīng)理有必要深入了解它的各種交互和對應(yīng)的原型畫法。本文作者從自身實踐經(jīng)驗出發(fā)，分享了用Axure做出Web產(chǎn)品的列表組件的基礎(chǔ)畫法，供大家一同參考和學(xué)習(xí)。

除了通過表格來畫出簡單列表之外，我們還可以通過中繼器來畫出列表，相應(yīng)的原型效果請查看：https://jg2wis.axshare.com。

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

01 使用中繼器畫出列表

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

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

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

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

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

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

02 填充演示數(shù)據(jù)到列表

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

6、根據(jù)需求，修改列表所有的字段名，以及可能需要調(diào)整字段的數(shù)量。

7、點擊“列表字段值”中繼器，右側(cè)邊欄切換到“樣式”，點擊數(shù)據(jù)區(qū)域的圖標(biāo)“右側(cè)添加行”按鈕，多次點擊直到數(shù)量和列表字段數(shù)量相同。

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

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

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

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

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

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

#相關(guān)閱讀#

如何用Axure畫出Web產(chǎn)品的單選組件

如何用Axure畫出Web產(chǎn)品的菜單欄組件

如何用Axure畫出Web產(chǎn)品的面包屑組件

如何用Axure畫出Web后臺產(chǎn)品的編輯詳情頁

如何用Axure畫出Web后臺產(chǎn)品的列表組件：高級交互

#專欄作家#

浪子，個人微信langzipm，公眾號：浪子畫原型(langzisay)。專注于Axure原型設(shè)計和產(chǎn)品規(guī)范。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。