【干貨】詳解電商詳情頁設(shè)計規(guī)范

時間：2022-08-06 05:48:01 | 來源：網(wǎng)站運營

時間：2022-08-06 05:48:01 來源：網(wǎng)站運營

一個好的產(chǎn)品如果沒有好的詳情頁來支撐，轉(zhuǎn)化率就會很低，獲取的流量就會減少，如果不能提高轉(zhuǎn)換率，淘寶店鋪就會面臨淘汰。以下針對零基礎(chǔ)的入門小白的，電商行業(yè)大佬們可會心一笑，當(dāng)然有錯誤的地方也懇求指正。




一、詳情頁作用如果把我們的店鋪比作實體商鋪的話，詳情頁就相當(dāng)于是我們店鋪的導(dǎo)購員，熱情服務(wù)的最終目的是為了把東西賣出去，那么線上線下有著異曲同工之妙，詳情頁的作用大致分為：提高轉(zhuǎn)化率的入口、激發(fā)用戶的消費欲望、建立客戶對店鋪的信任感、打消顧客疑慮、最后促使顧客下單。




二、詳情頁尺寸淘寶：寬750px*高度不限天貓：寬790px*高度不限阿里巴巴：寬750px*高度不限京東：寬990px*高度不限一號店：寬750px*高度不限唯品會：寬990px*高度不限蘑菇街：寬720x*高度不限

建議：總長度總高度最好不超過兩萬像素，單張切片高度不超過1500像素。如果一家公司天貓和淘寶都有店鋪，應(yīng)該先做天貓的，最后把790PX圖片同比例縮小到750PX，平時我以PC最小字體像素不能小于14PX，移動端在最小20PX進(jìn)行設(shè)計。




三、詳情頁賣點

很多賣家發(fā)現(xiàn)寶貝詳情頁轉(zhuǎn)化率不高，其實可能是詳情頁賣點沒寫好。那么什么是賣點？其實所謂的賣點就是大家常講的痛點！所以得清楚用戶對什么感興趣，他是一個注重品質(zhì)的還是一個只看價格的還是一個看口碑的買家，那其實這些都是一些賣點，商場如戰(zhàn)場，兵家有句名言為知己知彼，百戰(zhàn)不殆！所有的賣點的提煉，都必須有所憑仗，或者有依托，可信，而不是憑空捏造本不存在的功能、性能、用途，不然，描述不符，可能不宜取信買家，甚至?xí)o后續(xù)運營造成障礙。特別是要造概念的時候，更應(yīng)該要明白，必須有相應(yīng)的依托，不然就是失敗的。下面羅列幾個常見的賣點，都是通過阿里指數(shù)大數(shù)據(jù)羅列的最多賣點。




1、利益引流利益誘惑是很多商家都會去用的一個賣點，簡單來講就是打折、包郵、低價、買贈等方式，通過走底價的方式吸引用戶，比如線下常見的清倉甩賣，全場十元，而等你進(jìn)去后發(fā)現(xiàn)都是不十塊的，其實這時候人家已經(jīng)成功將你拉進(jìn)來了這也是它“全場十元”目的。










2、功能材料功能材料很好理解，就是我們的產(chǎn)品是由什么材料制作的，這種材料你使用了會怎么樣，都有哪些功能，能幫你帶來什么好處。

例如：某某剃須刀它是采自南極寒冰之下的千年玄鐵。經(jīng)過七七四十九天然后再捶打九九八十一次制成的剃須刀，使用后擁有潔凈面龐贏娶白富美走上人生巔峰。




3、款式吸引在賣點里面不能忽視的就是款式、外觀引流。造型美觀、獨特的產(chǎn)品更能吸引顧客。如服裝的款式就很重要，如果只是面料上乘做工一流，而造型不好，是沒辦法打開銷路的。




例如：美國一位農(nóng)民把西瓜放在盒子里生長，生產(chǎn)出了一種長方形西瓜，味道和普通的圓形西瓜并沒有什么差別，但是價錢卻是普通西瓜的20倍，人們感到新奇競相購買。




4、文化賣點并不是外來的產(chǎn)品就好賣，很多國外的產(chǎn)品到中國反而沒有市場，就在于他們沒有考慮到亞洲的文化特點。所以在整理賣點時有的賣家就加入了情感歸宿方面，讓你心理上有個寄托。




5、創(chuàng)意品質(zhì)圖創(chuàng)意圖片吸引用戶消費在近些年比較多，因為每個店都想自己的東西能夠吸引人和同行拉開差異，除了質(zhì)量之外對設(shè)計的要求也很高。因為一張圖決定著用戶能不能發(fā)現(xiàn)你，能發(fā)現(xiàn)才能決定轉(zhuǎn)化。你說你的圖一打開全是低像素的手機(jī)拍攝圖片，讓人第一感覺就是山寨，即使你的東西比同行都好，可能就吃虧在外在包裝了。從而導(dǎo)致用戶流失，銷量下降。所以創(chuàng)意圖創(chuàng)意文案相當(dāng)重要。







四、詳情頁構(gòu)成框架示例

初入電商行業(yè)，你可能會困惑一個詳情頁到底要多少東西，都有哪些模塊？那么一個詳情頁里面所含的東西幾乎每家都不一樣，但是有些模塊都是每家店必備的，比如情景大圖、店鋪活動、優(yōu)惠券、規(guī)格參數(shù)、細(xì)節(jié)圖、包裝運輸方式等等。但是要注意不是說所有的詳情頁都必須要把下面這些模塊放完，要根據(jù)自己店鋪實際情況選擇。




情景海報大圖

店鋪活動

關(guān)聯(lián)產(chǎn)品

產(chǎn)品點/特性

產(chǎn)品賣點/作用/功能

產(chǎn)品給消費者帶來的好處

買家好評如潮

規(guī)格參數(shù)/信息

同行產(chǎn)品優(yōu)勢/劣勢對比

產(chǎn)品全方位展示

產(chǎn)品細(xì)節(jié)展示

產(chǎn)品包裝展示

店鋪產(chǎn)品自理證書

品牌店面/生產(chǎn)車間展示

售后保障問題/物流




五、詳情頁設(shè)計要素1、頭部創(chuàng)意海報

我們都知道詳情頁都很長，用戶沒有多少耐心把他看完，為了防止跳失率。我們要做的就是抓住他的注意力，引導(dǎo)往下用戶往下預(yù)覽，在這里頭部的創(chuàng)意海報圖就顯得非常重要。







2、整體氣質(zhì)協(xié)調(diào)每一個詳情頁其實對應(yīng)的就是一款產(chǎn)品一個主題，主題活動或產(chǎn)品不同，其氣質(zhì)肯定就不一樣了，所以這里的協(xié)調(diào)反應(yīng)出來的首先其實是氣質(zhì)上的協(xié)調(diào)，比如：

高冷的大牌的氣質(zhì)：畫面要么很簡潔有質(zhì)感，要么很華麗有光澤，給人一種買不起感覺




文藝素雅的氣質(zhì)：這種頁面色彩不會臺艷麗也不會特別多彩，往往質(zhì)感也比較柔和，給人寧靜的感覺




年輕時尚氣質(zhì)：這種氣質(zhì)的頁面往往棱角比較分明，色彩鮮明，亮色點綴。




科技質(zhì)感的氣質(zhì)：這類頁面主要是會有一些比較男性化的元素／色彩，比如機(jī)械零件／暗色藍(lán)色／菱角矩形之類的。




3、詳情頁排版布局左右布局：此類型在之前PC端比較常見，因為屏幕比較大，現(xiàn)在流量主要來源于移動端，手機(jī)界面小此類型現(xiàn)在已不多見，但作為知識點還是要說一下。







S布局：S形它相比于平鋪直敘的形式既不會顯得那么呆板，同時閱讀起來也很流暢有趣味性。










Z字型布局：Z形跟S形的作用比較類似的，只不過Z字型符合男性產(chǎn)品或者科技類，而S型適合女性兒童品類







1字型布局：1字形布局，有一種硬朗和厚重的感覺，需要高質(zhì)量模特大圖或產(chǎn)品圖鎮(zhèn)樓，不然吼不住







樓層布局：此頁面會顯得比較簡潔好把控，主要在于背景顏色要有深－淺－深－淺的節(jié)奏，同時每一個樓層都是單獨的模塊，有利于信息閱讀。







自由布局：在某一塊樓層里做一些排版小變化，比如切分成一小塊i一小塊的自由排版：這種專題頁設(shè)計比較適合那些想走高逼格路線的時尚服飾類目，同時這種設(shè)計往往是看著簡潔，但是對設(shè)計師的排版功力要求比較高，不建議新手或沒什么功力的人嘗試




六、詳情頁細(xì)節(jié)設(shè)計1、裝飾內(nèi)容

統(tǒng)一規(guī)范詳情頁里面的裝飾元素包含素材、字體、標(biāo)題等。裝飾性內(nèi)容在產(chǎn)品詳情頁出現(xiàn)得比較多，也可以稱為補位性內(nèi)容，是為了讓頁面內(nèi)容更豐富更飽滿而存在。有些小伙伴為增加詳情頁B格喜歡加入一些英文點綴。要留意我們針對是國內(nèi)用戶時，那這時英文就是一個裝飾元素，可視它為圖形一般都是比較小或者顏色比較淺設(shè)計，切記不然會喧賓奪主。




2、注意用色

剛說了詳情頁一般都很長，在這么長的頁面里不宜出現(xiàn)大面積高飽和色彩的背景，一般采用灰色、白色、黑色等低明度色彩作為背景，高明度高飽和度可以用在一些標(biāo)題或者賣點上面強(qiáng)調(diào)突出主體。







3、統(tǒng)一

統(tǒng)一色彩！標(biāo)題！布局！風(fēng)格氣質(zhì)！




七、總結(jié)

以上就是今天對詳情頁的一個簡單概括，之前我們以為詳情頁就是簡單擺放幾張產(chǎn)品圖片，然后加些參數(shù)表，最后放個五星好評截圖就完事了。如果你還這樣想的話，那你肯定就是個不合格的電商設(shè)計師。詳情頁除了讓消費者了解產(chǎn)品，更重要的是幫助商家提升銷量。打造一張優(yōu)秀的詳情頁，要用60%的時間去調(diào)查構(gòu)思，確定方向，40%的時間去設(shè)計。電商設(shè)計這條路需要太多的技巧和方法了，此路任重道遠(yuǎn)，共勉~

相關(guān)詳情頁素材模板推薦

?