【Material Design视觉设计语言】UI组件设计（九）：菜单

作者：郭孝星
微博：郭孝星的新浪微博
邮箱：allenwells@163.com
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计（一）：按钮
【Material Design视觉设计语言】UI组件设计（二）：卡片
【Material Design视觉设计语言】UI组件设计（三）：纸片
【Material Design视觉设计语言】UI组件设计（四）：表格
【Material Design视觉设计语言】UI组件设计（五）：提示框
【Material Design视觉设计语言】UI组件设计（六）：分隔线
【Material Design视觉设计语言】UI组件设计（七）：网格
【Material Design视觉设计语言】UI组件设计（八）：列表
【Material Design视觉设计语言】UI组件设计（九）：菜单
【Material Design视觉设计语言】UI组件设计（十）：选择器
【Material Design视觉设计语言】UI组件设计（十一）：进度条
【Material Design视觉设计语言】UI组件设计（十二）：滑块
【Material Design视觉设计语言】UI组件设计（十三）：Toast
【Material Design视觉设计语言】UI组件设计（十四）：Tabs
【Material Design视觉设计语言】UI组件设计（十五）：文本框

菜单是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。每一个菜单项是一个离散的选项或者动作，并且能够影响到应用、视图或者视图中选中的按钮。

一 菜单的布局设计

1.1 菜单项设计

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

菜单项的文本一般是单个单词或者短语，但是也可能包含了图标和帮助文本，比如快捷键，同时也可包含像复选标记之类的控件来标识多选条目或状态。可以参考列表控件。

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

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

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

1.2 菜单尺寸标准

不同设备的尺寸

级联菜单尺寸

菜单的实践方法

设计原则

1 触发按钮或者控件的标签可以简明准确的反映出菜单中包含的菜单项

菜单栏通常使用一个单词作为标签，像“文件”、“格式”、“编辑”和“视图”，然后其他内容或许有更冗长的标签。

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

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

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

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

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

4 如果菜单的高度使得菜单项不能完全显示，那么菜单会支持内部滚动

5 菜单可以是级联的