Axure复选框全选反选取消高级交互

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:复选框全选反选取消制作

主要内容:点击复选框,实现列表数据项全选选中、反选和取消选中效果

应用场景:多项选定、一键全选、一键取消、一键反选

案例展示:

案例视频

复选框演示视频


正文内容:实现复选框点击全选/取消全选;实现下拉弹窗一键全选、一键反选、全部取消。

1、复选框点击全选/取消全选

步骤一:拖入复选框并命名为中继器外复选框,提示信息"选择",下箭头icon;在中继器中添加复选框,并命名中继器内复选框;命名的目的是下一步做交互时好辨识。

步骤二:添加中继器外复选框的交互,选中时------两个复选框值为真,取消选中时------两个复选框值为假;

2、实现下拉弹窗一键全选、一键反选、全部取消

步骤一:制作弹窗,包含弹窗背景、一键全选、一键反选、全部取消元件;组合命名为"选择弹窗",载入时隐藏这个弹窗;

步骤二:添加下箭头交互,单击时------切换选择弹窗可见性;

步骤三:添加一键全选交互,全选时内外复选框的值均为真;

步骤四:添加一键反选交互,反选时外部复选框值为假,内部复选框可能有选中的项,所以要选择切换;

步骤五:添加全部取消交互,值全部为假;

本课小结:掌握复选框相关知识点,真、假、切换三种值的内涵;选中时与取消选中时如何选择值,以及用户体验交互设计,如何让用户用的舒服和方便。


相关课程直通车:

中继器实现时间读取和修改-CSDN博客

Axure横向菜单高级交互-CSDN博客

Axure垂直菜单展开与折叠-CSDN博客

Axure树形菜单展开与折叠-CSDN博客

如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

相关推荐
梓贤Vigo9 小时前
【Axure原型分享】AI自动回复机器人
交互·产品经理·axure·原型
蓝速科技9 小时前
蓝速科技 3D 全息数字人舱:像真人一样的交互体验展示
科技·3d·交互
JAMSAN09309 小时前
视线即交互:眼动追踪AR眼镜的“感知革命”与市场蓝图
大数据·人工智能·ar·交互
周胡杰9 小时前
HarmonyOS 手表端翻腕触发交互实现:基于陀螺仪的两段式手势识别
华为·交互·harmonyos
小北的AI科技分享9 小时前
手机AI应用如何改变我们的日常交互方式
交互·应用·隐私
ZC跨境爬虫18 小时前
跟着 MDN 学CSS day_41:显式轨道、隐式网格与区域命名放置
前端·javascript·css·ui·交互
AI品信智慧数智人20 小时前
打破大屏局限!山东品信智慧科技数字人交互系统,实现可视化实时数据联动✨
科技·交互
2501_940041741 天前
前端工程化命题,覆盖性能/架构/交互
前端·交互
协享科技1 天前
Vue 3 实现抖音式卡片滑动交互:从零到完整方案
前端·vue.js·交互·ai编程·英语·自考英语
若兰幽竹1 天前
HarmonyOS 6.1 开发者盛宴|《灵犀厨房》实战(二十三):【交互动效】转场、列表动画与趣味反馈——让每一次点击都有温度
交互·华为鸿蒙系统·harmonyos6.1