电商视觉设计（下篇共上下2篇）

第6章

高点击率推广图片视觉设计掌握推广图片的构图法则掌握直通车图片设计的要点掌握钻展图设计的关键点掌握聚划算主图的设计熟练掌握高点击率推广图片的设计方法学习目标目录推广图片构图法则6.1直通车图片设计6.2钻展图设计6.3聚划算主图设计6.46.1推广图片构图法则变化式构图1平衡式构图3紧凑式构图5对角线构图2对称式构图4X形构图66.1推广图片构图法则

1变化式构图6.1推广图片构图法则

2对角线构图6.1推广图片构图法则

3平衡式构图6.1推广图片构图法则

4对称式构图6.1推广图片构图法则

5紧凑式构图6.1推广图片构图法则

6X形构图6.2直通车图片设计图片整体风格设计1突出商品卖点的设计26.2直通车图片设计

1图片整体风格设计直通车图片应用案例针对年轻消费群体

直通车图

针对中年群体

直通车图6.2直通车图片设计

1图片整体风格设计运用适当的背景12保持图片清晰度3精简文字，去牛皮癣4巧用素材搭配6.2直通车图片设计

1图片整体风格设计背景模糊处理运用适当的背景16.2直通车图片设计

1图片整体风格设计用色阶调亮背景2保持图片清晰度6.2直通车图片设计

1图片整体风格设计突出促销价格3精简文字，去牛皮癣6.2直通车图片设计

1图片整体风格设计素材搭配4巧用素材搭配6.2直通车图片设计

2突出商品卖点的设计不仅有针对所展示单品的利益点信息说明，也通过“全场包邮”表明了店铺的利益点6.3钻展图设计博取眼球的创意设计1统一图片设计风格2确定重点表现元素36.3钻展图设计

1博取眼球的创意设计不同角度拍摄商品正面与侧面相结合的拍摄角度，尤其是正面给人以迎面冲来的视觉感受，富有视觉冲击力侧面拍摄角度是较为常规的拍摄角度，少了几分新鲜感与吸引力6.3钻展图设计

1博取眼球的创意设计生动、灵活的商品摆设整齐排开，中规中矩常见的单鞋摆设不同造型商品摆设6.3钻展图设计

2统一图片设计风格图片整体的设计风格非常大方，选择黄色为主的背景也彰显了其简洁的设计风格通过对元素颜色的控制，突出“低至三折”的宣传主题，激发消费者潜在的购买欲望家具的摆放富有情景感，背景使用了与家具相近的颜色，图片整体体现出了典雅的风格图片突出了商品“家具”，文案又突出了“清仓五折”，主题明确，能激发消费者的点击冲动简约风格雅典风格6.3钻展图设计

3确定重点表现元素实惠的价格是图片重点突出的对象，因此该元素色彩明亮、尺寸较大，能迅速吸引消费者的眼球重点突出优惠价格元素6.4聚划算主图设计聚划算主图的设计思路1聚划算主图设计案例26.4聚划算主图设计

1聚划算主图的设计思路商品拍摄商品背景商品构图详情页主图6.4聚划算主图设计

1聚划算主图的设计思路商品拍摄6.4聚划算主图设计

1聚划算主图的设计思路商品背景6.4聚划算主图设计

1聚划算主图的设计思路商品构图6.4聚划算主图设计

1聚划算主图的设计思路黑白半透明标签详情页主图6.4聚划算主图设计

2聚划算主图设计案例01新建聚划算主图

插入背景图6.4聚划算主图设计

2聚划算主图设计案例02移动图片添加星光修饰6.4聚划算主图设计

2聚划算主图设计案例03添加商品Logo6.4聚划算主图设计

2聚划算主图设计案例04加入半透明标签

隐藏半透明标签课后练习题请为六种推广图片构图法则各举出一个实例。在淘宝上找出直通车做得好的店铺，并分析其直通车图片的优势。请根据本章所学知识设计一张家居类的聚划算主图，效果如右图所示。列举几张你认为有设计感的钻展图，并说明它们好在哪里。第7章

网店促销活动页视觉设计掌握如何营造促销广告的氛围掌握促销广告的三大设计总则掌握不同发展阶段的促销广告设计方法学习目标目录促销广告的黄金设计要素7.1不同发展阶段的促销广告设计7.27.1促销广告的黄金设计要素保证设计的基本美感1营造促销氛围2促销广告图片的设计原则37.1促销广告的黄金设计要素

1保证设计的基本美感02错误1．色彩搭配不明显，找不出重点商品在哪里。2．修饰元素太多，容易让消费者眼花缭乱。7.1促销广告的黄金设计要素

1保证设计的基本美感02平衡势能集群标签分割7.1促销广告的黄金设计要素

1保证设计的基本美感平衡横向拍摄由于促销广告图片尺寸较窄，此时如果模特保持站立姿势，那么在图片中就无法很好地安放模特这一元素，而采用横向拍摄的方式，在均衡构图的同时，模特的动势也起到了一定的视觉引导作用7.1促销广告的黄金设计要素

1保证设计的基本美感势能动态势能静态势能添加相对较为“安静”的元素来引导消费者的目光。图中左右两侧的模特都朝向画面中间，这在某种程度上引导了消费者，将视线集中到了画面中央随着图片中纸被撕裂的动势，消费者的视线会逐渐转移到家具上，且一并将图中内容浏览完毕，这样的构图方式富有明显的动态指向效果7.1促销广告的黄金设计要素

1保证设计的基本美感势能集群有很多的促销文案信息，然而分布较为散乱，不能让消费者集中注意力，很容易形成阅读的遗漏文案信息较为集中，集群的构图方式更利于信息的传达7.1促销广告的黄金设计要素

1保证设计的基本美感势能集群利用圆形分割画面，让画面色彩得到协调的同时，使文案信息更为突出利用圆角矩形分割画面，突出促销文案信息，使画面变得更富装饰感标签分割7.1促销广告的黄金设计要素

2营造促销氛围添加引导标签添加限制提示7.1促销广告的黄金设计要素

2营造促销氛围添加引导标签

点击按钮与箭头起到了引导标签的作用，促使消费者进行点击操作7.1促销广告的黄金设计要素

2营造促销氛围

添加限制提示时间限制说明，营造紧张感数量限制说明，营造紧张感7.1促销广告的黄金设计要素

3促销广告图片的设计原则1主题突出2风格统一3目标明确7.1促销广告的黄金设计要素

3促销广告图片的设计原则1主题突出促销活动主题突出促销活动主题被放在广告图片的右侧中心位置，且选用了对比明显的颜色，使其看起来更为突出7.1促销广告的黄金设计要素

3促销广告图片的设计原则1主题突出2风格统一7.1促销广告的黄金设计要素

3促销广告图片的设计原则1主题突出2风格统一3目标明确迎合消费者人群特点选择少女作为模特，同时在用色方面大面积使用了具有甜美感的粉色系色彩，所选择的字体造型也并非一板一眼，这都突显了少女的青春气息，也与少女服饰这一商品的气质形象相匹配采用具有怀旧倾向的黄褐色作为主色调，同时文字也选择了较为庄重和具有书法感的字体，文字色彩选择了具有稳重感的黑色与红色，以此来突显出老年人的庄严与大气，同时也很好地衬托出了服饰的特点7.2不同发展阶段的促销广告设计发展初期为品牌而促销发展中期为客户而促销发展成熟期为打造爆款而促销7.2不同发展阶段的促销广告设计单品促销广告设计发展初期单品展示单品卖点说明促销内容说明为打造爆款而促销7.2不同发展阶段的促销广告设计为打造爆款而促销发展初期为打造爆款而促销秒杀活动设计贴上“爆款”标签“爆款”标签给消费者留下商品高销量的印象，增强其信任感用销量数据来说服消费者醒目的秒杀说明设计7.2不同发展阶段的促销广告设计为提升品牌知名度开展的促销活动为品牌而促销发展中期7.2不同发展阶段的促销广告设计为品牌而促销发展中期两张图片为同一品牌的促销广告，图片整体的设计风格、商品的拍摄风格、字体的选择等元素都进行了统一与规范统一品牌形象7.2不同发展阶段的促销广告设计为客户而促销发展成熟期会员促销活动7.2不同发展阶段的促销广告设计为客户而促销发展成熟期广告语并不具备煽动性，这样的文案可以说非常常见，不具备感染力，只起到了告知作用，并没有考虑到消费者的需求，因此不能起到说服消费者的营销作用整体版面文字过多，显得较为教条：对于消费者而言，购物是一个愉快的放松过程，在这一过程中他们更希望感受到轻松与愉悦，而图中过多的文字显得繁复而拥挤，这会让消费者失去阅读的耐心会员促销页7.2不同发展阶段的促销广告设计为客户而促销发展成熟期采用图文结合的表现形式，简洁、直观，更便于阅读与浏览统计图表、装饰效果等表现形式在一定程度上减轻了文字阅读的枯燥感会员制度页面7.2不同发展阶段的促销广告设计为客户而促销发展成熟期会员促销页面信息课后练习题请列举几张添加了限制提示的促销广告，并说明其优势。请举例说明势能对消费者的影响。如果你是店铺卖家，在店铺发展初期应该如何设计促销广告图片？第8章

移动端网店的用户体验设计了解移动端网店的店标设计掌握移动端网店的图片尺寸标准掌握移动端网店如何进行视觉设计学习目标目录移动端网店的设计标准8.1移动端网店视觉设计8.28.1移动端网店的设计标准

01移动端网店店标设计02移动端网店图片尺寸标准03移动端网店框架结构安排8.1移动端网店的设计标准

1移动端网店店标设计

手机淘宝的店标直接出现在店铺头上，在店标右侧显示店铺名称。店标图片8.1移动端网店的设计标准

1移动端网店店标设计

移动端网店还可以使用商品的实物照片作为店标，一眼即可看出店铺销售的主营商品。店标图片8.1移动端网店的设计标准

2移动端网店图片尺寸标准手机淘宝对图片的发布尺寸要求：店铺标志尺寸为80像素×80像素，文件大小为80K以内店招规格尺寸为642像素×200像素8.1移动端网店的设计标准

2移动端网店图片尺寸标准高度≤960像素（建议高度不超过600像素）；图片格式支持JPG、GIF、PNG需在图片上添加文字时，中文字号≥30；英文和阿拉伯数字字号≥20首页和详情页图片宽度为480像素~620像素（建议不超608像素）图片尺寸标准8.1移动端网店的设计标准

3

移动端网店框架结构安排移动端网店首页界面红色框出部分为淘宝平台自动生成的版块，其中将店铺首页划分成了“店铺首页”“全部商品”“新品上架”“店铺简介”等固定版块，卖家只需在不同区域添加对应的店铺内容即可移动端网店详情界面图中出现的“收藏”“立即购买”等图标是不需要自己设计的，并且在详情页的第一屏都会出现商品图片、价格、名称等信息展示，卖家可以不考虑这些框架结构的布置，需要设计的是图片、名称等信息内容店铺框架结构8.1移动端网店的设计标准

3

移动端网店框架结构安排图片对应的链接移动端店铺首页的轮播图片对应8.2移动端网店视觉设计整体设计风格首尾呼应04简单方便的操作与交互03保持常换常新06保持色彩与文字的鲜明感05迎合极速打开需求0102信息内容简洁，

便于快速传播8.2移动端网店视觉设计

1迎合极速打开需求图片加载时间长8.2移动端网店视觉设计

2

信息内容简洁，便于快速传播手机移动端商品详情界面简化版

电脑版图文详情对比8.2移动端网店视觉设计

2

信息内容简洁，便于快速传播PC端的展示文字信息清晰可见8.2移动端网店视觉设计

2

信息内容简洁，便于快速传播移动端的展示文字信息则比较模糊界面整体设计感较强，显得较为精致，但消费者不能很好地阅读界面中的文字信息，营销效果也会削弱。因此，不能一味地追求视觉的美观，还要注意通过文字内容的精简与尺寸的变化，保证信息能被消费者快速接收8.2移动端网店视觉设计

2

信息内容简洁，便于快速传播大量的文字信息图文结合相比于纯文字的形式，图文结合的方式能让消费者在接收信息时更为省心8.2移动端网店视觉设计

3简单方便的操作与交互界面的缩放设计

未缩放，正常显示尺寸的商品详情界面。受手机尺寸的限制，界面中的信息较小，不能清晰地展示在消费者面前滑动屏幕后，界面放大，消费者能够较清晰地看清界面中的信息8.2移动端网店视觉设计

3简单方便的操作与交互当消费者想要完整且清晰地阅读详情页文字信息时，在未缩放的情况下，无须拖动界面，手机屏幕便可以展示该部分信息而为了能够更清晰地阅读界面上的文字信息，就需要消费者点击图片，然后滑动屏幕，放大界面放大界面后，受手机屏幕尺寸的显示，界面中的信息不能在纵向或横向空间中完整的展示，消费者就需要左右上下拖动界面才能完整地浏览这部分信息8.2移动端网店视觉设计

4整体设计风格首尾呼应女鞋手机店铺8.2移动端网店视觉设计

5

保持色彩与文字的鲜明感店铺笼罩在黑色色调之中白色底图片手机淘宝所提供的背景是白色前几屏页面风格后几屏页面风格首页装修8.2移动端网店视觉设计

5

保持色彩与文字的鲜明感两种色调对比深色调显得较为沉闷与压抑，不能给人带来轻松的感觉明亮的色彩则给消费者带来豁然开朗感，惹眼而又具有活力8.2移动端网店视觉设计

5

保持色彩与文字的鲜明感大面积采用了高纯度色彩，界面整体显得活泼，给人带来愉悦的视觉感受并没有采用高纯度色彩，却被高明度色调所覆盖，界面整体呈现出鲜明与淡雅感高纯度色彩高明度色调8.2移动端网店视觉设计

6

保持常换常新在“双十一”预售期间，店铺首页轮播图都展示了与“双十一”相关的内容，告诉消费者店铺的相关活动内容雅诗兰黛双十一轮播图课后思考题简述移动端网店店标如何设计。找出三家自己感兴趣的网店，并分析它们的用户体验设计好在哪里。对比PC端和手机端网店的用户体验设计，并分析它们有何不同。第9章

手机移动端淘宝店铺视觉设计掌握店招的优化设计方法掌握轮播图片的优化设计方法掌握优惠券的优化设计方法掌握商品分类导航及分类展示的优化方法了解店铺详情页设计的FABE原则熟练掌握手机淘宝店铺详情页的设计方法学习目标目录手机移动端淘宝店铺首页优化设计9.1电子数码类商品店铺首页案例解析9.2手机淘宝店铺详情页优化设计9.39.1手机移动端淘宝店铺首页优化设计手机移动端店铺首页首页设计框架图9.1手机移动端淘宝店铺首页优化设计1店招的优化设计

2轮播图片优化设计

3优惠券的优化设计

4商品分类导航优化设计

5商品分类展示优化设计

9.1手机移动端淘宝店铺首页优化设计店招底图设计1店招的优化设计用鞋子图片作为底图的主体，与店铺“女鞋”的主题相呼应9.1手机移动端淘宝店铺首页优化设计1店招的优化设计活动时间说明优惠券的设置双十一活动背景图PC端与手机端店招设计的不同9.1手机移动端淘宝店铺首页优化设计1店招的优化设计图片与文字组合的店招底图9.1手机移动端淘宝店铺首页优化设计1店招的优化设计提醒关注店铺9.1手机移动端淘宝店铺首页优化设计1店招的优化设计该店铺主营玩具类商品，然而其店招选择了与店铺毫无关系的图片，即使看起来不错，也无法起到任何说明与传达店铺信息的作用该店招底图中也没使用与店铺有明显关联的图片。店铺主营百货小商品，而底图中主要呈现了笔记本电脑的图片，没有与店铺产生实质性联系，且与店招标识的设计风格不匹配，消费者看到这个店招后无法感受到店铺的品牌氛围无关的店招图片9.1手机移动端淘宝店铺首页优化设计1店招的优化设计文字被遮挡该店招中说明文字被大面积遮挡，同时文字太多，很不美观，这样的表现方式无法让消费者有效获取信息，底图中的文字便失去了意义9.1手机移动端淘宝店铺首页优化设计轮播图片2轮播图片优化设计9.1手机移动端淘宝店铺首页优化设计确定轮播图的先后顺序2轮播图片优化设计9.1手机移动端淘宝店铺首页优化设计优惠券板块3优惠券的优化设计9.1手机移动端淘宝店铺首页优化设计活动优惠券3优惠券的优化设计过于花哨的设计9.1手机移动端淘宝店铺首页优化设计4商品分类导航优化设计商品分类按钮足够明显，且分开两行的组合设计让分类信息能够完整地展示在消费者面前，让其可以快速了解店铺中商品的分类情况9.1手机移动端淘宝店铺首页优化设计商品分类展示5商品分类展示优化设计

简洁的分类标题提示，没有过多的装饰商品名称与价格说明无过多修饰，一目了然9.1手机移动端淘宝店铺首页优化设计促销和爆款商品展示4商品分类展示优化设计商品分类展示第一区中对爆款商品进行展示商品分类展示第一区中对促销商品进行展示9.1手机移动端淘宝店铺首页优化设计新品展示4商品分类展示优化设计9.1手机移动端淘宝店铺首页优化设计店长推荐4商品分类展示优化设计在店铺首页商品分类展示第三区中，选择对店长推荐的商品进行展示，就如同实体店中常会出现贴有“店长推荐”标签的商品，这类商品通常属于热销商品或是店铺中的“镇店之宝”，打着这个旗号的商品对消费者也具有一定的吸引力9.2电子数码类商品店铺首页案例解析电子数码类店铺首页9.2电子数码类商品店铺首页案例解析添加明亮的色彩商品说明信息为白色，给消费者带来一目了然的视觉感受价格信息则采用黄色来表现，在黑色背景中显得非常突出，便于消费者了解商品价格9.3手机淘宝店铺详情页优化设计详情页设计的FABE原则01商品详情页的设计误区02根据消费者的页面平均停留

时间设计039.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则F特征即介绍商品的特质、特性等基本功能，以及它是如何满足消费者需要的。特征（Features）B以消费者利益为中心，告知并强调消费者购买商品后会得到的利益，能够激发消费者的购买欲望。利益（Benefits）A优点就是商品的卖点与优势，向消费者证明商品的卖点，其实就是给消费者提供了更多的购买该商品的理由。优点（Advantages）E证据就是指第三方认知、新闻舆论或技术报告等信息，它们需要有足够的权威性、客观性、可靠性与可见证性，这样才能获得消费者的信任。证据（Evidence）9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01逻辑感02亲切感03对话感04氛围感05正规感069.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01商品展示细节图9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01逻辑感02

视觉漏斗模型中的逻辑关系即是FABE原则所体现的逻辑顺序，通过介绍商品的特征→商品特点→能给消费者带来的利益点→证明商品质量的证据这四个步骤，在层层说明中一步步打消消费者的购买顾虑，增强其购买信心，最终形成下单成交。9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01漫画形式的图片设计亲切感03不论是结合商品特点添加插画，还是直接采用插画的表现形式，总之，在商品详情页插入图画或漫画，能让页面变得更加活泼、生动，也能让消费者感到很亲切9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01商品描述亲切感03对话感049.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01亲切感03对话感04氛围感05

消费者在无形之中或多或少地都会有“凑热闹”的心理，看到某件商品有很多人买便想去看个究竟，或者自己也想跟风购买，这一点对于冲动型消费者来说尤其明显。因此，在设计商品详情页时，需要营造很多人都在购买的卖场气氛，这样的氛围会带动消费者形成购买冲动。9.3手机淘宝店铺详情页优化设计1详情页设计的FABE原则真实感01亲切感03对话感04氛围感05正规感06认证证书图片9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区切忌密不通风的文字说明1海报宣传需凸显商品的真实性2注意控制商品与关联销售商品图片的数量39.3手机淘宝店铺详情页优化设计2商品详情页的设计误区切忌密不通风的文字说明1据研究机构统计，商品详情页中70%的文字信息消费者是不会仔细阅读的，尤其是拥挤的文字会在视觉上引发消费者的畏惧感9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区海报宣传需凸显商品的真实性2消费者调研表明：78%的消费者介意图片是不是实物图，他们更希望看到真实的、没有过多修饰与美化的商品图片信息9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区海报宣传需凸显商品的真实性2海报图9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区海报宣传需凸显商品的真实性2商品实拍图9.3手机淘宝店铺详情页优化设计2商品详情页的设计误区关联销售商品注意控制商品与关联销售商品图片的数量39.3手机淘宝店铺详情页优化设计3根据消费者的页面平均停留时间设计关联信息繁琐

手机浏览的连贯性不如PC端，同时由于消费者的页面平均停留时间很短，所以在设计手机移动端的详情页面时，必须做到简单、直截了当，并且一针见血。课后思考题在手机淘宝上搜索玩具类目排名前五的店铺首页设计有何优势。请举例说明FABE原则在手机淘宝详情页设计中的具体应用。假如要为某品牌笔记本电脑设计详情页，请简述自己的设计思路。第10章

手机移动端微店

视觉设计掌握微店首页的优化设计方法掌握商品详情页的优化设计方法掌握微店底部导航的优化设计方法根据母婴微店视觉设计案例进行实战练习学习目标目录商品详情页优化设计10.2母婴微店视觉设计案例构思10.4微店底部导航优化设计10.3母婴微店视觉设计案例实操10.5微店首页优化设计10.110.1微店首页优化设计首页的框架设计1清晰而准确的设计思路2遵守设计学的“七秒定律”3注重细节设计410.1微店首页优化设计1首页的框架设计店铺招牌微店公告焦点大图商品分类商品展示10.1微店首页优化设计1首页的框架设计店铺招牌10.1微店首页优化设计1首页的框架设计店铺招牌微店公告

微店公告常以文字来说明店铺优势、商品卖点、促销信息或服务内容等。只要是能增加顾客对店铺的信任度且便于顾客浏览的相关信息，都可以将其展示在微店公告中。10.1微店首页优化设计1首页的框架设计店铺招牌微店公告焦点大图10.1微店首页优化设计1首页的框架设计店铺招牌微店公告焦点大图商品分类10.1微店首页优化设计1首页的框架设计店铺招牌微店公告商品展示限时折扣

1店长推荐

2全部商品

310.1微店首页优化设计1首页的框架设计店铺招牌微店公告商品展示限时折扣

110.1微店首页优化设计1首页的框架设计店铺招牌微店公告商品展示店长推荐

210.1微店首页优化设计1首页的框架设计店铺招牌微店公告商品展示全部商品

310.1微店首页优化设计2清晰而准确的设计思路

微店首页10.1微店首页优化设计3遵守设计学的“七秒定律”在设计学中有一条“七秒定律”，据专业机构研究发现，人关注一个商品的时间通常为7秒，而这7秒的时间内影响70%的人购买的第一要素是色彩。首页设计效果10.1微店首页优化设计4注重细节设计使用半身图10.1微店首页优化设计4注重细节设计穿插全景图10.2商品详情页优化设计商品主图设计01商品描述图的设计0210.2商品详情页优化设计1商品主图的设计10.2商品详情页优化设计2商品描述图的设计

创意海报情景大图根据前三屏3秒注意力原则（前三屏决定顾客是否想购买商品，3秒钟必须引起顾客的注意力），开头的大图是视觉焦点，背景应该采用能够展示品牌情调及商品特色的意境图，这样可以在第一时间吸引买家的注意力商品卖点/特性商品卖点/作用/功能商品给消费者带来的好处根据FAB法则排序：F（特性）→A（作用）→B（好处）→Feature（特性）：商品品质，即指商品用料、设计的特点，即商品能看得到、摸得着的东西，是商品与众不同的地方。Advantage（作用）：从特性引发的用途，即商品的独特之处；就是这种属性将告诉客户该商品的作用或优势。Benefit（好处）：指作用或者优势会给客户带来的利益，对顾客的好处（因客户而异）。卖点中出现的数字，比如销量突破50000，50000这个数宇要放大加粗，制造劲爆的效果和氛围商品参数/信息商品的可视化尺寸设计可以采用实物与商品对比，让顾客切身体验到商品实际尺寸，以免收到货时才发现低于心理预期10.2商品详情页优化设计2商品描述图的设计

同行商品优劣对比商品优劣PK：通过对比强化商品卖点，不断地向消费者阐述商品优势模特/商品全方位展示商品展示以主推颜色为主，服装类的商品要提供模特的三围、身高信息。最好后面可以放置一些买家真人秀的模块，目的就是拉近与消费者的距离，让消费者了解商品是否适合售后保障问题/物流售后就是解决消费者已知和未知的各种问题，例如，是否支持7天无理由退换货，发什么快递，快递大概几天能到，商品有质量问题怎么解决等。这一块做好的话可以减轻客服不少的工作压力，增加购买转化率商品细节展示细节图片要清晰富有质感，并且附带相关的文字介绍商品包装展示店铺/商品资质证书品牌店面/生产车间展示店铺的资质证书以及生产车间方面的展示可以烘托出品牌和实力，但店铺的品牌不是通过几张图片以及写个品牌故事就可以做出来的，而是在整个交易过程中通过各种细节展现给消费者的10.3微店底部导航优化设计底部导航的主要功能1底部导航的设计规则210.3微店底部导航优化设计1底部导航的主要功能单手操作智能手机的触及屏幕区域10.3微店底部导航优化设计2底部导航的设计规则1只显示最重要的功能2避免使用滚动设计3告知用户当前位置优秀的底部导航设计要遵循以下规则：10.3微店底部导航优化设计2底部导航的设计规则1只显示最重要的功能底部导航块不超过5个10.3微店底部导航优化设计2底部导航的设计规则2避免使用滚动设计

对于小屏幕来说，隐藏一部分导航图标显然是一个解决方案，因为不用担心屏幕限制，只需把导航块置于一个可滚动区域。但是，这种方式难免会降低使用效率，因为即使消费者已经看到了自己需要的图标，可能仍然需要滚动一下才能看到全部标签。10.3微店底部导航优化设计2底部导航的设计规则

对于用户来说，在成功地使用导航之前，他们要搞清楚的基本问题便是“我现在在哪”。优秀的设计应该是使用户在没有任何外界指引的情况下，也能仅靠第一眼就能知道该如何从A点到B点。因此，应该使用合适的视觉线索（图标、标签或者颜色）直观地告诉用户，而不必有任何多余的解释。3告知用户当前位置10.4母婴微店视觉设计案例构思01首页设计布局规划02主色调：高纯度暖色调03案例配色扩展04案例设计流程10.4母婴微店视觉设计案例构思1首页设计布局规划④特价专区①微店店招②首页导航③促销广告④特价专区①微店店招：在店招模块中使用母婴图片进行展示，通过渐隐效果来让文字更加突出，让店铺主题更加明确。②促销广告：该区域通过使用商品图片与文字结合的方式进行展示，能够完整地表现出商品的特点和形象。③特价专区：使用商品图片搭配色调和外形和谐的标题文字，并加入相应的链接按钮，让顾客能够随时进入其页面了解详情。母婴微店首页布局10.4母婴微店视觉设计案例构思2主色调：高纯度暖色调1页面背景及设计元素配色：高纯度色彩2商品及辅助配色：类似色调10.4母婴微店视觉设计案例构思3案例配色扩展1扩展配色：互补色系2拓展配色：同类色系10.4母婴微店视觉设计案例构思3案例配色扩展1扩展配色：互补色系10.4母婴微店视觉设计案例构思3案例配色拓展互补色系使用互补的粉色和绿色调所设计出的首页效果，可以看到画面变得更加清新，营造出粉嫩、可爱的10.4母婴微店视觉设计案例构思3案例配色扩展2扩展配色：同类色系10.4母婴微店视觉设计案例构思3案例配色拓展使用不同明度的白色作为主色调，更好地体现出童装材质的轻柔、舒适，让消费者放心购买同类色系10.4母婴微店视觉设计案例构思4案例设计流程①制作微店店招和导航②制作微店促销广告③制作微店特价专区母婴微店设计流程10.5母婴微店视觉设计案例实操01制作微店店招03制作促销广告05制作商品详情页制作首页导航

02制作特价专区0410.5母婴微店视觉设计案例实操1制作微店店招新建文件

填充背景色0110.5母婴微店视觉设计案例实操1制作微店店招变换图像

设置图层混合模式与不透明度0210.5母婴微店视觉设计案例实操1制作微店店招添加并编辑图层蒙版0310.5母婴微店视觉设计案例实操1制作微店店招绘制形状0410.5母婴微店视觉设计案例实操1制作微店店招输入并设置文字0510.5母婴微店视觉设计案例实操1制作微店店招最终效果0610.5母婴微店视觉设计案例实操2制作首页导航新建文件

绘制正圆0110.5母婴微店视觉设计案例实操2制作首页导航绘制其他圆形

绘制五角星边框0210.5母婴微店视觉设计案例实操2制作首页导航绘制其他图形

输入相应文字03