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

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

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

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

一、懸停列表某行數據

實現原理：利用懸停交互樣式來實現。

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

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

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

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

二、選擇列表單行數據

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

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

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

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

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

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

三、批量選擇列表多行數據

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

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

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

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

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

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

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

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

四、批量刪除列表多行數據

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

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

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

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

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

相關閱讀：

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

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

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

#專欄作家#

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

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

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