官網『Before/After 前後對比滑桿』(Image Comparison Slider) 設計完整攻略：中小企業如何用一條可拖動的分隔線把改造前後變成客戶成交的鐵證

老闆你有沒有這樣的情況：公司做的是居家翻新、外牆清洗、汽車美容、美甲、髮型、設計改稿、油漆粉刷、庭園造景、清潔打掃、牙齒美白、皮膚療程、除鏽除膠、Logo 重塑、包裝重設計⋯⋯只要是「做完會跟原本差很多」的服務，官網上放兩張並排的前後對比照，客戶看兩眼就滑走。並排照片沒錯，但少了一個關鍵動作——客戶親手比較。這時候，一個叫「Before/After 前後對比滑桿」（Image Comparison Slider）的小元件，就能把原本靜態的照片，變成客戶願意花 20 秒細細滑一遍的互動體驗，成交率有機會直接上升一階。

今天這篇文章，就是要跟中小企業老闆說清楚：這個看似不起眼的元件，為什麼在對的行業裡是「詢問單製造機」？怎麼設計才不會踩雷？以及要放在官網的哪個位置才划算。

Photo by Surya Teja on Unsplash

一、為什麼「並排照片」不夠力？三個心理學原因

1. 訪客的目光會偏移，比較無法對齊。並排放兩張照片時，客戶眼睛必須不斷左右來回移動，很難精確地看出「同一個位置」到底改了什麼。人的腦容易疲勞，看兩三秒就決定「差不多啦」滑掉。滑桿式對比則是把「Before」跟「After」重疊在同一張圖上，用一條中線切換，客戶只要拖一次，改造前後的差異就會像變魔術一樣立刻同步出現。

2. 「親手操作」會啟動擁有感（Endowment Effect）。心理學研究早就證明，只要人「動了手」，對這個東西的認同感就會大幅提升。滑桿讓客戶從被動看照片，變成主動控制畫面，這種微小的參與感，會讓他覺得「這個成果好像有點屬於我了」，離詢問就更近一步。

3. 停留時間拉長，對 SEO 也是加分。互動元件會讓訪客願意花更多時間在頁面上，停留時間拉長 → 跳出率降低 → Google 認為這是「好內容」→ 排名有機會提升。一個小元件同時做到轉換率跟 SEO 兩件事，投報率非常划算。

二、哪些行業最適合放前後對比滑桿？（現實檢核清單）

不是每個行業都需要，先自問你的服務有沒有下面這些特徵：

視覺變化明顯——像是清潔、翻新、粉刷、除鏽、拋光、美容、設計改稿、庭園整理、汽車美容、鈑金烤漆、Logo 重塑、包裝改版、網站改版。這類服務「肉眼看得到落差」，才有「哇」的效果。

單筆客單價中高——單價中高的服務，客戶會多方比較，這時候一個好看的對比滑桿就是決策關鍵。像油漆、清潔、翻修動輒 3 萬到 30 萬，客戶更需要「眼見為憑」的證據。

照片好拍、光線可控——這一點很多老闆容易忽略。Before/After 滑桿的效果，八成靠照片本身。如果你連 Before 都沒好好拍（模糊、角度差、光線亂），做出來的滑桿反而會讓客戶覺得「這公司不專業」。拍照要點：同角度、同鏡頭焦段、同光線、同構圖，只換主角。沒辦法做到就先不要放。

反過來，如果你的服務是「無形的顧問類」或「後端流程優化」——例如記帳、法律、翻譯、程式開發（純後端），照片拍不出差異，這個元件就不適合你，改用文字案例、數據圖表、客戶見證會更有效。

Photo by Le Buzz Studio on Unsplash

三、設計上不能踩的 5 個雷

雷 1：分隔線太細、太不明顯。很多套版直接放一條 1px 灰線，客戶根本不知道可以拖。建議分隔線至少 3px 粗，配上中央一個明顯的圓形拖曳把手（handle），寬約 40px、有陰影，第一眼就要讓人看到「這是可以拖的」。

雷 2：沒有「BEFORE」「AFTER」標籤。雖然大家都知道左邊是改造前、右邊是改造後，但為了絕對清楚，兩側左上角要各自貼一個小標籤——白色圓角背景、深色字，一眼識別。日文網站常用「施工前／施工後」，中文網站建議直接寫「改造前／改造後」或「療程前／療程後」，比英文更容易懂。

雷 3：手機上不能滑或滑起來卡卡的。台灣至少七成流量來自手機，滑桿一定要支援 touch 事件，不能只支援滑鼠拖曳。另外要注意，滑桿橫向拖曳跟頁面上下捲動會衝突——好的元件在手指按住把手時要暫時關掉頁面滾動，放開就恢復。

雷 4：載入太慢，還沒滑就跳走。兩張照片同時載入，加上 JS 元件，總容量常常破 2MB。務必使用 WebP 或 AVIF 格式壓縮，加上 loading="lazy" 延遲載入，不要一進首頁就吃流量。

雷 5：只放一組滑桿。放一組客戶會懷疑「該不會只有這一件做得好？」建議至少準備 3–5 組不同案例，做成可切換的畫廊。同時滿足「多樣性」跟「一致品質」兩個信號。

四、放在官網哪裡最能轉換？三個位置分析

位置 1：首頁 Hero 下方的第二屏。客戶剛進網站，正在評估「這公司做的東西好不好看」，這時候一組會動的對比滑桿，立刻抓住注意力，讓他多滑一屏。這是抓住第一印象的黃金位置。

位置 2：服務頁面下方，緊接著服務說明。「講完我們能做什麼，馬上證明做過什麼。」這個順序最符合客戶的閱讀邏輯：他看完你的服務項目，正想「說得好聽，實際做出來如何？」下方立刻出現對比滑桿，正好接住這個疑問，轉換率會明顯拉升。

位置 3：案例頁面（Portfolio / Case Study）作為主秀。如果你有獨立的作品頁，那對比滑桿應該是頁面的主角——一個案例一組滑桿，搭配該案例的背景說明（客戶產業、遇到什麼問題、施工天數、預算範圍）。這種寫法會讓案例頁不只是「炫技」，而是變成一份份微型的成交提案書。

Photo by Kara Eads on Unsplash

五、技術實作：三種選擇，怎麼挑？

選擇 A：純 CSS + 一點點 JS 自己做。大約 100 行程式碼可以搞定，優點是無外掛依賴、載入最快、程式碼完全可控。缺點是要工程師寫，不會的老闆自己搞不定。適合已經有配合的網頁設計公司的客戶。

選擇 B：WordPress 外掛。像 Twenty20、Image Comparison Slider、BAF - Before & After Image Slider 等外掛都免費，5 分鐘可以裝好。缺點是外掛越多網站越肥、越慢，而且外掛作者停更就麻煩。適合 WordPress 站點且沒工程資源的老闆，但長期最好還是換成自寫版本。

選擇 C：套用 JavaScript 函式庫。像 img-comparison-slider（open source、輕量）、CocoenJS 等，客製化彈性很高，適合官網已經有前端框架（Vue、React、Nuxt）的公司。

三種都可以，重點是不要為了追求酷炫效果，犧牲載入速度。滑桿再好看，客戶還沒看到就關掉，一切歸零。

六、加分技巧：把滑桿變成「詢問單引流器」

做到這裡，很多老闆就以為結束了。其實還可以再進一階：在滑桿的正下方放一顆 CTA 按鈕，寫「想讓你的空間也有這種改變？免費估價」或「這個案例花了多少？點我看報價」，把客戶從「哇好厲害」引導到「我要問問看」。滑桿把情緒拉滿的那一刻，正是最容易點按鈕的時機，錯過就浪費了。

另外可以加上一個小巧思：滑桿旁邊放一段簡短的案例故事——客戶原本的困擾是什麼、施工時間多久、預算大約多少、施工中遇到什麼挑戰怎麼解決。這種「故事＋視覺證據」的組合，比任何文案都有說服力。

七、結語：一條線背後的行銷邏輯

Before/After 前後對比滑桿看起來只是一個小小的互動元件，但它背後承載的是三件事：視覺證據、心理參與、決策推力。對於做「改變外觀」這類服務的中小企業來說，它幾乎是 CP 值最高的官網元件之一——實作成本低、視覺效果強、轉換效果直接。

如果你的官網現在只有並排照片，或更慘的只有純文字案例，那真的可以試著把最好的 3–5 組作品換成互動滑桿，觀察一個月的詢問單數量變化。理論上一個好的互動元件能同時把「頁面停留時間」「客戶信任度」「詢問轉換率」三件事一起拉起來——這就是一個小元件能做的事。

做官網不是把資訊塞完就好，而是讓每個訪客在滑動的過程中，慢慢從陌生人變成有意願的客戶。這條可以拖動的分隔線，就是那個關鍵的一步。