菜單

用法

菜單是臨時的一張紙（paper），由按鈕（button）、動作（action）、點（pointer）或者包含至少兩個菜單項的其他控件觸發(fā)。

每一個菜單項是一個離散的選項或者動作，并且能夠影響到應用、視圖或者視圖中選中的按鈕。

菜單不應該用作應用中主要的導航方法。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-01a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-01b_large_mdpi.png" alt="" />

觸發(fā)按鈕或者控件的標簽（label）可以簡明準確的反映出菜單中包含的菜單項。菜單欄通常使用一個單詞作為標簽，像“文件”、“格式”、“編輯”和“視圖”，然后其他內(nèi)容或許有更冗長的標簽。

菜單顯示一組一致的菜單項，每個菜單項可以基于應用的當前狀態(tài)來使能。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-02_large_mdpi.png" alt="" />

上下文菜單（Contextual menus）能夠基于應用的當前狀態(tài)動態(tài)的改變菜單項的可用性和讓菜單項使能。

通常，移除與當前上下文不相干的菜單項，禁用那些需要滿足特定條件才能使用的相關的菜單項（比如，當文本選中后“復制”變得可用）。

特定的應用狀態(tài)可能使得上下文菜單只包含一個菜單項。比如，當在網(wǎng)頁上高亮文本時，Android只顯示“復制”，所以用戶不能使用“剪切”和“粘貼”文本。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-03_large_mdpi.png" alt="" />

菜單依賴于它們距屏幕邊的距離垂直和水平的調(diào)整位置。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-04_large_mdpi.png" alt="" />

如果菜單的高度使得菜單項不能完全顯示，那么菜單會支持內(nèi)部滾動。一個典型的例子是在手機橫屏狀態(tài)下查看菜單。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-05_large_mdpi.png" alt="" />

菜單可以是級聯(lián)的。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-06_large_mdpi.png" alt="" />

下面這些動畫演示了菜單的滾動和級聯(lián)。

下拉

文本框下拉

應用工具條下拉

級聯(lián)下拉

菜單項

每一個菜單項限制為單行文本，并且能夠說明在菜單項選中時所發(fā)生的動作。

菜單項的文本一般是單個單詞或者短語，但是也可能包含了圖標和幫助文本，比如快捷鍵，同時也可包含像復選標記之類的控件來標識多選條目或狀態(tài)?？梢詤⒖?a href="list-controls.html">列表控件。

帶有靜態(tài)文本的菜單應當在菜單的上部放置最常使用的菜單項。

帶有動態(tài)文本的菜單可能具有其它行為，比如在菜單上部放置預先使用的字體。順序可以根據(jù)用戶的動作而改變。

菜單項可以內(nèi)嵌自己的子菜單。嘗試著將菜單層級限制在一級，因為導航多級內(nèi)嵌子菜單是困難的。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menuitems-menu-items-01_large_mdpi.png" alt="" />

將動作菜單項顯示為禁用狀態(tài)，而不是移除它們，這樣可以讓用戶知道在正確條件下它們是存在的。

比如，當沒有重做任務時禁用重做（Redo）動作。當內(nèi)容被選中后，剪切（Cut）和復制（Copy）動作可用。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menuitems-menu-items-02_large_mdpi.png" alt="" />

行為

菜單出現(xiàn)在所有的應用內(nèi)部的UI元素之上。

通過點擊菜單以外的部分或者點擊觸發(fā)按鈕（如果按鈕可見），可以讓菜單消失。

通常，選中一個菜單項后菜單也會消失。一個特例是當菜單允許多選時，比如使用復選標記。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-08_large_mdpi.png" alt="" />

菜單顯示在觸發(fā)它的元素處，當前選中的菜單項顯示在觸發(fā)元素的頂部。

不要重復顯示選中的菜單項。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-01_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-02_large_mdpi.png" alt="" />

(上圖)不可取

菜單不要與觸摸的位置水平對齊。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-03a_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-03b_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-04a_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-04b_large_mdpi.png" alt="" />

(上圖)不可取

尺寸標準

尺寸標準提供了不同大小和類型以及不同平臺上菜單的尺寸。

移動設備

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-metrics-menus-redlines-01_large_mdpi.png" alt="" />

不同的寬度

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-metrics-menus-redlines-02_large_mdpi.png" alt="" />

級聯(lián)菜單

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-metrics-menus-redlines-03_large_mdpi.png" alt="" />

級聯(lián)標尺

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-metrics-menus-redlines-04_large_mdpi.png" alt="" />

原文：Menus 翻譯：codediving 校對：PoppinLp