電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南(4)

來(lái)源:未知 作者:AnyForWeb_UDC 學(xué)習(xí):6688人次

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

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

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

IKEA的網(wǎng)站就因?yàn)閳D片與文字之間的比例問(wèn)題,讓整體看起來(lái)輕重不明確,圖片周?chē)牧舭赘桥c右邊擁擠的文字形成了鮮明的對(duì)比。

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

二、滿(mǎn)足用戶(hù)的比價(jià)心理

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

三、增加分享按鈕

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

四、Call To Action

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

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

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

六、導(dǎo)航跟隨

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

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

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

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

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

九、保持頁(yè)面連貫性

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

十、頁(yè)面不宜過(guò)長(zhǎng)

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

電商設(shè)計(jì),超全面的電商網(wǎng)站商品頁(yè)設(shè)計(jì)指南

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

總結(jié):

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

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!