Nielsen Norman Group 在 10 月 26 日上架一支約 5 分鐘的影片〈Tabs Used Right〉，講師是 Evan Sunwall，內容在分辨導覽型分頁與頁內分頁。影片是敲門磚，真正的準則在同名文章〈Tabs, Used Right〉，作者同為 Sunwall，2024 年 8 月發表，頁面標示 2026 年 9 月 2 日重新審閱，並說明是改寫自 Jakob Nielsen 2007 年的舊文。今天整篇讀這篇文章的準則，並挑出最常在實務上出錯的幾條。
與 昨天的 UIUX 同樣回到介面實作層，只是從 CSS 裝飾換成最基本的控制項。讀到的程度：我用網頁抽取工具讀了影片頁與文章頁，沒有看影片本身，也沒有逐字讀完文章；文章列的案例（Yahoo Finance、CNN 等）是抽取結果，我沒有自己開網站核對現況，網站也可能已改版。
📖 學
一、先分清楚兩種分頁
文章把分頁分成兩類：頁內分頁讓使用者留在同一頁、切換同一主題下的相關內容；導覽分頁則是把使用者帶到不同的內容，本質上是網站導覽。準則是不要把兩種混在同一組控制項裡，並且同一組裡每個分頁的長相與行為要一致，點任何一個都應該換面板。文章舉的反例是聖地牙哥動物園的職涯頁把兩種混在一起，以及 Behance 的「Creatives for Hire」看起來是分頁其實是連結。同一頁若兩種都需要，樣式要刻意做出差別。
這條對 design system 的意義很直接：元件庫最好把「Tabs」與「導覽列」拆成兩個元件，不要用一個元件加一個「是否為連結」的屬性帶過，否則第一個忘了區分的產品頁就會出現混合。
二、什麼時候該用分頁，什麼時候不該
適合的情境是內容長、有清楚分組、各組重要性不一、標籤能用很短的字說完。文章同時提醒，非預設的分頁最好只放補充資訊，因為使用者通常只看預設那一頁。不適合的情境是使用者必須在分頁之間比對資訊，因為來回切換會吃掉短期記憶；文章把 Google 廣告管理網站列為這類問題的例子。另一條是手機與桌機的分工：手機上偏好手風琴，適合 FAQ 這類短內容，桌機上才用分頁處理較長、版面較複雜的內容。
分頁數量也有上限的精神：文章說越少越好，分頁列溢出、用輪播把其餘分頁藏起來會增加互動成本，Patagonia 的商品分類輪播是例子。
三、視覺：選取狀態與面板的連結
視覺類的準則最容易直接拿去檢查自家介面。選取中的分頁至少要有兩種以上的指示，例如共同區塊、底線、粗體或較深的字色、較大的字級、不同的圖示；文章警告不要只靠細線或低對比的顏色，CNN 只靠加粗、幾乎看不出來的例子被拿來示範。未選取的分頁也要看得見、讀得到，MongoDB 低對比的標籤被點名。
選取的分頁要和面板連在一起，可以用共同區塊或靠近的位置；中間隔太大、被標籤或整條線切開都會弱化連結。分頁列放在面板上方，垂直或放在下方的分頁列容易被忽略；一組只用一列，疊兩列會讓人分不出哪個是選取的，也破壞空間記憶。文章對鍵盤的建議是 Enter 或空白鍵選取、焦點指示要有高對比，並使用正確的 ARIA 角色。
四、內容與標籤
高使用率的內容放第一個並預設選取，標籤用簡單白話、預測得出內容，長度 1 到 2 個字；標籤太長，代表選項可能複雜到不適合用分頁。不要用全大寫，會降低辨識度。若內容沒有明顯分組，就改成一頁加小標題，不要硬切分頁。最後一條常被忽略：新增、複製、刪除分頁這類管理功能要找得到，Google 試算表的可見箭頭按鈕被列為好例子，Excel 只有右鍵選單被列為問題。
五、一個我要提醒的數字落差
影片頁寫的是「導覽分頁與頁內分頁的差別」，頁面沒有列任何準則；影片縮圖檔名有「6 Tips」字樣，但頁面沒確認。文章頁的簡介說有「12 條設計準則」，我讀到的內文依小標拆開卻有約 19 條，兩者不一致。這可能只是分法不同（有些條目合併計算），我沒有查證；拿去引用時請用「文章列出的多條準則」，不要寫死 12 或 19。
🧠 記
- 來源： NN/g 影片〈Tabs Used Right〉2026-10-26，約 5 分鐘，Evan Sunwall；文章〈Tabs, Used Right〉2024-08-02 發表、2026-09-02 重新審閱，改寫自 Nielsen 2007 舊文。
- 兩類分頁： 頁內分頁留在原地，導覽分頁會換內容；不要混在同一組，也不要讓某個分頁其實是連結。
- 用不用： 內容長、有分組、標籤短才用；需要跨分頁比對就不要用；手機偏好手風琴。
- 視覺： 選取狀態至少兩種指示；未選取也要讀得到；單列、放在面板上方、和面板相連。
- 標籤： 1 到 2 個字、白話、不全大寫；管理功能要看得見。
邊界： 沒看影片；案例是抽取結果、未核對現況；「12 條」與我數到的約 19 條不一致，原因未查。
✍️ 實踐
用 20 分鐘稽核自己產品裡的一組分頁。
- 數一下同一組分頁有幾個，超過五到六個就想想能否拆分或改成別的結構。
- 把畫面轉成灰階，確認選取中的分頁仍然分得出來；只靠顏色或一條細線就要補第二種指示。
- 檢查有沒有任何一個「分頁」其實是連結，若有，把它移出這一組。
- 只用鍵盤 Tab 走一遍：焦點框看不看得見，Enter 或空白鍵能不能切換。
- 手機寬度下看一次，內容短的話試試改成手風琴。
🔗 延伸學習
- Tabs Used Right（NN/g 影片）：10 月 26 日，約 5 分鐘，我只讀了頁面說明。
- Tabs, Used Right（NN/g 文章）：本篇主要依據，我讀的是抽取結果。
- Accordion Icons: Which Work Best?（Smashing Magazine）：10 月 23 日，Vitaly Friedman，談手風琴圖示，可與分頁的取捨並讀；我只讀過標題與日期。
💬 問 AI
我要評估 NN/g 的〈Tabs, Used Right〉(Evan Sunwall,2024-08-02 發表、2026-09-02 重新審閱,改寫自 Jakob Nielsen 2007 舊文)與 2026-10-26 的同名影片。請嚴格分成「文章說的」「你查證到的」「你的推論」三區回答,不確定就直說,不要編造連結、數字或引文,也不要給任何投資或財務建議。
背景(請當待查證主張):
1. 準則包含:不要混用頁內與導覽分頁;選取狀態至少兩種指示;單列、放在面板上方;標籤 1 到 2 個字、不全大寫;需要跨分頁比對時不要用分頁;手機偏好手風琴。
2. 文章簡介說「12 條準則」,但內文依小標拆約 19 條,原因不明。
請做:
A. 逐點對照原文與 WAI-ARIA Authoring Practices 的 tabs 模式,標示「成立/部分成立/查不到」並附一手連結。
B. 查證「12 條」與實際條數為何不同。
C. 為一個 6 人設計團隊寫一份 design system 的 Tabs 與 Navigation 元件分工規範,含鍵盤操作、焦點樣式與手機退路。
D. 列出這些準則在哪些情境(例如資料密集的後台)可以合理例外。
只談介面設計實務,不評論公司或人事。