电子商务视觉设计 第2版 第9章 手机移动端淘宝店铺视觉设计.ppt

* * * * * * * * 9.3.2 商品详情页的设计误区 对消费者的调研表明：过多的图片以及与商品内容无关的信息是消费者很不喜欢的视觉元素。所以，卖家要控制好图片比例，以便更好地留住消费者。 一般来说，关联商品图片在 3～4 张较为合适，并且与所销售商品相关或配套的商品更能引起消费者的关注。 注意控制商品与关联销售商品图片的数量 03 关联销售商品 9.3.3 根据消费者的页面平均停留时间设计 手机浏览的连贯性不如 PC 端，并且消费者在页面中的平均停留时间很短，所以在设计手机移动端的详情页面时，必须做到简单、直截了当。 手机移动端必须在前三屏中对商品的卖点和重要信息进行清晰的描述。 关联信息烦琐 家纺视觉设计案例实操 9.4 下面将结合前面所讲的内容为一款空调被设计商品详情页，设计内容包括商品首图、商品介绍等，要求设计的页面要能清晰、准确地展示与说明空调被的特点。 空调被商品详情页效果 课后习题 1．在手机淘宝上搜索玩具类目排名前五的店铺首页，简单说明其设计有何优势。 2．举例说明 FABE 原则在手机淘宝详情页设计中的具体应用。 3．利用提供的素材文件为某女鞋类店铺设计一个手机端首页，效果如右图所示。 女鞋手机移动端首页 * * * * * * * * * * * * * * * * * * * * * * * * * * 越来越多的消费者选择通过手机移动端淘宝店铺进行购物，是因为手机移动端店铺所具备的特点给予了他们很好的用户体验，但是这些特点并不足以让消费者决定购买，所以还需要对店铺进行个性化且更为具体的设计，对店铺的各个细节进行优化，营造出良好的销售氛围，让消费者最终被店铺所吸引并产生购买行为。 手机移动端淘宝店铺视觉设计 第9章 9.1 目录 CONTENTS 9.2 9.3 9.4 手机移动端淘宝店铺首页优化设计 9.1 现在已经进入“产品为根，图片为王”的时代，因此手机移动端店铺首页的设计首先需要考虑放置哪些商品图片，尤其是针对手机移动端这种具有碎片化特性的平台，放置能够吸引消费者眼球的商品图片是留住消费者的关键。在店铺中展示爆款促销等有更强吸引力的商品也是瞬间吸引消费者、进行快速转化与页面跳转的关键。 首页设计框架图 与 PC 端店铺首页的设计方法类似，手机移动端店铺首页同样可以根据商品、店铺品牌等定位的不同采用不同的设计风格与设计方式。 9.1.1 轮播图片优化设计 轮播图片也称焦点图，通常被放在店铺的首焦页面，也就是第一屏中能被消费者快速看到的位置。 通常情况下，轮播图片会包含店铺上新活动通知、促销活动展示等内容。轮播图内容要尽量简洁，文字表现清晰，主次分明且能达到快速传播的目的，这是轮播图片设计的要点。 卖家在设计时也要注意控制好轮播图片的数量，以及展示的先后顺序。一般来说，2 ～ 4 张图片轮播展示较为适中。在设计时卖家可以根据店铺活动的重要程度或先后顺序对轮播图片的位置进行相应的调整。 轮播图片 9.1.1 轮播图片优化设计 确定轮播图的先后顺序 轮播图片也称焦点图，通常被放在店铺的首焦页面，也就是第一屏中能被消费者快速看到的位置。 通常情况下，轮播图片会包含店铺上新活动通知、促销活动展示等内容。轮播图内容要尽量简洁，文字表现清晰，主次分明且能达到快速传播的目的，这是轮播图片设计的要点。 卖家在设计时也要注意控制好轮播图片的数量，以及展示的先后顺序。一般来说，2 ～ 4 张图片轮播展示较为适中。在设计时卖家可以根据店铺活动的重要程度或先后顺序对轮播图片的位置进行相应的调整。 9.1.2 优惠券的优化设计 在进行视觉设计时，一般都将优惠券放在店招或轮播图片的下方，并留出足够的空间，使用较为鲜明的色彩，让消费者能够注意到优惠券，只有这样才能真正发挥其引流与促进转化的作用。 过于花哨的设计有时反而会让优惠券淹没在各种视觉元素的冲击之中。 店铺中的某些优惠活动也可以被设计成优惠券的形式。 在优惠券上添加“立即领取”之类的视觉元素，可以在一定程度上左右消费者的点击行为，相对于没有明显按钮引导的优惠券板块而言，有按钮引导更富操作的提示感。 优惠券板块 9.1.2 优惠券的优化设计 在进行视觉设计时，一般都将优惠券放在店招或轮播图片的下方，并留出足够的空间，使用较为鲜明的色彩，让消费者能够注意到优惠券，只有这样才能真正发挥其引流与促进转化的作用。 过于花哨的设计有时反而会让优惠券淹没在各种视觉元素的冲击之中。 店铺中的某些优惠活动也可以被设计成优惠券的形式。 在优惠券上添加“立即领取”之类的视觉元素，可以在一定程度上左右消费者的点击行为，相对于没有明显按钮引导的优惠券板块而言，有按