電商網站商品頁設計超全面指南

 　　商品詳情頁是電子商務網站中最容易與使用者產生交集共鳴的頁面，詳情頁的設計極有可能會對使用者的購買行為產生直接的影響。因此，商品詳情頁面的設計會涉及到運營層面，在美觀實用的基礎上，將要表達的資訊儘可能用直觀的視角展現出來，再有意識的避免設計與運營之間的衝突。

　　一、商品展示圖不宜過大，滑鼠移至上方展示細節

　　商品詳情頁中的圖片展示是使用者進入該頁面後的第一個視覺點，有設計師可能會因此認為這張圖片的尺寸應該儘可能放大，讓使用者對商品概況一目瞭然。但作為設計師也應該考慮到右側文字資訊對於使用者的重要性，兩者之間的比例要避免很大的偏差，減輕使用者在視覺上產生的不適。

　　IKEA的網站就因為圖片與文字之間的比例問題，讓整體看起來輕重不明確，圖片周圍的留白更是與右邊擁擠的文字形成了鮮明的對比。

　　滑鼠在圖片上懸停時，圖片右側會出現關於商品的細節展示，這是一個在商品詳情頁中很常見的功能。但使用過程中會發現，就算使用者的滑鼠無意識的划過圖片，細節展示依然會馬上呈現，這或多或少會影響到使用者體驗，而IKEA的網站則很自然地解決了這一問題。

　　IKEA的細節展示在點擊後才會體現，不讓“說來就來”的圖片打擾使用者的瀏覽體驗。

　　二、滿足使用者的比價心理

　　“價比三家”是網路購物群體的消費習慣，因此，商品詳情頁的設計中也應該融入並滿足使用者選價的心理狀態。在消費心理學中會提到，顧客買東西大多基於個人感受，可能並不是真正價格上的便宜，而是商家能讓顧客覺得便宜。

　　折扣或是優惠額度的顯示能讓消費者心理產生微妙變化，正如噹噹網的做法，讓原價和折後價產生對比，再直接表明折扣，這種重複表格達能加深使用者對優惠的力度的感受。

　　三、增加分享按鈕

　　社交媒體的力量在如今的營銷中絕對不容小覷，所以分享按鈕就變得必不可少。在大多數電子商務網站中我們可以看到：

　　分享按鈕被設定在展示圖片或文字的下方，主要分享當前頁面的商品。但其實，真正用於營銷推廣的分享並不應該僅限於商品本身。

　　比如成功購買的記錄，又或是買家和賣家之間的有趣互動評價，這些都可以成為分享的內容，這也許比商品本身更有吸引力。

　　四、Call To Action

　　Call To Action可以解釋為使用者行為召喚，也就是我們常說的使用者引導。Call To Action一般從色彩和文案兩個角度著手，而色彩是最直觀的表現形式。用區別於頁面大環境的色彩來強調突出，在吸引使用者視線的同時讓他們更樂於點擊。

　　價格、標籤，以及“加入購物袋”按鈕都使用了鮮亮的玫紅色;“購物袋”相較於“購物車”也更加生活化。

　　五、評價意見是必需板塊

　　對網路缺乏信任感是大多數使用者存在的問題，而他人的評價和建議能對當時的購買行為產生很大的影響。因此，顧客評論在電子商務中不是可選項，而是必選項。

　　天貓將顧客的評論進行了自動匯總統計，讓使用者在查看的時候更直觀便捷。

　　無印良品網站的商品詳情頁在這方面做得有所欠缺，也許是對自家的產品自信心爆棚?根本不用讓使用者聽取其他顧客的評價!但身為一個網站，還是盡量不要如此高冷了。

　　六、導航跟隨

　　商品詳情頁的內容比較多，所以跟隨性的導航設計很有必要。跟隨導航在商品詳情頁的出現能為使用者提供很大的便利，但在大小上還需要設計師來掌握，隱形全面的導航才是使用者真正喜歡的導航。

　　京東的商品詳情頁無論在導航的顏色還是大小上都比較符合使用者體驗，既讓使用者在瀏覽時更方便，也不影響使用者的視覺體驗。

　　美麗說的跟隨導航以兩種形式出現，一開始是網站的主導航，翻閱到一定地區，導航自動變更為商品詳情導航。這樣的做法其實顯得有些多餘。當使用者已經在翻閱一個頁面的時候其實很少會出現跳轉的需求。另外，在跟隨導航中設計二級導航也沒有什麼必要，這樣只會讓使用者的視線範圍變狹窄。

　　七、優先功能用途的描述

　　很多商品詳情頁的品牌情節過於明顯，這會讓使用者覺得商業色彩太過濃重，缺乏親切感。商品詳情頁的描述第一屏通常會有新品或熱門推薦，這種做法與商戶最應該注重的使用者體驗完全背道而馳，這類行為會讓使用者產生反感。

　　GAP的商品詳情頁幾乎沒有任何多餘的部分，頁面中的內容都圍繞著一個商品而展開，為使用者營造出良好舒適的購物環境。

　　八、減少文案，善於顯示關鍵詞

　　有研究表明，互連網上60%的文字資訊使用者是不會閱讀的，我們由此可以得出，互連網上出現的文案必須達到最精簡，應該善於抓取關鍵字。

　　國美線上在商品詳情頁上首先列出一系列使用者真正需要瞭解的關鍵點，再在接下來的部分中一一詳細介紹。

　　九、保持頁面連貫性

　　關於商品詳情頁，站在使用者角度來說，他們需要清晰地認識到商品的全部資訊，或者說該如何為自己帶來好處，因此，商品描述的邏輯順序變得格外重要，設計師可以基於商品描述的認知規律去考慮這一點。

　　蘇寧易購的網站在頁面連貫性上表現得很順暢，條理十分清晰，讓使用者能順著線索找到自己需要的那一部分。

　　十、頁面不宜過長

　　頁面長度的掌握在商品詳情頁的設計中是一個很常見的待解決問題，頁面長度過長不僅會導致網頁載入速度變慢，也會讓使用者產生視覺疲勞。一般來說，PC顯示在20屏以內，移動端控制在10屏，也就是4頁以內。

　　一號店商品詳情頁的頁面長度控制比較恰當，盡量把相關事項交代清楚，不加入其他可有可無的成分。

　　總結：

　　商品詳情頁的設計體現的不僅僅是單純的視覺效果而已，無論構思還是排版都是一個引導使用者的過程。打動使用者、刺激購買，設計師應該抱著這樣的理念為使用者傳播一種幻想，而不只是設計一個頁面而已。