官網「分頁標籤」(Tabs) 設計完整攻略：中小企業如何用同一個版位塞下三種內容、又不會讓訪客錯過

很多中小企業的官網都會遇到一個尷尬的版位問題：產品有三種規格、服務有四種方案、FAQ 一口氣有 20 題，全部攤平往下排，整頁滑到天荒地老；可是分成三、四個獨立頁面，又怕訪客點進去回不來。這時候，「分頁標籤」（Tabs）就是最常被想到的解法──用同一塊版位塞下多組內容，訪客點哪個看哪個。

但 Tabs 不是隨便擺三顆按鈕就能交差。我們在做客戶官網時常常發現：許多企業的 Tabs 設計反而讓訪客錯過關鍵資訊、SEO 抓不到內文、手機版直接亂掉。這篇文章想把分頁標籤的設計邏輯一次講清楚，讓你不再為「該攤平還是該分頁」掙扎。

Photo by Amper on Unsplash

一、Tabs 到底什麼時候該用？什麼時候不該用？

先講結論：Tabs 適合「同層級、可互相比較、訪客只會看其中一個」的內容。例如：

• 同一個產品的不同規格（標準版 / Pro 版 / 企業版）
• 同一個服務的不同方案比較
• 商品的詳細資訊（規格 / 配件 / 運送 / 保固）
• 支援多平台的下載連結（Windows / Mac / iOS / Android）

反過來，這些情況請不要用 Tabs：

• 必看資訊：例如價格、服務內容摘要──這些一旦藏到 Tab 裡，訪客點都不會點。
• 內容性質完全不同：例如把「公司簡介」和「常見問題」放同一組 Tabs，邏輯不一致，訪客會混淆。
• SEO 重要內文：Google 雖然會抓 Tab 隱藏內容，但會降低權重，重要文字盡量不要藏。
• 內容只有兩段且都很短：直接攤平比較快，Tabs 反而讓人多點一次。

判斷的關鍵是問自己一句話：「如果訪客一直沒點到第二個 Tab，他會不會錯過重要決策資訊？」如果答案是會，那就不該用 Tabs。

二、預設要顯示哪一個 Tab？多數人都選錯了

大部分官網會把「第一個 Tab」當預設開啟，順序通常按字母或產品線排。但更聰明的做法是：把「最多人會看的那一個」設為預設。

例如販售三種方案的 SaaS 公司，如果 70% 客戶最後都買中間方案，那預設就應該打開「中間方案」的 Tab，不是「最便宜」也不是「最貴」。這樣可以省去訪客點擊的步驟，也等同於用版面語言告訴他：「這是大家最常選的選項。」

若不知道哪個最熱門，可以加裝 Google Analytics 4 的事件追蹤，記錄每個 Tab 被點擊的次數，三個月後回頭調整預設值。這個小調整經驗上能讓內容曝光率提升 20% 以上。

三、Tab 標題的命名規則：用詞要短、要具體、要可以一眼分辨

Tab 標題不是內文，是訪客判斷「該點哪個」的指引。命名上有三個原則：

1. 控制在 2 到 4 個字： 超過 5 個字在手機版很容易斷行或被截斷。「標準版」比「標準方案」好，「規格」比「商品詳細規格說明」好。

2. 不要用對訪客來說無意義的內部術語： 例如「Tier 1 / Tier 2 / Tier 3」對你內部有意義，但對訪客就是一團迷霧。改成「個人 / 團隊 / 企業」會直觀很多。

3. 各 Tab 標題要明顯區隔： 「方案介紹 / 方案內容 / 方案說明」這種命名訪客根本分不出差別。改成「功能 / 價格 / 常見問題」就清楚了。

Photo by Joshua Woroniecki on Unsplash

四、視覺設計：選中狀態必須一眼看出

Tabs 最常見的設計失敗就是──訪客根本看不出「現在正在看哪一個」。要避開這個問題，選中狀態（active state）必須跟其他 Tab 有強烈對比。常見的做法有：

• 底線粗變化： 選中那個 Tab 下方有 2-3px 的粗色底線，未選中的沒有。最經典，適合大多數品牌。
• 填色塊： 選中的 Tab 整顆變成品牌主色，未選中是灰底。對比強烈，適合需要強調的場合。
• 文字加粗 + 顏色： 選中文字加粗、改為品牌色，未選中是灰字。極簡風常見。

不論用哪一種，原則是：選中與未選中之間的視覺差異要夠大。如果你瞇著眼睛看還是分不出來，那就是設計失敗。另外滑鼠 hover 時也要有反饋（例如顏色變深、底線浮現），讓訪客知道這是可以點的。

五、手機版的 Tabs 是另一個世界

桌機版 Tabs 看起來都很美，一上手機就現原形。常見的悲劇是：四個 Tab 並排，到手機螢幕全部擠在一起，字小到看不清、按鈕小到按不到。處理方式有三種：

方案 A：橫向滾動 Tabs。 手機上保留水平排列，但允許左右滑動。前兩個 Tab 完整顯示、第三個 Tab 露出一半，提示訪客「右邊還有」。這是電商商品詳情頁最常用的做法。

方案 B：轉換成 Accordion（手風琴）。 在手機版直接把 Tabs 改成上下垂直的折疊面板，點哪個展開哪個。優點是所有選項一眼看到，缺點是失去「比較感」。適合 FAQ 類內容。

方案 C：下拉選單。 把所有 Tab 收進一個下拉選單，點選後切換內容。最省版面，但訪客比較難快速切換、看不到全部選項，建議只在 4 個以上 Tab 時使用。

選擇哪一種要看你的內容性質：方案比較適合 A（保留視覺比較）、FAQ 適合 B（一覽性強）、選項超過 6 個適合 C（省空間）。

六、SEO 與無障礙：Tabs 容易踩到的兩個地雷

SEO 地雷： 早年 Google 對「預設隱藏的內容」會降低權重，現在雖然改善很多，但仍有兩件事要注意。第一是 Tabs 內所有內容務必直接寫在 HTML 裡，不要用 JavaScript 動態載入（這樣搜尋引擎才抓得到）。第二是若有非常重要的關鍵字段落，盡量放在預設打開的那個 Tab，或乾脆攤平在頁面其他位置。

無障礙地雷： Tabs 在無障礙標準上有完整的 ARIA 屬性規範（role="tab", aria-selected, aria-controls 等）。如果完全沒寫，使用螢幕閱讀器的訪客會完全不知道這是 Tabs 結構。請工程師務必加上對應的 ARIA 標記，並支援鍵盤左右方向鍵切換 Tab，這是基本要求，也對 SEO 結構化解析有幫助。

Photo by Domenico Loia on Unsplash

七、不要超過 5 個 Tab，越多越糟

很多人覺得「Tabs 可以擺很多」是優點，事實正好相反。一旦 Tab 數量超過 5 個，就會出現幾個問題：訪客記不住自己看過哪一個、版面在手機上嚴重塞車、選擇焦慮反而讓人不點。

如果你發現自己想用 6 個以上的 Tab，請先問自己這幾個問題：

• 是不是有幾個 Tab 可以合併？例如「規格」跟「技術參數」可以併成一個。
• 是不是有些 Tab 根本沒人看？打開 GA4 看點擊數據，沒人點的直接拿掉。
• 是不是該把它改成獨立子頁面？例如 5 個產品各做一頁，靠導航選單連結，反而 SEO 更好。

Tabs 是「內容整理術」，不是「內容囤積術」。寧可少而清楚，不要多而混亂。

八、要不要記住訪客上次選的 Tab？

進階一點的設計，會用網址雜湊（例如 ?tab=pricing）或瀏覽器 localStorage 記住訪客上次選的 Tab。這有幾個好處：

• 訪客重新整理頁面時不會跳回預設 Tab，操作不會被打斷。
• 可以直接把連結分享給朋友，例如「直接看價格頁」的連結。
• 從廣告連結進來時，可以指定打開特定 Tab，提升精準度。

對於電商商品頁、SaaS 定價頁、技術文件這類使用情境，這項功能很值得做。但對於一次性瀏覽的形象官網，可以不做以節省工程成本。

結語：從一個版位開始檢查你的官網

下一次打開自己公司網站時，找一個現在用 Tabs 的地方（如果沒有，找一塊很長的內容區塊），用本文提到的幾個檢查點走一遍：

• 預設打開的是最熱門的選項嗎？
• Tab 標題夠短、夠具體、夠好分辨嗎？
• 選中狀態一眼能看出來嗎？
• 手機版會不會亂掉？
• SEO 重要內容有沒有藏起來？
• Tab 數量有沒有超過 5 個？

Tabs 是個看起來簡單、做好卻不容易的元件。把它調對，不只是版面更清爽，連帶詢問率、商品頁停留時間、行動版操作流暢度都會明顯改善。如果你正在規劃官網改版，或商品頁的資訊一直塞不下、又怕拆頁面拆過頭，歡迎找我們聊聊──不用大改版，從幾個關鍵元件下手，也能讓官網體驗有感升級。