辉灿新闻网 原型设计 Axure教程:筛选标签展示效果

Axure教程:筛选标签展示效果

当我们使用APP的时候总会遇到筛选标签的情况,那么筛选标签的效果是怎么实现的呢?

前期准备软件:Axure 9.0硬件:Windows/Mac电脑筛选标签效果图:

教程

(1)找到一个手机壳素材库,绘制界面如下图:

(2)在已选中标签中添加一个中继器并命名,中继器内添加一个矩形,长度根据展示的界面自由调整,这里不做限制,设置中继器交互,使中继器展示选中的可选标签的文字:

(3)设置可选标签矩形选中样式,设置选中后颜色及字色变化。

(4)设置可选标签矩形点击交互,实现鼠标单击可选标签时,切换标签的选中状态:

(5)设置可选标签选中时交互,实现标签选中时,中继器中增加行:

(6)设置可选标签矩形未选中时交互,标签取消选中时,删除行:

(7)复制可选标签交互,将可选标签的矩形交互复制粘贴到其他矩形控件上:

结语

今天主要运用到了中继器这个元件实现筛选标签的效果,值得注意的就是这个函数的使用。

大家可以关注一下,是不是很简单呢?快动手试一下吧~

本文由 @蓝汐 原创发布于人人都是产品经理。未经许可,禁止转载!

题图来自Unsplash,基于CC0协议

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/617.html

作者: 蓝汐

Axure RP每日一小技巧:如何制作圆形组件

Axure教程:Web端登录、注册、找回密码原型设计

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部