電商百問第95集，告訴你電商商品頁如何設計，讓你日進斗金、賺錢如有神助。電商商品頁的呈現方式，會極大程度地影響消費者會不會下單。也就是說，我們透過廣告或SEO讓消費者進到我們的網站，然後透過電商產品頁勾起消費者的購買慾，再透過快速下單的購物車設計讓消費者無腦購買，這其實是一整段的連續設計。
電商商品頁為何重要
如何設計電商產品頁，並勾起消費者購物慾，是開店平台不斷再專研的問題，像是我們CYBERBIZ在設計網頁時，就是以「最高轉換率」為目的進行版型設計與開發，因此時常被人說是「套版」網站。
但我得老實說，品牌做電商，能不能提高訂單成交率才是你要關心的硬指標，而CYBERBIZ提供的版型都是經過周密設計的，是我們測試過成交轉換率最高的模板。你只需要改改字、上上圖，設定商品就好了，不需要多費心提高轉換率，因此能夠大幅縮短設計與專案執行時間，可能需要花比較多時間的只有商品上架。假設你有幾千隻商品要上架，大概需要1至2個月才能完成，否則系統一開通時，其實就可以上線開賣了。
如果採用CYBERBIZ的系統，若商品數在50隻以內，且圖文都具備的狀況下，只要2個小時就可以上線並投放廣告，這是你去找網頁公司開發或自架網站都做不到的事情。做電商要的是訂單，一切以順利成交訂單為前提，即便網站做得超級好看，但不能幫你賺錢，特效再炫麗都是假的。
關於電商商品頁，消費者注重的地方與你注重的地方完全不同。至少我實務上的經驗是這樣子。以下說明我整理出最具差異的地方在哪邊，至於有沒有道理，你可以自行判斷：
從品牌觀點看電商商品頁
- 外觀要求：美觀、潮、炫
- 商品有上就好
- 一定要可以加入會員
- 一定要有某某功能（比如加入會員需填寫特定資料，但消費者根本不想填）
品牌在做網頁設計時，很容易有個心態就是「炫」，而且看得比「賣」還要重要。總想說花錢是老大，因此以改來改去、刁難設計公司為樂。我有很多設計師朋友，每個人一抓一大把這種結不了案的故事。
而網頁設計公司是按照「結案」來收尾款的，因此重心會放在「如何結案」，而非協助品牌打造能讓消費者成交的購物網站。這種情況下做出來的網站，往往是專門討老闆歡心用的，畢竟老闆爽了，收款就會比較容易。
從消費者觀點看電商商品頁
- 購物流程簡單
- 不要叫我先加會員填一大堆資料
- 不要叫我自己算優惠卷怎麼用
- 活動豐富但設計簡單
- 商品主圖好看
- 商品敘述圖詳細
我相信你看了消費者觀點之後一定超級有感的，消費者要的其實很簡單，好逛、好買、好便宜。他根本不在意你花了多少錢做動畫效果（動畫還會影響網頁的載入速度），他只在乎能不能在這邊買到他想要的商品。所以很多興致沖沖跑去找網頁公司開發電商網站的人，很容易做出無效甚至是降低轉換率的操作。就像我們前面說的，大部分網頁公司都會想辦法滿足你的需求，系統功能開發越多，報價就可以越高，反正他收到錢就結案了，後面你能否運作起來，也不甘他的事。
但是像CYBERBIZ這樣的開店平台就完全不是這種想法，對我們來說，客戶有賺錢才會繼續使用我們的系統，講白了就是我們跟客戶的利益是牽連在一起的，所以我們自然會花更多的時間，去研究跟開發能幫客戶提高營業額的方法與功能。光是電商商品頁，我們就花了很多心思研究，並發現大家很容易忽略的圖片設計重點，以及常犯的錯誤。
電商商品頁常忽略的設計重點
商品主圖設計
商品主圖是吸引消費者點擊的重要依據，直接影響了轉換率的高低，就像我們逛交友網站時，好看、優質的大頭貼自然會吸引更多人點擊。然而，大多數品牌拿著廠商給的去背圖就直接上架商品了；另外也很常遇到的狀況是，網頁設計公司幫忙做好了精緻的網站，卻因為品牌不熟或沒有能力做「主圖」，導致後續上架的商品圖片質感落差很大。
💡TIPS：電商商品頁商品主圖設計的重點
電商商品頁的列表處主圖：一張決勝負
用一張吸睛的主圖，吸引消費者點擊。
圖片來源：一之軒官網
電商商品頁的商品內頁處：多張展示特色
點進內頁後，透過多張圖片展示商品特色，讓消費者對你的商品有進一步了解。
圖片來源：悠活原力官網
💡TIPS：A/B TEST不斷優化商品主圖
身為商品主圖，最重要的任務就是吸引消費者點擊進來，也只有點擊進來才有後續詳細介紹的機會。但問題來了，什麼樣的圖片才會吸引消費者？比方說你是賣果乾的品牌，那你的主圖到底是要擺上水果，還是擺上你的品牌包裝比較吸引點擊？
這個其實也不用猜，我們就直接做A/B TEST。一週之內，透過後台數據，自然知道要使用哪一個版本的商品主圖，這就是我們在優化商品主圖會做的事情。
流量都是花錢買的，但是主圖很爛，成效就直接對半砍。如果你沒有製圖的能力或聘設計的經費，建議至少去找一個外包設計幫你做幾個可以套著換的模板，這樣至少能夠讓整體的版面風格不會落差太大。要記得以下兩點：
- 好的商品主圖能夠贏得「點擊」
- 點擊就是「有效流量」，加入購物車的前兩步
商品敘述圖設計
商品敘述圖講的是你進入商品頁之後，一連串的圖片文案。我們會這樣說，商品敘述圖是你全年無休的業務員，它在做的事情就是「導購」，促進消費者的購買慾。所以絕對不是造本宣科的把你產品包裝上的文字一字不漏地KEY進來就好，我還有看過有一些人連KEY都不KEY，就直接拍產品包裝就當商品敘述圖的。
商品敘述圖是有導購劇本的，這是一個洗腦的過程。我們先用商品主圖吸引消費者進網站，再讓他透過閱讀商品敘述圖，才來決定要不要買。商品敘述的劇本，就是一整套的「洗腦」與「說服」的教材。
除了要做得很好看之外，消費者想要的資訊、你要溝通的痛點或癢點、法律背書、見證案例等等的都要掛上去。不要怕敘述圖太長，手機在滑很快的，你十幾張圖，怎麼滑也不過10秒鐘。
電商商品頁常犯的4大設計錯誤，別踩雷！
就像剛才說的，電商商品頁是有設計劇本的。如果你就按自己的直覺做，就很容易犯了下面的幾個錯誤：
- 頁面資訊太複雜
- 相關商品和推薦太多
- 敘述文字太多
- 購買流程太複雜
電商商品頁常犯的設計錯誤1：頁面資訊太複雜
我這邊說的跟上面講的內容太長是兩件事情，而是資訊雜亂。例如你在講商品優點的時候用紅色的色塊、在使用者見證用藍色的色塊、在講競品分析的時候又換了另一種顏色，然後為了要強調內容還字體忽大忽小、有加粗沒加粗。讓整個畫面看起來五彩斑斕，消費者看都要看花了眼。
並不是說不能夠換顏色，而是當我們的顏色越複雜的時候，消費者的專注力越難放在產品身上，所以好的設計就是要針對商品所屬性質和定位，選擇相對應的核心設計功能點，並使用大量優質風格統一的圖片營造代入感。
電商商品頁常犯的設計錯誤2：相關商品和推薦太多
電商商品頁的相關產品推薦位置太靠前，會有一種喧賓奪主的感覺。這可能會形成很強的商業感，對銷售是很不利。而我們要打造一種沉溺感，建議你建立「猜你喜歡」的時候要仔細思考品項，找相關度特別高、精準的商品，來平衡用戶體驗的問題。總的來說，電商商品頁的主要通功能還是放在應該主要作為展示商品屬性和促發購買慾望，不要在這個頁面就給消費者太多組合商品資訊，這樣只會造成消費哲者的困惑跟猶豫，反而不利促購。
電商商品頁常犯的設計錯誤3：敘述文字太多
文案是很重要的，但是在電商商品頁上，一張好的照片、一支好的影片更勝過你的千言萬語。謹記一個原則，有圖放圖，有影片放影片，能多豐富就多豐富。不要忘了消費者看這個頁面不會想花太多時間，你如果放了一堆文字也只會適得其反而已。
電商商品頁常犯的設計錯誤4：購買流程太複雜
這個就真的是技術了，你一定有遇過那種結帳前除了要你註冊外，還需要填一大堆資料的電商網站，這樣的做法只會拉低你的結帳效率。簡化購買流程的目的就是提高結帳率，想做到這件事情就有很多種技巧，像我們家CYBERBIZ就有以下五招:
- 快速登入結帳
- 購物時自動註冊
- 多元的付款方式
- 一頁結帳讓轉換率馬上翻倍
- 把加價購跟滿額贈做在同一頁
別的不提，光是我們的「一頁結帳」就有客戶用了之後，直接提高一倍的轉換率。如果你對這些功能如何簡化購買流程有興趣的話，歡迎參考【電商百問83】如何提高品牌官網結帳率?這篇文章。
電商商品頁設計6招秘訣，學起來！
這邊我再推薦你超好用的電商商品頁設計6招，不一定要都用上，主要還是看你的產品特性來斟酌使用。
- 試用報告或使用前後對比
- 產品保證
- KOL使用推薦
- 場景感+沉浸式體驗
- 多用性、易用性展示
- 對比購買
電商商品頁設計秘訣1：試用報告或使用前後對比
有官方證明的消費者使用經驗分享，就是商品優質的證明，這對於以品質為核心的商品，例如家電類或護膚品等，具有很強的說服力。
而使用前後對比，對於視覺消費的商品促購效果，一直都非常的簡單又有效。例如服裝，居家用品等，你就放個對比圖就會有很強的刺激作用，進而促成訂單成交。但如果你是賣健康食品、保健品的就要小心使用這招，可以去參考競品的商品頁都是怎麼設計繞道的，會對你有很多的幫助。
電商商品頁設計秘訣2：產品保證
產品保證就像是貨源承諾、售後承諾、檢查報告等，又或是直接告訴消費者「我們已經保了幾千萬的保險」請你安心購買。這些內容一般都是會放在電商商品頁的最下面。利用第三方的保證，給消費者一種「可以安心買我們的產品」這種很強的心理暗示作用。
電商商品頁設計秘訣3：KOL使用推薦
這個就很常見了，尤其是美妝、3C類商品。特別是對於這類產品不熟悉的消費者，更會願意追隨意見領袖的專業性推薦。
電商商品頁設計秘訣4：場景感+沉浸式體驗
通過大量場景描述營造代入感，購物是一件帶有娛樂休閒性質的活動，營造舒適愉悅的場景感，能營造良好的消費體驗。這一點對於女性消費者尤其重要，例如在服裝、美妝等商品展示上。
我們可以透過通過大量的場景圖片，例如咖啡廳、書吧、親近大自然等來營造這種沉浸式體驗，像是你賣帳篷，就一定要有人們使用這個帳篷露營的照片讓人看到，再不濟也要找人合成一張綠地的帳篷照片。
電商商品頁設計秘訣5：多用性、易用性展示
對於實用性商品，可以通過多個使用場景展示他的多項功能，來強化消費者對這個商品使用價值。對於有操作門檻的商品，可以通過GIF動圖、影片等展現完整的操作過程，幫助使用者簡單快速掌握使用步驟，但要記得GIF動圖不要太多，因為他很吃流量，會延緩照片的載入速度。
電商商品頁設計秘訣6：對比購買
這一點利用消費心理中的「損失效應」，通過顯示限時折扣、降價提醒、組合優惠等資訊，告訴消費者，如果你此刻不買或者不是購買商品組合，就可能錯過最划算的時候，之後再也沒有這種低價的優惠了。對於消費者來說，如果此時不購買就是損失，在這種心理帶動下，訂單自然就會成交了。
小結：電商商品頁設計好，訂單自然來
上面所提到的電商商品頁設計要點及常犯錯誤，是對電商商品頁的經驗分享。我還是建議你要針對商品屬性、消費者的特性，選擇適合的電商商品頁設計要點進行操作，不要想說都做進去就對了，更好的方式是參考幾間競品的作法，你就知道的八九不離十，接下來再按照你得到的市場反饋去優惠就不會有甚麼太大的問題。
說實話現在經營電商並不是件困難的事情，這個就像考試，你沒有先做好準備，可能就考個六十分，而如果有做準備，你就可以考個八九十分。沒有考好也不用太擔心，因為電商就是每天都可以補考，只要不斷修正就可以越做越好。這些過往的經驗都會成為你未來成長茁壯的養份。如果你想要知道更多的網拍經營策略，也歡迎跟我們的開店顧問聯絡。他們都能夠跟你分享很多輔導店家的經驗，讓你花最少的力氣，賺最多的錢。
你可能有興趣
【電商百問85】品牌官網設計密技！2大設計重點、5個選圖技巧，提升品牌官網魅力
【電商百問71】一頁式商店範例 傳授7大設計秘訣、4個強大功能
