国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

01 使用中繼器畫出列表

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#相關(guān)閱讀#

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

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

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

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

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

#專欄作家#

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

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

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