Vitaly Friedman 在 Smashing Magazine 的〈Accordion Icons: Which Work Best?〉(2026-10-23)主張,手風琴(accordion)的展開圖示預設用朝下的實心三角或 caret,並避免「標籤連到頁面、圖示負責展開」的分裂式按鈕。讀到的程度:我用網頁擷取工具讀到這篇,回傳的是工具整理的摘要而非逐字原文,所以引文只放短句;文中引用的 NN/g 研究圖表是圖片,摘要沒有任何百分比或樣本數,我也沒有自己驗證;文章沒有談 ARIA、鍵盤與螢幕閱讀器,這些是我下面另外標明的補充。
📖 學
一、為什麼圖示會決定使用者預期
手風琴圖示的任務是告訴人「點下去會在原地展開」,而不是「會跳到新頁面」。依摘要,文章引用 NN/g 的觀察指出,完全沒有圖示時,預期點了會換頁的人,比出現箭頭時更多。這代表「乾淨、不放圖示」並不中性,它會把使用者推向導覽的心智模型。反過來說,只要要表達的是原地展開,就需要一個明確的訊號。
二、各種圖示的問題
依摘要,文章逐一點出常見選項的缺點。朝右的箭頭與朝下的箭頭,都不一定讓人聯想到會展開;加減號(+/−)雖然廣為人懂,但「+」在別的介面可能代表儲存、加入購物車或放大,在多層導覽裡也容易混淆;上下箭頭可能被理解成捲動、下一個搜尋結果或跳到頁面段落;自訂圖示則常讓使用者看不出這是手風琴。文章的結論是,朝下的 caret(實心三角)是最安全的預設,展開後轉為朝上或朝旁邊;加減號通常也行得通。值得注意的是,摘要提到只有 caret 這類圖示,使用者點圖示的次數多於點文字標籤,其他圖示則兩者差不多。
三、分裂式按鈕:同一列兩個動作
文章對分裂式按鈕的立場很明確:標籤連到分類頁、圖示才展開子選單,是應避免的設計。摘要的替代做法是讓整列標籤都負責展開,再把「前往該分類頁」的連結放進展開後的內容裡;文中舉 DHL 的手風琴導覽為例,每個區塊內都有「Overview」連結。我的判讀(非原文):這個做法的好處是一列只有一種行為,觸控時不必在小圖示與長標籤之間瞄準,代價是多一次點擊才能到分類頁,若分類頁本身流量很重要,就要用數據評估。
四、命中範圍是整列,不只是圖示
摘要指出,既然使用者點圖示與點文字的機率相近,圖示選擇影響的是整個點擊目標的預期,而不只是視覺提示。實務上這意味著整列(含標籤與圖示)都該是同一個可點區域。這一段是文章已有的結論;至於具體的點擊區尺寸數值,摘要沒有提到。
五、文章沒談、但實作必須補上的部分
摘要明確說文章沒有討論 aria-expanded、鍵盤與焦點行為。以下是我的補充,依據 WAI-ARIA 慣例而非該文:手風琴的觸發元素應是真正的 button,用 aria-expanded 標示展開狀態,並以 aria-controls 指向內容;圖示本身若只是裝飾,應對輔助技術隱藏,避免在圖示換向時才讓狀態「看起來」改變。只靠圖示方向傳達狀態,對看不到的人沒有作用,所以視覺設計與語意屬性要成對處理。這些我沒有在螢幕閱讀器上實測。
六、限制
這是單一作者彙整 NN/g 研究的短文,量化結果在圖片中,我讀到的摘要看不到數字,所以「更多人」「較少人」只能當方向性結論。圖示偏好也會受語境影響,例如密集的後台表格與行動版導覽,結論未必相同。
🧠 記
- 來源: Smashing Magazine,Vitaly Friedman,2026-10-23;引用 NN/g 研究;讀到的是工具摘要,非逐字原文,未親測。
- 預設: 朝下的 caret,展開後轉向;加減號可作替代。
- 避免: 無圖示卻是展開行為、自訂圖示、多方向裝飾箭頭、分裂式按鈕。
- 語意(我的補充):
button加aria-expanded加aria-controls,裝飾圖示對輔助技術隱藏。
✍️ 實踐
挑自己產品裡一個手風琴或展開式導覽,做五分鐘檢查。第一步,確認同一列只有一種行為;若有分裂式設計,把分類頁連結移進展開內容,看是否更清楚。第二步,確認整列都是可點區域,並用鍵盤 Tab 與 Enter、Space 操作一次。第三步,打開開發者工具,檢查觸發元素是否為 button 並有 aria-expanded,值會隨展開切換。第四步,找兩位沒用過的人,請他們說出點下去會發生什麼,記錄回答是「換頁」還是「展開」。若想量化,可自己做小型 A/B,但樣本數與顯著性要自己負責,別直接套用文章的方向性結論。
🔗 延伸學習
- Accordion Icons: Which Work Best?(Smashing Magazine)
- Making Immersive LLM Chat Experiences More Accessible(Smashing Magazine)
- Smashing Magazine 文章列表
💬 問 AI
我有一個手風琴式的側邊導覽,目前每一列是「標籤連到分類頁、右邊小箭頭負責展開」的分裂式設計。請幫我:1) 分析這種設計在觸控與鍵盤操作上的風險;2) 提出改成「整列展開、分類頁連結放在展開內容裡」的版本,並說明可能損失的點擊量;3) 寫出含 button、aria-expanded、aria-controls 的 HTML 結構,並說明裝飾圖示該如何對輔助技術隱藏;4) 設計一個五人以內的簡易可用性測試腳本,驗證使用者是否知道點下去會展開而不是換頁。請標明哪些是通用慣例、哪些需要我用自己的使用者資料驗證。