三條線和三個點按鈕怎麼選？
一句話做出判斷
三條線按鈕會打開網站導覽。三個點按鈕會顯示旁邊項目的更多操作。
小螢幕需要收起導覽時，用三條線。項目旁放不下其他操作時，用三個點，並把按鈕命名為「更多操作」。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Hamburger Menu
↗ 漢堡選單
一個有三條線的選單按鈕。空間不夠顯示主要導覽時，可以用它打開導覽。
商店頁面變窄時，有「選單」標籤的按鈕會打開側滑面板，裡面放分類、帳戶和說明。焦點會留在面板內。
- 什麼時候用
- 先保留最重要的導覽項目。小螢幕放不下其他項目時，再使用漢堡選單。
- 什麼時候不要用
- 寬螢幕不要把所有導覽都藏起來。圖示也要有無障礙名稱，並說明選單是否展開。
- 程式裡的名稱
button aria-controls aria-expanded + nav
Overflow Menu Button
↗ 更多操作選單按鈕
一個常以三個點顯示的小按鈕。它會打開版面放不下的次要操作。
每個專案列都直接顯示「開啟」。建立副本、封存和刪除則放在更多操作選單裡。
- 什麼時候用
- 單一項目有多個次要操作，而且全部顯示會讓版面太擠時使用。
- 什麼時候不要用
- 不要把主要操作、破壞性後果，或常用功能的唯一入口藏在沒有文字的圖示後面。
- 程式裡的名稱
button[aria-haspopup=menu] + role=menu
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 漢堡選單Hamburger Menu | 先保留最重要的導覽項目。小螢幕放不下其他項目時，再使用漢堡選單。 | 寬螢幕不要把所有導覽都藏起來。圖示也要有無障礙名稱，並說明選單是否展開。 | button aria-controls aria-expanded + nav |
| 更多操作選單按鈕Overflow Menu Button | 單一項目有多個次要操作，而且全部顯示會讓版面太擠時使用。 | 不要把主要操作、破壞性後果，或常用功能的唯一入口藏在沒有文字的圖示後面。 | button[aria-haspopup=menu] + role=menu |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 漢堡選單（Hamburger Menu）、更多操作選單按鈕（Overflow Menu Button） 中，為真實使用流程選出最合適的介面模式。判斷規則：三條線按鈕會打開網站導覽。三個點按鈕會顯示旁邊項目的更多操作。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。