跑鞋详情页这么设计，甲方看了直呼高手！【杰视帮】
前几天的帖子里，我们分享了年初和特步携手合作的【321跑步节】活动页面的视觉策划。
帖子发布后，群里有同学聊起了运动产品类目的页面设计。
“服饰鞋包不比母婴和食品，压根没啥设计的地方。”
在印象里，神仙打架到互“卷”的电商设计，战场好像只停留在母婴、美食、厨具等类目，而在服装、鞋包类目好像签订了停战协议一般，很少看到更电商风的页面。
这很大程度是由产品属性差异所决定的。
以食品类目为例，食品所传达的核心要义是美味，但美味作为一种味觉，不能直观地体现在画面中。
所以，设计师们往往会加入各种元素，设计各种场景，大费周折个把月，只为了实现一个目的：
味觉可视化
而服装和鞋包类的产品则并不需要经过这个转变。
大部分时候，他们的第一卖点就是视觉上的好看不好看。
因此，华丽的元素设计稍不注意不仅不能烘托出产品，反而会抢了产品的主角光环，影响产品的视觉呈现。
所以，即使在电商平台上，不少服装类目的页面设计依然走的是杂志风。
毕竟，爱屋及乌是人的天性，衣服穿在高颜值的模特身上的帅气，大家本能地就会当成是自己穿上的效果。
这么看来，服饰和鞋包类目好像确实不需要做电商化的设计了？找点好看的模特拍好一点就可以交稿了呗？
虽然类目差距很大，但实际在设计时，我们依然可以把这些热门类目里的创作逻辑套用在其中。
不理解？那我们展开聊聊。
今天继续在鞋包这个类目深耕，我在网上收集了两张不同创作逻辑的运动鞋详情页设计，我们一起来欣赏一下。
首先是第一套，先总体浏览一下。
这套详情页给我的第一感受：
很粉嫩，很潮，很少女。
而作为斐乐的一款复古跑鞋详情页，在页面风格选择上，这款详情页选择了一个电商设计中比较少有的风格：
蒸汽波。
在首屏上，这款详情页就充满了蒸汽波的风格。
在这里做一个小科普：
蒸气波（Vaporwave）是赛博朋克（Cyberpunk）风格所衍生出的一种分支风格，其融合了复古、前卫和混合等视觉特征，通常以石膏雕塑、早期电脑界面、热带植物、动漫形象等元素，通过拼贴、结构和打码等手法进行创作。
这是复古主义与未来主义正面碰撞所诞生出来的设计风格，可以很好烘托出复古跑鞋的新潮感。
蒸汽波的视觉效果固然很好，但由于其风格中罗马柱和石膏像等元素的复杂细节，直接套用在产品海报中，很容易偏离海报的视觉重心。
因此，这套详情页在首屏设计上，借鉴了蒸汽波的形式，但是在石膏等元素添加时，刻意弱化了石膏的细节特征，降低对比度，保证了海报的层次感和聚焦性。
在欣赏技法设计之前，我们先来看看这款详情页的创意逻辑。
由于首屏的视觉和文案都更偏向观感和情绪，所以在第二屏，通过功能性文案的介绍，更理性地展示了这个产品的属性和卖点：
这里多达5排的主文案卖点，也是为了更好地统领后续的页面内容：
美、时尚、潮流风向标。
因此，在这一屏后面，紧接着，不是这款跑鞋的结构或科技含量，而是多样的马卡龙配色：
以及模特上身效果图。
通过产品与应用场景的展示，将消费者的购买欲望挑逗起来以后，才进入相对理性的产品卖点展示。
大家发现没有，在前两屏确定了产品的主打卖点后，在功能点展示的区域，整体的文案风格和页面逻辑依旧围绕着“高颜值、新潮”的关键词。
关于穿着舒适度和穿戴方便等功能性卖点，也是直接被排列到了最后展现。
理清楚了详情页的设计逻辑，再回过头来看看它的技法表现。
看得出来，设计上为了让这款详情页精致而不乱眼，设计师可是费了不少的心思。
首先是上文说的蒸汽波元素的外形提取与细节简化，巧妙解决了蒸汽波元素抢镜的问题；
其次是配色上的巧妙，参考蒸汽波的迷幻系配色，浅紫色与樱色搭配的主色系页面整体上就非常少女感，更能虏获产品受众的芳心；
再者是元素的搭配上，由于整体配色用了相对复杂的樱色与蓝紫色系，因此，在装饰元素设计上就需要用简单纯粹的元素维持画面的平衡感。
让画面饱满又不能太乱，作者巧妙地借助底纹网格的设计解决了这一看似矛盾的难题。
此外，还有一些点线元素的结合、渐变的圆环、环形的文字，以及镂空的文字也用来适当点缀着页面视觉。
你看，同样是以展示产品颜值作为卖点，这款详情页找到了一种更具新鲜感的设计方式放大了这款产品潮流颜值的卖点。
从感性的颜值呈现到理性的高颜值组成机制，循序渐进，再借助视觉设计进一步渗透消费者内心，最终成功促使消费者为产品的颜值买单。
此外，鞋类产品的详情页设计逻辑，也未必一定要围绕产品颜值上优先做文章。
比如下面这套运动鞋的详情页。
相比第一款详情页的软萌与少女心，这款详情页给我的第一感受：
科技、硬核。
我们先从详情页逻辑的角度赏析一下这套页面。
首屏文案非常契合现在电商文案的趋势：
说人话。
将产品的核心卖点直接作为首屏的主文案，强调这款鞋的功能性卖点：软。
中间的几屏，则是围绕“软”这个卖点大做文章，分论点阐释。
首先是借国家标准等权威认证做信任背书，再通过一系列具体的实验数据，进一步加强产品科技力和有效性，只为告诉消费者：
这款跑鞋，为什么这么软。
甚至聚焦到分子结构，强化卖点论证。
解释完这款跑鞋背后的科技力，再来给消费者做认知同频：
为什么好的跑鞋需要这么软？
通过第二点的科普与同频，让消费认可跑鞋“软”的重要性后，再次强化自身产品卖点，不仅科技力到位，各种细节设计同样用心，软无止境。
而对于产品外形、配色，以及上身效果图的展示，则是挪到了详情页最后两屏。
逻辑梳理完，我们再来从技法的角度再做一轮赏析。
首屏的视觉设计非常可圈可点。
借用气泡元素让消费者更好地理解到软的质感，而对气泡元素酸性设计风格的附加让整体海报更加新潮与年轻化。
除了借助气泡元素展现，字体设计上也选择了转角更加圆滑的矮胖字体，让文案更具想象空间。
而这款页面在配色和装饰元素上，则大走科技风。
冷灰色色调能联想到影视中未来主义实验室画面，这种色调带来的情绪也更加理性清爽；
由点线元素组成的装饰性边框和底纹则是还原了产品图纸，强化了画面的科技力，同时还很好地解决了每一屏画面的衔接与统一度问题。
为了多维度地强化详情页的科技感，设计师还用产品解构、草图展示以及线稿风格等形式强化了画面的数形美。
这款详情页在设计逻辑和设计风格上和第一款详情页可以说是截然不同，但都不失为一款优秀的详情页。
作为一款功能性展示详情页，整个页面在主卖点展示后，依照【软的原因】→【软的好处】→【软之外的优势】循序渐进。
不仅刺激了意向消费者的购物欲，甚至还主动挖掘着非消费者的购买需求。
看完这两款风格迥异的跑鞋详情页设计，你更喜欢哪一款呢？
作为设计师，我们不能只是看个热闹。
梳理页面底层逻辑的目的是为了找到共通点，提炼出可复制的设计方法论。
不管是此前熟悉类目的详情页设计，还是这两款跑鞋详情页，做详情页设计前，最重要都是：
核心卖点提炼。
提炼出核心卖点，再做分卖点衍生，分卖点可以是验证核心卖点，也可以是多方面强化核心卖点。
分卖点提炼后，再将他们按照一定的逻辑顺序排列好主次，这样，我们详情页的核心内容就完成了。
只有做好一点，不管是后续的文案创作还是视觉策划，才有核心的骨架支撑。
至于结构上的【激发兴趣】、【建立信任】、【即刻下单】，如果大家感兴趣，以后我们接着聊。
大家喜欢这样的详情页赏析环节吗？
大家还想看什么类目的详情页赏析？
对于上述两款详情页中涉及到的技法，有没有你想学的呢？
如果大家有任何相关的需求，都欢迎在评论区告诉我们。
