AHHA Demo 網站
AHHA Demo 網站架站教學Before/After 對比圖:美容、健身、裝潢必備的成果呈現

Before/After 對比圖:美容、健身、裝潢必備的成果呈現

2026年4月24日· Howshin Wang

TL;DR

  • Before/After 是對比圖 block,每項有 beforeImage + afterImage 兩張圖。
  • 每項可加 label(項目總稱)、beforeLabel / afterLabel(兩張圖下方標籤)。
  • 適合「前後差異可視覺化」的行業:美容、健身、醫美、髮型、牙科、裝潢。
  • 拍攝關鍵:同位置、同光源、同角度——差一點就顯得造假。

Before/After 為什麼這麼強

訪客對「服務結果」的疑問,用文字說很難、用單張圖說只有一半、用兩張對比才能真的說服人。

三個有效的心理觸發點:

  1. 具體想像:訪客能把「before」代入自己現在的樣子,「after」投射成自己想要的樣子。
  2. 不可否認的證據:兩張圖放一起,差異無法用話術解釋掉。
  3. 可信度高:比純推薦語更難造假(拍攝條件必須精準)。

這就是為什麼美容、健身、醫美產業的廣告 90% 都是 Before/After——它就是有效。


編輯器欄位

  • 標題(heading):例如「服務成果」、「課程前後」、「客戶案例」。
  • 副標(subheading):補充。選填。
  • 項目清單(items[]):每組:
    • label:項目總稱。例:30 天核心訓練雷射除斑療程
    • beforeImage:服務前的照片。
    • afterImage:服務後的照片。
    • beforeLabel:前圖下方的小標(預設「Before」)。
    • afterLabel:後圖下方的小標(預設「After」)。
  • i18n 分頁:heading、subheading、label、beforeLabel、afterLabel 支援多語。

拍攝最關鍵的三件事

  1. 同位置:站同一位置、同一光源、同一背景。牆上有個插座?兩張都要有。
  2. 同姿勢、同表情:微笑 vs 嚴肅的差異會讓人以為是兩個人。兩張都維持一樣。
  3. 同裁切比例:After 拉近、Before 拉遠會顯得不誠實。用同樣的構圖。

專業做法:客戶第一次來時就拍標準化 Before 照(三角架固定位置、記下光線設定);服務結束或一段時間後同條件再拍 After。


勞倫次 Before 的誠實

Before/After 最常被質疑的是「是不是你挑對你有利的」。幾個方法提升誠實度:

  • 標日期:beforeLabel 寫「2025/01」、afterLabel 寫「2025/06」,讓人知道間隔多長。
  • 寫明做了什麼:用 label 寫清楚是哪個療程、哪個課程、多長時間。
  • 配套推薦語:有客戶同意的話,在 Testimonials 放對應的主觀感受。

搭配建議

Before/After 常見位置:

  • Services 之後:服務項目介紹完,用 Before/After 證明效果。
  • Testimonials 上方:視覺證據 + 文字證據的雙重推進。
  • 單獨 /gallery/results:案例多時獨立頁展示更方便。

三個常見錯誤

  1. 用濾鏡或美圖軟體處理 After:客戶可能一開始沒發現,但一旦被 PTT / Dcard 抓到直接毀掉品牌信任。不要做。
  2. Before 刻意拍得差:用糟糕的光線、難看角度拍 Before 當對比——訪客看得出來,反感。兩張用同樣條件才有說服力。
  3. 沒取得客戶授權就放網路:肖像權問題非常嚴重。書面授權書保留是必要的。

寫在最後

Before/After 是最有說服力也最容易出醜的 block——用對是神器,用錯是地雷。核心原則永遠是:誠實、同條件、有授權

登入 AHHA 後台 → 頁面管理 → 加入 Before/After block → 上傳成對對比圖(確認有拿到客戶授權),儲存即完成。

Before/After對比圖成果展示Block使用手冊

留言討論

只有會員能留言(防止垃圾訊息),留言顯示於此頁。

載入中...
← 返回架站教學