學(xué)習(xí)電商美工詳情頁(yè)設(shè)計(jì)要點(diǎn)和技巧!
商品詳情頁(yè)是對(duì)商品進(jìn)行詳細(xì)描述介紹的頁(yè)面,詳情頁(yè)的設(shè)計(jì)極有可能會(huì)對(duì)用戶的購(gòu)買行為產(chǎn)生直接的影響。因此,商品詳情頁(yè)面的設(shè)計(jì)在美觀實(shí)用的基礎(chǔ)上,將要表達(dá)的信息盡可能用直觀的視角展現(xiàn)出來(lái)。

?
展示商品細(xì)節(jié)圖片
因?yàn)槭謾C(jī)端的特殊性,在產(chǎn)品信息頁(yè)面中僅僅只展示了幾張商品圖片和商品的基本信息。

?
當(dāng)用戶對(duì)該商品感興趣時(shí),可以進(jìn)入該商品的詳情頁(yè)面,在詳情頁(yè)面中設(shè)計(jì)師需要盡可能地向用戶展示該商品的細(xì)節(jié)圖片,可以使用商品細(xì)節(jié)圖片與文字說(shuō)明相搭配的方式,使用戶能夠?qū)υ撋唐酚懈尤娴牧私猓瑥亩褂脩魧?duì)商品產(chǎn)生購(gòu)買的欲望。

?
有效地引導(dǎo)用戶操作
用戶引導(dǎo)一般從色彩和文案兩個(gè)角度著手,而色彩是最直觀的表現(xiàn)形式,使用區(qū)別于頁(yè)面大環(huán)境的色彩來(lái)強(qiáng)調(diào)突出,在吸引消費(fèi)者視線的同時(shí)讓他們更樂(lè)于點(diǎn)擊。

?
例如:商品詳情頁(yè)面中,商品價(jià)格、活動(dòng)信息和“加入購(gòu)物車”按鈕都使用鮮艷的紅色。再如:所選尺碼以及“加入購(gòu)物車”按鈕都使用了鮮明的紫色,在界面中非常突出。

?
商品評(píng)價(jià)功能
對(duì)網(wǎng)絡(luò)缺乏信任是許多消費(fèi)者都存在的顧慮,而已購(gòu)買該商品的消費(fèi)者對(duì)于該商品的評(píng)價(jià)將會(huì)對(duì)有購(gòu)買意向的用戶產(chǎn)生很大的影響,因此商品評(píng)價(jià)功能是商品詳情頁(yè)面中不可缺少的功能。

?
例如:商品詳情頁(yè)面中的商品評(píng)價(jià),對(duì)評(píng)價(jià)進(jìn)行了自動(dòng)匯總統(tǒng)計(jì),讓用戶在查看的時(shí)候更直觀便捷。

?
連貫的商品介紹
對(duì)于商品詳情頁(yè)面,消費(fèi)者需要清晰地認(rèn)識(shí)到商品的全部信息,因此商品描述的邏輯順序變得格外重要,設(shè)計(jì)師可以基于商品描述的認(rèn)知規(guī)律去考慮安排商品介紹信息。

?
為商品詳情頁(yè)設(shè)計(jì),整個(gè)頁(yè)面采用統(tǒng)一的配色和風(fēng)格,在詳情頁(yè)中對(duì)商品的各部分屬性進(jìn)行分步驟介紹,清晰明了。

?
跟隨性導(dǎo)航
商品詳情頁(yè)的內(nèi)容比較多,所以跟隨性的導(dǎo)航設(shè)計(jì)非常有必要。跟隨導(dǎo)航在商品詳情頁(yè)中能夠?yàn)橛脩舨僮魈峁┖艽蟮谋憷?。例如:始終在商品詳情頁(yè)的上方和下方浮動(dòng)顯示跟隨性導(dǎo)航,便于用戶快速地切換頁(yè)面和購(gòu)買商品。

?
商品詳情頁(yè)面不要過(guò)長(zhǎng)
商品詳情頁(yè)面的長(zhǎng)度不宜過(guò)長(zhǎng),頁(yè)面長(zhǎng)度過(guò)長(zhǎng)會(huì)導(dǎo)致頁(yè)面加載速度變慢,特別是在手機(jī)端,會(huì)消耗大量的手機(jī)流量,也會(huì)讓用戶產(chǎn)生視覺疲勞。一般來(lái)說(shuō),手機(jī)端的商品詳情頁(yè)面需要控制在10屏以內(nèi)。

?