GUI 常用元素中英對照表 / 4. Menu 附彩蛋

  • macOS 把一般菜單欄叫作 Hierarchical Menu,主要是為了和另一種 Contextual Menu 呼應。

  • Windows 或者說 Office 的基礎元素里有一種特殊案例 Ribbon,主要面向操作特別繁複的辦公應用。

  • 和一般菜單的操作範圍指向整個應用不同,Contextual Menu 只指向特定元素,比如 macOS 的右鍵選中後彈出菜單,再比如 Material 的點擊 Overflow 圖標彈出對應菜單。
  • iOS 中有一類特殊 Contextual Menu,針對文本編輯的Edit Menu。

  • 對應譯名:

    Menu Bar —— 菜單欄

    Contextual Menu —— 語境菜單

    Edit Menu —— 編輯菜單

*彩蛋: Hamburger Menu 的前生今世

大多數情況,用戶不理解 Hamburger Menu 是什麼,剩下的情況,用戶不喜歡這個設計。對他們來說,看不到的基本就等於不存在。默認隱藏在「更多」、「展開」里的內容就是薛定諤那隻亦生亦死的貓,在沒點開之前,一切皆有可能。Hamburger Menu / 漢堡菜單被詬病的根本原因在於,1、被隱藏的選項、操作是否應該被隱藏;2、如果是,那麼可以被隱藏的選項、操作是否有必要存在。

現下的漢堡菜單多見於移動端應用,點擊圖標後呼出側邊欄。但設計者 Norm Cox 最開始對它的定義是語境菜單——在有限空間里作為一個「容器」收納其他操作——而非導航。

I designed that symbol many years ago as a **"container" for contextual menu choices**. It would be somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button.

Xerox Star 的錄像即證明了這一點。點擊 Hamburger Icon 後左側出現針對文檔的菜單列表。

最早出現在 Android 系統上的「縱向三點」 (Action) Overflow ,也被昵稱為 Dango,其實就是原始 Hamburger Menu 的簡化形式。也許是為了避免語義上的衝突,Material 在定義規範中把普遍理解的 Hamburger Menu 改作了更為清晰直觀的 Navigation Drawer。

References:

1. Menus. (n.d.). Retrieved Feb 6, 2017, from macOS Human Interface Guidelines: About Menus

2. Menus. (n.d.). Retrieved Feb 6, 2017, from Menus - Components - Material design guidelines

3. Menus and context menus. (n.d.). Retrieved Feb 6, 2017, from Menus and context menus

4. ContextualMenu. (n.d.). Retrieved Feb 6, 2017, from Office UI Fabric

5. Who Designed the Hamburger Icon?

推薦閱讀:

GUI 常用元素中英對照表 / 6. Confirmation Popup
GUI 常用元素中英對照表 / 7. Action Popup

TAG:用戶界面設計 |