哈喽，这里是Clip设计夹，今天分享的是「菜单设计」。
其实下拉菜单是菜单的一种子类型，本质上也属于菜单的范畴。谷歌的Material Design 2里，曾把菜单分成了两种子类型：下拉菜单 (A)和外露式下拉菜单 (B)；但到Material Design 3，就把这两种统一归为“菜单”了。
菜单：用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换；下拉菜单：用于承载过多的操作集合，通过下拉拓展的形式，收纳更多的操作。
接下来，咱们就来好好聊聊菜单的定义和具体用法。
 
01 菜单组件解析
菜单，简单说就是在临时界面上展示选项列表的组件。苹果的人机交互指南 (HIG)里，也把弹出按钮、下拉按钮这类特殊情况归到了菜单范畴里。
1.列表项：菜单中的每个项目代表一个单独的选项，提供一个可供选择的选项，并用于传达菜单中的信息或操作。
2.列表项左侧图标：放在菜单项左侧，提供视觉提示，帮助用户识别和快速理解该项。
3.列表项右侧图标：放在菜单项右侧，表示附加操作或信息，提示有关所选项目的更详细信息或功能。
4.容器：用于分组和包含菜单项的背景结构，负责组织菜单布局，并在视觉上对菜单项进行分组，提供一致的用户体验。
5.列表项右侧说明：放在菜单项右侧的附加说明，提供有关该项的附加信息，例如状态或数值。
6.分隔线：用于在菜单项之间提供视觉分隔，有助于用户清晰地区分不同的菜单项，创建更简洁的菜单结构。
① 菜单状态
1.启用态：表示该菜单项可以选择，用户可以点击或与之交互。
2.禁用态：表示菜单项当前不可选择。处于此状态的菜单项用户无法与其交互，通常会显示为灰色或变暗，明确表明处于非活动状态。
3.悬停态：当用户将鼠标悬停在菜单项上时触发。表示菜单项可以被选中，交互状态通常是颜色变化或显示动画效果。
4.聚焦态：表示菜单项被选中。此状态主要用于支持辅助功能，并向用户提供清晰的视觉指示，表明当前项已被选中。
5.点击态：当用户点击或选择菜单项时，会触发此状态。按钮或菜单项的视觉效果会发生变化，例如添加动画效果，强调按下操作并表明选项已被选中。
为了准确传达菜单项的含义，还应该考虑其被选中时的状态。在不同状态下的选中效果如上图所示。
 
02 菜单交互形式
① 小尺寸屏幕
▲ 在移动端等小尺寸设备中，底部抽屉可以作为菜单的良好替代品，提供足够的空间来显示菜单选项。
② 中大型屏幕
▲ 在中大屏设备中，可以用弹出的操作面板来展示菜单列表，清晰展示每个操作对应的菜单项。
③ 屏幕边缘位置
▲ 在PC端产品中，有的菜单会贴着屏幕左右两侧的边缘展示。如果菜单的位置超出屏幕，还需要灵活调整菜单面板的位置。
▲ 例如当按钮的位置在顶部时 (A)，下拉菜单可以直接向下展示；当按钮在中间且菜单选项没有超过屏幕时(B)，可以将菜单放在中间展示；当按钮在底部时，下拉菜单可以向上展示。
 
03 菜单设计案例
根据菜单组件的特点，这里挑选了一些有代表性的设计案例，大家在设计过程中可以多多参考～
▲ 有效利用分隔线进行菜单项的分组，比如将父项与子项分隔开，或者将相似的操作或内容分为一组。
▲ iOS长按信息的交互菜单时将图标放到选项右侧，每个选项使用细线分隔开，还是比较有特点的。
▲ 这是iOS的弹出式菜单效果，通常位于页面的顶部和右侧。菜单选中后会在左侧显示一个对勾。
▲ 长按Procreate的图层，会弹出居中显示的菜单列表。但在深色模式下，菜单容器色和背景色有点重合，颜色还需要更大的对比。
▲ 在Craft的菜单选项中，会用一些表意明确的表情符号来代替传统的图标，以一种更有趣且直观的方式来展示选项。
 
最后
其实不管这些菜单因为形式、用途不一样叫什么名字，核心功能都和基础菜单没区别，大家不用特意去记、去分类。
重点考虑菜单的展示形式和交互形式，毕竟用户能不能一眼看懂、用着顺不顺畅才是关键，所以得仔细思考每种状态下的各种因素，选择适合自己产品场景的菜单形式才行。