UI/交互设计规范产品交互设计Material Design

Material Design——Menus

2018-08-05  本文已影响13人  轶子

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~

Material Design链接:Material Design——Menus

菜单是临时界面上的选项列表。

一、用法

菜单是临时界面上的选项列表,当用户点击相关按钮,控件或进行其他操作交互时,它们会出现。

△ 原则

· 敏捷 菜单应该易于打开关闭和方便交互

· 上下文 菜单内容应该适合用户需求

· 可浏览 菜单项应易浏览

△ 类型

菜单允许用户从多个选项中进行选择。 与选择控件(例如一组单选按钮)相比,它们不那么突出并占用更少的空间。

下拉菜单:下拉菜单显示由图标,按钮或操作触发的选项列表。 它们的位置根据打开它们的元素而变化;外置的下拉菜单:外置的下拉菜单显示选项列表上方当前选定的菜单项,某些变体可以接受用户输入的输入。

△ 位置

· 海拔

菜单出现在所有其他永久UI元素的前面。

菜单出现在比其他永久UI元素更高的高度(即出现在其他界面上层)。

· 高度

菜单的最大高度应至少比应用程序UI的高度小一行。

此菜单中的行高32dp, 这也是菜单和屏幕底部之间使用的空间。

· 位置

菜单应相对于屏幕或浏览器的边缘定位, 它们通常出现在生成它们的元素旁边(或前面),如果它们处于被浏览器或屏幕边缘切断的位置,则菜单可以显示在生成它的元素的左侧,右侧或上方。

菜单可以更改其位置,以避免被屏幕或浏览器边缘截断。

二、分析

菜单显示相关选项的列表(可以组合在一起)以及不相关的选项。,当用户点击交互式UI元素(如图标,按钮,操作或内容,例如所选项目或文本)时,将显示菜单。

△ 操作

· 禁用操作

在某些条件下,有时只能使用它们时,将操作显示为已禁用。 它们应显示为禁用而不是删除它们。

当该操作不可用时,将禁用“重做”操作,并且在选择内容之前禁用“剪切”和“复制”操作。

三、行为

△ 滚动

如果不是一次显示所有菜单项,则菜单可以滚动。 在此状态下,菜单显示持久滚动条。

当其内容可滚动时,菜单显示滚动条。

△ 动画

菜单打开使用缩放动画(显示元素大小增加的动画), 动画在菜单和生成菜单的动作之间创建关系。

· 位置

菜单的屏幕上的位置影响在哪里和怎么会出现,如果在屏幕顶部打开,它将向下扩展(以避免被裁剪)。

屏幕上不同位置的菜单以不同方式打开,适应可用空间。

默认情况下,菜单打开时带有入口动画。 但是,在桌面上,菜单可以跳过动画并立即打开。

1.移动菜单有入口动画;2.桌面菜单可以立即打开。

四、下拉式菜单

△ 用法

下拉菜单是显示多个选项的紧凑方式,它出现在与元素(例如图标或按钮)的交互或用户执行特定操作时。

△ 位置

下拉菜单相对于生成它们的元素以及屏幕或浏览器的边缘定位。,它们可以出现在生成它们的元素的前面,旁边,上面或下面。

· 默认展示位置

下拉菜单通常位于生成它的元素下方。

由移动设备上的图标触发的下拉菜单。

· 级联菜单(仅限桌面)

级联菜单允许用户通过显示具有多级层次结构的菜单进行多项选择。

它们被组织成包含子列表项的父列表菜单,子列表项目显示在父列表的右侧或左侧,具体取决于扩展子列表项目的空间。

父列表项可以触发包含子操作的级联菜单。

· 上下文菜单

上下文菜单不是由同样的UI元素触发的,它们出现在用户点击的旁边,其操作可能会根据点按目标而有所不同。

要显示上下文菜单,请点击并按住,或右键单击(桌面)所选文本。 所选文本旁边会显示一个上下文菜单。

△ 行为

从下拉菜单中选择一个选项时,生成它的元素保持不变。

1.点击图标会触发下拉菜单;2.选择菜单选项不会更改生成菜单的元素的图标。

四、外置的下拉式菜单

△ 用法

外置的下拉菜单显示菜单上方当前选定的菜单项,它们只能在一次选择单个菜单项时使用。

此公开的下拉菜单显示菜单上方当前选定的字体。

△ 行为

选择项目后,会显示公开的下拉菜单以显示该项目。 在某些情况下,它可以接受用户输入并显示一个值(无论它是否被列为菜单选项)。

△ 位置

外置的下拉菜单位于生成下拉列表的元素下方, 在移动设备上,它可以出现在生成下拉列表的元素前面。

△ 变化

可以自定义公开的下拉菜单使它们具有不同的外观或行为。

· 文本字段下拉菜单

文本字段下拉菜单看起来像文本字段,并在菜单上方显示当前选定的项目。

在桌面上,文本字段下拉菜单显示在触发下拉列表的元素下方, 在移动设备上,文本字段下拉菜单可以打开本机选择器。

在桌面上,文本字段下拉菜单显示在当前所选菜单项下方。

· 可编辑的下拉菜单

可编辑的下拉菜单显示菜单上方当前选定的菜单项,它可以接受菜单中未列出的用户输入值,但可以仅接受某些类型的值,例如仅接受正数。

此可编辑下拉菜单显示当前选定的字体大小, 用户还可以输入菜单中未列出的值。

END.THANKS FOR YOUR READING~

如有不当,还请多多指教~

上一篇下一篇

猜你喜欢

热点阅读