如何設計好的電商網站? 有哪三大常犯錯誤? 一次全告訴你

無論你選擇的是哪一個電商平台（如：Shopline、meepshop等）來做購物網站，從電商設計的質感到安排消費者動線的規劃，就能夠看出業主對於消費者的用心程度。

一個好的電商網頁設計呈現，可以讓你的網站在眾多電商平台中脫穎而出。而在電商網站呈現這部分究竟該注意些什麼呢？以下將一一分析給你聽。

電商網頁設計的幾個要點

電商商品頁很重要

電商產品頁如何設計出能勾起消費者購買慾的這件事情更是我們開店平台不斷再研究的問題，像我們CYBERBIZ在設計網頁時，就是依照「最高轉換率」為目的進行版型設計與開發。因此，時常被人說是「套版」網站。

但我得老實說，品牌做電商，能不能提高訂單成交率才是你要關心的硬指標。效果好，版面長的醜又不會怎麼樣。就像我們家的版型設計都是考量過的，提供給客戶的一定是我們測量過，成交轉換率最高的模板。

你就只需要改改字，上上圖，設定下商品就好了，不需要再多費心提高轉換率。因此，不管是設計或專案執行的時間都能大幅縮短，拖最久的，往往是商品上架而已。如果你有幾千隻商品要上架，大概就排1~2個月來完成。否則，在系統一開通時，其實就可以上線開賣了。

像我們家CYBERBIZ的系統，如果你的商品數在五十隻以內，圖文都具備的狀況下，只要2個小時就可以上線並投放廣告，這是你去找網頁公司開發或自架站都做不到的事情，一個流程跑下來沒有半年想要開張根本是難上加難。做電商要的是訂單。一切以順利成交訂單為前提。做出來的購物網站超級好看，但不能幫你賺錢，特效再多再精美都是假的。

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

了解你的目標客戶

由於目標客戶就是會直接從網站上購買商品的人，所以，必須了解他。而消費往往只是一個衝動性的決定，因此，得想出一個能夠引發衝動的方法，若能取得目標客戶的購物習慣，就能輕易找到引發購買的關鍵動力。

簡單而清楚的導覽

購物網站也有佈局動線需要規劃嗎？不就是把商品跟促銷資訊放上去就可以了嗎？

這樣想就錯了，當你規劃好網站風格色調，成功吸引消費者的眼球，引起他的興趣進來逛逛以後，接下來顧客的每一步最好都是你設計過的，比如點進的頁面是你希望他點的、顯眼的按鈕就是為了讓顧客按下去消費的。而具體該怎麼做，我們可以分成下面幾點來看：

主視覺的設計規劃

首頁是顧客點入網站後，看到的第一個區塊版面，就是對你網站的第一印象，因此資訊呈現方式、如何排版就非常重要了。若是雜亂無章可能會讓人很難繼續逛下去，直接右上角叉叉關閉，這也是為什麼電商視覺設計師都很會花心力在規劃「頭版」畫面。

這裡我們簡單舉個例子，比如你的網站走的是簡單清新風格，那可以在首頁的輪播圖放上背景簡單有質感的商品照，不需要很大量的廣告文字，就既能呈現品牌風格，又很直接地讓點進網站的人知道你賣的商品是什麼。當然最常見的包括：最新促銷資訊、活動資訊Banner，也是時時刻刻能替網站帶來新意的電商設計。

準客戶想要的網頁導覽，是簡單、清楚、容易理解的，可以讓他們從網站的任何位置輕易的前往其他頁面。不要隨便給太多意外驚喜，不要太難找，不需要思考，只要讓他們可以方便快速的瀏覽商品資訊即可。

高解析度的商品圖片

購物網站上最重要的視覺元素就是商品圖片，因此，要盡其所能的呈現商品外觀。透過圖片放大效果、放置不同角度，讓消費者動不動就看到他們想看的東西，才能有效的提升購買欲。

詳細且迷人的商品說明

一則具有吸引力的標語，搭配詳細而完整的商品說明，經常是成功達成轉換率的主要原因。請記得提供正確而詳盡的資訊，而且要容易理解、有趣、引人入勝。

 商品影片

消費者都喜歡有高度互動性的購物網站，豐富的互動元素能成功吸睛，其中商品影片絕對是最能觸動人心、最能感受到商品所要傳達訊息的互動元素。

永遠都能看到購物車標示

盡量讓客戶永遠看到購物車的標示，即使當滑鼠移上去時，都還能清楚看見目前購物車中的商品清單。消費者通常都習慣在結帳之前先檢查一下購物清單，讓他們可以輕鬆決定要繼續購買其他商品還是要前往結帳。

別讓客戶分心

有些購物網站都在結帳頁面中放一些部落格、公司的連結或者其他商品廣告，事實上，當客戶正在購物時，最好不要有任何其他因素干擾，試想，一旦他們在即將結帳時看到更有趣的東西，消費很可能就此中斷了。

把特色商品放在首頁

大多消費者逛購物網站時，都不太清楚他們到底要什麼，所以把特色商品或特價商品放在首頁，可以幫助消費者消除心中的雜念，加速他們下單。

聯絡資訊

線上購物乃基於信任感，如果消費者信任你的網站，他們就會願意消費，因此，適當的放置聯絡資訊，能更有效提升轉換率

電商網頁設計常犯的錯誤

就像剛才說的，電商商品頁是有設計劇本的。如果你就按自己的直覺做，就很容易犯了下面的幾個錯誤:

• 頁面資訊太複雜
• 相關商品和推薦太多
• 敘述文字太多
• 購買流程太複雜

頁面資訊太複雜

我這邊說的跟上面講的內容太長是兩件事情，而是資訊雜亂。例如你在講商品優點的時候用紅色的色塊、在使用者見證用藍色的色塊、在講競品分析的時候又換了另一種顏色，然後為了要強調內容還字體忽大忽小、有加粗沒加粗。讓整個畫面看起來五彩斑斕，消費者看都要看花了眼。

並不是說不能夠換顏色，而是當我們的顏色越複雜的時候，消費者的專注力越難放在產品身上，所以好的設計就是要針對商品所屬性質和定位，選擇相對應的核心設計功能點，並使用大量優質風格統一的圖片營造代入感。

相關商品和推薦太多

電商商品頁的相關產品推薦位置太靠前，會有一種喧賓奪主的感覺。這可能會形成很強的商業感，對銷售是很不利。而我們要打造一種沉溺感，建議你建立「猜你喜歡」的時候要仔細思考品項，找相關度特別高、精準的商品，來平衡用戶體驗的問題。總的來說，電商商品頁的主要通功能還是放在應該主要作為展示商品屬性和促發購買慾望，不要在這個頁面就給消費者太多組合商品資訊，這樣只會造成消費哲者的困惑跟猶豫，反而不利促購。

敘述文字太多

文案是很重要的，但是在電商商品頁上，一張好的照片、一支好的影片更勝過你的千言萬語。謹記一個原則，有圖放圖，有影片放影片，能多豐富就多豐富。不要忘了消費者看這個頁面不會想花太多時間，你如果放了一堆文字也只會適得其反而已。

提升電商網頁設計的6個方式

這邊我再推薦你超好用的電商商品頁設計6招，不一定要都用上，主要還是看你的產品特性來斟酌使用。

• 試用報告或使用前後對比
• 產品保證
• KOL使用推薦
• 場景感+沉浸式體驗
• 多用性、易用性展示
• 對比購買