亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!
课程主题:Axure树形菜单展开与折叠
主要内容:树形菜单制作——层级关系——隐藏与显示——值的变化——多层交互
应用场景:关系树、菜单后台维护、角色关系
案例展示:
Axure树形菜单展开与折叠
正文内容:
步骤一:建立菜单表头,拖入矩形并进行命名
步骤二:依次录入一级类目、二级类目、三级类目、商品名单,组成整体信息内容
步骤三,除了一级类目,全部设置成载入时隐藏
步骤五:添加一级类目下蔬菜的交互;单击蔬菜按钮——显示二级类目——设置选中效果;(其他一级类目同理设计,因篇幅关系不上图了)
步骤六:添加点击三个点弹出更多选项;制作弹窗的背景——填加选项
步骤七:依次为叶菜、瓜菜二级、三级、商品名称添加如上按钮的交互和更多选项
1、叶菜交互
2、瓜菜的交互
因为我们三级类目是上下布局,这时我们应把两个菜单进行叠加
以上同理设计三级类目和商品名称,因为篇幅关系,不重复操作了,感谢观看。
本课小结:隐藏与显示的深度理解,选中时与取消选中时元件的变化以及用户体验的设计;多元件的状态思考。
相关课程直通车:
中继器实现时间读取和修改-CSDN博客
Axure复选框全选反选取消高级交互-CSDN博客
Axure横向菜单高级交互-CSDN博客
Axure垂直菜单展开与折叠-CSDN博客
如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客
明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!