编辑导语：在前一篇文章《B端UI界面交互基本组件-按钮》中，本文作者带着各人一起进修了B端“按钮”组件UI设计类型，个中包罗通例按钮、开关按钮、多状态切换按钮、组合按钮等组件，并从“按钮”组件的需求场景、内容机关以及交互 *** 等方面临以上组件举办了详尽的类型描写。本日，作者又为我们先容了B端“下拉菜单”组件的交互类型。

一、组件先容

下拉菜单主要用于将一些沟通分类的成果安排在同一个浮层中，并置于按钮或主选单的一个选项中。

下拉菜单中的项目可以按照需要，配置成单选、多选可能仅作为操纵触发的进口，具有占用空间少的利益；可是缺点也很明明——不如所有按钮直接陈列来的直观。

二、通例菜单 1. 需求场景

1）显示区域不足展示；

2）内容不足重要、操纵频次较低，低落用户界面内容阅读难度。

2. 内容与机关

1）下拉菜单按照整体机关，从左至右分为：图标区域、文本区域、帮助&备注区域，如下图所示：

2）菜单项图标与菜单项文本局左对齐，备注&帮助信息区域内容右对齐；

3）按照菜单设置的差异，答允对菜单项显示内容举办机关裁剪：

纯图标菜单项

纯文本菜单

图标+文本菜单项

4）在同一菜单列表中所有的图标区域宽度需保持一致，假如菜单列表中某一菜单有图标，则其他菜单项需要保存图标位置：

5）成果操纵菜单项文本不答允呈现省略号；

6）带文本的菜单项，假如点击后会呈现二次操纵项，需要提供省略号“…”示意：

7）菜单中按照业务性质或成果性质可举办分组，并提供视觉示意：

8）菜单项按照成果可能实际利用进程中的频次举办降序分列，同组内的菜单项按照操纵影响范畴举办升序分列：

一般主要操纵在前，次要操纵在后；

欣赏操纵在前、删除操纵在后。

9）默认菜单与触发按钮居左对齐，菜单顶部居于触发区域底部：

10）菜单栏右侧可视区域不能完全显示菜单时，菜单右侧与触发区域局右对齐：

11）触发区域底部与页面可视区域底部高度小于菜单高度时，菜单底部局区域底部显示：

12）下拉菜单长度高出4/5显示区域时，下拉菜单答允内部呈现转动条：

3. 交互行为

1）鼠标移入按钮区域，按钮状态产生变革：

2）点击按钮，展开下拉菜单：

3）点击下拉菜单的菜单项，下拉菜单收起埋没，并执行相应操纵：

4）菜单项具备帮助操纵按钮时，点击设置按钮时不埋没菜单：

5）点击下拉菜单外部区域时，自动埋没下拉菜单：

三、多级菜单 1. 需求场景

1）在通例菜单项中，菜单项有子集数据或操纵项；

2）会有多级菜单。

2. 内容与机关

1）菜单机关模式与通例菜单沟通：

2）若菜单项有子菜单，需要提供示意图标：

3）多级菜单元置之一级基本定位逻辑与通例菜单一致；

4）子集菜单显示区域：

 在右侧显示区域足够的环境下，优先在父级菜单右侧显示：

若右侧显示区域不敷以显示菜单，则可在父级菜单的左侧显示：

当下拉菜单中任意一项菜单项的子菜单宽度高出右侧显示区域时，子菜单均需要显示在父菜单的左侧。

5）多级菜单严禁高出两级。

3. 交互行为

1）菜单项操纵响应遵守通例菜单交互行为约束；

2）鼠标移入具有子菜单的菜单项，逗留250ms后，显示其对应的子菜单：

3）鼠标移出响应父操纵项200ms后，对应显示的子菜单需自动埋没；

4）子菜单交互行为可参考通例菜单行为约束。