很多電商在功能上其實沒有缺什麼：商品頁有、購物車有、會員有、金流物流也都接好了。但轉換率就是拉不上來，客服每天都在回答「這個規格有沒有貨」「運費怎麼算」這類頁面上其實寫了、只是沒人看到的問題。這通常不是功能問題，是版面問題。同樣的功能，排列順序不同、密度不同、狀態顯示方式不同，使用起來的體驗差距非常大。這篇電商網站設計就只談版面決策：商品列表要放多密、篩選介面怎麼擺、商品頁的資訊該依什麼順序出現、規格選擇器怎麼呈現、加購與推薦放哪裡不會干擾、缺貨狀態怎麼顯示。不談有哪些功能模組，只談同樣的功能怎麼排比較好用。
電商網站設計的第一個決策：商品列表要放多密
商品列表是多數訪客真正花時間的地方。一排要放幾個商品、每張卡片要顯示多少資訊，看起來像是版面美感的選擇，實際上是由商品類型決定的。
當商品的購買決策高度依賴外觀，例如服飾、家飾、食品禮盒，圖片要夠大才看得出差異，一排放少一點、卡片大一點比較合理，資訊可以精簡到名稱與價格。當商品的決策依賴規格比較，例如零件、耗材、工業品，圖片幫助有限，這時卡片應該縮小圖片、把型號與關鍵規格直接顯示在列表上，一排多放幾個讓訪客可以快速掃描比對。
另一個要決定的是卡片上要不要顯示次要資訊：庫存狀態、規格數量、評價、運送標示。每多一項，掃描速度就慢一點。實務建議是只保留會影響「要不要點進去」的資訊。例如常缺貨的品類，在列表上標示有無現貨可以省掉訪客白點的挫折；但如果九成商品都有貨，這個標示就只是雜訊。手機版尤其要克制，卡片高度一長，一個畫面看不到幾個商品，瀏覽效率會明顯下降。
篩選介面：放在哪裡、預設展開還是收合
篩選是電商網站設計裡最容易做壞的元件。桌機常見的做法是左側固定欄位，優點是隨時看得到目前套用了哪些條件；缺點是佔掉版面寬度，商品區被壓縮。另一種是頂部橫向的下拉篩選，省空間但可視性較差，訪客容易忘記自己套了什麼條件。
- 條件要看得見：不論篩選器放哪裡，已套用的條件都應該以標籤形式顯示在商品區上方，並且可以單獨移除。
- 優先顯示真正會用到的維度：價格區間、尺寸、顏色、規格、是否現貨，通常比冷門屬性有用。維度太多時預設收合，只展開前幾項。
- 顯示可選數量：如果某個條件篩下去結果是零，最好事先標示，避免訪客一路點到空白頁。
- 手機版用抽屜式面板：全螢幕開啟、一次選完再套用，比逐項即時重整體驗好，也少很多誤觸。
- 篩選後不要重置捲動位置：訪客調整條件後被彈回頁首，是很常見也很惱人的問題。
排序與篩選要分開。訪客心裡的動作是兩件事：先縮小範圍，再決定看的順序。把排序塞進篩選面板裡，會讓最常用的功能反而變難找。排序選項本身也不用多，價格高低、上架時間、熱門度大致就夠，選項一多反而沒人用。
商品頁的資訊順序：照決策順序排，不是照資料結構排
商品頁最常見的毛病，是照後台欄位的順序排版：名稱、價格、商品描述、規格表、運送說明、退換貨說明。這是資料庫的順序，不是人的決策順序。訪客在商品頁上的問題其實有先後：這是什麼、長什麼樣、我要的規格有沒有、多少錢、什麼時候到、買錯了怎麼辦。
依這個順序排，上半部應該放：主圖與圖片群組、商品名稱與關鍵識別資訊（型號、容量、尺寸）、規格選擇器、價格與庫存狀態、加入購物車。這一整組要在不捲動的情況下盡量看得完，手機版尤其要壓縮，把促銷標語與冗長的品牌故事往後移。
中段放的是決策的細節：完整規格、材質或成分、使用與保養說明、尺寸對照。下段放的是降低風險的資訊：運送方式與預計到貨、運費規則、退換貨條件、常見問答。很多電商把運送與退換貨藏在頁尾連結裡，但這兩項恰恰是猶豫中的訪客最想確認的，放在購買區附近用一兩行摘要加上可展開的細節，通常比連結到另一頁有效。
圖片的順序也值得規劃。第一張要能辨識商品本體，接著是不同角度、細節特寫、比例參考（放在情境中看得出大小）、規格說明圖。如果商品有多個顏色，選擇顏色時主圖應該同步切換，這個細節沒做好，訪客會反覆懷疑自己選到的是不是看到的那個。
規格選擇器：把選項的狀態講清楚
規格選擇是商品頁上最容易出錯的互動。常見的做法有下拉選單、方塊按鈕、色塊。下拉選單省空間，但要點開才看得到有什麼選項，也看不出哪些缺貨；方塊按鈕把所有選項攤開，掃一眼就知道有哪些，代價是佔版面。
選擇的原則大致是：選項少、且選項本身需要被看見（顏色、尺寸）時用攤開的按鈕或色塊；選項多、且是純文字或數字（例如長度規格幾十種）時用下拉或搜尋式選單。顏色一定要用色塊加上文字名稱，只有色塊會讓人分不清相近色，只有文字則想像不出來。
更重要的是狀態。一個選項有四種可能：可選、已選、該組合缺貨、該組合不存在。這四種要能一眼分辨。缺貨的選項建議保留在版面上但標示為不可選，而不是直接隱藏，因為隱藏會讓訪客以為根本沒這個規格，也失去「補貨通知」的機會。多層規格（例如先選顏色再選尺寸）要在選了第一層之後即時更新第二層的可選狀態，否則訪客會選到一個不存在的組合，按了加入購物車才被退回。
還有一個小但有效的細節：規格選擇器上方標明目前選了什麼。當選項用圖示呈現時，訪客常常不確定自己點到的是哪一個，一行「已選：深藍／中號」可以省掉很多來回。
加購與推薦區塊：放在哪裡不會干擾決策
推薦區塊是營收來源，也是干擾來源。判斷要點在於：這個區塊出現的時機，是在訪客「還沒決定」還是「已經決定」的時候。
在訪客還沒決定要不要買這件商品時出現的相似商品推薦，會把注意力拉走，讓決策重新開始。所以相似商品比較適合放在商品頁的下段，或是在訪客明顯猶豫（例如捲到底）時才出現。相對地，配件與耗材這類互補商品，適合放在購買區附近，因為它回答的是「買了這個還需要什麼」，屬於強化決策而非分散決策。
- 購買區上方不放任何推薦，保持決策路徑乾淨。
- 互補型加購放在加入購物車按鈕下方，以小尺寸卡片呈現，可勾選一起加入。
- 相似替代品放在規格與說明之後，此時訪客若還在看，代表這件可能不完全合適。
- 購物車頁與加入成功的提示，適合放低單價的加購，因為決策已完成。
- 推薦區塊要標明推薦理由，例如常一起購買、同系列，比無說明的「你可能喜歡」更容易被點。
手機版要特別注意推薦區塊的高度。連續三四個推薦輪播會把頁面拉得很長，訪客根本捲不到下面的退換貨資訊。在小螢幕上，推薦區塊的數量應該比桌機少。
缺貨與各種例外狀態怎麼顯示
電商網站設計的成熟度，很大一部分表現在例外狀態上。順利的路徑大家都做得差不多，差別在缺貨、預購、下架、限購、僅剩少量這些情況怎麼呈現。
缺貨商品最糟的處理是讓按鈕維持可按，加入購物車後才在結帳時失敗。次糟的是整個商品頁直接消失，讓外部連結變成錯誤頁。比較合理的做法是保留頁面與資訊，把購買按鈕換成明確的狀態說明，並提供替代動作：補貨通知、看類似商品、或是顯示預計補貨的時間區間（如果你真的知道，不知道就不要寫）。
預購與現貨混在同一個購物車時，出貨時間要在商品頁與購物車兩處都說清楚，否則訪客會以為全部一起到。限購數量要在數量選擇器上就限制，而不是等到結帳才報錯。僅剩少量的提示只有在真的少量時才用，用久了會失去作用，也可能牽涉不實表示的爭議。
這些狀態的共同原則是：在訪客投入時間之前就告知，而不是在他完成一連串操作之後才擋下來。每一次「操作到一半才被拒絕」都會消耗信任，累積幾次就不會再回來。
常見問題
商品列表一排放幾個最好？
沒有通用答案，取決於商品的決策方式。靠外觀決定的商品需要大圖，一排放少一點；靠規格比較的商品需要快速掃描，一排可以多放並顯示關鍵規格。手機上則要注意卡片高度，一個畫面至少要能看到一個以上的完整商品。
缺貨的規格應該隱藏還是顯示為不可選？
多數情況建議保留並標示為不可選。隱藏會讓訪客誤以為沒有這個規格，也少掉補貨通知的機會。但如果某個規格已經永久停產，就應該真正移除，避免長期誤導。
把運費與退換貨寫在商品頁會不會顯得囉嗦？
用摘要加展開的方式呈現通常不會。這兩項是猶豫中的訪客最常想確認的資訊，藏在頁尾連結裡反而會增加客服負擔。重點是簡短、放在購買區附近、細節可展開。
調整版面之後多久能看到效果？
沒有人能保證調整版面就一定提升銷售，也沒有固定的見效時間。合理的做法是一次只改少數幾處、記錄改動內容，再觀察一段夠長的期間，避免把季節或檔期因素誤認成版面效果。
電商網站設計的重點，不在於版面有多漂亮，而在於訪客每一個當下的疑問，能不能在他需要的位置得到答案。把資訊順序、選項狀態與例外情況處理好，通常比換一套視覺風格更有感。
如果你的電商功能都齊全，但客服一直在回答頁面上「其實有寫」的問題，那多半是版面該調整了。創昇SEO提供免費的網站健檢，也可以安排全台免費到府解說，陪你把商品列表與商品頁的排列邏輯走一遍，實際要不要改，還是你說了算。