编辑导语:在前一篇文章《B 端 UI 界面交互基础组件-按钮》中,本文作者带着大家一起
学习了 B 端“按钮”组件 UI 设计规范,其中包括常规按钮、开关按钮、多状态切换按钮
、组合按钮等组件,并从“按钮”组件的需求场景、内容布局以及交互方式等方面对以上
组件进行了详尽的规范描述。今天,作者又为我们介绍了 B 端“下拉菜单”组件的交互规
范。
一、组件介绍
下拉菜单主要用于将一些相同分类的功能放置在同一个浮层中,并置于按钮或主选单的一
个选项中。
下拉菜单中的项目可以根据需要,设置成单选、多选或者仅作为操作触发的入口,具有占
用空间少的优点;但是缺点也很明显——不如所有按钮直接陈列来的直观。
二、常规菜单
1. 需求场景
1)显示区域不够展示;
2)内容不够重要、操作频次较低,降低用户界面内容阅读难度。
2. 内容与布局
1)下拉菜单根据整体布局,从左至右分为:图标区域、文本区域、辅助&备注区域,如
下图所示:
2)菜单项图标与菜单项文本局左对齐,备注&辅助信息区域内容右对齐;
3)根据菜单配置的不同,允许对菜单项显示内容进行布局裁剪:
纯图标菜单项
纯文本菜单
...
附件列表