電商詳情頁(yè)設(shè)計(jì)流程

詳情頁(yè)除了讓消費(fèi)者了解產(chǎn)品，更重要的是幫助商家提升銷量。打造一款優(yōu)秀的詳情頁(yè)，要用60%的時(shí)間去調(diào)查構(gòu)思，確定方向，40%的時(shí)間去設(shè)計(jì)。那正常的設(shè)計(jì)流程怎么樣的呢？


一、頁(yè)面風(fēng)格
頁(yè)面風(fēng)格主要是根據(jù)產(chǎn)品本身來(lái)定的，如產(chǎn)品的屬性、產(chǎn)品功能等。如果產(chǎn)品沒(méi)有特定的風(fēng)格屬性，可以根據(jù)目標(biāo)銷售人群、季節(jié)、節(jié)日或主題活動(dòng)來(lái)定。
圖片


二、產(chǎn)品和素材搜集
前期實(shí)拍素材，進(jìn)行整理和分類。我們也要在設(shè)計(jì)的過(guò)程中要學(xué)會(huì)整理搜集自己的素材庫(kù)，做好備份。




三、構(gòu)架布局框架
根據(jù)文案內(nèi)容，結(jié)合實(shí)際產(chǎn)品，進(jìn)行有效的布局建立,可以從下面八個(gè)方面入手操作：
1.產(chǎn)品海報(bào) -- 引起注意。
2.產(chǎn)品屬性功能 -- 提升興趣，了解產(chǎn)品。
3.產(chǎn)品全景 -- 提升興趣。
4.產(chǎn)品細(xì)節(jié)展示 -- 提升興趣，了解產(chǎn)品。
5.痛點(diǎn)挖掘 -- 拉近客戶。
6.檢測(cè)報(bào)告 -- 建立信任。
7.賣點(diǎn)優(yōu)勢(shì) -- 體現(xiàn)產(chǎn)品價(jià)值。
8.好評(píng)分享展示 -- 進(jìn)一步加強(qiáng)購(gòu)買欲望。




四、確定配色方案
已有店鋪視覺(jué)規(guī)范的可以直接延續(xù)使用。如果沒(méi)有，可以從產(chǎn)品本身提取，或者從Logo中提取或從產(chǎn)品聯(lián)想屬性提取。在配色過(guò)程中，無(wú)論用幾種顏色來(lái)組合，首先要考慮用什么顏色作為主色調(diào)。


五、選擇合適字體
字體相當(dāng)于一個(gè)橋梁，相當(dāng)重要。主要用來(lái)對(duì)產(chǎn)品進(jìn)行解釋說(shuō)明，方便顧客閱讀，同時(shí)，也是起重要信息的引導(dǎo)作用，可通過(guò)大小字體搭配進(jìn)行重點(diǎn)顯示某項(xiàng)內(nèi)容。字體使用時(shí)一般不超過(guò)3種字體并選擇符合產(chǎn)品定位的字體；在重點(diǎn)部分內(nèi)容進(jìn)行加粗突出顯示，以加深買家對(duì)該信息的印象程度。


六、整個(gè)詳情頁(yè)排版
怎么對(duì)圖片和文案內(nèi)容進(jìn)行排版設(shè)置，要考驗(yàn)我們平時(shí)積累下來(lái)的設(shè)計(jì)的水平。越是簡(jiǎn)約大氣的頁(yè)面，元素務(wù)必不要太多，清爽舒適的頁(yè)面多留白。




七、修改定稿
把制作好的首稿輸出為JPG或PNG格式，同時(shí)保留源文件格式，給團(tuán)隊(duì)成員進(jìn)行閱稿審核，如不符合要求，進(jìn)行局部修改。也可以參考不同的意見(jiàn)進(jìn)行優(yōu)化處理，直至定稿保存為止。


八、切片和優(yōu)化頁(yè)面存儲(chǔ)
設(shè)計(jì)制作后的商品詳情頁(yè)往往是一張大圖，高度可能達(dá)上萬(wàn)像素，而我們?cè)诰W(wǎng)上瀏覽的圖是經(jīng)過(guò)Photoshop切片功能進(jìn)行切割圖片后呈現(xiàn)出來(lái)的。如果一張數(shù)幾十MB的圖像直接上傳網(wǎng)店店鋪，網(wǎng)絡(luò)加載速度會(huì)很慢，用戶體驗(yàn)差，所以要對(duì)圖片進(jìn)行切割優(yōu)化。