編輯導(dǎo)語：Web后臺的列表組件在畫原型的時候比較常見，所以PM有必要深入了解它的各種交互效果和對應(yīng)原型畫法；本文作者詳細介紹了如何用Axure畫出Web后臺產(chǎn)品中的高級交互，我們以起來看一下。

咱們網(wǎng)站有不少文章講過列表如何用Axure畫出來，但是關(guān)于列表組件高級交互的文章卻沒有，希望通過這篇文章讓產(chǎn)品經(jīng)理能夠掌握它。

以下4種高級交互案例是獨立的場景，但是原型步驟是有一定聯(lián)系的需要結(jié)合起來學(xué)習(xí)；詳見原型地址：https://jg2wis.axshare.com

一、懸停列表某行數(shù)據(jù)

實現(xiàn)原理：利用懸停交互樣式來實現(xiàn)。

查看效果：?https://jg2wis.axshare.com/#id=h81j0t&p=懸停列表某行數(shù)據(jù)

1）雙擊中繼器“列表字段值”進入內(nèi)部，從默認元件庫拖動“矩形3”到畫布位置（0，0），調(diào)整尺寸覆蓋列表所有內(nèi)容，填充顏色不透明度設(shè)為0%。

2）右鍵該矩形，點擊“交互樣式”，在“交互樣式-鼠標懸?！睆棿肮催x填充顏色，然后不透明度修改成10%。

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

二、選擇列表單行數(shù)據(jù)

實現(xiàn)原理：通過選擇該行的時候，同時標記它。

查看效果：?https://jg2wis.axshare.com/#id=jun89k&p=選擇列表單行數(shù)據(jù)

1）先畫選擇按鈕背景，雙擊中繼器“列表”進入內(nèi)部，從默認元件庫拖動“矩形1”到列表值的最前面，修改尺寸為40*40px，適當(dāng)后移其他內(nèi)容的位置和調(diào)整尺寸。

2）再畫選擇按鈕本身。從默認元件庫拖動“復(fù)選框”到背景中合適位置，修改按鈕尺寸為16，最好命名元件為“選擇”。

3）點擊該選擇按鈕；右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發(fā)事件“選中時”，添加動作“標記行”，目標選擇元件“列表值(中繼器)”，行選擇“當(dāng)前”，點擊“完成”按鈕。

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

三、批量選擇列表多行數(shù)據(jù)

實現(xiàn)原理：全選列表的時候，勾選所有列表行的選擇按鈕。

查看效果：?https://jg2wis.axshare.com/#id=pt7n2e&p=批量選擇列表多行數(shù)據(jù)

1）繼承選擇列表單行數(shù)據(jù)的原型步驟；先畫全選按鈕背景，從默認元件庫拖動“矩形2”到列表頭的最前面，修改尺寸為40*30px，線段邊寬修改為1，適當(dāng)后移其他內(nèi)容的位置和調(diào)整尺寸。

2）再畫全選按鈕本身；從默認元件庫拖動“復(fù)選框”到背景中合適位置，修改按鈕尺寸為16，最好命名元件為“全選”。

3）點擊該全選按鈕；右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發(fā)事件“選中時”，添加動作“設(shè)置選中”，目標選擇元件“選擇(按鈕)”，點擊“完成”按鈕。

4）點擊該全選按鈕；右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發(fā)事件“取消選中時”，添加動作“設(shè)置選中”，目標選擇元件“選擇(按鈕)”，設(shè)置“值”為“假”，點擊“完成”按鈕。

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

注意：全選和反選的區(qū)別，大家可以思考下如何畫出反選效果。

四、批量刪除列表多行數(shù)據(jù)

實現(xiàn)原理：選擇該行的時候標記它，然后利用中繼器刪除標記行。

查看效果：?https://jg2wis.axshare.com/#id=4hnnw6&p=批量刪除列表多行數(shù)據(jù)

1）繼承選擇列表多行數(shù)據(jù)的原型步驟。從默認元件庫拖動“按鈕”到畫布合適位置，修改尺寸為100*30px，雙擊輸入文字“批量刪除”，適當(dāng)下移原先列表頭和列表值的位置。

2）點擊該按鈕，右側(cè)邊欄切換到“交互”，點擊“新建交互”按鈕，選擇觸發(fā)事件“單擊時”，添加動作“刪除行”，目標選擇元件“列表值(中繼器)”，行選擇“標記行”，點擊“確定”按鈕。

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

相關(guā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é)議。