移动商务视觉设计2 微店视觉设计 微网店视觉设计-详情页.pptVIP

* 移动商务视觉设计 江苏经贸职业技术学院 1 主图设计 2 辅图设计 目录 CONTENTS 3 详情页设计 任务一 微网店视觉设计 项目六 综合设计 在设计商品详情页之前，首先需要认识商品详情页设计的基础规范。手机端最佳的图片像素规范：宽度在480～620像素之间，高度不大于960像素。格式为：JPG、GIF、PNG。制作的时候，宽度一般用520像素，这样兼顾大屏和小屏手机。 优秀移动端详情页一般都是不超过10屏。从数据可以得出，买家在详情页平均停留时间是70秒，50.%的买家看不到30秒就把页面关掉了！所以详情页应该看重的是质而不是量！ 商品详情页设计 移动端详情页 根据店铺的不同战略方向，店铺流量、产品品类、用户群体等不同，需要选择不同的页面布局逻辑： 商品详情页设计 页面布局逻辑 分流型 聚流型 新商家型 腰部商家型 分流型 分流型布局主要是具有大流量、产品品类比较多的店铺，针对大流量的店铺，先要做好前三屏位置重点展示活动内容，强化购物场景，并通过分类的明确指引，让顾客按需选择。在产品的分类的大小进行了从左到右的展示，因为移动端用户，大多为右手使用者，将重要的分类放在右侧，是方便用户进行点击的，细微的局部调整都有可能带来更好的用户体验。 商品详情页设计 店招 场景海报/活动海报 店铺优惠信息 分类入口 分类入口 分类入口 分类入口 店铺爆款海报 产品分类展示 强化购物场景唤醒购买欲望 店铺优惠促进加购 按需分流，个性化推荐 爆款推荐让消费者优先选择 商品详情页设计 分流型 详情页 结构 聚流型 聚流型是针对产品品类较单一，属于爆款/主推款型，在这类店铺的布局上，同样要注意做不遗余力的氛围展现，对店铺主推产品的推选。 商品详情页设计 营造热销气氛，增强店铺氛围 店铺优惠促进加购 镇店之宝 首推产品 店铺热销推荐 店招 爆款/促销海报 店铺优惠信息 品类热销1 主推1 品类热销2 主推3 主推2 品类热销3 产品分类展示 商品详情页设计 聚流型 详情页 结构 新商家型 对于新店铺，店铺流量较小，店铺产品通常较少，店铺也无爆款产品，需要将流量集中到店铺主推和销量较好的产品，在店铺首页框架优化过程中需要集中展现主推产品和热销产品。 商品详情页设计 营造热销气氛，增强店铺氛围 店铺优惠促进加购 镇店之宝 首推产品 店铺热销推荐 店招 爆款/促销海报 店铺优惠信息 热销2 主推2 热销3 主推2 主推1 热销1 产品分类展示 商品详情页设计 新商家型 详情页 结构 腰部商家型 对于腰部商家，已经有了一定的品牌知名度和店铺流量，在店铺优化过程中需要将店铺流量进行合理分配，将流量的转化率做到最大化。 腰部商家在做好主推产品的展示时，同样要做好分类的按需分流，再讲店铺热销品牌的相关推荐进行展示。 商品详情页设计 营造热销气氛，增强店铺氛围 店铺优惠促进加购 镇店之宝 首推产品 店铺热销推荐 店招 爆款/促销海报 店铺优惠信息 分类入口 主推1 分类入口 主推3 主推2 分类入口 产品分类展示 分类入口 品类热销1 品类热销3 品类热销3 按需分流，个性化推荐 商品详情页设计 腰部商家型 详情页 结构 详情页海报图分别分为2种：风格海报和卖点海报。 风格海报主要体现的是店铺或产品风格； 卖点海报主要就是突出产品卖点。 商品详情页设计 商品海报 图文排版 排版是为了统一文字和图片的位置。在面积较小的移动端，统一的排版风格能让页面看起来变得更大，还能避免因为“乱”和“杂”而产生的廉价感。 左图右文(左文右图) 字的比例大多是占整个海报的1/2或1/3，文字尽量地放在同一个区域，在设计的时候，要注意文字间的关系，字体粗细、大小结合，架构主次分明。 商品详情页设计 商品海报 字体设计 详情页面的字体设计要点有： ①字体清晰， ②字数精简， ③大小适当。 字数精简、大小适当、清晰，让人一目了然。 X √ 字体繁多，字体很小 商品详情页设计 商品海报 背景色彩统一 移动端海报要想引人注目，就要注意色彩的统一性。配色上要注意使用同色系饱和度不同的色彩或在色环上相差较远的色彩进行搭配。 商品详情页设计 商品海报 主次要分明 移动端的位置有限，在设计的时候要注意分清主次。先想清楚这个页面中要突出的重点是什么 ，是促销信息还是推宝贝，这些都是我们在设计之前明确的东西。 商品详情页设计 商品海报 商品信息展示该注意的有2点： ①文字精简清晰　 ②图文重点突出 商品详情页设计 商品信息展示设计 细节展示设计 移动端的细节展示，建议一屏展示3-4张细节图。文字描述用小的字体放在图片四周。 细节展示设计要注意： ①放大细节 ②细节展示恰当合理 ③图文并茂移 商品详情页设计 商品详情页设计 案例：“花点时间“商品详情页页面 产品系列介绍 产品主题