本文依然是關(guān)于詳情頁(yè)設(shè)計(jì)，涉及到了排版／構(gòu)圖／色彩／氛圍點(diǎn)綴／字體等多個(gè)方面。以下是我總結(jié)了可以讓你的詳情頁(yè)脫穎而出的四個(gè)系列的套路，興許對(duì)你們有用！enjoy~

一、頭圖一定要吸引人

那么，怎樣才能吸引人呢？我給大家總結(jié)了一些關(guān)鍵詞：

關(guān)鍵字：大

頭圖得有一個(gè)占比比較大的作為主體，無(wú)論是產(chǎn)品／模特還是文字，可以第一眼就抓住人眼球。

（模特作為主體）

（產(chǎn)品作為主體）

?（文字作為主體）

?（當(dāng)然也可以局部放大）

關(guān)鍵字：破

如果你不想畫面太過(guò)于保守和單調(diào)，可以嘗試打破它，比如將規(guī)矩圖形異化，或者讓產(chǎn)品放在界限以外。

（這是我年初做的一款茶葉詳情頁(yè)，當(dāng)時(shí)的包裝無(wú)論是顏色還是樣式都是比較普通的，作為設(shè)計(jì)師的我能做的是盡量讓它更具創(chuàng)意一點(diǎn)，于是就打破了它。）

關(guān)鍵字：美

能用美女或帥哥的地方千萬(wàn)別浪費(fèi)了，因?yàn)楫?dāng)用戶在瀏覽這些頁(yè)面的時(shí)候，會(huì)感覺是有一位美女或帥哥在對(duì)你解說(shuō)或者讓用戶覺得自己也能成為美女或帥哥一樣，使人身心愉悅，比單純放產(chǎn)品圖更能打動(dòng)人（前提是你確實(shí)用的是吸引人的美女或帥哥，所以審美真的很重要啊～）

如果可能的話，盡量用品質(zhì)好一點(diǎn)的產(chǎn)品圖或背景素材，使畫面顯得更加美觀（當(dāng)然了，這個(gè)還是需要審美能力……）

關(guān)鍵字：飄

有時(shí)在畫面里添加一些飄動(dòng)的元素，可以增加畫面的層次感和熱鬧氛圍。

關(guān)鍵詞：腦洞

這個(gè)腦洞，可以是技術(shù)方面的也可以創(chuàng)意想法方面的，技術(shù)方面的比如合成／手繪／C4D與構(gòu)圖的運(yùn)用，創(chuàng)意想法方面其實(shí)就因人而異了，并沒有什么固定的套路，然后你能用你所掌握的技術(shù)把這些創(chuàng)意想法表現(xiàn)出來(lái)就行。

來(lái)自小文同學(xué)的手繪＋合成作品

作品來(lái)自behance的C4D＋合成作品，不過(guò)這個(gè)花費(fèi)時(shí)間應(yīng)該不少。

來(lái)自behance上的TIMAWORKS團(tuán)隊(duì)的作品，用到了C4D＋攝影＋合成＋手繪

不過(guò)但凡是涉及到這么多腦洞和技能方面的作品所需要花費(fèi)的時(shí)間和精力都會(huì)比平時(shí)多很多，而目前大部分詳情頁(yè)設(shè)計(jì)給的時(shí)間是估計(jì)2-7天，更有一些設(shè)計(jì)師一天要套版十幾個(gè)詳情頁(yè)，所以如果時(shí)間不允許的話就自己私下做練習(xí)來(lái)讓自己的作品更具吸引力吧，每天抽出一點(diǎn)時(shí)間，一個(gè)星期或一個(gè)月下來(lái)也夠了。

其他還有一些關(guān)鍵詞我們以后再補(bǔ)充！

關(guān)鍵字：光影

沒有光影的畫面會(huì)顯得干癟癟的，光影的存在會(huì)給畫面增加更多真實(shí)感和質(zhì)感，賞心悅目，檔次一下就提升了。

相同一款產(chǎn)品，有光影和沒光影給人的感覺差別真的很大，如下圖所示：

（加了光影和背景紋理后，產(chǎn)品整體的氣質(zhì)和檔次都提升了，當(dāng)然光影的形式也是千種萬(wàn)種的，主要取決于你自己想怎么表現(xiàn)了）

但實(shí)際產(chǎn)品長(zhǎng)這樣。。。如果你知道實(shí)物長(zhǎng)這樣你估計(jì)就不會(huì)買了對(duì)不對(duì)？所以美真的很重要。。。，況且還是三四百塊錢的護(hù)膚品呢～

二、整體風(fēng)格要連貫

那么怎樣才能吸引人呢？我給大家總結(jié)了一些關(guān)鍵詞：

關(guān)鍵詞：提取

既然詳情頁(yè)是為介紹產(chǎn)品而用的，那么我們?cè)谧鲈O(shè)計(jì)的時(shí)候當(dāng)然就可以用提取法了，比如提取產(chǎn)品包裝上的元素或形狀，提取產(chǎn)品的色彩或質(zhì)感，提取產(chǎn)品的成分或功效，然后應(yīng)用在詳情頁(yè)設(shè)計(jì)里，例如：

元素，我們可以從產(chǎn)品包裝上提取元素應(yīng)用在詳情頁(yè)設(shè)計(jì)里，保證整體風(fēng)格連貫性。

形狀，我們也可以從產(chǎn)品的形狀著手，提取基本型進(jìn)行構(gòu)圖創(chuàng)作，同様也可以保證統(tǒng)一連貫性。

色彩，如果你想要頁(yè)面在色彩上保持連貫，也可以從產(chǎn)品本身的顏色出發(fā)，比如采用近似色或?qū)Ρ壬部梢浴?/p>

質(zhì)感，善用產(chǎn)品的質(zhì)地或包裝的質(zhì)感紋理，并提取出來(lái)做詳情頁(yè)背景用。

成分，食品美裝護(hù)膚品詳情頁(yè)最喜歡用產(chǎn)品的成分來(lái)做文章了，比如草本植物／蘆薈海藻提取物／蜂蜜牛奶等等。

功效，比如補(bǔ)水功效，就會(huì)在頁(yè)面里用到一些水的特效做氛圍點(diǎn)綴。

三、整體氣質(zhì)要搭調(diào)

那么怎樣才能吸引人呢？我給大家總結(jié)了一些關(guān)鍵詞：

關(guān)鍵詞：協(xié)調(diào)

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

（1）高冷的大牌的氣質(zhì)

畫面要么很簡(jiǎn)潔有質(zhì)感，有么很華麗有光澤：

（2）活潑可愛的氣質(zhì)

比如可愛的模特／字體／或粉能的顏色／手繪元素等。

（3）熱鬧促銷的氣質(zhì)

這種類型的頁(yè)面往往色彩豐富艷麗，而且畫面豐富又具有動(dòng)感（因?yàn)榛ò昃W(wǎng)今天一天都打不開，所以我沒有找到合適的案例，姑且先把這個(gè)以前的案例banner拿來(lái)舉例吧）。

（4）文藝素雅的氣質(zhì)

這種頁(yè)面色彩不會(huì)臺(tái)艷麗也不會(huì)特別多彩，往往質(zhì)感也比較柔和，給人寧?kù)o的感覺。

（5）年輕時(shí)尚的氣質(zhì)

這種氣質(zhì)的頁(yè)面往往棱角比較分明，色彩上貌似沒什么太多要求，主要看怎么搭配，但至少會(huì)有一些亮色點(diǎn)綴。

（6）科技質(zhì)感的氣質(zhì)

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

還有很多其他氣質(zhì)大家自行體會(huì)吧～

而氣質(zhì)上的協(xié)調(diào)又基本是由色彩／元素／字體／形狀／質(zhì)感／氛圍等等方面的協(xié)調(diào)整體塑造出來(lái)的一種感覺。

比如色彩上，產(chǎn)品如果是這樣比較女性化的色彩，那你就不可能去使用男性化的色彩去包裝它，這會(huì)顯得很突兀，反之亦然。

比如形狀上，如果產(chǎn)品本身的形狀是比較柔和的曲線，你卻使用太過(guò)菱角的圖形元素裝飾頁(yè)面那就會(huì)顯得不協(xié)調(diào)，而用同樣比較柔和的曲線會(huì)感覺更協(xié)調(diào)。

比如元素上，我們其實(shí)在做設(shè)計(jì)的時(shí)候都是可以從產(chǎn)品的包裝或功效上提取元素使用的。

其實(shí)不知道大家發(fā)現(xiàn)沒有，產(chǎn)品的品牌定位或功效往往決定了他的外包裝設(shè)計(jì)，而他的外包裝設(shè)計(jì)或者說(shuō)vi設(shè)計(jì)又會(huì)決定她的詳情頁(yè)設(shè)計(jì)，所以電商設(shè)計(jì)師以后的發(fā)展趨勢(shì)可能不止是要關(guān)注線上就夠了，有時(shí)間的話平時(shí)也留意下線下傳統(tǒng)平面設(shè)計(jì)方面的知識(shí)吧，現(xiàn)在很多店鋪在品牌視覺統(tǒng)一方面的意識(shí)還是比較欠缺的，而這也正好是設(shè)計(jì)師們可以去發(fā)揮的機(jī)會(huì)。

四、整體瀏覽器體驗(yàn)要好

那么怎樣才能吸引人呢？我給大家總結(jié)了一些關(guān)鍵詞：

關(guān)鍵詞：人性化

如果你能做到前面幾步，那么你可能會(huì)產(chǎn)出一份視覺不錯(cuò)的詳情頁(yè)設(shè)計(jì)，但光只是做到視覺上的美觀還不足以打動(dòng)人去購(gòu)買你的產(chǎn)品，你還得給人更好的瀏覽體驗(yàn)才對(duì)，具體表現(xiàn)在以下幾個(gè)方面：

（1）在排版布局上

形式不能過(guò)于浮夸，那么一些比較常用的布局方式有哪些呢？我給大家匯總了一下，其實(shí)跟專題頁(yè)設(shè)計(jì)布局排版是類似的，我干脆拿以前總結(jié)的樣式給大家看一下：

左右對(duì)比形式的專題頁(yè)，常見于需要表現(xiàn)出PK或者VS對(duì)決類的專題頁(yè)設(shè)計(jì)。

S形的專題頁(yè)，這種形式的專題頁(yè)基本上不管什么需求的設(shè)計(jì)都可以嘗試，因?yàn)樗啾扔谄戒佒睌⒌男问郊炔粫?huì)顯得那么呆板，同時(shí)閱讀起來(lái)也很流暢，舉例：

Z形的專題頁(yè)，這種形式的專題頁(yè)其實(shí)跟S形的作用是類似的，只是說(shuō)這種Z形會(huì)比S形硬朗，更適合用作一些比較男性化的風(fēng)格頁(yè)面或者品類里，比如電子器械／汽車／男士護(hù)膚／游戲等，舉例：

1字形的專題頁(yè)，有一種硬朗和厚重的感覺，這種形式的專題頁(yè)除非是有如下圖所示的這種高質(zhì)量模特大圖或產(chǎn)品圖鎮(zhèn)樓，一般情況下很少用到，尤其是在賣貨類型的專題頁(yè)里，可能會(huì)顯得背景有點(diǎn)搶鏡了。

常規(guī)樓層類型的專題頁(yè)，這種頁(yè)面會(huì)顯得比較簡(jiǎn)潔好把控，主要在于背景顏色要有深－淺－深－淺的節(jié)奏，同時(shí)每一個(gè)樓層都是單獨(dú)的模塊，有利于信息閱讀。

同理，樓層類型的專題頁(yè)還可以做一些一些細(xì)微的演變，比如從上至下，背景不做切割，始終是一個(gè)整體，只是保證中間的內(nèi)容在一個(gè)安全數(shù)值以內(nèi)就好了，比如京東的中間內(nèi)容區(qū)域一般是990Px：

還有在原來(lái)的基礎(chǔ)上，在某一塊樓層里做一些排版小變化，比如切分成一小塊一小塊的自由排版：

自由排版類型的專題頁(yè)，這種專題頁(yè)設(shè)計(jì)比較適合那些想走高逼格路線的時(shí)尚服飾類目，同時(shí)這種設(shè)計(jì)往往是看著簡(jiǎn)潔，但是對(duì)設(shè)計(jì)師的排版功力要求比較高，不建議新手或沒什么功力的人嘗試：

（2）在字號(hào)大小的選擇上

目前移動(dòng)端詳情頁(yè)的設(shè)計(jì)才是重中之重，所以為了便于大家手機(jī)閱讀更舒適，最小字號(hào)不能低于20號(hào)，最大字號(hào)大家就可以自己估摸著來(lái)了，也可以參考各大平臺(tái)app的最小字號(hào)：

（3）在字體的選擇上

盡量選擇便于識(shí)別的字體，但這個(gè)便不便于識(shí)別也是相對(duì)的，比如以蘋方簡(jiǎn)纖細(xì)體為例，如果是放在比較簡(jiǎn)潔的背景上，它其實(shí)也是一款便于識(shí)別的字體，如標(biāo)識(shí)1處，但如果放在復(fù)雜背景上它就不是一款便于識(shí)別的字體，如標(biāo)識(shí)2處：

但是如果放在畫面比較復(fù)雜的背景圖片上，那他就不太便于識(shí)別了，閱讀的體驗(yàn)就會(huì)不太好。

其實(shí)主要記住下面幾個(gè)對(duì)比規(guī)律就好了：

• 背景復(fù)雜，字體選粗一點(diǎn)的或筆畫規(guī)整一點(diǎn)的比較好；
• 背景簡(jiǎn)單，字體選擇就多一些，不過(guò)也要考慮氣質(zhì)搭不搭調(diào)；
• 背景顏色暗，字體顏色就該亮一點(diǎn)；
• 背景顏色亮，字體顏色就該深一點(diǎn)；
• 不管背景復(fù)雜與否或明還是暗，字體越大越便于識(shí)別，不過(guò)也要考慮美觀與否。

（4）在色彩選擇上

顏色越深給人感覺就越神秘或壓抑或沉穩(wěn)有質(zhì)感，顏色越明亮給人感覺就越年輕活力或輕浮或張揚(yáng)，在用色上其實(shí)最忌諱的是一暗到底或者一亮到底，要有明有暗才會(huì)比較透氣或耐看，讓人感覺愉悅。

比如，對(duì)下下方的內(nèi)衣背景顏色看看，黑色背景顯得很沉寂，藍(lán)色背景顯得很清爽：

另外可以建議大家去百度一下色彩構(gòu)成里的九大調(diào)相關(guān)的知識(shí)，這里我就不科普啦。

寫在最后

詳情頁(yè)雖然跟專題頁(yè)和首頁(yè)設(shè)計(jì)一樣，都是很長(zhǎng)的的圖，但是詳情頁(yè)設(shè)計(jì)只是對(duì)某一款產(chǎn)品的介紹和展示，而且大多數(shù)時(shí)候都是需要拿來(lái)做模版使用的（其他產(chǎn)品可以直接套用），而專題頁(yè)和首頁(yè)設(shè)計(jì)則至少會(huì)展示2款產(chǎn)品以上，而且主要是以某個(gè)活動(dòng)主題為主線，同時(shí)展示各種產(chǎn)品名稱／品牌／規(guī)格／價(jià)格等基本信息用，更詳細(xì)的產(chǎn)品介紹內(nèi)容則要在詳情頁(yè)里進(jìn)行。

這就好比，詳情頁(yè)設(shè)計(jì)里其實(shí)就只有產(chǎn)品這一個(gè)主角，而在專題頁(yè)或首頁(yè)設(shè)計(jì)里卻可能有好幾個(gè)主角和一堆配角。前者你只需要對(duì)一款產(chǎn)品進(jìn)行解說(shuō)，你所有的目的只是為了介紹它，而后者你首先要吆喝一下這家店里或街上有哪些是主角（重點(diǎn)推薦產(chǎn)品），然后還要把一整個(gè)門店或一整條街進(jìn)行解說(shuō)一遍（商品列表展示）。

所以哪個(gè)更難搞定一些？這就仁者見仁智者見智了，其實(shí)都可以互相借鑒。

還有哦，雖然我每篇文章都會(huì)給出很多新思路和方法，但是如果你不去運(yùn)用不去做練習(xí)也是沒有用的，所以還是動(dòng)手練起來(lái)吧！～～

#專欄作家#

做設(shè)計(jì)的面條，公眾號(hào)：做設(shè)計(jì)的面條，人人都是產(chǎn)品經(jīng)理專欄作家。一位擅長(zhǎng)將電商及banner設(shè)計(jì)講得最透徹易懂的妹子，有趣有料會(huì)拍照，歡迎互相交流。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 攝圖網(wǎng)，基于 CC0 協(xié)議