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

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

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

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

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

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

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

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

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

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

實(shí)現(xiàn)原理：通過(guò)選擇該行的時(shí)候，同時(shí)標(biāo)記它。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相關(guān)閱讀：

如何用Axure畫(huà)出Web后臺(tái)產(chǎn)品的菜單欄組件

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

如何用Axure畫(huà)出Web后臺(tái)產(chǎn)品的面包屑組件

#專(zhuān)欄作家#

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

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

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