网店美工与视觉设计第八章无线端店铺视觉设计课件.pptx

1、网店美工 无线端店铺视觉设计第 8 章目 录contents8.1 无线端店铺视觉设计8.2 无线端店铺的设计3 8.1 无线端店铺视觉设计v 在当今互联网时代，智能手机的运用几乎遍布整个世界，人们越来越注重手机端的研究开发与应用，而随着智能手机设备的发展而成熟，淘宝不停地把流量引到移动端上，现在移动端流量占比达80%以上。另外，手机端页面的设计有许多的规范，大到整个页面的排版和呈现方式，小到一个图标的尺寸，这都关系到视觉页面的美观程度以及用户体验。因此，对于电商企业来说，无线端店铺视觉设计成为重点关注对象之一。无线端店铺的设计特点 淘宝无线端就是相对于PC端而言的移动设备上的淘宝，即手机、平

2、板等移动设备上的淘宝应用，如可用手机登录淘宝网，或者通过“手机淘宝”“天猫”等软件查看。无线端店铺旨在满足不同用户的购物需求，其中聚合了大量的功能，呈现出了流量大、点击率高、转化率高等特点。从无线端店铺的搜索来看，无线搜索延续了PC端淘宝软件的人气算法，并加入买家的差异化行为习惯进行调整。4 8.1 无线端店铺视觉设计v无线端店铺与PC端店铺的区别 近年来，用户流量越来越多地涌向了手机端，大家已经渐渐习惯在手机上看新闻、刷朋友圈和购物了，绝大部分淘宝卖家也可以明显地感受到手机端的订单成交比重已经赶超PC端。但是值得注意的是，手机端有其自身的特点，在店铺的推广运营上绝不能照搬PC端的策略和方法，

3、接下来了解无线端店铺和PC端店铺的差异。（1）在使用人群方面（2）在使用时间段方面（3）在停留时间方面（4）在使用场景方面（5）在个性化展示方面（6）在浏览商品方面5 8.1 无线端店铺视觉设计目 录contents8.1 无线端店铺视觉设计8.2 无线端店铺的设计7 8.2.1 无线端店铺装修要点 在设计无线端店铺首页前需要明白，无线端店铺首页的布局决定着店铺内流量的流转效果。下面将从装修风格、页面布局和商品主图三个方面来介绍无线端店铺设计的主要内容。8 8.2.1 无线端店铺装修要点1装修风格 在设计无线端店铺前，卖家需要根据自己的产品和店铺定位来选择合适的装修风格。为了营造更好的视觉效果

4、，店铺内运用的色彩和风格应该保持统一。除此之外，还要体现出店铺的品牌文化及形象，给顾客留下好印象。如图所示为定位店铺风格的三个要素。9 8.2.1 无线端店铺装修要点2页面布局 在PC端，打开的商品页面可以直接往下拉，加载的速度也很快。但在移动端，消费者没有那么多的耐心，所以页面布局就非常重要。在移动端打开一个商品页面时，消费者从上到下看到的内容是：主图、标题、价格、宝贝评价、问大家、店铺的基本信息。10 8.2.1 无线端店铺装修要点3商品主图 无线端店铺装修中最重要的环节就是设计商品主图。主图制作要尽量按照淘宝的规则，第一张图的主要作用就是吸引消费者点击，宝贝的点击率全靠这张图，第二张图可

5、做白底无Logo和水印以便突出产品本身，剩下的一些主图也很重要，因为很多无线端的买家在购物时只看主图。11 8.2.2 无线端店铺装修思路1清晰的导购思路 用户在看手机的时候会比较放松，如果在几秒内不能吸引到他，那么就流失了客户。因此，拥有一个清晰的导购思路是非常重要的。无线端店铺页面的设计核心是模块化，平台对页面模块的数量也有限制，因此要利用有限的模块创造更多的价值。普遍的无线端店铺首页由以下几部分组成：店招、海报、分类入口、优惠券、单品展示等。12 8.2.2 无线端店铺装修思路2简洁的店铺色调属性 在设计学中有一条“七秒钟定律”，有研究表明，“人关注一个商品的时间通常为7秒钟，而这7秒钟

6、的时间内70%的人确定购买的第一要素是色彩”。同一版块内不要超过3种颜色。这三种颜色可以看作是主色、辅助色、点缀色。百岁山矿泉水的无线端店铺页面，白色是主色，蓝色是辅助色，红色是点缀色。设计师使用这样的配色方案是根据恒大冰泉的品牌主色而决定的。这样的配色方案就能让这个页面看起来十分地和谐统一，因为无线端店铺的页面本身就很小，实在不适合过多地卖弄色彩。13 8.2.2 无线端店铺装修思路3首页布局 确定了店铺装修风格之后，就需要设计首页布局。无线端店铺详情页宽度可以做到7501240像素，由于手机屏幕和流量的关系，无线端店铺详情页最好控制在10屏以下，每屏切割为多个小屏。产品图片要突出整体场景，

7、重视效果图和搭配感觉。首页上各类模块的搭配要统一、简洁。好的页面布局能够吸引更多顾客驻足。卖家可以先设计店铺首页的整体框架结构，再单独调整各个模块的内容。一般，常见的店铺页面布局包括店招、导航条、全屏海报、产品促销轮播海报、产品自定义主图展示区等。14 8.2.2 无线端店铺装修思路4图片布局技巧 无线端店铺首页大多是以豆腐块的形式展现，范围确实有限，因此在选择图片上要尽量使用半身图或局部特写图，避免视觉上的不清晰。另外，要兼顾图片与图片之间的过度搭配，如果全部都用半身图或局部特写图，页面就会显得单调和乏味。所以可以适当地穿插一些全景图，有意识地调整页面的节奏，使得整个页面更加和谐、活泼，如图

8、所示，全景图与局部图交替使用。15 8.2.2 无线端店铺装修思路5图文搭配的排列技巧 排版是为了统一布局文字和图片。在面积较小的情况下，统一能让页面看起来变得更大，还能避免因为“乱”和“杂”而产生的廉价感。从上面的无线海报案例看出，无线端店铺的海报设计相对于PC端的海报设计简直是小菜一碟，但想要做好它也不是容易的事情，读者可以根据实操积累的经验总结出一些规律。例如，文字大多是占整个海报的1/2或1/3，文字应尽量地放在同一个区域，在设计的时候，要注意文字间的关系，字体上粗下细、上大下小，架构主次分明。另外，无线端店铺首页的位置有限，在设计的时候要注意分清主次。先想清楚这个海报中要突出的重点是

9、什么，是促销信息还是推宝贝，这些都是要在设计之前明确的内容。16 8.2.2 无线端店铺装修思路6产品类目布局技巧 从吸引买家的角度来讲，如果店铺类目明确，如餐具按照不同功能分为盘子、碗和杯具(如图)，买家就能快速找到自己想要的商品。毕竟，不是所有人都只冲着一款产品而来。有条件的话，可以在首页提供多种选择，这样做实际是在帮卖家留住顾客。从颜色搭配上来说，如果不做装修，在产品较多的情况下，分类页与主页的色调容易冲突。如图所示的箱包类店铺首页中，不同用途的箱包搭配不同的颜色，如黄色和出游类箱包搭配，黑色和商务出差类箱包搭配，红色和开学季优惠商品搭配。如图所示的店铺首页页尾设计展示了店铺内的商品分类

10、、结束语、领取优惠券和店铺地图，方便买家按需选择。17 8.2.3 无线端店铺模板参数介绍 无线端店铺首页包含系统推荐模块和自定义模块，左图是系统推荐模块，可以随机从店里选择已有的产品，不用单独设计；右图是自定义模块，这个需要懂代码才能安装。18 8.2.3 无线端店铺模板参数介绍下面以系统推荐模块为例进行介绍 首页的顶部是轮播海报，这里可以放多个轮播图片，因无线端店铺的屏幕限制，建议放13张即可，建议尺寸为608像素304像素，或者使所有图片保持统一的长宽比。这里可以放店铺的主推款，还有一些店铺公告。19 8.2.3 无线端店铺模板参数介绍 轮播海报的下面是夺眼球的地方，很多店铺的活动信息或者促销优惠券会放在这里，如果放优惠券，最多只能放6个，尺寸统一。接下来可以添加店铺分类，比如是卖衣服的，可以分为外套、裙子、裤子等热卖主推的类目，尺寸建议设为296像素160像素。如果用其他尺寸，则保持统一标准即可。