B端UI界面交互基础组件-下拉菜单

0 评论 1872 浏览 8 收藏 9 分钟

编辑导语:在前一篇文章《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)子菜单交互行为可参考常规菜单行为约束。

四、总结

关于B端基础交互组件“下拉菜单”的相关分享就到这里,下一章我们介绍“输入框”的相关交互规范。

 

本文由 @云计算产品汪 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 unsplash,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!