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

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

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

今天這篇文章來談一談「購物網站網頁設計」這一回事。敝人不才小弟我以前是做網頁設計的,因此在網頁設計這一個領域上多多少少有一些心得,剛好有一點時間,就把我的心得寫一寫,以免後人還是繼續錯誤的行為造成花掉大把冤枉錢。當然我也沒有這麼偉大,什麼免費奉獻知識啥的,總之,我現在選擇了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出草稿,再讓美工美術去補滿才會接近你想要的劇本。你放手讓美工去做,美工又不關心商品賣不賣,他只關心趕快做完趕快下班約會,因此落差往往很大。這部分,老闆的指令越清楚,製作出來的劇本越清晰。

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

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

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

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

 

 

 

相連文章

臉書留言

一般留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *