9月13日,谷歌设计语言~~接着列表控制,讲讲菜单,我们平时看到手机上的各种下拉菜单什么的,对于我们来讲在应用中主要是用于导航,而在这种谷歌新的设计语言中它不仅仅是用于导航,或者说导航只是一部分作用~具体怎样~~看下文~~

菜单

用法

菜单是临时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)或者包含至少两个菜单项的其他控件触发。

每一个菜单项是一个离散的选项或者动作,并且能够影响到应用、视图或者视图中选中的按钮。

菜单不应该用作应用中主要的导航方法。

components-menus-menus-menus-01a_large_mdpi

components-menus-menus-menus-01b_large_mdpi

触发按钮或者控件的标签(label)可以简明准确的反映出菜单中包含的菜单项。菜单栏通常使用一个单词作为标签,像“文件”、“格式”、“编辑”和“视图”,然后其他内容或许有更冗长的标签。

菜单显示一组一致的菜单项,每个菜单项可以基于应用的当前状态来使能。

components-menus-menus-menus-02_large_mdpi

上下文菜单(Contextual menus)能够基于应用的当前状态动态的改变菜单项的可用性和让菜单项使能。

通常,移除与当前上下文不相干的菜单项,禁用那些需要满足特定条件才能使用的相关的菜单项(比如,当文本选中后“复制”变得可用)。

特定的应用状态可能使得上下文菜单只包含一个菜单项。比如,当在网页上高亮文本时,Android只显示“复制”,所以用户不能使用“剪切”和“粘贴”文本。

components-menus-menus-menus-03_large_mdpi

菜单依赖于它们距屏幕边的距离垂直和水平的调整位置。

components-menus-menus-menus-04_large_mdpi

如果菜单的高度使得菜单项不能完全显示,那么菜单会支持内部滚动。一个典型的例子是在手机横屏状态下查看菜单。

components-menus-menus-menus-05_large_mdpi

菜单可以是级联的。

components-menus-menus-menus-06_large_mdpi

下面这些动画演示了菜单的滚动和级联。

下拉

文本框下拉

应用工具条下拉

级联下拉

菜单项

每一个菜单项限制为单行文本,并且能够说明在菜单项选中时所发生的动作。

菜单项的文本一般是单个单词或者短语,但是也可能包含了图标和帮助文本,比如快捷键,同时也可包含像复选标记之类的控件来标识多选条目或状态??梢圆慰?a style="color: #205caa" >列表控件。

带有静态文本的菜单应当在菜单的上部放置最常使用的菜单项。

带有动态文本的菜单可能具有其它行为,比如在菜单上部放置预先使用的字体。顺序可以根据用户的动作而改变。

菜单项可以内嵌自己的子菜单。尝试着将菜单层级限制在一级,因为导航多级内嵌子菜单是困难的。

components-menus-menuitems-menu-items-01_large_mdpi

将动作菜单项显示为禁用状态,而不是移除它们,这样可以让用户知道在正确条件下它们是存在的。

比如,当没有重做任务时禁用重做(Redo)动作。当内容被选中后,剪切(Cut)和复制(Copy)动作可用。

components-menus-menuitems-menu-items-02_large_mdpi

行为

菜单出现在所有的应用内部的UI元素之上。

通过点击菜单以外的部分或者点击触发按钮(如果按钮可见),可以让菜单消失。

通常,选中一个菜单项后菜单也会消失。一个特例是当菜单允许多选时,比如使用复选标记。

components-menus-behavior-menus-08_large_mdpi

菜单显示在触发它的元素处,当前选中的菜单项显示在触发元素的顶部。

不要重复显示选中的菜单项。

components-menus-behavior-menus-p-01_large_mdpi 要(Do)

components-menus-behavior-menus-p-02_large_mdpi 不要(Don’t)

菜单不要与触摸的位置水平对齐。

components-menus-behavior-menus-p-03a_large_mdpi 要(Do)

components-menus-behavior-menus-p-03b_large_mdpi 要(Do)

components-menus-behavior-menus-p-04a_large_mdpi 不要(Don’t)

components-menus-behavior-menus-p-04b_large_mdpi 不要(Don’t)

尺寸标准

尺寸标准提供了不同大小和类型以及不同平台上菜单的尺寸。

移动设备

components-menus-metrics-menus-redlines-01_large_mdpi

不同的宽度

components-menus-metrics-menus-redlines-02_large_mdpi

级联菜单

components-menus-metrics-menus-redlines-03_large_mdpi

级联标尺

components-menus-metrics-menus-redlines-04_large_mdpi

非常感谢这些辛苦翻译的小伙伴??!未完待续~~~
?文章转自:http://www.ccopus.com/?
========================关于学ui网=========================
?ccopus.com 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

转载请注明:学UI网—UI设计师学习教程平台 » Android设计规范 Material Design-Components(10菜单)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
UI最乐观的状态是什么?UI最乐观的状态是什么?
民宿设计分享民宿设计分享
助你快速搭配 Material Design 配色方案的10款Web工具助你快速搭配 Material Design 配色方案的10款Web工具
形式与功能 – 卡片式设计基础概念和运用方法形式与功能 – 卡片式设计基础概念和运用方法
为设计师精心打造的14款进阶移动端应用为设计师精心打造的14款进阶移动端应用
打造优秀用户体验的10大排版规则打造优秀用户体验的10大排版规则
如何做出这种有厚度的 APP 界面图片?如何做出这种有厚度的 APP 界面图片?
卡片式设计是如何占领设计圈的?卡片式设计是如何占领设计圈的?
智能电视用户体验设计之??仄髌?/span>
?