“我想要消費者能感覺到我們產(chǎn)品帶來的那種干凈和溫馨，”

“但是顏色整體太素，太冷淡了，缺點生活氣息?！?

“這版倒是挺溫馨的，就是產(chǎn)品的那種清潔能力，你得再突出一下！”

“你這改的跟使用說明書一樣，我都說了溫馨！居家!！”?

“溫馨不是花里胡哨，你行不行，還說是專業(yè)的？”??

……

來來來，電腦給您，您來。

大家做清潔電器詳情頁的時候，這種話應(yīng)該沒少在甲方口中聽到吧。

?

頁面如何設(shè)計，才能體現(xiàn)產(chǎn)品“讓生活變得干凈”，這本身就是一個抽象的問題。

?

統(tǒng)合點、線、面、色調(diào)、光影、布局等不同要素，相互交錯，影響，利用畫面呈現(xiàn)將“干凈”的感覺轉(zhuǎn)移。

?

這叫做將抽象概念具象化，我們在電商設(shè)計中經(jīng)常用到這種表現(xiàn)形式。

?

就比如，我們要展現(xiàn)時間，就會加入鐘表；體現(xiàn)氛圍或溫度，就會利用冷暖配色。

那么干凈又要怎么做？

?

大家不妨先想一下這個問題。

?

這次，我們找了三組風(fēng)格不同的清潔類小家電，話不多說，我們直接開始。

先看第一組，美的智能掃地機器人。

美的選擇將家里最常見的灰塵毛發(fā)進行簡單的卡通IP搭建，讓頁面以講故事的形式展現(xiàn)產(chǎn)品優(yōu)勢。

?

創(chuàng)意點和趣味性都非常強，很容易從同質(zhì)化的清潔類家電頁面脫穎而出，讓觀眾記住。

老規(guī)矩，我們先梳邏輯。

?

這類電器產(chǎn)品的一大特點，就是要將產(chǎn)品的功能屬性講清楚。

?

因為很多消費者其實對產(chǎn)品的詳細功能不是很清楚，比如說掃地機器人的吸力、跟常規(guī)吸塵器的差別，能吸到一些死角等等。

?

這些才是消費者真正的痛點，所以電器詳情頁，一定要懂得揚長避短，最大化發(fā)揮產(chǎn)品優(yōu)勢。

根據(jù)這個底層邏輯，我們看看這組頁面的內(nèi)容排列。

?

首屏對產(chǎn)品進行整體展示，打出“颶風(fēng)出擊，全屋塵屑橫掃干凈”的核心優(yōu)勢。

第二屏是對生活中出現(xiàn)的灰塵雜物進行卡通IP設(shè)計，引出消費痛點。

?

灰塵君、毛發(fā)君、米粒肥、堅果宅，可愛度直接拉爆。每個IP下面配上簡要的文字，介紹特性，各自的形象也就立體豐滿了起來。

然后，就是利用這四個可愛的卡通形象訴諸理性。

?

對掃地機器人分屏展開詳細介紹，以更為具體的功能觸達觀眾的消費心理。

最后是產(chǎn)品的細節(jié)補充和參數(shù)說明，內(nèi)容邏輯清晰明確。

內(nèi)容搞定了，我們再來看視覺呈現(xiàn)。

?

首屏借用了一點點魚眼透視，增加畫面空間感。機器人發(fā)出的颶風(fēng)配合四處驚慌而逃的卡通塵屑，展現(xiàn)產(chǎn)品清潔功能。

?

色彩處理上選擇了飽和度較低的霧霾藍和原木色，構(gòu)建出一種居家化的溫馨氛圍。

功能展現(xiàn)方式靈活多樣，有效避免觀眾視覺疲勞。

?

小景搭建展現(xiàn)屋內(nèi)全貌，搭配文案和底部icon，強化產(chǎn)品遠程智控，隨時清掃全屋的優(yōu)勢。

網(wǎng)格元素模擬全息圖像，提升頁面的科技感。

?

定位標(biāo)識配合光效疊加，表明產(chǎn)品精準(zhǔn)導(dǎo)航，建立清掃路徑的性能。

三維建模打造出編織材質(zhì)的質(zhì)感，將地毯中的纏繞成團的毛發(fā)放大，直擊用戶痛點。

?

掃地機的增壓模式通過光束的加入得到了具象化呈現(xiàn)。毛發(fā)君的姿態(tài)變化、光束中的灰塵細節(jié)，都突出了風(fēng)力的強勁。

折線圖直接對數(shù)據(jù)進行說明，配合前后的頁面呈現(xiàn)，驗證產(chǎn)品的澎湃吸力，讓整組頁面有趣的同時，更為嚴謹，更具有說服力。

總的來說，美的這組頁面邏輯清晰，風(fēng)格一致，光影、細節(jié)刻畫到位，卡通IP的加入讓頁面更顯童趣，非常值得大家學(xué)習(xí)和借鑒。

這組看完了，我們來看第二組。

這一組詳情頁內(nèi)容上跟上一組類似，都遵循著總分的邏輯。

?

首屏指明產(chǎn)品定位，二屏總結(jié)性能優(yōu)勢，然后就是分屏對優(yōu)勢進行闡述，最后展現(xiàn)細節(jié)，補充產(chǎn)品包裝、參數(shù)等附加信息。

視覺呈現(xiàn)上，黑白灰的整體配色加上星球、宇航員、太空艙等元素，很明顯就是太空宇宙的風(fēng)格。

?

首屏運用黑色展現(xiàn)宇宙空間感，邊角壓暗處理豐富畫面層次。

?

中心白色發(fā)光體，增強畫面明暗對比，同時形成視覺引導(dǎo)，將觀眾視覺重心快速聚焦在前方的吸塵器上。

功能特點展現(xiàn)時，很好的展現(xiàn)契合了消費者的需求。

?

一般提到吸塵器，大家都會考慮到三個問題：吸力、重量、續(xù)航時間，這也是這組詳情頁需要強調(diào)的重點。

所以，我們會發(fā)現(xiàn)這三屏的設(shè)計創(chuàng)意在整組界面中，是非常突出的。

?

吸力這一屏，利用對比的表現(xiàn)手法。

?

通過吸過之處的干凈與未吸之處的滿滿灰塵，形成強烈的視覺沖擊，直觀展現(xiàn)產(chǎn)品的優(yōu)質(zhì)性能。

材質(zhì)這塊，人物、桌子都處于失重的狀態(tài)，通過主體的漂浮呼應(yīng)航空主題，突出產(chǎn)品的輕盈手感。

最后，續(xù)航能力這張頁面，未來主義建筑搭建產(chǎn)品應(yīng)用場景，同一人物在建筑中以不同形態(tài)手握吸塵器反復(fù)出現(xiàn)。

?

這種一人分飾多角的表現(xiàn)形式，很容易為觀眾帶來一種時間上的流動錯覺，從而將畫面由靜態(tài)轉(zhuǎn)變?yōu)閯討B(tài)。

如果說上一組海報的設(shè)計是宇宙風(fēng)為主，然后微微偏向未來主義。

?

那下面這組就是純純的未來科幻風(fēng)格，先總體概覽一下這組界面。

內(nèi)容邏輯上，這一組的板塊劃分要更清晰一些。

?

先是主圖、然后分點展現(xiàn)功能和使用場景激起用戶的興趣，再花費兩屏的篇幅對產(chǎn)品核心優(yōu)勢進行強化，進一步解決目標(biāo)受眾的使用需求。

最后，是對產(chǎn)品細節(jié)的呈現(xiàn)，并通過16+的核心專利完成信任背書。

視覺呈現(xiàn)上，這一組的首屏利用了魚眼鏡頭的畸變。在設(shè)計邏輯合理的前提下，最大化的展現(xiàn)了產(chǎn)品。

?

（劃重點，這種方式一般甲方會很喜歡?。。。?/span>

icon用了擬物化的呈現(xiàn)方式。

?

簡化不同功能應(yīng)用場景，提取設(shè)計要素，再加入箭頭，增強icon設(shè)計感。

利用色調(diào)差異，展現(xiàn)傳統(tǒng)清潔的麻煩及自家產(chǎn)品的優(yōu)勢。

?

這種對比的手法能更好的突出產(chǎn)品特征，增加畫面的感染力。

使用場景上先是模擬了觸摸顯示屏的風(fēng)格，展現(xiàn)可適用的不同衣物，為頁面更添科幻感和未來感。

而后，加入大量生活化的視覺呈現(xiàn)。

?

咖啡、狗狗、小朋友，這類出現(xiàn)在我們?nèi)粘Ｉ钪械脑兀芸焖僖l(fā)觀眾共情，獲得消費者認同。

產(chǎn)品其余結(jié)構(gòu)透明化處理，只留下想突出的重點。

?

這種設(shè)計表現(xiàn)能在快速集中觀眾注意力的同時，保證畫面的干凈整潔，被很多設(shè)計大佬所偏愛。

三組看完，你最喜歡哪一組的設(shè)計風(fēng)格？

?

可能有細心的朋友會發(fā)現(xiàn)，我們最近的詳情頁賞析，總提到一個專業(yè)名詞：具象化。

?

不是我們形容詞匱乏，是具象化這個概念在電商設(shè)計中真的很重要。

與大眾普遍認知中的藝術(shù)創(chuàng)作不同，對電商詳情頁的設(shè)計而言，實用性和藝術(shù)感，缺一不可。

?

而具象化就是展現(xiàn)實用的最好方式。

?

對觀眾而言，具象化的呈現(xiàn)方式認知成本更低，更容易被大腦識別和理解，代入感也更強，更容易感同身受。

站在消費者視角，以觀眾認可的方式去梳理自己的設(shè)計思路。

?

挖掘產(chǎn)品優(yōu)勢，展現(xiàn)產(chǎn)品性能，融入生活化場景應(yīng)用，從感性角度引發(fā)共情，到理性數(shù)據(jù)說服消費。

?

通過元素、色彩、結(jié)構(gòu)、光影等一系列組合拳，達到作品與產(chǎn)品的最佳適配。

?

這一套操作的底層邏輯就是具象化。

如果盲目自嗨，只強調(diào)自我滿足，但是用戶完全看不懂。

?

那估計這位電商設(shè)計師離收到公司的畢業(yè)證書，可能也就不遠了。