亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！
Axure产品经理精品视频课已登录优快云可点击学习https://edu.youkuaiyun.com/course/detail/40420
课程主题：垂直菜单折叠与展开
主要内容：折叠与展开效果
应用场景：PC后台菜单、动态下拉菜单、商品分类选择等折叠与展开场景
案例展示：
案例视频：
垂直菜单折叠与展开效果
正文内容：
关于垂直菜单的折叠与展开交互，是产品经理入门是一个非常常见的问题，很多人会出现“展不开子菜单”、“拉不回子菜单”、“展开错位”、“拉回错位”等等这些问题，那么发现问题，我们就要找问题的原因，单纯告诉大家怎么做，以后还会犯类似的错误。
那么折叠与展开的归因是大家对“交互触发”理解不深刻，什么时候触发我们设计好的交互，在哪种场景下需要触发，有的人看到这就划过去了，我负责任的说，以后你一定会遇到使用文本框计数的场景，那时候还要回来补课的。。。扯远了。
下面开始细节的交互设计：
首先拖入所有的元件，组成下图的页面；
图1
给这四个上下按钮分别命名为：企业菜单拉动、企业菜单推动、运输菜单拉动、运输菜单推动；组合两个子菜单，分别命名“企业管理子菜单”、“运输管理子菜单”
将两组子菜单设置成“载入时-隐藏-拉动下方元件”
图2
图3
设置企业菜单推动，设计逻辑，当单击时推出下方元件，显示拉动按钮，隐藏推动按钮；
图4
设置企业菜单拉动，设计逻辑，当单击时拉动下方元件，显示推动按钮，隐藏拉动按钮，同时设置载入时隐藏企业拉动按钮，这样就保持页面中始终只有一个按钮用户可以操作；
图5
下方运输管理同上边逻辑一样，我直接贴图了
图6
图7
Axure中垂直菜单展开与折叠的应用场景及作用
应用场景
导航菜单：适用于网站或系统的侧边栏导航，如后台管理系统、企业官网等。例如：一级菜单是“产品管理”，点击后可展开二级菜单“产品列表”“产品分类”“产品发布”。
多级分类展示：适用于电商网站的商品分类、知识库的文章目录等。例如：一级分类“电子产品”，展开后可显示“手机”“电脑”“配件”等子分类。
移动端/响应式设计：在小屏幕设备上垂直菜单可以折叠以节省空间，点击后展开详细选项。
设置面板：在软件或工具中，设置项较多时可采用折叠菜单，如“账户设置”“隐私设置”“通知设置”等分类。
FAQ或帮助中心：问题和答案可以按类别折叠，用户点击问题后展开答案，提升阅读体验。
主要作用
节省页面空间：通过折叠菜单，可以在有限的空间内展示更多选项，避免页面过于拥挤。
提高信息层级清晰度：用户可以通过展开/折叠操作，快速聚焦当前关注的内容，减少视觉干扰。
优化用户体验（UX）：避免一次性展示过多选项，降低认知负担，让用户逐步探索内容。
增强交互性：动态的展开/折叠效果可以让界面更具响应性，提升用户操作反馈感。
适用于复杂结构：支持多级嵌套（如三级、四级菜单），适用于大型网站或系统。
本课小结：垂直菜单的折叠与展开对于初学者来说有一定难度，实际上还是考验大家对显示与隐藏交互的理解，需要加强课后学习的是载入时、单击时这两种状态下，如何进行显示与隐藏的交互；多熟练几次就好了，学会了就没什么难度了，后期应用的范围也比较广泛，是必须掌握的知识点。
相关课程直通车：
Axure疑难杂症：详解横向菜单左右拖动效果及阈值说明-优快云博客
如有其他相关问题，欢迎私信沟通，关注 Axure疑难杂症：详解横向菜单左右拖动效果及阈值说明-优快云博客
明天的产品大咖就是你，创作不易，麻烦关注一下，点赞+收藏，感谢大家！
扫一扫
1855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
