Axure画出Web后台产品的列表组件:高级交互

一、悬停列表某行数据

实现原理:利用悬停交互样式来实现。Arp码友部落

查看效果: https://jg2wis.axshare.com/#id=h81j0t&p=悬停列表某行数据Arp码友部落

1)双击中继器“列表字段值”进入内部,从默认元件库拖动“矩形3”到画布位置(0,0),调整尺寸覆盖列表所有内容,填充颜色不透明度设为0%。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

2)右键该矩形,点击“交互样式”,在“交互样式-鼠标悬停”弹窗勾选填充颜色,然后不透明度修改成10%。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

3)点击“预览”按钮,然后在浏览器中查看原型效果。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

二、选择列表单行数据

实现原理:通过选择该行的时候,同时标记它。Arp码友部落

查看效果: https://jg2wis.axshare.com/#id=jun89k&p=选择列表单行数据Arp码友部落

1)先画选择按钮背景,双击中继器“列表”进入内部,从默认元件库拖动“矩形1”到列表值的最前面,修改尺寸为40*40px,适当后移其他内容的位置和调整尺寸。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

2)再画选择按钮本身。从默认元件库拖动“复选框”到背景中合适位置,修改按钮尺寸为16,最好命名元件为“选择”。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

3)点击该选择按钮;右侧边栏切换到“交互”,点击“新建交互”按钮,选择触发事件“选中时”,添加动作“标记行”,目标选择元件“列表值(中继器)”,行选择“当前”,点击“完成”按钮。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

4)点击“预览”按钮,然后在浏览器中查看原型效果。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

三、批量选择列表多行数据

实现原理:全选列表的时候,勾选所有列表行的选择按钮。Arp码友部落

查看效果: https://jg2wis.axshare.com/#id=pt7n2e&p=批量选择列表多行数据Arp码友部落

1)继承选择列表单行数据的原型步骤;先画全选按钮背景,从默认元件库拖动“矩形2”到列表头的最前面,修改尺寸为40*30px,线段边宽修改为1,适当后移其他内容的位置和调整尺寸。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

2)再画全选按钮本身;从默认元件库拖动“复选框”到背景中合适位置,修改按钮尺寸为16,最好命名元件为“全选”。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

3)点击该全选按钮;右侧边栏切换到“交互”,点击“新建交互”按钮,选择触发事件“选中时”,添加动作“设置选中”,目标选择元件“选择(按钮)”,点击“完成”按钮。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互Arp码友部落

4)点击该全选按钮;右侧边栏切换到“交互”,点击“新建交互”按钮,选择触发事件“取消选中时”,添加动作“设置选中”,目标选择元件“选择(按钮)”,设置“值”为“假”,点击“完成”按钮。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

5)点击“预览”按钮,然后在浏览器中查看原型效果。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

注意:全选和反选的区别,大家可以思考下如何画出反选效果。Arp码友部落

四、批量删除列表多行数据

实现原理:选择该行的时候标记它,然后利用中继器删除标记行。Arp码友部落

查看效果: https://jg2wis.axshare.com/#id=4hnnw6&p=批量删除列表多行数据Arp码友部落

1)继承选择列表多行数据的原型步骤。从默认元件库拖动“按钮”到画布合适位置,修改尺寸为100*30px,双击输入文字“批量删除”,适当下移原先列表头和列表值的位置。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

2)点击该按钮,右侧边栏切换到“交互”,点击“新建交互”按钮,选择触发事件“单击时”,添加动作“删除行”,目标选择元件“列表值(中继器)”,行选择“标记行”,点击“确定”按钮。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

3)点击“预览”按钮,然后在浏览器中查看原型效果。Arp码友部落

Axure画出Web后台产品的列表组件:高级交互

作者:浪子Arp码友部落