購物網站網頁設計易被忽略：「商品主圖」「商品敘述圖」兩者重點整理

購物網站的網頁設計已與傳統網頁設計大不相同

今天這篇文章來談一談「購物網站網頁設計」這一回事。敝人不才小弟我以前是做網頁設計的，因此在網頁設計這一個領域上多多少少有一些心得，剛好有一點時間，就把我的心得寫一寫，以免後人還是繼續錯誤的行為造成花掉大把冤枉錢。當然我也沒有這麼偉大，什麼免費奉獻知識啥的，總之，我現在選擇了Cyberbiz電商系統來上班，我也是千挑萬選之後，覺得Cyberbiz這種電商系統商，是我們以前網頁設計工作室雜牌軍，根本打不贏的對手。就直接來這裡上班好了。如果你要做電商，要做購物網站，除非你的需求很特規，否則應該都買我們家的Cyberbiz電商系統功能齊全，就可以開始做業績了，重點最貴一個月幾千塊而已。

不過在開始之前還是先簡單說明一下網頁設計在做什麼，因為你在路上常常聽到人家在講「網頁設計」這件事情，但實際上他的運作是如何可能還是很模糊。

網頁設計是什麼？

白話文說，叫做「做網站」。最簡單的描述為「網頁設計工作室」在「幫人家做網站」

這就是網頁設計。不說那些專有名詞了，網頁設計其實對於業主的理解來說就是「做網站」這件事情的解法。畢竟網頁設計這個工作，已經不是路上8+9能夠做的事情了。屬於一種專業技能。要寫前端碼、要做美術稿、要維護伺服器主機等等，已經完全不同於一般中小企業的營業項目。簡單地說就是「身邊沒有人會」。自己公司裡的員工也不會。因此要做一個網站，就是要去找「網頁設計工作室」討論與報價，付錢之後就是等，把網站做出來。

通常做一個網站的價格帶非常地寬。從3、5萬元一直到建商在發包網頁設計的幾百萬元都有。我自己洽談過台北建商要做新建案廣告網站，180萬元，其中有50萬拿去請攝影師、空中照相（那時還不流行空拍）

需求是談出來的，各憑本事。有的業務很唬爛，可以把一個簡單的案子吃定業主不懂吹得天花亂墜；薛業主一筆；也可以正常報價、按照計算工時之類的。不得不説，傳統的網頁設計在我看來，幾乎在賺取的是「資訊不對稱」的錢。想賺多少基本靠忽悠而不是過硬的技術實力。只是處理形象，程式上沒啥困難的。

並且「網頁設計」重點將置放於「設計」而不是其他目的。因此對於傳統網頁設計來說；「好看、炫、美」是第一要務。其他的元素都可以次一等，但一定要很炫。甚至為了設計而設計，故意刻寫炫炮的效果(flash時代）也只為了搏業主歡心，讓尾款收得順利。

傳統網頁設計為了「設計」而做

傳統的網頁設計，甚至到了後期已經脫離網頁設計的純度，開始包山包海。並且大量外包。比方説案件中會包「攝影師」來拍出好照片。這應該沒有業主說不要的。或是順便設計店裡的紙媒：菜單、招牌等等。非常地亂七八糟，也很難規模化。以至於後期流行順便經營「fb粉絲團」這個東西，包進維護費用中。長期收錢。

可以說，傳統網頁設計到後期；變成萬事屋，只要跟網路沾上邊的事情都是他的事，都想辦法包成服務來賣。看你要攝影師還是印刷廠還是tvbs記者採訪；我通通有資源通通包成套餐給你吃，看總共多少錢這樣。

這就是傳統的網頁設計

購物網站的網頁設計為了「成交訂單」而做

時代很快地輪到「電商」的大風吹起。

在電商時代，網站是拿來賣貨賺錢的。所以業主的需求都一致改變成為「要在網路上賣東西」這個題目。傳統網頁設計沒有在程式設計上下功夫的都很麻煩。因為電商牽涉的就是「金流」「物流」「資訊流」等等題目。不會串接API是搞不定需求了，想要搞定需求，又橫跨多個專業領域（那時還沒有全棧工程師的概念，雜兵而已什麼都做）網頁設計這一行走向專業化，不再是一個人力可以hold得住了。隨便拋一題：「資訊安全你們怎麼處理？」就不是一個打雜的有辦法處理的題目。

在電商時代的網頁設計，傳統的炫炮並不管用，反而是簡簡單單地成交更為重要。購物車網站深似海、第三方根本串不完。早先沒有「Line 」註冊登錄，現在幾乎變成標準配備。早先不需要「後支付」這種特規的金流方式，現在有的業主會需要。花花綠綠的需求與bug開始活靈活現，靠服務為主的網頁設計公司開始吃不消了，取而代之，是我們家Cyberbiz 這種電商系統商平台興起。

專業人做專業事，光是養RD的規模就不是傳統網頁設計公司搞得定的題目。而平台商也很有優勢。不管是Line、facebook等大人物，想推廣電商都會先找你談談。畢竟搞定平台商，等於搞定一大票客戶。因此，平台商佔有優勢，通常都能取的最新的第三方功能。也不需要客戶額外多付錢。

電商系統平台商，在設計網頁時，就是依照「最高轉換率」為目的進行版型設計與開發。因此，時常被人說是「套版」網站。實際上，若是做電商，你要的是訂單才對，套版都是考量過的，均為成交轉換率最高的板子。客戶端只需要上塗上字上商品就好了，不需要再多費心提高轉換率。因此，不管是設計，或是專案都能大幅縮短時間，拖最久的，往往是商品上架而已。假設有幾千隻商品要上架，大概就排1~2個月來完成。否則，在系統一開通時，其實就可以上線開賣了。像我們熟手來做，一個品牌商假設商品50支內，照片圖片齊全，我們可以在2個小時內完成上線開始投放廣告。這是傳統網頁設計想都不敢想的事情。94快。至於什麼炫砲首頁、精彩的翻頁特效、我們全都不管。反正做電商要的是訂單。一切以順利成立訂單為前提。否則做出來的購物網站超級好看，但不能幫你賺錢，又有屁用？

這是現在的電商系統平台商。

關於購物網頁：消費者注重的地方與業主注重的地方完全不同

關於購物網頁設計，業主與消費者關注的點完全不同。至少我實務上的經驗是這樣子。以下說明我所整理出的最具差異的地方在哪邊，至於有沒有道理，你可以自行判斷：

業主觀點：

• 外觀要求：美觀、潮、炫
• 商品有上就好
• 一定要可以加入會員
• 一定要有某某功能（比如加入會員需可填寫特定資料，但消費者根本不想填）

業主在做網頁設計時，很容易有個心態是「炫」這個追求比「賣」還要來得重。再加上台灣的尿性；總想說花錢是老大，因此以改來改去、刁難設計公司為樂。我有很多設計師朋友，每個人一抓一大把這種結不了案的故事。

而網頁設計公司是按照「結案」來收尾款的，因此重心將放在「如何結案」而非協助業主佈局出真正適合消費者成交的購物網站。出來的網站，往往是專門討老闆歡心用的，畢竟老闆爽了，收款就會比較容易。而老闆花個十幾萬請人做網頁設計，也喜歡出一張嘴，以並非電商專業的手指輕輕一劃：「這裡要改一下！」指點江山。

消費者觀點：

• 購物流程簡單
  • 不要叫我先加會員填一大堆資料
• 活動豐富但表現簡單
  • 不要叫我看花花綠綠的活動還要自己計算怎麼用折價券最划算
• 商品主圖好看
• 商品敘述圖詳細

網頁設計時常忽略01：商品主圖

商品主圖是吸引消費者是否點擊進來的重要依據。

而大多數廠商都只有拿著原廠給的去背圖上架商品，商品主圖也就放上去了。

商品主圖的設計感，在大多數情況下直接左右電子商務轉換率的高低。就像你去交友網站逛，一堆人的大頭貼，有人隨便拍；有人認真拍，那麼自然好看、優質的大頭貼吸引更多人點擊。這是很自然的事情，但同樣的道理搬到電商上，又不一樣了。多的是主圖爛爛的。不然就是沒有能力去「做主圖」導致商品圖片跟當初網頁設計的質感差別非常大。

商品主圖在「品牌官網」以及「通路平台」的經營有著很顯著的差異。以下簡單將聚焦在討論「品牌官網」這一個部分。（通路平台沒啥好做的，你聽PM的就好。如果你不知道商品主圖應該怎麼做比較賣，你就去，算了這個我收費的電商沙龍才會說）

品牌官網商品主圖設計

商品圖就商品圖，有什麼差嗎？

差別在消費者會不會點進來。因此，一個商品主圖具有以下特性：

• 列表處主圖：一張決勝負。
  但通常點進去是好幾張，像是蝦皮一樣，但是我們還是默認一張。因為在商品列表頁面時，只會展示第一張主圖
• 商品內頁處：多張展示特色
  展示商品主要特色，讓人家決定要不要繼續把你的商品敘述圖看完

商品主圖任務：

身為商品主圖，最重要的任務就是吸引消費者點擊進來。也只有點擊進來才有後續詳細介紹的機會。以下就直接來對比好的商品主圖跟爛的商品主圖。（爛的打馬賽克，我蝦皮找的，畢竟說誰得罪誰）

上圖是四個商品的商品主圖。我找的關鍵字是「蜂蜜」

來，請問你比較想要點哪一個？很明顯了吧！這就是商品主圖的操作。

這很明顯了。這也是我所說的展示吸引點擊的問題。主圖的任務是為了要吸引點擊。並且，我們會做很多的測試。比方說我之前幫客戶做的「果乾」的主圖測試，看看哪一個主圖比較吸引點擊，作為日後優化的依據。你是不是萬年都不去調整主圖？沒關係，整個市場除了懂行的人，大家都一樣，都不知道這邊要去優化。

直接上圖：

你看，我在測試，測試看看是擺上水果比較吸引點擊，還是擺上包裝比較吸引點擊。你覺得呢？

我告訴你，不用猜。你就優化擺上去就對了。不需要自己猜測，你直接讓市場來告訴你。一週之內，透過後台數據，自然知道要使用哪一個版本的商品主圖。這就是我們在優化商品主圖會做的事情。尋常電商我看很少人知道要這麼做。有做優化的主圖差別很大。這樣知道商品主圖的用途了嗎？

你知道流量都是花錢買來的，但是主圖很爛，就去掉一半了。你也不會想要你的錢丟到水裡。因此，記得商品主圖好好做。不要像蜂蜜那樣，看就覺得是便宜貨（管你商品實際多好，人家看了就是倒彈。這很現實的）

好的商品主圖能夠贏得「點擊」
點擊就是「有效流量」，加入購物車的前兩步

網頁設計時常忽略02：商品敘述圖

商品敘述圖講的是一支商品底下，那串落落長的圖片文案。在中國大陸稱為「寶貝詳情頁」我們台灣電商，品牌商也很少有人能夠真正做出「銷售文案」這點功夫。商品敘述圖是你全年無休的業務員，它在做的事情是「導購」而非其他任務。因此要做就是導購到極點，而非那種搔不到癢處的導購圖。

導購圖是講劇本的，這是一個洗腦的過程。消費者透過閱讀商品敘述圖，才來決定要不要買。商品敘述的的劇本，就是一整到的「洗腦」與「說服」的教材。一定要把它做得很好看。消費者想要的資訊、你想要溝通的痛點癢點、法律背書、見證案例等等有的沒的，通通都掛上去。不要怕敘述圖太長，手機在滑很快的，你十幾張圖，人家在滑也在10秒內。

以下節錄我認為很棒的「商品敘述圖」

（圖有壓縮過，糊糊的，沒差，不妨礙你理解商品敘述圖的邏輯）

就看完一支商品了，怎麼樣，很好看吧？這就是很好的商品敘述圖的做法。功用、效果、見證、比較、保證通通都在這一支商品裡頭了。你自己體會一下。相信你的商店，商品詳情頁並沒有花費這麼大的力氣去執行。

通常品牌商比較有餘力經營，因為商品項目不會太多。但是通路商就很難了，數千隻商品，有的斷貨很快，就傾向不去做商品敘述圖了。我知道，無可厚非。並且大色貨也不需要介紹，純鬥價錢的。

我個人認為，如果你沒有辦法做出這樣的銷售圖，那麼至少，你就商品底下放滿8張照片。讓商品頁看起來有東西這樣。各種角度拍一拍就很棒了。什麼都沒放，就虛虛的。

我們再看一個很好看的商品敘述圖：

我覺得這蛋糕第一眼不會買，看完商品敘述圖就可以買。因為還會送餐具很可愛。

你看，商品敘述圖就是這樣的功效。一個好的商品敘述圖（寶貝詳情頁）應該要能夠做到「push」的作用。也就是推人去買。讓原本猶豫不決的消費者看完之後放心下單。並且日後不產生任何客訴問題。這樣就是好的商品敘述頁面。當然，你也不要吹，吹得太過頭日後招致官司的案例我們也都看過。一個好的商品敘述頁面，能夠幫你銷售出更多的商品沒有問題。只是你要花時間去製作，並且日後花時間去維護。

商品主圖、商品敘述圖重點複習：

一定要好看！想點進去，想讀下去的好看！

重點就是上面那句話。你在滑商品敘述圖時不會感到無趣、沒內容、想離開。反而想要一直滑下去。像上面那個抹茶起司蛋糕，就滑啊，一路看到底，然後就決定要不要買。這邊跟一頁商店的佈局很有關係。如果你想知道一頁商店，尤其是一頁商店的「劇本」這一題，可以參考我之前寫過的文章。《電商專有名詞解釋006：一頁商店》裡頭有詳細的說明與解釋。

商品主圖、商品敘述圖是你最好的業務員。他們不說話，全年無休，負責洗腦消費者買單。消費者買單，才能賺得到錢。如果你的商品主圖很爛，人家點都不想點，更遑論較人家結帳。商品敘述圖負責接球，人家看了主圖點進來，自然是想知道更多細節。更多細節很好看，看完想要買。這就是商品主圖與商品敘述圖的用處。

商品敘述圖是講劇本的

必須先將「劇本」排出來，再依照劇本去製圖。把訴求講清楚。相信我，你日後也很難有時間去改，所以在第一次製作的時候就要把它做好。劇本這個部分，日後我會做講義出來賣。我們的劇本製作，只有一個目的，就是高強度地去優化「導購」這件事情。我建議你自己也要學一點PS而不是全部丟給美工處理。我的經驗上，致劭你可以PS出草稿，再讓美工美術去補滿才會接近你想要的劇本。你放手讓美工去做，美工又不關心商品賣不賣，他只關心趕快做完趕快下班約會，因此落差往往很大。這部分，老闆的指令越清楚，製作出來的劇本越清晰。

如果你外包，也要跟外包設計師說明清楚劇本。清楚與設計師溝通。

你的商品主圖商品敘述圖等於是「廣告費」的終點
你要想對得起自己的廣告費，就好好做
不然就是廣告錢丟到水裡！

花錢引流量
給人家看很爛的圖
然後再氣噗噗說網路廣告都是騙錢的

中小企業做電商，絕大部分  死在這邊