官網「Accordion／摺疊面板」設計完整攻略：中小企業如何用一個會展開的小箭頭把長頁面變成清爽好讀的轉換利器

不少老闆有個共同的煩惱：官網的服務頁、產品規格頁、FAQ 頁——每一頁都想塞很多資訊，怕客戶看不夠；可是真的把所有內容攤開來放，畫面就變成一條看不到底的長河，訪客滑兩下就跳走。這時候，Accordion（摺疊面板）就是最常被低估的好工具。

Accordion 不是什麼新東西，但很多中小企業官網要嘛沒用，要嘛用錯了。這篇我們從什麼時候該用、怎麼設計、怎麼避免 SEO 踩雷，到要不要加動畫，一次講清楚。

什麼是 Accordion？跟 Tabs 又有什麼不一樣？

Accordion 是一種把長內容收摺起來、點擊標題後展開的元件。你在大部分的 FAQ 頁面、產品規格表、訂單明細裡都看過：一行標題加一個向下箭頭，點一下內容才出現。

很多人會把它跟之前我們聊過的「分頁標籤 Tabs」搞混。差別其實很單純：Tabs 是水平、互斥，一次只能看一個；Accordion 是垂直、可同時開多個。同樣是「把多塊內容塞進同一個版位」，Tabs 適合並列比較（例如方案比較、規格 vs 用法），Accordion 則適合「我只想看其中一兩項」的瀏覽情境，例如 30 條 FAQ 裡找你想問的那一條。

Photo by Iklas on Unsplash

什麼情況下該用 Accordion？三個經典場景

1. FAQ 頁面：訪客只想看自己關心的那條

這是最直觀的用途。一個 FAQ 頁如果有 20 條問題全攤開，光是滑到底就累了。把每一條變成可展開的標題，訪客掃過題目、看到自己想問的再點開，注意力消耗少很多。

實務上我們建議：把最常被問的 3 條預設展開，其餘收起來。這樣一進頁面就能看到重點，不會以為頁面是空的。

2. 產品／服務的規格、細節、流程

例如一個網站製作服務頁，下半部要說明「合作流程」「常見規格」「不包含的範圍」「保固條款」——每一塊都重要，但不是每個訪客都想看全部。用 Accordion 把它們分區，有興趣的人點開、沒興趣的人滑過，比一條長到天邊的文字段落友善太多。

3. 行動裝置上的長表單或長導覽

手機螢幕小，任何一塊大區塊都會把後面的內容推到三五個螢幕之後。把次要欄位（例如「進階選項」「備註」）收進 Accordion，可以讓主表單看起來「短」、心理負擔小，填寫率反而提高。

什麼情況不該用？三個常見地雷

Accordion 不是萬靈丹，用錯反而更傷轉換。最常見的三種錯誤：

第一，把核心賣點藏進 Accordion。如果這段話是你想讓 90% 訪客都看到的——例如「服務內容」「定價」「成功案例」——千萬不要收起來。藏起來等於訪客不會點開，等於沒寫過。

第二，每一條只有一句話也用 Accordion。如果每一格展開只有「是」或「請來電洽詢」這種短回覆，那把 10 條全部直接攤開比較省事，多按 10 下沒有任何好處，反而讓人覺得頁面在跟自己作對。

第三，列表式內容用 Accordion。例如「我們的服務項目」這種需要一眼掃完整體的內容，用條列就好，硬塞進 Accordion 反而要點開才知道有什麼，搜尋體驗變差。

Photo by Amélie Mourichon on Unsplash

設計細節：讓 Accordion 看起來像 Accordion

很多官網的 Accordion 設計，看起來不像可以點。訪客滑過去也不知道那是按鈕，當然不會點開。設計時請注意：

箭頭一定要明顯，而且狀態要會變。展開時箭頭朝上、收合時朝下（或是用 + / − 也可以），這是業界共通的視覺語言，不要自創。看到三角形旋轉 180 度的瞬間，使用者就知道「喔，這個東西真的有打開」。

整塊標題列都要可以點，不要只能點箭頭。手機族群尤其討厭精準點擊小箭頭，整列都是 hit area 才友善。

標題要寫得讓人想點開。同樣是 FAQ，寫「保固條款」沒人想點；寫成「壞掉是免費換還是要錢？」就完全不一樣。標題的功能是讓人快速判斷「這條跟我有沒有關係」，不是用來分類用的。

展開時的內容左側留白要對齊標題。有些版型展開後內容會跟標題切齊，有些會縮排。我們建議縮排一些（例如 16px），讓視覺上一眼就知道「這塊是屬於上面那個標題的」。

動畫要不要加？要，但別太貪

展開／收合的動畫長度，抓 200~300 毫秒最舒服。低於 150ms 會覺得很跳，高於 400ms 又開始嫌它慢。最常見的 CSS 寫法是用 max-height 配 transition，但這在內容高度差很多的情況下會有計算誤差，現代做法可以用 grid-template-rows: 0fr → 1fr 的技巧，動畫更流暢。

另一個常被忽略的細節：同時只允許一個展開（accordion 模式）還是可以多開（disclosure 模式）？我們的建議——FAQ 用「可多開」，因為使用者可能想對照兩個答案；產品分頁式內容用「只開一個」，避免畫面變太亂。

SEO 與無障礙：這些細節 Google 都在看

很多人擔心，藏在 Accordion 裡的文字 Google 會不會不抓？

答案是：會抓，會給分。Google 自 2019 年起就明確說過，預設摺疊但可以被使用者展開的內容，跟可見內容是同等對待。但前提是——內容要真的存在於 HTML 裡，不能是點下去才用 JavaScript 去 fetch 來。

無障礙（A11y）也要顧。語意上請用 <button> 當標題、加上 aria-expanded、aria-controls 屬性，讓螢幕閱讀器使用者也能知道哪些區塊是可展開的。鍵盤操作上，標題要能用 Tab 聚焦、Enter／Space 切換狀態，這些細節做了，你的網站不但更友善，也更容易在 Google 的「使用者體驗指標」上拿到分數。

FAQ Accordion 額外送你一個 SEO 神器

FAQ 頁的 Accordion，記得加上 FAQPage 的結構化資料（Schema.org）。Google 會把你的問題與回答直接顯示在搜尋結果的下方展開，搜尋結果的版面占比直接放大兩到三倍，點擊率自然往上拉。對中小企業官網來說，這是 CP 值最高的 SEO 動作之一。

Photo by Abu Saeid on Unsplash

實作建議：用 WordPress、用框架，還是自己寫？

三種做法各有適合的場景：

WordPress 用戶：大部分版型內建 Accordion 區塊，Elementor、Gutenberg 都有現成元件，30 秒就能加。缺點是版型固定、樣式自訂彈性差。如果只是 FAQ、簡單規格，這個方案最划算。

有設計需求、想要漂亮動畫：可以走 Tailwind CSS 加一點點 JavaScript（或 Alpine.js），程式碼不長，自由度高。對於官網的服務頁、產品頁這種「想做出差異化」的版位，比較推薦這條路。

後台型應用（系統頁面、會員中心）：建議直接用前端框架的內建元件，例如 shadcn/ui 的 Accordion、Headless UI 的 Disclosure，無障礙細節都已經做好，省下大量測試工時。

給老闆的三個檢查清單

不會寫程式沒關係，下次跟設計師或開發團隊溝通，可以用這三個問題快速檢查 Accordion 有沒有做好：

第一，把網頁印出來給沒看過的人看——他能不能在 5 秒內看出哪些區塊是可展開的？看不出來就是設計失敗。

第二，用手機開一次，用大拇指點幾下——點擊區夠不夠大？展開動畫會不會卡？滑動和點擊會不會誤觸？

第三，在搜尋引擎搜「site:你的網域 你藏在 Accordion 裡的關鍵字」——搜得到，代表 Google 真的有讀進去；搜不到，可能是用了會擋住 SEO 的寫法，要請工程師調整。

結語

Accordion 不是花俏的設計元素，而是「同樣的訊息量、更輕的視覺負擔」的最有效工具之一。重點不是會不會收摺，而是知道什麼該收、什麼該開。

如果你的官網現在有任何一頁滑超過三個手機螢幕還沒結束，或是 FAQ 多到自己都不想往下看——那就是該動手改的時候了。改完之後，跳出率往下、停留時間往上、詢問單往上，這幾乎是改一次就有感的小動作。

奧隆在替客戶做網站時，常會把 Accordion 的取捨列為前期設計討論的一環。如果你不確定自己的官網該不該動、要怎麼動，歡迎找我們聊聊，我們會先看你的頁面結構與訪客行為數據，再給具體建議。