让场景变干净，运营看了都说妙的详情页原来长这样【杰视帮】
“我想要消费者能感觉到我们产品带来的那种干净和温馨，”
“但是颜色整体太素，太冷淡了，缺点生活气息。”
“这版倒是挺温馨的，就是产品的那种清洁能力，你得再突出一下！”
“你这改的跟使用说明书一样，我都说了温馨！居家!！”
“温馨不是花里胡哨，你行不行，还说是专业的？”
……
来来来，电脑给您，您来。
大家做清洁电器详情页的时候，这种话应该没少在甲方口中听到吧。
页面如何设计，才能体现产品“让生活变得干净”，这本身就是一个抽象的问题。
统合点、线、面、色调、光影、布局等不同要素，相互交错，影响，利用画面呈现将“干净”的感觉转移。
这叫做将抽象概念具象化，我们在电商设计中经常用到这种表现形式。
就比如，我们要展现时间，就会加入钟表；体现氛围或温度，就会利用冷暖配色。
那么干净又要怎么做？
大家不妨先想一下这个问题。
这次，我们找了三组风格不同的清洁类小家电，话不多说，我们直接开始。
先看第一组，美的智能扫地机器人。
美的选择将家里最常见的灰尘毛发进行简单的卡通IP搭建，让页面以讲故事的形式展现产品优势。
创意点和趣味性都非常强，很容易从同质化的清洁类家电页面脱颖而出，让观众记住。
老规矩，我们先梳逻辑。
这类电器产品的一大特点，就是要将产品的功能属性讲清楚。
因为很多消费者其实对产品的详细功能不是很清楚，比如说扫地机器人的吸力、跟常规吸尘器的差别，能吸到一些死角等等。
这些才是消费者真正的痛点，所以电器详情页，一定要懂得扬长避短，最大化发挥产品优势。
根据这个底层逻辑，我们看看这组页面的内容排列。
首屏对产品进行整体展示，打出“飓风出击，全屋尘屑横扫干净”的核心优势。
第二屏是对生活中出现的灰尘杂物进行卡通IP设计，引出消费痛点。
灰尘君、毛发君、米粒肥、坚果宅，可爱度直接拉爆。每个IP下面配上简要的文字，介绍特性，各自的形象也就立体丰满了起来。
然后，就是利用这四个可爱的卡通形象诉诸理性。
对扫地机器人分屏展开详细介绍，以更为具体的功能触达观众的消费心理。
最后是产品的细节补充和参数说明，内容逻辑清晰明确。
内容搞定了，我们再来看视觉呈现。
首屏借用了一点点鱼眼透视，增加画面空间感。机器人发出的飓风配合四处惊慌而逃的卡通尘屑，展现产品清洁功能。
色彩处理上选择了饱和度较低的雾霾蓝和原木色，构建出一种居家化的温馨氛围。
功能展现方式灵活多样，有效避免观众视觉疲劳。
小景搭建展现屋内全貌，搭配文案和底部icon，强化产品远程智控，随时清扫全屋的优势。
网格元素模拟全息图像，提升页面的科技感。
定位标识配合光效叠加，表明产品精准导航，建立清扫路径的性能。
三维建模打造出编织材质的质感，将地毯中的缠绕成团的毛发放大，直击用户痛点。
扫地机的增压模式通过光束的加入得到了具象化呈现。毛发君的姿态变化、光束中的灰尘细节，都突出了风力的强劲。
折线图直接对数据进行说明，配合前后的页面呈现，验证产品的澎湃吸力，让整组页面有趣的同时，更为严谨，更具有说服力。
总的来说，美的这组页面逻辑清晰，风格一致，光影、细节刻画到位，卡通IP的加入让页面更显童趣，非常值得大家学习和借鉴。
这组看完了，我们来看第二组。
这一组详情页内容上跟上一组类似，都遵循着总分的逻辑。
首屏指明产品定位，二屏总结性能优势，然后就是分屏对优势进行阐述，最后展现细节，补充产品包装、参数等附加信息。
视觉呈现上，黑白灰的整体配色加上星球、宇航员、太空舱等元素，很明显就是太空宇宙的风格。
首屏运用黑色展现宇宙空间感，边角压暗处理丰富画面层次。
中心白色发光体，增强画面明暗对比，同时形成视觉引导，将观众视觉重心快速聚焦在前方的吸尘器上。
功能特点展现时，很好的展现契合了消费者的需求。
一般提到吸尘器，大家都会考虑到三个问题：吸力、重量、续航时间，这也是这组详情页需要强调的重点。
所以，我们会发现这三屏的设计创意在整组界面中，是非常突出的。
吸力这一屏，利用对比的表现手法。
通过吸过之处的干净与未吸之处的满满灰尘，形成强烈的视觉冲击，直观展现产品的优质性能。
材质这块，人物、桌子都处于失重的状态，通过主体的漂浮呼应航空主题，突出产品的轻盈手感。
最后，续航能力这张页面，未来主义建筑搭建产品应用场景，同一人物在建筑中以不同形态手握吸尘器反复出现。
这种一人分饰多角的表现形式，很容易为观众带来一种时间上的流动错觉，从而将画面由静态转变为动态。
如果说上一组海报的设计是宇宙风为主，然后微微偏向未来主义。
那下面这组就是纯纯的未来科幻风格，先总体概览一下这组界面。
内容逻辑上，这一组的板块划分要更清晰一些。
先是主图、然后分点展现功能和使用场景激起用户的兴趣，再花费两屏的篇幅对产品核心优势进行强化，进一步解决目标受众的使用需求。
最后，是对产品细节的呈现，并通过16+的核心专利完成信任背书。
视觉呈现上，这一组的首屏利用了鱼眼镜头的畸变。在设计逻辑合理的前提下，最大化的展现了产品。
（划重点，这种方式一般甲方会很喜欢！！！）
icon用了拟物化的呈现方式。
简化不同功能应用场景，提取设计要素，再加入箭头，增强icon设计感。
利用色调差异，展现传统清洁的麻烦及自家产品的优势。
这种对比的手法能更好的突出产品特征，增加画面的感染力。
使用场景上先是模拟了触摸显示屏的风格，展现可适用的不同衣物，为页面更添科幻感和未来感。
而后，加入大量生活化的视觉呈现。
咖啡、狗狗、小朋友，这类出现在我们日常生活中的元素，能快速引发观众共情，获得消费者认同。
产品其余结构透明化处理，只留下想突出的重点。
这种设计表现能在快速集中观众注意力的同时，保证画面的干净整洁，被很多设计大佬所偏爱。
三组看完，你最喜欢哪一组的设计风格？
可能有细心的朋友会发现，我们最近的详情页赏析，总提到一个专业名词：具象化。
不是我们形容词匮乏，是具象化这个概念在电商设计中真的很重要。
与大众普遍认知中的艺术创作不同，对电商详情页的设计而言，实用性和艺术感，缺一不可。
而具象化就是展现实用的最好方式。
对观众而言，具象化的呈现方式认知成本更低，更容易被大脑识别和理解，代入感也更强，更容易感同身受。
站在消费者视角，以观众认可的方式去梳理自己的设计思路。
挖掘产品优势，展现产品性能，融入生活化场景应用，从感性角度引发共情，到理性数据说服消费。
通过元素、色彩、结构、光影等一系列组合拳，达到作品与产品的最佳适配。
这一套操作的底层逻辑就是具象化。
如果盲目自嗨，只强调自我满足，但是用户完全看不懂。
那估计这位电商设计师离收到公司的毕业证书，可能也就不远了。
