电商视觉设计-第10章课件.pptx

1、掌握微店首页的优化设计方法掌握商品详情页的优化设计方法掌握微店底部导航的优化设计方法根据母婴微店视觉设计案例进行实战练习学习目标目 录商品详情页优化设计10.2母婴微店视觉设计案例构思10.4微店底部导航优化设计10.3母婴微店视觉设计案例实操10.5微店首页优化设计10.110.1 微店首页优化设计123410.1 微店首页优化设计10.1 微店首页优化设计10.1 微店首页优化设计微店公告常以文字来说明店铺优势、商品卖点、促销信息或服务内容等。只要是能增加顾客对店铺的信任度且便于顾客浏览的相关信息，都可以将其展示在微店公告中。10.1 微店首页优化设计10.1 微店首页优化设计10.1 微

2、店首页优化设计限时折扣 1店长推荐 2全部商品 310.1 微店首页优化设计限时折扣 110.1 微店首页优化设计店长推荐 210.1 微店首页优化设计全部商品 310.1 微店首页优化设计 微店首页10.1 微店首页优化设计 在设计学中有一条“七秒定律”，据专业机构研究发现，人关注一个商品的时间通常为7秒，而这7秒的时间内影响70%的人购买的第一要素是色彩。首页设计效果10.1 微店首页优化设计使用半身图10.1 微店首页优化设计穿插全景图10.2 商品详情页优化设计商品主图设计01商品描述图的设计0210.2 商品详情页优化设计10.2 商品详情页优化设计创意海报情景大图根据前三屏3秒注意

3、力原则（前三屏决定顾客是否想购买商品，3秒钟必须引起顾客的注意力），开头的大图是视觉焦点，背景应该采用能够展示品牌情调及商品特色的意境图，这样可以在第一时间吸引买家的注意力商品卖点/特性商品卖点/作用/功能商品给消费者带来的好处根据FAB法则排序：F（特性）A（作用）B（好处）Feature（特性）：商品品质，即指商品用料、设计的特点，即商品能看得到、摸得着的东西，是商品与众不同的地方。Advantage（作用）：从特性引发的用途，即商品的独特之处；就是这种属性将告诉客户该商品的作用或优势。Benefit（好处）：指作用或者优势会给客户带来的利益，对顾客的好处（因客户而异）。卖点中出现的数字，

4、比如销量突破50000，50000这个数宇要放大加粗，制造劲爆的效果和氛围商品参数/信息商品的可视化尺寸设计可以采用实物与商品对比，让顾客切身体验到商品实际尺寸，以免收到货时才发现低于心理预期10.2 商品详情页优化设计同行商品优劣对比商品优劣PK：通过对比强化商品卖点，不断地向消费者阐述商品优势模特/商品全方位展示商品展示以主推颜色为主，服装类的商品要提供模特的三围、身高信息。最好后面可以放置一些买家真人秀的模块，目的就是拉近与消费者的距离，让消费者了解商品是否适合售后保障问题/物流售后就是解决消费者已知和未知的各种问题，例如，是否支持7天无理由退换货，发什么快递，快递大概几天能到，商品有质

5、量问题怎么解决等。这一块做好的话可以减轻客服不少的工作压力，增加购买转化率商品细节展示细节图片要清晰富有质感，并且附带相关的文字介绍商品包装展示店铺/商品资质证书品牌店面/生产车间展示店铺的资质证书以及生产车间方面的展示可以烘托出品牌和实力，但店铺的品牌不是通过几张图片以及写个品牌故事就可以做出来的，而是在整个交易过程中通过各种细节展现给消费者的10.3 微店底部导航优化设计底部导航的主要功能1210.3 微店底部导航优化设计单手操作智能手机的触及屏幕区域10.3 微店底部导航优化设计123优秀的底部导航设计要遵循以下规则：10.3 微店底部导航优化设计1底部导航块不超过5个10.3 微店底部

6、导航优化设计2对于小屏幕来说，隐藏一部分导航图标显然是一个解决方案，因为不用担心屏幕限制，只需把导航块置于一个可滚动区域。但是，这种方式难免会降低使用效率，因为即使消费者已经看到了自己需要的图标，可能仍然需要滚动一下才能看到全部标签。10.3 微店底部导航优化设计对于用户来说，在成功地使用导航之前，他们要搞清楚的基本问题便是“我现在在哪”。优秀的设计应该是使用户在没有任何外界指引的情况下，也能仅靠第一眼就能知道该如何从A点到B点。因此，应该使用合适的视觉线索（图标、标签或者颜色）直观地告诉用户，而不必有任何多余的解释。310.4 母婴微店视觉设计案例构思0101首页设计布局规划0202主色调：

7、高纯度暖色调0303案例配色扩展0404案例设计流程10.4 母婴微店视觉设计案例构思特价专区微店店招首页导航促销广告特价专区微店店招：在店招模块中使用母婴图片进行展示，通过渐隐效果来让文字更加突出，让店铺主题更加明确。促销广告：该区域通过使用商品图片与文字结合的方式进行展示，能够完整地表现出商品的特点和形象。特价专区：使用商品图片搭配色调和外形和谐的标题文字，并加入相应的链接按钮，让顾客能够随时进入其页面了解详情。母婴微店首页布局10.4 母婴微店视觉设计案例构思1210.4 母婴微店视觉设计案例构思1210.4 母婴微店视觉设计案例构思110.4 母婴微店视觉设计案例构思互补色系使用互补的

8、粉色和绿色调所设计出的首页效果，可以看到画面变得更加清新，营造出粉嫩、可爱的10.4 母婴微店视觉设计案例构思210.4 母婴微店视觉设计案例构思使用不同明度的白色作为主色调，更好地体现出童装材质的轻柔、舒适，让消费者放心购买同类色系10.4 母婴微店视觉设计案例构思制作微店店招和导航制作微店促销广告母婴微店设计流程10.5 母婴微店视觉设计案例实操10.5 母婴微店视觉设计案例实操新建文件 填充背景色0110.5 母婴微店视觉设计案例实操变换图像 设置图层混合模式与不透明度 0210.5 母婴微店视觉设计案例实操添加并编辑图层蒙版0310.5 母婴微店视觉设计案例实操绘制形状0410.5 母

9、婴微店视觉设计案例实操输入并设置文字0510.5 母婴微店视觉设计案例实操最终效果0610.5 母婴微店视觉设计案例实操新建文件 绘制正圆0110.5 母婴微店视觉设计案例实操绘制其他圆形 绘制五角星边框0210.5 母婴微店视觉设计案例实操绘制其他图形 输入相应文字0310.5 母婴微店视觉设计案例实操绘制矩形 绘制矩形0110.5 母婴微店视觉设计案例实操添加素材文件 绘制圆角矩形0210.5 母婴微店视觉设计案例实操输入相应文字 输入其他文字0310.5 母婴微店视觉设计案例实操管理并复制图层 更换素材和文字0410.5 母婴微店视觉设计案例实操绘制圆角矩形 输入相应文字10.5 母婴微

10、店视觉设计案例实操输入其他文字 10.5 母婴微店视觉设计案例实操绘制矩形形状 添加素材文件 10.5 母婴微店视觉设计案例实操输入相应文字 10.5 母婴微店视觉设计案例实操绘制形状输入文字 10.5 母婴微店视觉设计案例实操管理并复制图层更换素材和文字 10.5 母婴微店视觉设计案例实操调整图像明暗调整其他素材文件 10.5 母婴微店视觉设计案例实操新建文档 填充矩形选区0110.5 母婴微店视觉设计案例实操添加图层样式 0210.5 母婴微店视觉设计案例实操绘制图层 03输入相应的文字 10.5 母婴微店视觉设计案例实操变形文字 04添加素材文件 10.5 母婴微店视觉设计案例实操添加投

11、影图层样式 05添加素材文件 10.5 母婴微店视觉设计案例实操复制并调整图像 06输入相应的文字 10.5 母婴微店视觉设计案例实操变形文字 07添加素材文件 10.5 母婴微店视觉设计案例实操复制素材 08输入相应的文字 10.5 母婴微店视觉设计案例实操管理并复制图层 09创建选区10.5 母婴微店视觉设计案例实操填充选区 10绘制形状10.5 母婴微店视觉设计案例实操添加素材文件 11输入相应文字10.5 母婴微店视觉设计案例实操绘制边框 12绘制圆形10.5 母婴微店视觉设计案例实操13添加描边10.5 母婴微店视觉设计案例实操14添加素材文件输入相应文字10.5 母婴微店视觉设计案例实操15管理并复制图层更换素材和文字10.5 母婴微店视觉设计案例实操16创建选区输入相应文字10.5 母婴微店视觉设计案例实操17绘制圆角矩形添加素材文件10.5 母婴微店视觉设计案例实操18绘制圆形输入其他文字10.5 母婴微店视觉设计案例实操19管理并复制图层最终效果课后思考题简述如何进行微店首页的优化设计。找出两家优质微店并分析它们在首页设计上的共性。尝试制作婴儿湿巾详情页，效果如右图所示。