电子商务视觉设计 第2版 第10章 手机移动端微店视觉设计.pptVIP

* * * * * * * * * * * * * * * * * * * * * * 无论是淘宝还是微店，店铺视觉设计是否能够吸引消费者的眼球、是否能够突出自己商品的特色都是至关重要的。在微店中，页面位置有限，要想让消费者对微店和商品有更全面的了解，就必须对微店页面进行规划、布局与设计。本章主要从微店首页、商品详情页与底部导航的优化设计等方面来对微店视觉设计进行深入介绍。 手机移动端微店视觉设计 第10章 10.1 目录 CONTENTS 10.4 10.2 10.3 微店首页优化设计 10.1 微店的首页设计非常重要，它是微店视觉设计中的重中之重。在设计微店首页前，卖家要先了解微店首页的主要功能，并对微店框架有一个大致的构想，整理出一个清晰的设计思路，然后根据商品属性和目标人群的定位确定微店首页的设计风格。 10.1.1 首页的框架设计 微店首页主要由店铺招牌、微店公告、焦点大图、商品分类与商品展示五部分构成。 店铺招牌是微店的招牌，也是店铺文化的浓缩。店铺招牌在微店首页最上方。 首先，店主需要考虑的是店铺招牌要给消费者传达什么样的信息 ；其次，店主需要对店铺风格进行定位，并使店铺招牌与其保持一致；再次，设计要简洁明了，字数不要过多；最后，店铺招牌要突出主体，千万不可喧宾夺主。 店铺招牌 01 微店店铺招牌 微店公告常以文字来说明店铺优势、商品卖点、促销信息及服务内容等。只要是能增加消费者对店铺的信任度且便于消费者浏览的相关信息，店主就可以将其展示在微店公告中。不过文字必须要简洁、清晰，要让消费者一看就懂，且不会消磨其耐心。 微店公告 02 10.1.1 首页的框架设计 微店首页主要由店铺招牌、微店公告、焦点大图、商品分类与商品展示五部分构成。 无图不成焦点，焦点必须有图片。可以说，焦点大图也是图片内容的一种展现形式。焦点大图设计就是由一张图片或多张图片自动轮流播放展示在首页上。因为轮播图片是动态的，所以具有一定的视觉吸引力，容易引起消费者的注意。 焦点大图 03 焦点大图 10.1.1 首页的框架设计 微店首页主要由店铺招牌、微店公告、焦点大图、商品分类与商品展示五部分构成。 在微店首页中，店主可以根据商品的特点将商品划分为几大类，并根据类别对商品进行排列。 商品分类的布局很重要，店主要按照消费者的浏览和购买习惯对商品进行分类，以便消费者能够快速找到所需的商品，提高其购物体验度。 商品分类 04 商品分类 10.1.1 首页的框架设计 微店首页主要由店铺招牌、微店公告、焦点大图、商品分类与商品展示五部分构成。 商品展示一般可以分为“热卖商品”“店长推荐”和“全部商品”三个模块。 热卖商品：在这个区域内展示给消费者的商品全部都是微店内的促销商品。 店长推荐：在这个区域内大多展示的都是微店新上的商品，或是微店的爆款，还可能是某段时期内消费者最需要的商品。 全部商品：在这个区域中展示的是微店内所有的商品。 商品展示 05 热卖商品 店长推荐 全部商品 10.1.2 清晰而准确的设计思路 微店首页的核心是模块化，官方对页面板块的数量也是有限制的，因此卖家要利用有限的板块创造更多的价值。 一般微店首页是由店招、海报、分类入口、优惠券和单品展示等部分组成的。 微店首页 10.1.3 遵守设计学的“七秒定律” 在设计学中有一条“七秒定律”，据专业机构研究发现，人关注一个商品的时间通常为七秒，而这七秒内影响 70% 的人购买的第一要素是色彩。 同一板块内不要超过 3 种颜色，这 3 种颜色可以看作是主色、辅助色与点缀色。 卖家在设计首页时可以多使用万能搭配色，如黑、白、灰等颜色。 背景色尽量以浅色调为主。 首页设计效果 10.1.4 注重细节设计 卖家在设计微店首页时，还要注重细节上的设计，比如： 在首页上可以选取半身图或局部特写图。 可以适当穿插一些全景图，有意识地调整页面的节奏，使整个页面更加和谐、活泼。 在页面面积较小的情况下，图文搭配的巧妙排列能让页面看起来更大，还能避免因为“乱”和“杂”而产生的廉价感。 使用半身图 穿插全景图 商品详情页优化设计 10.2 商品详情页是最容易与消费者产生交集和共鸣的页面，详情页的设计极有可能会对消费者的购买行为产生直接的影响。 因此，微店商品详情页的设计要在美观、实用的基础上将想要表达的信息尽可能用直观的视角展现出来。 10.2.1 商品主图的设计 基本尺寸要求是 640 像素 ×640 像素。在设计商品主图时，图片要清晰，主题与背景要主次分明，图片中