Material Design——Menus
#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~
Material Design链接:Material Design——Menus
菜单是临时界面上的选项列表。
![](https://img.haomeiwen.com/i5226879/623b94797d645320.png)
一、用法
菜单是临时界面上的选项列表,当用户点击相关按钮,控件或进行其他操作交互时,它们会出现。
△ 原则
![](https://img.haomeiwen.com/i5226879/21c9f33ee6300019.png)
· 敏捷 菜单应该易于打开关闭和方便交互
· 上下文 菜单内容应该适合用户需求
· 可浏览 菜单项应易浏览
△ 类型
菜单允许用户从多个选项中进行选择。 与选择控件(例如一组单选按钮)相比,它们不那么突出并占用更少的空间。
![](https://img.haomeiwen.com/i5226879/885dea2aad4ebfad.png)
△ 位置
· 海拔
菜单出现在所有其他永久UI元素的前面。
![](https://img.haomeiwen.com/i5226879/01736cfcf2b42b58.png)
· 高度
菜单的最大高度应至少比应用程序UI的高度小一行。
![](https://img.haomeiwen.com/i5226879/0e9ef3167f2db5c7.png)
· 位置
菜单应相对于屏幕或浏览器的边缘定位, 它们通常出现在生成它们的元素旁边(或前面),如果它们处于被浏览器或屏幕边缘切断的位置,则菜单可以显示在生成它的元素的左侧,右侧或上方。
![](https://img.haomeiwen.com/i5226879/758cc5d46f8a1b0b.png)
二、分析
菜单显示相关选项的列表(可以组合在一起)以及不相关的选项。,当用户点击交互式UI元素(如图标,按钮,操作或内容,例如所选项目或文本)时,将显示菜单。
![](https://img.haomeiwen.com/i5226879/a10a52a3039a7305.png)
![](https://img.haomeiwen.com/i5226879/a84d0511707ae22f.png)
![](https://img.haomeiwen.com/i5226879/d47525c37db77f2d.png)
![](https://img.haomeiwen.com/i5226879/1ed1768353317fdc.png)
△ 操作
· 禁用操作
在某些条件下,有时只能使用它们时,将操作显示为已禁用。 它们应显示为禁用而不是删除它们。
![](https://img.haomeiwen.com/i5226879/fadca8027d1a2888.png)
三、行为
△ 滚动
如果不是一次显示所有菜单项,则菜单可以滚动。 在此状态下,菜单显示持久滚动条。
![](https://img.haomeiwen.com/i5226879/ca8d300e8abce43b.png)
△ 动画
菜单打开使用缩放动画(显示元素大小增加的动画), 动画在菜单和生成菜单的动作之间创建关系。
· 位置
菜单的屏幕上的位置影响在哪里和怎么会出现,如果在屏幕顶部打开,它将向下扩展(以避免被裁剪)。
![](https://img.haomeiwen.com/i5226879/438dc2438e778034.png)
默认情况下,菜单打开时带有入口动画。 但是,在桌面上,菜单可以跳过动画并立即打开。
![](https://img.haomeiwen.com/i5226879/0e820ecf57399856.png)
四、下拉式菜单
△ 用法
下拉菜单是显示多个选项的紧凑方式,它出现在与元素(例如图标或按钮)的交互或用户执行特定操作时。
△ 位置
下拉菜单相对于生成它们的元素以及屏幕或浏览器的边缘定位。,它们可以出现在生成它们的元素的前面,旁边,上面或下面。
· 默认展示位置
下拉菜单通常位于生成它的元素下方。
![](https://img.haomeiwen.com/i5226879/970ea299fcd4bcd0.png)
· 级联菜单(仅限桌面)
级联菜单允许用户通过显示具有多级层次结构的菜单进行多项选择。
它们被组织成包含子列表项的父列表菜单,子列表项目显示在父列表的右侧或左侧,具体取决于扩展子列表项目的空间。
![](https://img.haomeiwen.com/i5226879/3752bf7242ea3506.png)
· 上下文菜单
上下文菜单不是由同样的UI元素触发的,它们出现在用户点击的旁边,其操作可能会根据点按目标而有所不同。
![](https://img.haomeiwen.com/i5226879/ee2adabab9058e3c.png)
![](https://img.haomeiwen.com/i5226879/03d94656ee11b889.png)
△ 行为
从下拉菜单中选择一个选项时,生成它的元素保持不变。
![](https://img.haomeiwen.com/i5226879/739f26765119e2bd.png)
四、外置的下拉式菜单
△ 用法
外置的下拉菜单显示菜单上方当前选定的菜单项,它们只能在一次选择单个菜单项时使用。
![](https://img.haomeiwen.com/i5226879/cc17a43715c33425.png)
△ 行为
选择项目后,会显示公开的下拉菜单以显示该项目。 在某些情况下,它可以接受用户输入并显示一个值(无论它是否被列为菜单选项)。
△ 位置
外置的下拉菜单位于生成下拉列表的元素下方, 在移动设备上,它可以出现在生成下拉列表的元素前面。
△ 变化
可以自定义公开的下拉菜单使它们具有不同的外观或行为。
· 文本字段下拉菜单
文本字段下拉菜单看起来像文本字段,并在菜单上方显示当前选定的项目。
在桌面上,文本字段下拉菜单显示在触发下拉列表的元素下方, 在移动设备上,文本字段下拉菜单可以打开本机选择器。
![](https://img.haomeiwen.com/i5226879/79e54f807ac263b3.png)
· 可编辑的下拉菜单
可编辑的下拉菜单显示菜单上方当前选定的菜单项,它可以接受菜单中未列出的用户输入值,但可以仅接受某些类型的值,例如仅接受正数。
![](https://img.haomeiwen.com/i5226879/10ff74f545c59aef.png)
END.THANKS FOR YOUR READING~
如有不当,还请多多指教~