942
從人性的角度談談詳情頁設計的N種玩法
TA的每日心情
鬱悶2017-2-10 09:38
簽到天數: 5 天
[LV.2]偶爾看看I
店鋪dudan10威望2 發消息寫在前麵以前我花了很多篇幅寫Banner和專題頁設計方麵的文章，現在感覺是時候多寫一些詳情頁方麵的文章了，雖然服務於平台的設計師可能幾乎不會需要設計詳情頁，但是對於服務於服務於店鋪的設計師來說，詳情頁幾乎是非做不可的。但跟以前一樣，我會從營銷／心理／人性／文案／排版等多個角度，用我自己的語言來解說詳情頁設計裏麵所蘊藏的奧秘。在進入正題之前，我依舊是先給大家列一個提綱：1、詳情頁的結構2、文案的形式3、以人性的角度解讀詳情頁設計4、詳情頁設計注意事項
1、詳情頁的結構以淘寶天貓京東這類綜合類電商網站為例，一個完整的產品詳情頁的作用就是告訴消費者這幾點：我是誰／我長什麼樣／我能為你做什麼／為什麼我值得購買／你買我就對了。所以詳情頁一般由以下部分組成：首圖Banner＋產品信息＋產品外觀展示＋產品細節展示＋產品功效介紹（比如各種自身的優勢）＋其他（比如某某推薦／各種證書／物流信息／買家秀／售後說明等等）。以一款日本大豆冰淇淋詳情頁為例（其實我不懂日文啊，我是看圖片猜測內容的，應該八九不離十）：
其實如果換做其他人來設計這款產品的詳情頁的話，中間至少也該插入一些產品各個角度的外包裝圖展示以及細節展示啊，如果有真人食用的一些體現好玩美味的場景照片就好了，可是這裏並沒有這麼做，而是主要強調產品的健康營養。這其實也說明，同一款產品不同的人去做他所想要表現的側重點可能就是不一樣的，側重點不一樣你能吸引到的消費者群體就不一樣，按我那個思路吸引到的可能是喜歡好吃又好玩又好看的買家，而以目前的思路吸引到的可能是注重健康飲食的買家。反過來，不同品類的產品詳情頁的側重點和展示方式當然也會不一樣了，主要體現在以下2個方麵：板塊順序：以服裝類目舉例，一個完整的詳情頁一般都包含首圖／衣服資料／尺寸／模特圖／白底圖／細節圖／洗滌說明／買家秀／物流信息等等，這裏除了首圖必須出現在頁麵頭部的這個位置以外，其他有幾塊內容的位置是可以根據需要互換的，比如產品資料和信息既可以放在服裝圖展示前麵也可以放在它後麵。板塊內容：再還有除了頭圖／產品信息／產品展示等板塊以外，其它很多內容貌似都是可以去掉的（比如買家秀物流信息等等都是可要可不要的），主要看這些內容展示對於消費者來說是不是必須，對於店家來說有沒有優勢或必要，沒有優勢的話還不如不放，比如有些買家秀又不好看你硬要放詳情頁裏不是相當於自黑嘛？（當然有些店鋪會放一些假的買家秀。。。）
（詳情頁板塊內容最簡潔省事的莫過於一些大牌官網或自認為是大牌的旗艦店詳情頁了，除了白底圖和一些說明性文字以外，其他幾乎什麼都沒有，你去搜索蘋果旗艦店也一樣）回到正題，對於一般店鋪或品牌來說整個詳情頁看下來，一個完整有效的詳情頁也該是這種套路結構：一開始利用首圖抓住消費者的眼球，緊接著再通過各種功能講解讓消費者了解產品／美圖展示讓消費者深陷其中／危害舉例讓消費者產生恐懼心理等等，從而讓他意識到買你們家產品很有必要，緊接著再乘熱打鐵給出詳細使用說明或專家建議體現貼心服務，最後給出一些口碑推薦或者品牌認證啥的打消消費者最後的信任顧慮，然後再看看你們家的評價也不錯，價格也合適，順其自然地就下單咯。
2、文案的形式詳情頁的文案對於我們設計詳情頁來說其實很重要的，因為產品決定文案，文案又決定了你的詳情頁怎麼設計。文案相當於解說員根據產品氣質的解說，產品氣質不一樣那麼自然文案給人的氣質也就不一樣咯，比如你賣的產品是非常卡哇伊的，那你的文案語言自然是活潑一點而非嚴肅一點，你的產品若是非常高檔那在語言上自然是優雅高貴一點而非自由散漫一點。根據這些規律和特性，我估且將詳情頁文案歸納為這幾類先，後麵有新的發現我再補充：擬人的／自嗨的／搞笑的／文藝的／耍酷的／平淡的等等，下麵我給大家舉一些例子：擬人式的：就好比將產品擬人化，以產品的口吻來自我推銷，適用於任何想走親和力路線的品類，類目不限。以我年初設計的一款零食詳情頁為例，雖然這款零食的禮盒看起來是這樣的紅紅火火畫風。。。
但我還是決定將文案擬人化，采用可愛美味親和力一點的設計風格包裝它，最終效果圖如下：
自嗨的：說直白一點就是，這些文案我們常人是不會這麼說的，因為會顯得太裝太端著了，常常是一堆拗口的形容詞修飾詞語，適用於任何想走高端嚴謹路線的類目，於是類目不限，比如數碼科技服飾鞋包護膚美妝等。比如看看蘋果的文案：
文案：豈止於大（直白點說就是，大）
文案：輕於時代，先於時代（直白點說就是，輕便又先進）再比如看看海藍之謎的文案：
文案：匯聚稀世能量，肌膚煥變奇跡（直白點說就是，能讓你的皮膚變好）
文案：匠心寧煉稀世珍萃（直白點說就是，很珍貴的海藻提取物）搞笑的：這種文案畫風往往比較逗b或者無厘頭，讓人感覺很jian但很過癮，適用於任何可以拿來搞笑或惡搞的類目，比如一些二次元周邊產品／成人用品／生活用品等等。比如這個歪瓜出品店裏的產品／文案／設計風格基本都是這種搞笑賤賤的畫風。。
文藝的：這種文案啊看完就給人感覺有一種深入骨髓的文藝氣息，適用於任何走文藝路線的類目，比如茶葉家居服飾鞋包等。淘寶上有很多文藝的店，比如步履不停：
白：沒有一切是自然發生
文案：文字是膠印的，很有立體感。近似色不會太突兀，和口號不一樣，這些文字適合悄悄地讀。耍酷的：這種文案就給人一種，你買了我的產品你就是天下第一酷，你最拽你最與眾不同的感覺，叛逆期的青少年們最喜歡了，適用於定位是這類人群的類目。比如3年前那支阿迪達斯的廣告：“太不巧，這就是我”他們說：“太粉了。” “太粗放。” “太放肆。” “太浮誇。” “太假。” “太快。” “太呆。” “太娘。” “太man。” “太完美。” “太幼稚。” “太狂熱。” “太懶。” “太怪。” “太晚。”……眾說紛紜，而你隻需要回一句：太不巧，這就是我。
後來很多品牌都模仿了這支廣告，色彩／形式／創意／文案等等，說句題外話，我發現品牌隻要是體現好玩炫酷年輕，基本都喜歡往這個套路走。。。然而我現在對這種已經不太感冒了，幾年前我的確是會有一種共鳴的感覺。。賣萌的：給人乖巧可愛的感覺，尤其是反差萌文案效果最好，讓人忍不住想要多看幾眼或分享給朋友，比如故宮淘寶，那些皇帝和娘娘們給人的感覺明明是很高冷的形象，怎麼畫風會這麼萌呢？一下子拉近了與消費者之間的距離：
平淡的：這種文案就比較直白但又保守，給人中規中矩和呆板無趣的感覺，大部分反響平平的店鋪詳情頁文案基本也都是這類的，大眾化／沒創意無法與消費者產生任何情感共鳴，好處就是省事不囉嗦，很純粹的一手交錢一手交貨的買賣關係。
這種我就不放案例了，因為一抓一大把。。除此之外，文案也受具有最高話語權的老板或運營店長的喜好和情操所操控，這就好比一個習慣了大金鏈子粗手表每天一頓小騷烤的老板是不可能會理解以及允許你給他整一堆悲春傷秋鬱鬱寡歡的文藝氣息文案的，因為根本就不是一路人嘛。3、以人性的角度解讀詳情頁設計在前一篇文章裏我就提到了，一款詳情頁就相當於一個線下展櫃的一角配了一名推銷員，那既然涉及到推銷，就肯定會涉及到利用人性了，而詳情頁設計師的作用就是利用這些人性把詳情頁以文字＋圖片結合的形式，設計得讓人忍不住想要買買買～下麵我就從以下10個人性的角度來給大家分析下詳情頁設計的那些套路吧：好色／好吃／貪婪／恐懼／懶惰／從眾／自戀／炫耀／好奇心／同情心。好色：關於人性的這一點是男女通用的，男人看到漂亮或大胸細腰長腿的性感女人往往都不由自主的會多看兩眼，女人看到帥氣或性感強壯的男人也會犯花癡，這也是為什麼你會看到不管啥類目的詳情頁，隻要是可以放模特的地方就會盡量多放美好肉體或臉蛋代言人的原因。尤其是內衣／成人用品／健身等等，無不都在用美好肉體誘惑人：
花瓣搜索一下內衣詳情頁設計，基本都是這樣的：
不過上麵這個方向多是讓人感覺買了這件產品你也可以擁有如此好身材去吸引異性關注，但現在很多人的思想都解放了，即便是內衣也可以是為了取悅自己而不是為了取悅異性，所以美觀／舒適／健康也可以成為詳情頁要突出表達的訴求點，而不隻是表達性感。好吃：幾乎沒人能夠拒絕美食的誘惑，而人是怎麼判斷它好不好吃的呢？當然是最先通過視覺或嗅覺上感覺它好吃，然後你才會有真的想吃他的衝動，對於詳情頁設計，他是無法散發出氣味的，所以隻能通過視覺上，食品類目就無需多說了，比如通透有光澤三文魚，色澤豐富表皮附著有水珠的葡萄，熱氣騰騰顆粒飽滿的白米飯，咬一口就流出鮮汁的湯包等等，所有這些光澤感／水珠／熱氣／流汁／多彩色等等都可以作為氛圍點綴元素，激發用戶好吃的本性，讓他們看到圖片就口水直流。。。哈哈～
不止是食品類目，很多護膚美妝／飾品玩具／服飾鞋包也會跨界利用人的好吃的本性來做設計，主要利用色彩上或產品裏某種成分的質感，比如蜂蜜／蘆薈／海藻精華啦：
再比如一些馬卡龍色／糖果色的服飾鞋包，再比如一些美妝護膚品看起來想要咬一口一樣。
貪婪：人都是貪婪的，你如果原來一直免費如果突然收費了就會被部分人罵，你給了便宜別人下次隻想要更便宜，你提供了好的服務下次別人會想要更好的服務（這就好比我在網上免費分享寫文章也近2年了，卻時不時會遇到一些貪婪的人，一邊吸收著我提供的知識一邊還要挑三揀四地對我說一些很難聽的話，有時稍微寫的內容不合他胃口就叫我換個運營或罵人，拜托這是我個人利用業餘時間運用的公眾號誒，我一個人又要碼字又要運營還要工作，我自認為已經夠負責和用心在堅持分享知識了，有些人不懂感恩不為知識付費也就罷了，至少嘴巴積點德，畢竟我不欠你們任何人）。商家抓住人性是貪婪的這一特點後，時不時都會整一些滿減／打折／送禮品／依次漲價的活動，往往能起到不錯的轉化效果（但不宜太過於頻繁，要不然相當於路邊的清倉大甩賣，總是說最後三天，然後沒準過了3年人家還在那清倉大甩賣呢，那誰信啊～）。這也是為什麼有些詳情頁裏會有這些優惠贈送內容，或者是采用大紅大黃配色加粗字體的原因，因為給人感覺熱鬧促銷撒：
恐懼：一些用於改善人的樣貌、身體健康狀況、生活質量、人生安全等等方麵的類目產品尤其喜歡用人性中恐懼的這一點，比如一些牙齒美白／減肥產品／去死皮／去黑頭／治療腰酸背痛／防脫發／傷疤修複的產品等等，其詳情頁總會有一塊內容是你不忍直視的，有時甚至讓人感覺很倒胃口忍不住想要關掉頁麵：
（我已經被惡心到了。。你們繼續看文章好嘛不要再看這張圖片了。。）所以利用人的恐懼心理還是要把握好度，要不然人家人家被你惡心到了誰還願意繼續看下去買你的產品啊，所以這種板塊也多是放在詳情頁尾部，不會放在前麵部分，因為這些畫麵導致消費者關掉頁麵的風險太大了。前幾天有位妹子讓我給他看一個防脫發的詳情頁設計也是，我一打開滿屏的禿頂畫麵，頓時整個人胃口不好了立馬關掉了頁麵，所以我就在想，其實我們利用人的恐懼心理的時候是不是可以稍微收斂一點或者稍微有美感一些。。。懶惰：舉個例子，以前還沒有出現風扇和空調的時候，我們在夏天都是手裏拿一把扇子扇風的，後來幾乎家家都有了風扇和空調，要不是沒電或怕費電，誰還會拿扇子在那扇啊，你躺沙發上不動，讓風扇或空調動多舒服啊。某種程度上來說，滿足用戶懶惰的需求，無非就是節省了他的時間／讓他減少運動，從而帶給他愉悅或舒服的感受，所以你才會看到很多便攜式產品／某某智能掃地機、某某智能冰箱空調洗衣機等等的詳情頁設計幾乎都是在竭盡全力地給用戶傳達這些看起來很溫馨或愉悅的感受，結合產品使用場景圖給消費者一種代入感，仿佛他買了這款產品也可以像畫麵裏的主人公一樣那麼舒適那麼瀟灑，於是忍不住買買買。
從眾：以前聽過一個笑話，講的是路上有一個人呆呆的看著天空，後麵路過的人也都會不由自主地跟著他一起看天空，最後大家都在看天空，可是呢，其實天空裏什麼都沒有，很多人根本也不知道自己在看啥，隻是別人都在看所以自己也跟著看了，這就是從眾，也叫跟風。這種從眾的人性特點在詳情頁設計裏也比較常見，比如在詳情頁裏放一些買家秀照片或者買家感言，再或者放些好評，甚至有些賣家會做一些買家剛剛提交訂單的信息(當然基本是做的假的啦，隻是一張gif圖，幾個名重複出現而已），不過大品牌應該很少會這麼做，一方麵是不需要這麼做，另一方麵，如果圖片做的比較好看也就罷了，如果做的不好看，就會感覺有點掉價，微商產品估計最喜歡這麼做了。
自戀：發自內心地講，幾乎沒有人會認為自己不漂亮不聰明不可愛不特別不討人喜歡吧，有時即使是嘴上說自己這不好那不好，但是內心深處應該還是覺得自己不錯的，要不然為什麼你自己自黑可以但是當別人真評價你不好的時候你為什麼會心裏不舒服呢？從這個意義上講，人其實都是自戀的。既然如此，覺得自己應該配得上更好看的衣服更好的服務更好的生活等等也便順理成章了，比如你會看到很多美妝護膚服飾鞋包汽車等等詳情頁的設計都會用到一些皮膚好得不得了／笑起來自信的不得了／造型酷得不得了／身材好得不得了／頭發柔順的不得了等等的人設，目的就是讓你產生錯覺，若你買了我的產品，你就會跟我一樣迷人自信成功。
從這一維度講，利用自戀的人性特點和利用恐懼的人性特點完全就是2個相反的方向了，前者拔高你恭維你，後者貶低你刺激你，不管是哪一種都該適可而止，要不然會起反作用了，因為前者是通過給予較高的期望，後者是通過給予較低的評價，超過一定界限都會招來差口碑或令人反感，這個界限如何定就看你自己能接受到什麼程度了。
炫耀：人都有炫耀的欲望，比如炫耀自己的品味／財富／地位／人脈／相貌／身材／勤奮／學識／等等，隻是說性格喜好不一樣他所愛炫耀的東西和隱晦程度就不一樣。這個體現在詳情頁設計裏就是，讓你的詳情頁盡可能的特別，要麼美出新高度，要麼醜到無與倫比，再或者玩法新穎，比如衛龍作為一款辣條，當年居然模仿蘋果風，就引起了軒然大波。
所以出現了一個很奇怪的現象，以前你會覺得吃辣條很屌絲，自己偷偷吃就得了，現在卻發現很多人買了衛龍辣條會發到朋友圈秀一番，不得不說這種定位轉變真的是蠻成功的。總之不管你怎麼整，要想滿足別人愛炫耀的心理你就得給別人製造談資的可能性，這就好比，如果你就連醜都醜的普普通通的那誰會願意多看你幾眼或多把你掛在嘴邊呢？
好奇心：這個體現在好幾個方麵，比如詳情頁的內容結構和文案上，可以不斷的拋出疑問，而且是一環扣一環，讓人忍不住想要找到答案，想要繼續看下去，還有時候我們會看到一些模特圖或構圖，經常都是隻出現一部分臉／被陷害了，我知道這種多半是避免侵權，但有時確實讓人感覺很好奇，想弄清真麵目。
同情心：同情弱者也是一種，比如詳情頁裏講些與個人的樸實悲情或樸實的故事，會讓人有一種想要幫他一把，或者覺得他老是值得幸賴的感覺，於是不由自主買買買，比如我發現很多茶葉詳情頁就是走這種套路：
但同樣是茶葉，有些人走的就是文藝有格調的路線：
總之，關於詳情頁設計，你有很多選擇方向和玩法。4、詳情頁設計注意事項詳情頁設計說簡單也簡單，說難也難，因為除了要設計得讓消費者有購買欲望以外，你還得注意用戶體驗，防範字體／素材是否侵權了，還得避免使用極限詞違反廣告法被人抓住把柄投訴了，為了避免以上情況的發生，以下我總結了一些詳情頁設計注意事項，希望對大家有幫助，另外也歡迎大家在評論裏補充說明：（1）詳情頁的尺寸PC端詳情頁尺寸：京東自營750px，京東第三方790px；高度：不限；移動端詳情頁尺寸：寬度：750px≤寬度≤1242px（也有人直接拿pc端750px或790px寬度適配，貌似都可以）；高度：不限（為了便於頁麵加載，後台上傳圖片的時候，京東詳情頁每張切圖後的高度不能超過1000p）；
移動首頁尺寸：寬度：480px≤寬度≤1242px（不過官方建議寬度在750px以上效果更佳）；高度：不限；
其實天貓淘寶京東等等平台每改版一次尺寸就會有相應變化，因為大屏幕尺寸手機的占有率越來越高了，平台的每次改版其實也是在順應時代的發展需要以及增加了商家和用的使用體驗，所以你會發現，現在PC和移動端的詳情頁尺寸基本是通用的了。如果不清楚怎麼回事的話，我們可以看下百度統計裏顯示的移動設備分辨率排名：
（2）豎版思維根據京東2016年發布的《2016中國電商消費者行為報告》的數據顯示，從一線城市到六線城市，移動端訂單占比平均已達80%以上，甚至有一些比較極端的案例，比如平時我跟一些店鋪老板溝通了解的情況是，因為他們的移動端訂單占比高達90%以上，所以PC端詳情頁設計他們基本已經直接放棄了，而是著重打理移動端詳情頁(所以現在很多店鋪幹脆直接以移動端詳情頁設計為主了）。而用戶在移動端瀏覽詳情頁和在pc端瀏覽詳情頁體驗是不一樣的，比如手機屏幕基本都是豎屏的，而且尺寸偏小，一隻手掌即可掌握，而PC屏幕現在普遍都是23寸往上走了，屏幕越來越大，基本是橫屏，這也就衍生了一個移動端詳情頁設計要遵循豎版思維的概念，也就是文案以及產品圖可能更適合上下排版而不是左右排版：比如這款魅族PRO 6 Plus手機的詳情頁，在其官網是這樣左右排版的：
但在移動端是這樣上下排版的：
而且隨著智能手機占有率和使用頻率的提升，帶來的是移動端訂單占比的提高和各大電商平台的改版升級，對於商家來說其實工作量也減少了，因為移動端變成了主戰場，pc端的詳情頁尺寸跟移動端是一樣的，可以優先設計移動端，然後PC端幹脆直接套用。不過這種豎版思維的排版方式無疑也會增加詳情頁的高度了，一般來說移動端詳情頁最多不要超過8-10屏（以iphone7plus為例，10屏就差不多就是22080px高度了），自己做完頁麵後把圖放在手機裏自己感受下，如果你自己都覺得太長了看完很煩躁，那麼用戶肯定就更加沒有耐心繼續看了（不過也有特例，比如你的設計很有趣很美很好玩，再長那都不是事兒了，你能吸引用戶一直看下去就行）。（3）關於字體時不時我都會在自己的設計群裏看到一些自己設計的詳情頁也使用了非免費字體而被告侵權要賠償的消息，我自己也遇到過這個情況，之前本來是抱著僥幸的心理，而且那個字體也確實很好看我就用了，結果沒想到時隔半年還是被告知需要賠償，總之，還是小心為妙，所以這裏我把之前灰晝前輩匯總的一些可以免費使用的字體發出來，供大家參考。
還有一款龐門正道字體也是可以免費使用的，其他還有一些免費字體歡迎打擊補充。（4）新廣告法在新廣告法出台之前，基本上所有電商平台和網店想用啥形容詞或利益點都以，比如世界第一／全球頂尖／百分百全棉／全場五折／原價多少現價多少等等等，但新廣告法出來之後，大家都老實了，除非你真的是世界第一你才能說這個詞，要不然你隻能學老羅在前麵加幾個字“可能是”世界第一這樣子了。大家應該也時不時聽說了某某網店某某美工因為誤用了極限詞被職業舉報師抓住了把柄要求賠償的，如果你不想這種事情發生在自己生上那就乖乖熟悉新廣告法，嚴格遵守相關電商平台所定下的規矩咯。另外你也可以看下我一年多以前針對新廣告法寫的一篇思考文章：我要為新廣告法說幾句公道話～（5）圖片及素材處理很多設計師做設計的時候麵臨的問題就是不知道去哪找靈感創意，去哪找素材，找了素材又怕被告侵權，所以下麵依舊是把我以前給大家匯總的一些關於免費素材圖片參考的網址發給大家看下，需要的時候可以拿出來看看：《做設計的麵條》閱讀數破萬的幹貨文章及我常逛的網址匯總，不容錯過！！～寫在最後總之，在現有國名審美參差不齊的階段，詳情頁設計是不宜光從美醜的層麵來定義它的好壞的，而是要看適不適合，詳情頁它也並不是必須以現有的圖文結合的形式存在的，將來很有可能會有其他形式替代它甚至不需要它，因為產品有不同的功能／品牌／氣質／定位等等，新的事物也在不斷湧現，人性也是多種多樣的，結合人性特定找到符合自家詳情頁走的方向比較靠譜。最後更新：2017-08-14 12:06:27