案例解析詳情頁設計的技巧

案例解析詳情頁設計的技巧

　　電商視覺比拼的不僅僅是視覺技巧了，而是怎么讓客戶愉悅，最重要的是如何讓客戶在愉悅的同時可以快速地下單。我們自己在設計詳情頁頁面的時候，一定要注意頁面設計的基礎三原則：

　　基本原則一：信息圖像化

　　文字是循序漸進的處理，同時能被記住的只有20%，而圖片同步被大腦處理能記住的是100%，所以詳情頁面的描述應盡可能地圖像化。

　　基本原則二：高效表達

　　內容不要過于臃腫，表達要清晰有條理，簡單直接。不要影響到頁面打開速度。頁面載入時間過長，會影響銷量。

　　基本原則三：要掌握客戶最關心的點

　　你所認為客戶最關心的地方，往往并不是客戶最關心的;不同的產品客戶所需求、所關注的地方不同，不同的產品顧客關注的地方也是各不相同。

　　了解了設計的基礎原則之后，我們一起來看看：一個頁面如何從抓住眼球到最終成交的邏輯，讓頁面深入人心，讓頁面可以幫助你說服你的消費者。

　　一、吸引顧客 留住顧客

　　客戶的需求：產品獨特的賣點(與別人的產品不同的地方，產品優勢)、活動價格優惠、不同的服務(購買產品能得到什么享受、服務)、痛點(解決問題煩惱)等。

　　比如說，服裝類的產品顧客可能關注的是衣服的款式，模特穿著的樣子，衣服的尺寸以及衣服的尺碼，模特的身材體重以及他穿著的衣服的大小碼對比。這樣才能得出來自己穿起來是什么樣子。

　　而功能性產品比如說保健品之類的，顧客關注的就是本件產品到底有什么功能。你的產品肯定要一個突出點，比方說緩解疲勞。需要打出來一點吸引人的地方，你的產品與別人的為何不同，優勢在于哪里。這里主要可以分為：近期熱點事件、網絡流行、新概念、主題氛圍、生活主張、實際利益、好奇心、品牌的嫁接、新品上市、產品創意、強視覺、名人效益、限時限量等。

　　以下簡單舉例：

　　左邊的產品是冬天的衣服。怎么吸引買家看下去?冬天買衣服除了看款式，更重要的是保暖。圖片營造出一種溫暖的氣氛，暖色的背景外加女模特頭上的燈光，給人以溫暖的感覺，符合顧客心里的想法。

　　右邊的產品是夏天帶的防曬頭盔，為什么會帶?就是因為夏天太曬，但是帶上難免會有點熱，這時候用冰塊的背景和雪山給人以冰涼的感覺，對抗炎熱夏天，不僅防曬更強調清涼舒爽。

　　以上就是主題氛圍，主要還是給顧客以代入感。

　　上圖左邊的產品是保健品，賣點是可以延緩衰老，這就是顧客所能得到的實際利益。設計上因為是保健品，注重天然、自然，所以背景用的水果，然后前面的女人面帶微笑顯得很年輕，整體給顧客一種年輕健康的感覺。

　　右邊的圖是卸妝水，除了卸妝以外可以細致毛孔，補水緊致，清爽溫和，這些都是買卸妝水的顧客所需要的。而實際的功能和利益是需要文字和圖片結合的，這類產品一般文案都比較多，所以更要注意文案的排版，一定要有規律，要做到有序、有層次、有重點，同時也別忘了運用背景的烘托效果。文案和背景的綠色清新相呼應，讓人深刻地感知到產品的功能性。

　　上圖左邊的產品是百歲山礦泉水，不需要過多的修飾，就一句話：水中貴族百歲山，富含多種微量元素。我們的水就是好，就是水中的貴族，就是和別人的不同。此類產品主要吸引人的地方就是文案。

　　右邊的產品是無煙不粘鍋，可以看做是生活的主張：你用了這個東西逼格就高了!此類的設計主要是背景烘托文案，突出文案來吸引顧客。也可以放幾張顧客使用的照片，強調大家都在使用，引發跟風從眾的心理。

　　上圖左邊的產品是運動時候帶的那種耳機，所以以強視覺的方式展現，就是類似于電影海報的方式，吸引顧客的眼球，讓顧客有看下去的欲望。但此類設計比較考驗閱歷和合成功底，不僅僅需要好看，更需要和產品以及文案相貼合。

　　右邊的產品就是很常見的新品上市，這也是一種很常見的吸引顧客的方式。人都是有一種喜新厭舊心理和對新鮮事物的好奇心，這類的整體詳情頁應該圍繞新品、新功能、新感受來做一個整體布局。

　　二、提升顧客興趣 確認需求

　　上面提到的只是吸引顧客看下去的方法，顧客看詳情頁面主要還是想買東西的，因此必須要有顧客想要看到的元素。

　　產品的參數一定要有，并且寫清楚。有的產品還需要測量方法等，方便顧客選擇合適的尺碼，這樣第一顯得專業，第二也方便顧客選擇合適的尺寸。

　　鞋類產品最好在產品參數里面加上選碼須知。如果產品比正常尺碼小的話，一定要標注出來。

　　產品的細節一定要盡量展示得詳細一點。比如：包包的各種角度展示，然后內里、拉鏈部分。如果是品牌的產品，品牌的LOGO一定要展示清楚，產品的走線一定要展示清楚，這樣才能提升產品整體的品質感。

　　衣服的細節盡可能地展示清楚，也可以在旁邊加一個全景展示和細節的對比。排版上面可以不拘一格，更具有引導性，像上圖右邊使用的就是線的引導。

　　上圖左邊的產品是女包，背景里的海鷗、大海、飛揚的女人裙角，給人一種奢華大氣的感覺。不用文字描述，就能顯示出產品的品質。這就是視覺設計簡單易懂的原理，千萬不要大篇幅的文字說明，既不顯得高端，又會讓人抓不住重點。

【案例解析詳情頁設計的技巧】相關文章：

美工設計：店鋪詳情頁設計技巧03-13

淘寶高轉化詳情頁的打造技巧03-07

唱歌技巧解析03-18

演講的技巧解析03-05

客戶服務案例與技巧03-12

播音技巧及方法解析03-16

口語學習技巧解析12-07

客戶服務案例與技巧02-26

攝影的基礎技巧解析03-12