Material Design — 菜单(Menus)

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚!

菜单(Menus)

Material Design链接:菜单

菜单

菜单的形式是在短暂的动作条上展示选项列表。

菜单出现在与按钮,操作或其他控件的交互中。菜单显示的是一个一行只有一个选项的选项列表。

如果不适用于某个情景,菜单项可能被禁用。 情景中的菜单应该根据app的当前的状态动态地更改其中的菜单选项。

分类

简单的菜单(Simple Menus)用于手机和平板电脑

级联菜单(Cascading menus)用于pc

海拔

菜单出现在其他应用内元素上方。

行为

滚动

替代

Simple Dialogs


用法

菜单是与按钮,动作,点或其他控件交互时出现的临时材料,至少包含两个菜单项。

每个菜单项都包含不关联的选项或操作,可影响app,页面或视图中已选定的元素。

菜单不应该被用作app内导航的主要方法。

左:应用栏中的操作太多时将会设置一个菜单    右:包含五个选项的菜单

菜单标签

按钮或控件的标签应该简洁而准确地反映菜单内的项目(如下图)。 菜单栏通常使用单个单词作为标签,如“文件”,“格式”和“编辑”。其他上下文可能需要更长的标签。

禁用菜单选项

菜单显示一组一致的菜单项。 菜单项可以根据应用程序的当前状态启用或使其不可用(例如置灰)。

左:可通过“View”预测其中内容    右:“Stuff”让用户无法预测其中内容

情景菜单(Contextual menus)

情景菜单可根据app的当前状态动态更改其中可用的菜单项。

·与当前情景无关的菜单项可能会被删除

·与情景相关但需要满足某些条件的菜单项可能被禁用(如置灰)。 例如,当选择文本后,“复制”这个菜单选项才变为可选择项。

单个菜单项状态

某些app状态可能会导致只有一个菜单项的情景菜单。 例如,当使网页上的文本高亮时,Android仅显示“复制”菜单项,因为用户无法“剪切”或“粘贴”文本。

情景菜单


菜单是可滚动的

如果菜单高度阻止其显示所有菜单项目,菜单可以在内部滚动。 一个例子是在横向上查看手机上的菜单。

可以内部滚动的菜单

级联菜单(仅限pc)

级联菜单可根据菜单与屏幕垂直和水平边缘的接近程度放置菜单。

级联菜单

菜单项

单行展示

每个菜单项限于一行文本(单个单词或短语),用于描述选定时执行的操作。

菜单项还可包含:

·图标和提示文本(如下图中展示的键盘快捷键);

·如复选标记之类的控件(已选择的打勾),表明多个已选的项目或状态。

菜单排序

带有静态内容的菜单应该在菜单的顶部放置最常用的菜单项。

具有动态内容的菜单可能具有其他行为,例如:将先前使用的字体放在菜单的顶部;订单可以根据用户操作进行更改。

菜单嵌套

菜单项可以显示嵌套的子菜单。 理想情况下,嵌套的层级都需要做显示,因为很难用嵌套多层的子菜单进行导航。

菜单项例子

不可用的操作

将操作显示为不可用(如置灰)而不是将其删除,让用户知道它们可以在正确的条件下存在。

例如,重做在没有任何可重做的操作时被禁用。 剪切和复制在没有选择内容时不可用。

不可用的例子

行为

菜单出现在app内所有其他UI元素之上。

菜单位于触发菜单元素的正上方,且使得当前选择的菜单项出现在触发出的菜单的顶部(如下图)。

不要显示所选菜单项的副本(如下图)。

将菜单放置在触发菜单元素的下方会将其与上下文环境分开(如下图)。

关闭菜单

可以通过点击菜单外部或点击触发菜单的元素(如果可见)来关闭菜单。

选择一个菜单项后也应该关闭菜单。 例外情况是,菜单允许选择多个项目,例如使用复选标记。


简单菜单(Simple Menus)

移动端或pc

使用列表中的简单菜单显示特定列表项的选项。

垂直对齐

靠近屏幕边缘时,简单菜单将垂直重新对齐,以使所有菜单项完全可见

解答疑惑:与简单菜单相比,Simple Dialog可以提供与可用于列表项目的选项相关的其他细节,或者提供与主要任务相关的导航或正交?(orthogonal) 操作。 尽管它们可以显示相同的内容,但简单菜单优Simple Dialog,因为简单菜单对用户当前上下文的干扰较小。

菜单项选择

选择一个选项提交选项并关闭菜单。

取消选择

触摸菜单外部或按下系统“后退”按钮,取消操作并关闭菜单。

简单菜单

·打开时,简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。 当前选择的菜单项突出显示(如下图)。

向下展开的简单菜单
向上展开的简单菜单

·不要在简单菜单弹出的第一个选项上放列表中的非已选项(如下图)。

·但在靠近屏幕边缘时,简单菜单会重新定位其垂直对齐方式,以便所有菜单项都完全可见。

·简单菜单也应该应该显示在其触发元素上,而不是下面(如下图)。

·菜单宽度取决于字符串长度,在移动设备上定义为56dp单位的倍数。

·简单菜单始终在屏幕的左侧和右侧保持16dp的留白(手机)或24dp留白(平板)。

·如果简单菜单中的文本长到需要换行,就改为使用Simple Dialogs,因为可以有不同高度的行(如下图)。

·内容可滚动时,菜单一直显示滚动条。

·简单菜单的最大高度应小于页面高度的一行或多行。 这确保了可点击简单菜单之外的区域来关闭菜单。

·不在菜单中重复展示已选项(同Menus)。

·简单的菜单总是与列表项文本的开头左对齐,并且不会基于点击位置重新水平定位(如下图)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容