編者按：10個(gè)方面幫你完美搞定商品詳情頁！今天聊聊電商網(wǎng)站非常關(guān)鍵的一環(huán)，如何打造一個(gè)讓用戶能動(dòng)心剁手的商品詳情頁？來學(xué)習(xí)@AnyForWeb_UDC?同學(xué)總結(jié)的10個(gè)方法，挑最常見的案例來分析，給你滿滿干貨 >>>

電商網(wǎng)站設(shè)計(jì)技巧全系列合集

• 《一網(wǎng)打盡！電商網(wǎng)站導(dǎo)航設(shè)計(jì)超全面指南（一）》
• 《幫你提升幫你贏！電商網(wǎng)站導(dǎo)航設(shè)計(jì)超全面指南（二）》
• 《給你一個(gè)好心情！電商網(wǎng)站注冊(cè)界面設(shè)計(jì)超全面指南（三）》
• 《有嚼頭的干貨！電商網(wǎng)站面包屑導(dǎo)航設(shè)計(jì)技巧全科普（四）》
• 《人氣流量通通要！電商網(wǎng)站商品頁設(shè)計(jì)超全面指南（五》

商品詳情頁是電子商務(wù)網(wǎng)站中最容易與用戶產(chǎn)生交集共鳴的頁面，詳情頁的設(shè)計(jì)極有可能會(huì)對(duì)用戶的購買行為產(chǎn)生直接的影響。因此，商品詳情頁面的設(shè)計(jì)會(huì)涉及到運(yùn)營(yíng)層面，在美觀實(shí)用的基礎(chǔ)上，將要表達(dá)的信息盡可能用直觀的視角展現(xiàn)出來，再有意識(shí)的避免設(shè)計(jì)與運(yùn)營(yíng)之間的沖突。

一、商品展示圖不宜過大，鼠標(biāo)懸停展示細(xì)節(jié)

商品詳情頁中的圖片展示是用戶進(jìn)入該頁面后的第一個(gè)視覺點(diǎn)，有設(shè)計(jì)師可能會(huì)因此認(rèn)為這張圖片的尺寸應(yīng)該盡可能放大，讓用戶對(duì)商品概況一目了然。但作為設(shè)計(jì)師也應(yīng)該考慮到右側(cè)文字信息對(duì)于用戶的重要性，兩者之間的比例要避免很大的偏差，減輕用戶在視覺上產(chǎn)生的不適。

IKEA的網(wǎng)站就因?yàn)閳D片與文字之間的比例問題，讓整體看起來輕重不明確，圖片周圍的留白更是與右邊擁擠的文字形成了鮮明的對(duì)比。

鼠標(biāo)在圖片上懸停時(shí)，圖片右側(cè)會(huì)出現(xiàn)關(guān)于商品的細(xì)節(jié)展示，這是一個(gè)在商品詳情頁中很常見的功能。但使用過程中會(huì)發(fā)現(xiàn)，就算用戶的鼠標(biāo)無意識(shí)的劃過圖片，細(xì)節(jié)展示依然會(huì)馬上呈現(xiàn)，這或多或少會(huì)影響到用戶體驗(yàn)，而IKEA的網(wǎng)站則很自然地解決了這一問題。

IKEA的細(xì)節(jié)展示在點(diǎn)擊后才會(huì)體現(xiàn)，不讓“說來就來”的圖片打擾用戶的瀏覽體驗(yàn)。

二、滿足用戶的比價(jià)心理

“價(jià)比三家”是網(wǎng)絡(luò)購物群體的消費(fèi)習(xí)慣，因此，商品詳情頁的設(shè)計(jì)中也應(yīng)該融入并滿足用戶選價(jià)的心理狀態(tài)。在消費(fèi)心理學(xué)中會(huì)提到，顧客買東西大多基于個(gè)人感受，可能并不是真正價(jià)格上的便宜，而是商家能讓顧客覺得便宜。

折扣或是優(yōu)惠額度的顯示能讓消費(fèi)者心理產(chǎn)生微妙變化，正如當(dāng)當(dāng)網(wǎng)的做法，讓原價(jià)和折后價(jià)產(chǎn)生對(duì)比，再直接表明折扣，這種重復(fù)表達(dá)能加深用戶對(duì)優(yōu)惠的力度的感受。

三、增加分享按鈕

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

分享按鈕被設(shè)置在展示圖片或文字的下方，主要分享當(dāng)前頁面的商品。但其實(shí)，真正用于營(yíng)銷推廣的分享并不應(yīng)該僅限于商品本身。

比如成功購買的記錄，又或是買家和賣家之間的有趣互動(dòng)評(píng)價(jià)，這些都可以成為分享的內(nèi)容，這也許比商品本身更有吸引力。

四、Call To Action

Call To Action可以解釋為用戶行為召喚，也就是我們常說的用戶引導(dǎo)。Call To Action一般從色彩和文案兩個(gè)角度著手，而色彩是最直觀的表現(xiàn)形式。用區(qū)別于頁面大環(huán)境的色彩來強(qiáng)調(diào)突出，在吸引用戶視線的同時(shí)讓他們更樂于點(diǎn)擊。

價(jià)格、標(biāo)簽，以及“加入購物袋”按鈕都使用了鮮亮的玫紅色；“購物袋”相較于“購物車”也更加生活化。

五、評(píng)價(jià)意見是必需板塊

對(duì)網(wǎng)絡(luò)缺乏信任感是大多數(shù)用戶存在的問題，而他人的評(píng)價(jià)和建議能對(duì)當(dāng)時(shí)的購買行為產(chǎn)生很大的影響。因此，顧客評(píng)論在電子商務(wù)中不是可選項(xiàng)，而是必選項(xiàng)。

天貓將顧客的評(píng)論進(jìn)行了自動(dòng)匯總統(tǒng)計(jì)，讓用戶在查看的時(shí)候更直觀便捷。

無印良品網(wǎng)站的商品詳情頁在這方面做得有所欠缺，也許是對(duì)自家的產(chǎn)品自信心爆棚？根本不用讓用戶聽取其他顧客的評(píng)價(jià)！但身為一個(gè)網(wǎng)站，還是盡量不要如此高冷了。

六、導(dǎo)航跟隨

商品詳情頁的內(nèi)容比較多，所以跟隨性的導(dǎo)航設(shè)計(jì)很有必要。跟隨導(dǎo)航在商品詳情頁的出現(xiàn)能為用戶提供很大的便利，但在大小上還需要設(shè)計(jì)師來掌握，隱形全面的導(dǎo)航才是用戶真正喜歡的導(dǎo)航。

京東的商品詳情頁無論在導(dǎo)航的顏色還是大小上都比較符合用戶體驗(yàn)，既讓用戶在瀏覽時(shí)更方便，也不影響用戶的視覺體驗(yàn)。

美麗說的跟隨導(dǎo)航以兩種形式出現(xiàn)，一開始是網(wǎng)站的主導(dǎo)航，翻閱到一定區(qū)域，導(dǎo)航自動(dòng)變更為商品詳情導(dǎo)航。這樣的做法其實(shí)顯得有些多余。當(dāng)用戶已經(jīng)在翻閱一個(gè)頁面的時(shí)候其實(shí)很少會(huì)出現(xiàn)跳轉(zhuǎn)的需求。另外，在跟隨導(dǎo)航中設(shè)計(jì)二級(jí)導(dǎo)航也沒有什么必要，這樣只會(huì)讓用戶的視線范圍變狹窄。

七、優(yōu)先功能用途的描述

很多商品詳情頁的品牌情節(jié)過于明顯，這會(huì)讓用戶覺得商業(yè)色彩太過濃重，缺乏親切感。商品詳情頁的描述第一屏通常會(huì)有新品或熱門推薦，這種做法與商戶最應(yīng)該注重的用戶體驗(yàn)完全背道而馳，這類行為會(huì)讓用戶產(chǎn)生反感。

GAP的商品詳情頁幾乎沒有任何多余的部分，頁面中的內(nèi)容都圍繞著一個(gè)商品而展開，為用戶營(yíng)造出良好舒適的購物環(huán)境。

八、減少文案，善于顯示關(guān)鍵詞

有研究表明，互聯(lián)網(wǎng)上60%的文字信息用戶是不會(huì)閱讀的，我們由此可以得出，互聯(lián)網(wǎng)上出現(xiàn)的文案必須達(dá)到最精簡(jiǎn)，應(yīng)該善于抓取關(guān)鍵字。

國美在線在商品詳情頁上首先列出一系列用戶真正需要了解的關(guān)鍵點(diǎn)，再在接下來的部分中一一詳細(xì)介紹。

九、保持頁面連貫性

關(guān)于商品詳情頁，站在用戶角度來說，他們需要清晰地認(rèn)識(shí)到商品的全部信息，或者說該如何為自己帶來好處，因此，商品描述的邏輯順序變得格外重要，設(shè)計(jì)師可以基于商品描述的認(rèn)知規(guī)律去考慮這一點(diǎn)。

蘇寧易購的網(wǎng)站在頁面連貫性上表現(xiàn)得很順暢，條理十分清晰，讓用戶能順著線索找到自己需要的那一部分。

十、頁面不宜過長(zhǎng)

頁面長(zhǎng)度的掌握在商品詳情頁的設(shè)計(jì)中是一個(gè)很常見的待解決問題，頁面長(zhǎng)度過長(zhǎng)不僅會(huì)導(dǎo)致網(wǎng)頁加載速度變慢，也會(huì)讓用戶產(chǎn)生視覺疲勞。一般來說，PC顯示在20屏以內(nèi)，移動(dòng)端控制在10屏，也就是4頁以內(nèi)。

一號(hào)店商品詳情頁的頁面長(zhǎng)度控制比較恰當(dāng)，盡量把相關(guān)事項(xiàng)交代清楚，不加入其他可有可無的成分。

總結(jié)：

商品詳情頁的設(shè)計(jì)體現(xiàn)的不僅僅是單純的視覺效果而已，無論構(gòu)思還是排版都是一個(gè)引導(dǎo)用戶的過程。打動(dòng)用戶、刺激購買，設(shè)計(jì)師應(yīng)該抱著這樣的理念為用戶傳播一種幻想，而不只是設(shè)計(jì)一個(gè)頁面而已。

新手必備的指南類好文強(qiáng)烈推薦！

每個(gè)網(wǎng)站都有的404頁面創(chuàng)建指南！
《超實(shí)用！不容錯(cuò)過的優(yōu)秀404頁面設(shè)計(jì)指南》

配色弱、非科班的設(shè)計(jì)師童鞋必備！
《設(shè)計(jì)師配色寶典！教你從零開始學(xué)配色（一）》

專為設(shè)計(jì)師寫的Github學(xué)習(xí)方法！
《超方便！專為設(shè)計(jì)師而寫的GITHUB快速入門教程》

投稿者：@AnyForWeb_UDC

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量90萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege