中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

01 使用中繼器畫出列表

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

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

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

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

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

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

02 填充演示數據到列表

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

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

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

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

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

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

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

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

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

#相關閱讀#

如何用Axure畫出Web產品的單選組件

如何用Axure畫出Web產品的菜單欄組件

如何用Axure畫出Web產品的面包屑組件

如何用Axure畫出Web后臺產品的編輯詳情頁

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

#專欄作家#

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

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

題圖來自Unsplash，基于CC0協議。