促銷頁 A/B 版面測試：同一檔活動做兩種版面

為什麼要做這個作品

模擬一個鞋類電商的夏季促銷頁，同一個活動做出「攝影橫幅」和「經典面板」兩種版面，實際部署上線測試哪種呈現方式比較好。

之前做的都是自己品牌的東西，這次想練習模擬「別人家的案子」：假設有一個鞋類品牌要做夏季促銷活動頁，同一檔活動、同一組資訊（折扣、倒數、免運門檻），做出兩種不同的版面設計，看視覺呈現方式的差異會怎麼影響整體感覺。

用到的工具與架構

• Netlify：把兩個版本都實際部署上線，可以直接點連結切換查看，不只是停留在設計稿階段。

一次實際跑起來會發生什麼

同一檔活動（指定鞋款 2 件折 500、滿額免運、30 天退換、正品保證、門市取貨），做出兩種版面：攝影橫幅版把主視覺放大成一張完整的情境攝影，折扣資訊疊加在照片上；經典面板版把倒數計時和折扣資訊拆成獨立的深色資訊卡，跟主視覺並排呈現，資訊層次更清楚。

攝影橫幅版：情境照片鋪滿整個 Hero 區，折扣與倒數計時直接疊加在照片上，整體感覺比較沉浸、有氛圍。

兩個版本用同一組導覽列上方的切換鈕就能來回比較，方便直接對照差異，不用開兩個分頁。

經典面板版：倒數計時和折扣資訊拆成獨立卡片，跟主標題並排，資訊一眼就能看清楚，比較偏向效能導向的電商頁面。

現在的具體成果

兩種版面都已經實際部署上線，可以直接點進去互相切換比較。做完之後更清楚感覺到：同樣的活動資訊，用「氛圍優先」還是「資訊優先」的版面呈現，會給人完全不同的感覺——這種差異在只做一個版本的時候很難體會到。

設計時做過哪些取捨與調整

• 保留同一組核心資訊，只換呈現方式：兩版用完全一樣的折扣、倒數、保證資訊，只改變版面配置和視覺重心，這樣比較出來的差異才單純是「呈現方式」的差異，不會被內容不同干擾。
• 實際部署而不是只做設計稿：刻意把兩版都部署上線，讓比較不只是看設計稿的感覺，而是真的能在瀏覽器裡點、滑、切換，更接近真實電商頁面的使用情境。

下一步想優化什麼

想試著加入簡單的成效追蹤，讓「攝影橫幅」和「經典面板」不只是主觀感覺上的比較，而是有具體數據可以參考。

給其他同學的話

想練習電商或行銷類的頁面，不妨試試同一份需求做兩種版面，實際部署出來比較，會比只做一版更能感覺到設計選擇造成的差異。

進一步認識作者

我是 Wendy，做過四、五年電視台動態特效，現在以個人接案為主，同時也在應徵新工作。更多作品可以到 個人作品集網站 看看。