如何提升詳情頁的耐看性和購買欲
發(fā)布時間:2021-12-30 09:43 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2 閱讀: 3068

大家都是因為什么原因入行電商設(shè)計的?


眾所周知,商業(yè)設(shè)計是為商業(yè)服務(wù)的。

而電商設(shè)計,當然是為各大電商網(wǎng)購平臺和賣家店鋪、微店等服務(wù)的,只要你想在網(wǎng)上賣東西,你就需要展示你的產(chǎn)品,那么你就需要電商設(shè)計是為你服務(wù)的。

比如電商設(shè)計的職責范圍非常廣,小到主圖和各種尺寸的 banner 設(shè)計,大到海報設(shè)計、首頁設(shè)計、詳情頁設(shè)計等,全都是電商設(shè)計師們需要做的事情。

而實際上大多數(shù)成為電商設(shè)計師的人,很少有科班出生的,我這里所指的科班是指學電商設(shè)計這個專業(yè)出身的人,據(jù)我目前所知的,大家都是怎么入行電商設(shè)計領(lǐng)域的呢?

主要有以下幾個原因和途徑:

  • 本來是做包裝設(shè)計的,結(jié)果順應(yīng)業(yè)務(wù)需要,被老板要求做了電商設(shè)計;
  • 本來是畫插畫的,結(jié)果順應(yīng)業(yè)務(wù)需要,被老板要求做電商設(shè)計;
  • 本來是被一些培訓機構(gòu)忽悠說學 UI 設(shè)計可以拿高薪,于是花了大幾萬塊去報名學習,結(jié)果學完后發(fā)現(xiàn)別說拿高薪了,而是根本就找不到 UI 工作,剛好碰到有招電商設(shè)計的,于是就去了;
  • 正兒八經(jīng)視覺傳達專業(yè)或廣告學或電子商務(wù)等專業(yè)畢業(yè),歪打正著或者受前輩學姐學長們影響,從事了電商設(shè)計;
  • 原本是做運營的,或者做文員的,或者做老師的,但是看著人家做的電商設(shè)計頁面好有意思,于是就轉(zhuǎn)行做了電商設(shè)計;
  • 覺得做其他設(shè)計太枯燥,而做電商設(shè)計非常有意思有創(chuàng)意,于是就轉(zhuǎn)行做了電商設(shè)計,比如我當年就是;

所以大家發(fā)現(xiàn)沒有,嚴格來講,電商設(shè)計這個領(lǐng)域?qū)嶋H上是沒有什么所謂的正規(guī)軍的。

而且目前處于電子商務(wù)老大地位的阿里巴巴也是在 2003 年 5 月份才創(chuàng)立了淘寶網(wǎng),到了 2009 年才第一次有了雙 11 這個大型的電商促銷活動,之后網(wǎng)購的形式才被越來越多的消費者接受和熟知,這就吸引了越來越多的商家入駐,自然競爭就越來越激烈了。

這個競爭,除了是入駐商家之間的競爭,還有隨著越來越多的電商平臺的入場帶來的各大電商平臺之間的競爭,比如后來居上的京東,還有現(xiàn)在發(fā)展勢頭正猛的拼多多。

其他具體的電商設(shè)計發(fā)展史和各個平臺之間發(fā)展細節(jié)我就不說了,因為幾年前我在我的電商設(shè)計書籍《這么設(shè)計能熱賣》里就已經(jīng)提到過了。

總而言之,有競爭就意味著會有輸家和贏家。在價錢差不多的情況下,低品質(zhì)的就會被高品質(zhì)的干掉;品質(zhì)和價錢差不多的情況下,沒有品牌的就會被有品牌的干掉;而都有品牌的情況下,品牌知名度低的就會被品牌知名度高的干掉;而在品牌都差不多的情況下呢,服務(wù)差的沒新意的又會被服務(wù)好的有新意的干掉。

但不是每個消費者都追求大品牌或高品質(zhì)的,因為每個人的個性、經(jīng)濟實力、喜好等不同的原因,所以那些靠低價走量的商家或平臺,那些走專屬定制或個性化服務(wù)的商家或平臺,那些擅于博取消費者眼球或提供細微服務(wù)的商家或平臺,那些擅于搞跨界合作和創(chuàng)新的商家或品牌,也依舊有生存的空間。

是消費者的多樣性,決定了它們的多樣性,它們的多樣性也決定了電商設(shè)計師的多樣性,所以你才會看到五花八門的風格和調(diào)性的電商設(shè)計。

它們無所謂好壞,只有合不合適;

而我們把時間固定在某一瞬間,你會發(fā)現(xiàn)每個平臺或品牌或商家都有其各自所在的位置,而我們把時間拉長來看,你又會看到每個平臺或品牌或商家的位置不是固定不變的。有的上去了,有的下去了,有的消失了,而有的還是在原地不動,當然,還會有一些新興的面孔出現(xiàn)。而我們電商設(shè)計師,就是為以上所有這些處在不同位置的商家或品牌或平臺服務(wù)的。

我們的最高職責是跟運營、推廣、客服、渠道等各個環(huán)節(jié)一起,協(xié)助新面孔上榜,或者協(xié)助已上榜的它們往上走,再次就是幫它們維持原有位置和形象,最次就是至少不要讓它們消失在大眾視野里就夠了。

當然,身為電商設(shè)計的我們也是一樣的道理:我們是跟商家品牌和平臺同命運的,我們是多樣化的,我們也是面臨了諸多競爭的,我們也是希望能往前走的,或者一鳴驚人的,而不是消失在職業(yè)的歷史長河里。


大家在設(shè)計詳情頁的時候最常遇到的幾個問題是什么?


如果說首頁設(shè)計是線下門店的裝潢,那么線上的店鋪詳情頁設(shè)計就相當于是門店里所展示的各個產(chǎn)品的說明書了。

線下門店里有導購員,線上店鋪里有客服,但去門店購物的消費者是有地域和區(qū)域限制的,比如你很少會看到一個一線城市的白領(lǐng)會專門坐飛機來武漢武商廣場的 Gucci 專柜買包包,但是你卻能看到一個線上的奢侈品店鋪可以為來自世界各地的消費者提供購物服務(wù)。

門店里的導購員可以做到一對一服務(wù),消費者去門店逛可以看到實物,可以去觸摸,去試穿,去試用體驗,但是線上購物則做不到這些點,所以也就注定了詳情頁設(shè)計需要肩負起重任,要把每一個產(chǎn)品的賣點展示清楚,詳細情況介紹清楚,還要讓消費者感到可信。

如果你是大品牌的話,你的詳情頁設(shè)計還需要體現(xiàn)出品牌感、品質(zhì)感,不能看起來太掉價;如果你的產(chǎn)品目前正在搞促銷,你的詳情頁設(shè)計則得把促銷感體現(xiàn)出來;如果你的產(chǎn)品有優(yōu)于其他產(chǎn)品或品牌的賣點,你還得把差異化和產(chǎn)品賣點展示出來;如果你不希望顧客一點擊進來詳情頁就扭頭離開,你還得把詳情頁設(shè)計的耐看或有趣,信息直觀,瀏覽體驗好一點兒;

。。。。。。等等

而據(jù)我所觀察的,大部分在詳情頁設(shè)計這塊做的不太好的電商設(shè)計師們常犯的幾個錯誤,以及所欠缺的方面主要包含以下幾個方面:

  • 沒有創(chuàng)意和想法,只會到處去找模版套或者模仿;
  • 不知道去哪找參考或找的參考本身就不好;
  • 找到了合適的參考,但是卻模仿不出來,也不知道去哪找素材;
  • 非科班出身的設(shè)計師對色彩和排版都比較欠缺;
  • 好不容易把詳情頁頭圖設(shè)計好了,但是卻不知道如何銜接下面的產(chǎn)品展示部分了;
  • 不擅長寫文案也不擅長挖掘產(chǎn)品賣點;
  • 自己設(shè)計的詳情頁總感覺缺少一些質(zhì)感,不耐看;
  • 陰影不會處理,合成不擅長,修圖不會;
  • 不知道如何繪制或處理一些介紹產(chǎn)品結(jié)構(gòu)原理的內(nèi)部解剖圖;
  • 這類目會做了,但是換一個類目做卻不會了;
  • 不知道如何設(shè)計出耐看的,有質(zhì)感的,或者有趣的詳情頁;
  • 不知道如何把握品牌調(diào)性,把控促銷感和大牌感之間的平衡;

以上我總結(jié)出來的 12 個設(shè)計詳情頁常見的問題,大家自己可以對照著看看。

因為只有知道自己存在哪些問題了,你才能有針對性地去訓練和學習,你才會設(shè)計出老板或運營滿意的詳情頁,提高客戶轉(zhuǎn)化率和留存率的詳情頁,進而實現(xiàn)加薪或升職的可能性。


優(yōu)秀的詳情頁一般具備哪些特質(zhì)?


明白自身在做詳情頁設(shè)計的時候存在的問題,然后再對照著看看那些優(yōu)秀的吸引人的詳情頁設(shè)計所具備的一些特質(zhì),提升自己的審美,再通過訓練來培養(yǎng)自己的動手能力,那么自己才會得到快速的提升。

不過,那些網(wǎng)紅店鋪和大牌奢侈品的詳情頁設(shè)計我就不說了,畢竟能成為自帶流量的網(wǎng)紅的是少數(shù),能成為奢侈品的大牌也是少數(shù)。

所以網(wǎng)紅店鋪的詳情頁設(shè)計的再隨意,圖片就是手機自拍的,文字就是 word 文檔敲出來的也不影響銷量;大牌奢侈品店鋪的詳情頁就算設(shè)計的再簡單也不影響它賣高價,只要品牌 logo 那么一放,代言人往那一放,廣告使勁砸,商品是正品,圖片修圖修的完美點就夠了。

所以呢,這兩種極端特例其實是不太適用于我們這些常規(guī)的店鋪或品牌來玩的,所以我這篇文章就不分析它們了,我們只說那些常規(guī)的店鋪或品牌的詳情頁好了,這對我們來說更有參考價值。

那么那些優(yōu)秀的詳情頁一般具備哪些特質(zhì)呢?我們一起來看看:

1. 詳情頁的頭圖設(shè)計一定要抓人眼球

如何抓人眼球呢?要么是能準確的體現(xiàn)出產(chǎn)品的賣點,要么設(shè)計得有趣一點,要么就設(shè)計得有品牌調(diào)性一點,根據(jù)不同的目的和定位來決定。

比如一款包包,頭圖部分可以用合成的形式,把包包的容積大和多功能性特點展示出來:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 愛華仕雙肩母嬰包包

比如,洽洽的山核桃味和焦糖味瓜子,頭圖部分就把那種美味的口感要體現(xiàn)出來,讓人忍不住流口水的感覺:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 洽洽瓜子

比如,休閑食品的詳情頁頭圖設(shè)計,則可以把頭圖設(shè)計的趣味一點,給人一種邊吃邊玩的放松感覺:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 洽洽喀吱脆

當然,趣味的同時,也可以體現(xiàn)出產(chǎn)品制作原材料的新鮮感:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 洽洽山藥脆片

比如賣 suv 輪胎的詳情頁,你看下面這樣的頭圖設(shè)計,是不是感覺超酷超帥?深得 suv 車主有沒有?畢竟選擇開 suv 的人內(nèi)心深處一般都是有點追求酷和 man,自由和狂野感覺的人,不論男女。

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 威獅輪胎

再比如,頭圖部分也不一定要做的太炫技,就干凈、簡潔清透一點也行:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 海爾

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 直白吹風機

這種 ins 風格現(xiàn)在挺流行的,而且任何類目其實都適用于這種風格和調(diào)性,只要它想體現(xiàn)的是場景感,和生活品味。

實現(xiàn)形式也是多種多樣的,不管是攝影、C4D 還是合成的形式其實都可以做出來,主要考驗的是你的光影細節(jié)處理、透視和修圖能力了。

2. 整體詳情頁的設(shè)計調(diào)性要符合產(chǎn)品本身的特點

不知道大家發(fā)現(xiàn)沒有,其實你的產(chǎn)品的品牌、價格、功能等特質(zhì),就決定了你的文案應(yīng)該怎么去寫,而你的產(chǎn)品和品牌特質(zhì)以及文案,又決定了你的詳情頁頭圖的設(shè)計調(diào)性,而你的詳情頁頭圖的設(shè)計調(diào)性又決定了你下面內(nèi)容部分的設(shè)計調(diào)性。

它們是一環(huán)扣一環(huán)的,而且從上至下是協(xié)調(diào)統(tǒng)一的整體,比如:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 獅威輪胎&洽洽瓜子

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 直白吹風機

3. 產(chǎn)品的賣點和優(yōu)勢要清晰地展示出來

其實一個好的詳情頁頭圖設(shè)計就已經(jīng)把產(chǎn)品主要的賣點和優(yōu)勢展示出來了,但是涉及到更細致的一些結(jié)構(gòu)和細節(jié)部分,還是需要在下面繼續(xù)做展示和解析。

比如,我們來看一看不同類目的產(chǎn)品結(jié)構(gòu)和細節(jié)是如何展示的:

體現(xiàn)玩偶的布料材質(zhì):

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

展現(xiàn)吸奶器的工作原理,體現(xiàn)安全和溫和感:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

展現(xiàn)水箱的導流設(shè)計原理:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

展現(xiàn)輪胎的降噪原理和特質(zhì):

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

展示空氣凈化器的工作原理:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

體現(xiàn)紙尿褲的輕柔和透氣性:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

展示蒸奶器的阻隔污染功效:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

展示調(diào)奶器的過濾原理,展現(xiàn)其安全性能:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

展現(xiàn)空氣消毒器的工作原理:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

展現(xiàn)夾板夾頭發(fā)的絲滑感:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

展現(xiàn)電動牙刷的清潔效果:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

還有很多類目和優(yōu)秀的原理展示圖我就不繼續(xù)放了,大家平時多養(yǎng)成收集的習慣,給自己建立一個資料庫,當你自己要做設(shè)計的時候多去參考和模仿,久而久之也就信手拈來了。

而且不知道大家發(fā)現(xiàn)沒有,這些效果里面,有的是用合成完成的,有的是用手繪的形式完成的,還有的是直接用 C4D 建模的形式完成的,再還有更復(fù)雜的則需要多種方式結(jié)合來完成了。

所以,多看多積累是一方面,自己的手上功夫也需要加強哦。

4. 擅用圖標解說

很多優(yōu)秀的詳情頁設(shè)計里不可或缺的一個部分就是用圖標的形式來代替大段的文字描述,這樣圖文結(jié)合的形式不僅更美觀,而且可以讓頁面信息看起來更直觀。

而詳情頁里的圖標設(shè)計樣式跟店鋪首頁部分的優(yōu)惠券一樣的,是可以根據(jù)頁面的風格而設(shè)計成不同風格的,比如目前主流的一些圖標風格,如下圖所示:

簡筆畫線稿風格:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

為了不讓線稿圖標看起來太單調(diào),也可以結(jié)合一些小色塊或者換個顏色點綴試試看:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

而且線稿圖標也可以給他穿上不同的外衣,相當于是有個罩子把他們框起來展示,這取決于你的詳情頁風格是什么樣的了,比如:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

扁平風格的圖標:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

男性化,科技感的圖標風格:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

C4D 立體風格的圖標:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

其他還有很多風格和類型的詳情頁圖標設(shè)計我就不一一展示了,反正大家知道圖標的設(shè)計也是可以風格多種多樣就行了,這主要由你的詳情頁設(shè)計風格是什么樣,你自己會哪種實現(xiàn)手段,以及你的執(zhí)行時間夠不夠來決定。

5. 同一個系列的產(chǎn)品詳情頁,風格要保持統(tǒng)一性

前面我們都是分析的單個詳情頁的情況,實際上還應(yīng)該從整體來看。

比如無論是出于節(jié)省時間和人力成本的角度,還是從品牌視覺統(tǒng)一性的角度,同一個系列的產(chǎn)品詳情頁設(shè)計應(yīng)該要做到以下幾點:

  • 風格一致
  • 可模板化
  • 色彩統(tǒng)一
  • 板式構(gòu)圖統(tǒng)一

當然,同一個系列的產(chǎn)品詳情頁設(shè)計看起來統(tǒng)一的同時,在氛圍點綴物和一些局部細節(jié)上允許有略微的差異,也是很有必要的,這樣才不會顯得視覺疲勞。

如下圖所示:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 上花間集,下毛戈平

6. 擅于引導用戶一直往下看的

最重要的是,優(yōu)秀的詳情頁絕不只是好看這么簡單,最重要的是擅于引導用戶一直往下看,因為詳情頁一般都很長,這么長的頁面你還愿意一直往下滑,這是需要很多技巧的,而且看完了就想買的那種。

而要做到這一點,考驗的則是設(shè)計師以下幾個方面的綜合能力體現(xiàn):

  • 前期對客戶的喜好和產(chǎn)品特性有足夠地了解;
  • 從攝影環(huán)節(jié)開始前,設(shè)計師就會去溝通好自己的創(chuàng)意要求、產(chǎn)品角度、拍攝場景,以及全程跟進:詳情頁頭圖部分的設(shè)計就要把用戶的吸引力抓。ㄖ劣谠趺醋プ∥仪懊嬲f了);
  • 文字排版的舒適度和節(jié)奏感,符合手機用戶的閱讀習慣;
  • 整體配色的舒適度和節(jié)奏感;
  • 配圖的節(jié)奏感把控,要有大有小,注意留白;
  • 產(chǎn)品修圖很重要;
  • 整體的細節(jié)把控(包括執(zhí)行手法和完整度、光影、質(zhì)感肌理、文字大小和間距、留白、修圖等)

如下圖所示:

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 巴布豆紙尿褲&某品牌兒童睡衣

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 恰恰&某品牌酸奶

為什么你設(shè)計的詳情頁不耐看,也沒有購買欲?

△ 洽洽

還有很多案例我就不一一展示了,大家只要記住,幾乎所有的優(yōu)秀的詳情頁都具備以上這些特質(zhì)就好了。


電商視覺美工視頻教程
我要自學網(wǎng)商城 ¥90 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC