Web后台的列表组件在画原型的时候比较常见,所以PM有必要深入了解它的各种交互效果和对应原型画法。
咱们网站有不少文章讲过列表如何用Axure画出来,但是关于列表组件高级交互的文章却没有,希望通过这篇文章让产品经理能够掌握它。
以下4种高级交互案例是独立的场景,但是原型步骤是有一定联系的需要结合起来学习;详见原型地址:https://jg2wis.axshare.com
一、悬停列表某行数据
实现原理:利用悬停交互样式来实现。
查看效果:https://jg2wis.axshare.com/#id=h81j0t&p=悬停列表某行数据
1)双击中继器“列表字段值”进入内部,从默认元件库拖动“矩形3”到画布位置(0,0),调整尺寸覆盖列表所有内容,填充颜色不透明度设为0%。
![ddd60aac91eb9ed283756f6801880bfb.png](https://i-blog.csdnimg.cn/blog_migrate/80580c7a73c7c33a98361c7b85076aaa.png)
2)右键该矩形,点击“交互样式”,在“交互样式-鼠标悬停”弹窗勾选填充颜色,然后不透明度修改成10%。<