APP中的折叠菜单应该如何设计?先看这份设计解析

Clippp
4 评论 7402 浏览 22 收藏 8 分钟
大厂导师团亲自授课,超过200小时的精品课程,从0到1为你构建“产品+业务”的复合型知识体系,让你在职场竞争中脱颖而出。

编剧导语:折叠菜单是在页面中垂直堆叠的菜单列表,通过展开/折叠来显示或隐藏更多菜单内容。APP中的折叠菜单该如何设计呢?本文作者分享了折叠菜单的设计解析及设计应用,一起来看看吧!

大家好,这里是设计夹,今天为大家分享的是「折叠菜单」

折叠菜单(Accordion),又称手风琴菜单,是在页面中垂直堆叠的菜单列表,通过展开/折叠来显示或隐藏更多菜单内容。

接下里通过讲解折叠菜单的构成、样式和设计解析来更进一步了解折叠菜单的运用~

一、折叠菜单的构成

1. 状态

折叠菜单的状态包括收起、展开、悬停、选中、禁用状态等。

APP中的折叠菜单应该如何设计?先看这份设计解析

2. 展开图标的位置

在折叠菜单中,通常用“V形”图标表示菜单展开/收起的状态。“V形”图标可以在左侧,也可以放在右侧,用来表示状态。

APP中的折叠菜单应该如何设计?先看这份设计解析

除了使用最常见的“V形”图标,还可以用以下图标来代替:上/下填充图标;加号/减号;向上/向下箭头。

APP中的折叠菜单应该如何设计?先看这份设计解析

3. 附加图标

当我们把展开图标放在右侧的情况下,我们可以面板左侧设计一些图标,来增强菜单的含义,并让页面看起来更精致。

APP中的折叠菜单应该如何设计?先看这份设计解析

在某些场景下,还可以通过使用不同的颜色,更加直观地分隔每个菜单。

APP中的折叠菜单应该如何设计?先看这份设计解析

二、折叠菜单的样式

1. 封闭式折叠菜单

在页面设计中,大多数情况下都是使用封闭式折叠面板。

通过一条浅色的的分隔线将不同的菜单分隔开,这种样式的优点是可以节省一些竖向的屏幕空间,尤其是在移动端屏幕尺寸较小的情况下。

APP中的折叠菜单应该如何设计?先看这份设计解析

2. 分离式折叠菜单

分离式折叠面板常用在桌面端中,每个菜单的展示更清晰,设计样式更简洁。

APP中的折叠菜单应该如何设计?先看这份设计解析

3. 突出显示展开菜单

突出显示菜单展开的状态,这样在多个折叠菜单打开的情况下,用户也能清晰找到需要的信息。

常用的突出显示的方式有:增加阴影、背景填充、轮廓描边等。

APP中的折叠菜单应该如何设计?先看这份设计解析

例如在页面背景是白色的情况下,我们可以使用透明度很低的灰色作为下拉菜单的背景,更清晰地展示展开的菜单。另外,还可以为下来菜单填充和品牌色一致的颜色描边,起到强调品牌的效果。

APP中的折叠菜单应该如何设计?先看这份设计解析

三、折叠菜单设计解析

1. 展示预览

通过在主菜单的下面添加已选择的内容,这样在不需要展开面板的情况下,用户就能知道选择了哪些内容,进一步提高操作效率。

APP中的折叠菜单应该如何设计?先看这份设计解析

2. 数字徽标

当已选内容太多时,我们不可能将这些内容全部在主菜单罗列出来,在这样的情况下,可以使用数字徽标的形式来展示已选择的菜单数。这样的设计有点像购物车中不断变化的数字徽标,告诉用户加购的数量。

APP中的折叠菜单应该如何设计?先看这份设计解析

3. 提示文案

通过在折叠面板中添加提示文案,起到辅助作用,展示更多和菜单相关的信息。这种设计形式更适合用在移动端中,在有限的屏幕尺寸上尽可能多的展示内容。

APP中的折叠菜单应该如何设计?先看这份设计解析

4. 移动端应用样式

等宽使用:在移动端中使用等宽的折叠菜单,方方便用户点击操作。

APP中的折叠菜单应该如何设计?先看这份设计解析

侧边栏:将折叠菜单放在侧边的导航抽屉中,点击左上角的图标来展开菜单项。

APP中的折叠菜单应该如何设计?先看这份设计解析

菜单筛选:将侧边栏与折叠面板配合使用,实现菜单筛选的功能。

APP中的折叠菜单应该如何设计?先看这份设计解析

5. 桌面端应用样式

侧边导航:和移动端类似,桌面端最常用的方法是把折叠菜单放到页面左侧,作为网页的侧边导航使用。

APP中的折叠菜单应该如何设计?先看这份设计解析

过滤器:根据桌面端的页面布局结构,折叠菜单可以放在页面左侧或右侧,实现精确查找、内容过滤等功能。

APP中的折叠菜单应该如何设计?先看这份设计解析

四、最后

以上就是折叠菜单的设计解析及设计应用,希望通过这些知识能帮你进一步了解折叠菜单的用法。

「组件系列」的其他文章,近期也会不断更新,欢迎大家关注~

#专栏作家#

作者:Clippp,微信公众号:Clip设计夹。每周精选设计文章,专注分享关于产品、交互、UI视觉上的设计思考。

本文原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自 Pixabay,基于CC0协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 我觉得折叠菜单的设计有点不好,但也有让顾客好奇从而点开的设计点在

    回复
  2. 作为设计师看到图标风格不统一真的很抓狂

    来自广东 回复
  3. 有些折叠做得好使用起来会非常的丝滑,提高用户体验好感

    回复
  4. 哇哦,原来APP中的折叠菜单还可以这样设计啊。对于可折叠真的很有好感

    来自广西 回复
专题
14273人已学习11篇文章
抽奖作为一种活跃用户的运营手段之一,在产品运营的工作里是一项大家必须掌握的技能。本专题的文章分享了抽奖类活动的设计指南。
专题
12684人已学习12篇文章
精细化运营、抓住老用户、提升用户复购,则将是品牌需要着重留意的地方。本专题的文章分享了提升复购率的N种方法。
专题
13158人已学习14篇文章
在这个大数据时代,数据对于企业的重要性越来越明显,因此不少企业将数据作为推动一款产品的重要前提。本专题的文章分享了如何用数据去驱动决策。
专题
13823人已学习12篇文章
知识管理是什么?通常来看,想理解知识管理,可以从业务、管理、实施等视角切入。本专题的文章分享了如何做知识管理。
专题
36190人已学习18篇文章
好的数据分析可以使我们的产品不断优化,而做好数据分析的第一步就是做好数据埋点。
专题
34281人已学习17篇文章
作为产品经理,你真的懂什么是敏捷开发吗?