2.9. 菜單欄 Menu Bars
本文章屬於《跟我學線框圖》系列教程，轉載請註明出處。
菜單欄允許用戶使用類別和子類別進行導航。 它們在整個應用程序中是持久不變的。
在桌面應用程序中，菜單欄是應用程序頂部的項目，也稱為文件菜單。 在 web 上，它們位於頁面的頭部 / 頂部。 在這兩種情況下，它們都可以支持嵌套菜單或作為獨立的分類(也稱為“單斜分組”或扁平結構)。
何時使用菜單欄
菜單欄專門用於主導航(不像垂直導航或選項卡可以作為輔助導航)。
它們應該用於應用程序或站點的類別，這些類別在整個使用過程中都是有意義的，只要沒有太多的類別。 如果有太多的類別，以適應整個頁面，考慮垂直導航。
菜單欄的主要優點是它們的持久性，也就是說，它們總是可訪問的。 這一點在《About Face: The Essentials of Interaction Design》中得到了強調:
設計良好的 Web 站點謹慎地使用在整個購物體驗過程中始終保持不變的持久對象，特別是頁面頂部的頂級導航欄。 這些區域不僅提供了清晰的導航選項，而且它們一致的存在和佈局也幫助客戶確定方向。
菜單欄可以包含子菜單(如上圖所示) ，但是應該避免任何超過一個層次的操作，因為這會推動用戶的心理模型，而“將事物組織成一個單一層次的群組是非常常見的，在你的家裡和辦公室裡隨處可見。”
如何使用菜單欄
Macos 人機界面指南提供了一個在桌面應用程序中使用菜單的全面指南(其中許多也適用於網站)
使菜單標題儘可能簡短而不犧牲清晰度。 理想情況下，他們應該被限制在一個詞
對菜單標題使用文本，而不是圖標。 (一個例外是，在網頁上使用標誌或圖形代替「主頁」文字通常是可以接受的。
禁用，不隱藏，不可用的菜單項
限制子菜單的使用、深度和長度
分配鍵盤快捷鍵並將它們顯示在相關的菜單項旁邊
使用分隔線可以在視覺上創建不同的相關菜單項組
一般來說，把最常用的項目放在菜單的頂部
對啟動相關操作的菜單項進行分組
使用複選標記表示某事當前處於活動狀態
其他重要的菜單欄指南:
不要按照代理機構的組織結構(或者應用程序的架構模型)建模導航。 相反，應該根據用戶最需要訪問的任務和信息來組織它。
最好包括跳過導航鏈接，以允許使用屏幕閱讀器的用戶繞過長導航列表
如果一個菜單中有超過六個鏈接或菜單項，可以考慮使用“超級菜單”（見變化）
使用九個或更少的頂級類別
對於移動站點和應用程序，菜單欄可以摺疊成滑出或可擴展的“漢堡”菜單
確保菜單項看起來具有交互性和足夠的視覺重量。他們應該邀請行動
使菜單鏈接足夠大，以便輕鬆點擊或點擊。 在它們周圍提供足夠的填充和間距，這樣用戶就不會不小心點錯了
選擇一致性，而不是“哇”的因素。偏離標準，風險自負
Basic Usage 基本用法
States 狀態
Variations 變化
為了保持標題的緊湊性，可以將其他功能合併到菜單欄區域，如搜索框或重要操作(如登錄 / 退出)。
對於更復雜的層次結構，可以使用“超級菜單”覆蓋，顯示子類別的多列(或者甚至額外的嵌套級別)。 在使用它們時，要密切關注實現細節，特別是菜單何時被觸發和隱藏的時間。
References
- macOS Human Interface
- GuidelinesU.S. Web Design
- SystemKDE Human Interface
- GuidelinesNielsen Norman Group
Related Controls
- Tabs
- Vertical Navigation
Further Reading
- “About Face: The Essentials of Interaction Design”
- Mega Menus Work Well for Site Navigation (Nielsen Norman Group)
閱讀更多 全棧港 的文章
