Axure教程:中继器元件实现筛选标签展示效果

2020-07-0209:34:05原型设计Comments3,409 views字数 383阅读模式

使用APP的时候总会遇到筛选标签的情况,那么筛选标签的效果是怎么实现的呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

前期准备文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

软件Axure 9.0硬件:Windows/Mac电脑筛选标签效果图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

(1)找到一个手机壳素材库,绘制界面如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

(2)在已选中标签中添加一个中继器并命名,中继器内添加一个矩形,长度根据展示的界面自由调整,这里不做限制,设置中继器交互,使中继器展示选中的可选标签的文字:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

(3)设置可选标签矩形选中样式,设置选中后颜色及字色变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

(4)设置可选标签矩形点击交互,实现鼠标单击可选标签时,切换标签的选中状态:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

(5)设置可选标签选中时交互,实现标签选中时,中继器中增加行:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

(6)设置可选标签矩形未选中时交互,标签取消选中时,删除行:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

(7)复制可选标签交互,将可选标签的矩形交互复制粘贴到其他矩形控件上:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

结语文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

今天主要运用到了中继器这个元件实现筛选标签的效果,值得注意的就是这个函数的使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19621.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/19621.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定