可爱即是正义！这些详情页设计得也太可爱了吧（详情页的制作要点）

转自公众号：杰视帮各位，肯德基的可达鸭，你们最近抢到了吗？

我们运营部拼尽全员之力，最后也只有隔壁黄俊老师抢到一只没有灵魂的皮卡丘八音盒。

今天又是望鸭流泪的一天。

这样一只傻憨憨，扭着扭着，就扭出了我们对这个世界的美好憧憬。

/ `- G8 @" o3 ^1 ]- G) T5 t! x

对于即将过儿童节的小朋友来说，可达鸭可能些许幼稚。但是对于20多岁的成年人而言，却刚刚好。

8 b, Q2 o0 I. `! n, L& W. z) M

可达鸭的爆火，一个是因为它的可玩性高。一个是因为可爱。人类对于可爱事物的偏爱，从来都是不分性别，不分年龄的。将产品赋予可爱的特质，更容易赢得大家的偏爱，引发消费者正向的情感反馈。

但是，什么样是可爱呢？在做电商设计的时候，面对一些童趣产品，甲方爸爸会要求这个页面做得可爱一点。这种抽象情感类词语，应该如何转换成设计语言来呈现呢？上周，我们分享了一些跑鞋类的详情页赏析。

这周，我们就来看一组字里行间都散发着【可爱】气质的儿童产品详情页。

3 A: ~1 r" p2 U2 B3 z$ G

今天的第一组详情页是一款泡泡相机。作为童年的必备玩具，打开某黄色软件，你能搜索到各种各样的泡泡机。

那么如何把这种同质化的产品做的出彩？我们来看看这组详情页是如何一步步触达大家的少女心的。

- i0 U4 \0 U0 l9 y0 T& e. H

先整体看一下，这组详情页的设计风格。

+ K" ~1 z7 [1 a2 A, S' U

无论是元素、颜色还是光影、对比度，这组详情页在视觉风格上都非常统一。元素上围绕太空主题，C4D的三维制作手法，萌熊宇航员+太空飞船的卡通形象贯穿全屏。

) F, T' H v/ j- t" R0 m% o

图形所有的边缘没有强硬的直接转折，而是做了圆角设计。圆润的弧度看起来更加安全，更加容易让人放松，也更符合泡泡机这一儿童玩具的产品定位。

4 r$ Z Q) G& z$ K$ b1 B

屏与屏之间的跳色处理，增强了界面色彩的节奏感，一定程度上，避免了观众的审美疲劳。另外，除了深浅调色，里面所有的界面转换，都采用了图形分割。

拱形、圆弧、二重拱形这类形式，模拟了泡泡的弧度，让整个画面更具有记忆点。再来梳理一下这组详情页的创意逻辑，首屏直接点出了探索太空的主题。

第二屏，介绍泡泡机电动出泡、出泡丰富、柔和灯光、相机造型这四个卖点。然后是对产品使用场景的介绍。通过萌熊宇航员ip形象在太空中各种形态的变化，打出差异化卖点，激起用户的购买欲望。

产品参数作为补充信息展示被放到了最后，保证了内容逻辑的完整。

既然市面上的泡泡机构成上大同小异，这款详情页就抓住并放大自己太空主题的优势，引导消费者为颜值买单。头屏没有直接将泡泡机放在太空中，而是选择以室内场景模拟太空感，泡泡机宇宙飞船，悬浮在室内。

" U9 a$ u5 j$ ?+ O! s

这种新颖的太空元素展现，直接勾起消费者的好奇心理。在颜色上，首屏选择了经典的蓝黄搭配。暗色调渲染出太空的氛围，在阴影区增加了蓝色的色调，同时在高光区做了黄色增强平衡画面。

0 k! P: l; A! u/ g

在静谧的同时衬托出画面的温暖，拉回产品调性，也直接定下了全篇的整体色调。Icon部分，对宇航员头盔进行了处理，简化了细节，强化了透光质感，呼应太空主题。

# F8 E: }, K3 y

头盔内部，用泡泡进行填充，展现产品的泡泡属性。这一页的底板做的也很有特色，黄色的暖调，柔软的质感，下陷的弧度配合恰到好处的阴影，让人想起家里的懒人沙发。

细节也非常到位，UI的色彩跟主色调统一。加入黄绿色作为点缀，增加颜色对比，丰富了画面细节，也看起来更有活力。

之后就是一个二联屏的直接过渡，开始分屏详细阐述产品功能。场景由室内转为宇宙，大小不同的泡泡，模拟小行星，在飞船附近大量出现。这一块用了替代的手法，突出产品功能的同时，增加了画面整体的趣味性。

泡泡的大小不同，也展现了近大远小的视角变化，丰富画面整体的空间感。驾驶舱中的熊猫宝宝和舱外的成年熊猫 ，暗示着父母与孩子一起开心地玩泡泡机的使用场景。

后续的几屏，也反复出现了大小熊猫，一起遨游宇宙。观众的代入感更强，也就更容易与产品产生情感联系。

这一组详情页，利用熊猫、飞船、宇宙、泡泡等一连串迎合年轻一代审美偏好的元素，共同搭建了一个可爱的梦幻世界，最终促使消费者为颜值买单。第二款要分享的详情页，是萌宠主题的泡泡相机。

设计逻辑和跟刚刚的太空泡泡机基本一致：先说卖点，然后是使用场景，最后对产品的参数详情进行介绍与刚刚的太空泡泡机最大的不同就是主题上的差别，这组详情页加入了更多的萌宠IP形象，Q版的小熊、鸭子、熊猫

大而圆的脸蛋，二头身的比例，虽然是塑料的材质，却在设计师的手下变得质感满满。小小的一个泡泡机搞的这么可爱，真的很难不心动。

另外，这组泡泡机的呈现方式上更多选择了，让萌宠坐在泡泡之上，展现泡泡弹性好，不易破的产品特性。

: Q8 c" C) i ]8 X

功能展示上，用了半球形作为icon的底部，主元素悬浮在半球中心，留给了观众更多的想象空间。

用卡通的熊猫代替小朋友，展现相机外形圆滑，大小适宜抓握的卖点。拟人化的呈现方式更容易激起消费者的购买欲。

结尾，对产品参数详情进行介绍时，加入了权威检测认证进行信任背书，让产品在安全性上更具有说服力，再次证明产品对儿童的友好。

: U( w# P7 u" O: w; b

下面两组走的也是这类风格，清新明亮的颜色，加上卡通的IP形象，画面整体调性统一，观感极为舒适。大家可以套用上述逻辑尝试拆解赏析。

始于颜值，忠于感受，这一套方法论算是被这四组详情页玩明白了。

: l+ k" f) G1 j& D# ?

当同类商品使用感觉都大同小异时，只有为产品添加附加属性，才能从同质化市场中脱颖而出而将产品萌化，就是为产品赋能的一种方式人都向往美好的东西，可爱能激发我们的保护欲，让我们暂时卸下防备，享受大脑多巴胺分泌。

带来的愉悦。

# j! B$ B: M+ a, K+ m

产品以Q版卡通形象的方式出现，让消费者暂时逃离快节奏的生活压力，感受温暖，与消费者拉进距离，赢得大众的喜欢。可爱就是能跟猫咪狗狗、鲜花甜品、Gakki、恋爱一样，让人无条件投降。

1 f# _& Q) {) I' }7 H1 H" S7 N

一旦施了可爱这种魔法，无论多么平凡的事物，都会迅速充溢着亲切感，向我们展示充满善意的表情，守护这无辜与安逸的假想世界。六一儿童节马上就要来了，也提前祝各位可爱的小朋友，儿童节快乐。

老规矩，上面这些页面你喜欢哪一个，想学其中的哪个技法表现呢？评论区告诉我们，我们依次给大家安排上（上周详情页中的酸性气泡材质的制作教程正在制作中，敬请期待）

最后，有人有多余的可达鸭吗？可以分一个给我吗

0 i/ R. x/ B0 A

本文转自微信公众号：杰视帮，图片来源网络，版权归原所有者所有，本文仅供分享交流，如有侵权，请联系我删除，谢谢！

3 G& l% l c- T& d6 L' ? " o5 Z! ^3 v$ {$ A7 d

说得很实在，没有夸大其词，这种真实分享太难得了