当前位置:
  1. 北极熊素材库
  2. 资讯
    1. 平面设计
    2. 产品交互
    3. 活动展览
    4. 设计聚焦
  3. 产品交互
  4. 如何制作APP中折叠菜单?这篇设计灵感会帮助你

如何制作APP中折叠菜单?这篇设计灵感会帮助你

1 2022-06-24 09:29 内容校对:盖帽老弟

一、折叠菜单的构成

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中折叠菜单?这篇设计灵感会帮助你

四、最后

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

1

赠人玫瑰,手有余香

本文链接 https://www.bjxku.com/news/661.html 文章为转摘文章,但不代表北极熊素材库立场。
参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

此分类其他精选文章
你可能会用到的Axure素材
  • Aware 阅读应用界面 Aware 阅读应用界面
    Aware 阅读应用界面,界面时尚美观,运用它让软件变得更有个性、有品位,操作变得更为舒适和简单,有sketch、jpg格式可以使用,方便设计师们运用到各类ui设计之中。
    Raipur
    2022-01-26
  • 电商软件应用界面 电商软件应用界面
    电商软件应用界面,界面时尚美观,运用它让软件变得更有个性、有品位,操作变得更为舒适和简单,有jpg、sketch格式可以使用,方便设计师们运用到各类ui设计之中。
    小WangZi
    2021-10-27
  • 香蕉3D模型 香蕉3D模型
    水果香蕉3d模型下载,一种界面,一种风格。新兴趋势的设计风格。明亮的色彩,简单的平面图标与轻巧的设计和面面俱到的用户体验相结合,可以让你获得灵感并创建自己独特的产品。
    joey
    2021-07-20
  • 医生主题图标 医生主题图标
    医生主题图标,一种界面,一种风格。新兴趋势的设计风格。明亮的色彩,简单的平面图标与轻巧的设计和面面俱到的用户体验相结合,可以让你获得灵感并创建自己独特的产品。
    WangYuhan
    2021-07-13
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员