第8章手机移动端视觉设计（课件）《电子商务视觉设计》（电子工业出版社）

第8章手机移动端视觉设计 知识目标和技能目标 知识目标： 了解手机移动端视觉设计理论 掌握手机移动端电商网店首页视觉设计方法 掌握手机移动端电商网店详情页视觉设计方法 掌握手机移动端微店首页视觉设计方法 掌握手机移动端微店详情页视觉设计方法 掌握手机移动端微店尾部导航视觉设计方法 技能目标： 能够运用Photoshop软件相关操作与命令制作手机移动端电商网店视觉设计 能够运用Photoshop软件相关操作与命令制作手机移动端微店视觉设计 学习重点和难点 学习重点： 手机移动端电商网店视觉设计 学习难点： 手机移动端电商网店视觉设计与PC端电商网店视觉设计的区别 第一节 手机移动端电商网店视觉设计 1.1 手机移动端电商网店视觉设计认知 （一）手机移动端电商网店与PC端电商网店的区别 1．尺寸：由于手机屏幕较小，如果手机移动端电商网店中图片尺寸不合适，就会造成界面的混乱或者浏览效果差的问题。 2．布局：方寸之间尽显大天地，这就要求手机移动端电商网店在布局上要简洁明了，过多的装饰会影响画面浏览速度。 3．详情页：PC端电商网店的详情页大多会通过较多的文字来说明产品的特点、店铺促销活动等信息，而手机移动端电商网店则要惜字如金，尽量使用最简洁的文字和精准的图片信息阐述商品详情。 4．分类：手机移动端电商网店的区域划分要明确，模块体现要清晰，最好都用图片的方式展现，体现少且精的特点。 　　5．颜色：由于手机移动端电商网店页面面积较小，浏览者视觉受限，为了增强消费者浏览的愉快感，因此手机移动端电商网店多用鲜艳、明亮的颜色来装饰店铺，这与PC端常用深色系装饰店铺的方法完全相反。 第一节 手机移动端电商网店视觉设计 1.1 手机移动端电商网店视觉设计认知 　　（二）手机移动端电商网店视觉设计优势 　　1．极速浏览：手机移动端电商网店最大的优势是它给消费者带来的随时随地购物的便捷感、信息极速触达感，因此手机移动端电商网店深受广大消费者的青睐。 　　2．信息简洁，便于传播：大多数消费者使用手机进行购物都是利用工作或学习之余的零散时间完成浏览、挑选和购买。生活节奏的加快、社会压力的增加，使消费者没有太多的精力和耐心浏览商品更多信息，因此简洁的手机移动端电商网店视觉设计更能满足现代消费者的需求。 第一节 手机移动端电商网店视觉设计 1.1 手机移动端电商网店视觉设计认知 　　（三）手机移动端电商网店视觉设计要点 　　1．保障速度：快节奏的生活使消费者对速度的要求越来越高，因此，手机移动端电商网店视觉设计首先要求店铺内不能堆放过多的图片、过大的图片。排除网络速度的原因，出现这样的结果会导致消费者失去浏览的耐心，降低购买率。 　　2．考虑简洁：智能手机的操控简单到只需要通过指尖的轻轻触碰就可以完成，这大大满足了消费者方便、快捷的需求，因此手机移动端电商网店视觉设计要考虑减轻消费者的操作负担。相比之下，无须进行缩放操作就可以一目了然地了解卖家全部信息更容易被消费者接受和认可，因此一定要简化一切不必要的设计。 　　3．重视色彩：由于手机屏幕尺寸有限，因此除要求文字精简以外，还要重视色彩的应用与选择。 　　4．保持常新：在手机移动端电商网店中进行消费的群体大多是年轻、时尚、对新事物敏感度高的人群。他们除了希望愉快地完成购买目的，还充满好奇心，喜欢追求刺激、新鲜和变化。因此手机移动端电商网店视觉设计必须保持常换常新，及时更新店铺的最新活动、促销信息和品牌特点表达方式． 第一节 手机移动端电商网店视觉设计 １.２手机移动端电商网店首页视觉设计 　　（一）手机移动端电商网店首页店招视觉设计 　　1．底图为背景图片：选择好看的背景图片作为店招的底图，再搭配清晰的文字描述，可以让消费者迅速了解店铺的主营产品， 第一节 手机移动端电商网店视觉设计 １.２手机移动端电商网店首页视觉设计 　　（一）手机移动端电商网店首页店招视觉设计 　　2．底图为单一纯色图片：由于手机端电商网店篇幅限制，经常有很多商家在设计手机移动端电商网店店招时采用单一纯色图片，这样的设计会使文字所传达的信息更加清晰，一目了然。 第一节 手机移动端电商网店视觉设计 １.２手机移动端电商网店首页视觉设计 　　（一）手机移动端电商网店首页店招视觉设计 　　3．底图为促销活动内容：在设计时把促销活动的图片、主题或文字内容作为背景，不仅迎合设计主题，而且可以强化优惠信息，吸引消费者眼球。 第一节 手机移动端电商网店视觉设计 １.２手机移动端电商网店首页视觉设计 　　（二）手机移动端电商网店首页焦点图视觉设计 　　手机移动端电商网店首页焦点图也叫轮播图，和PC端电商网店首页海报视觉设计相同，通常被放置在店铺的首焦页面，也就是手机第一屏中可以被消费者快速看到的关键位置。但是，由于手机屏幕较小，又要展示产品和促销活动等内容，所以主题要简明突出、文字要清晰准确、层次要主次分明。在制作手机移动端电商网店首页焦点图时，轮播的图片要控制在4张以内，超过4张的界限会花去消费者过多的时间，让其失去浏览的兴趣，还要根据图片的重要程度合理安排轮播的顺序。通常焦点图的尺寸为608像素×304像素，图片格式为JPG和PNG。 第一节 手机移动端电商网店视觉设计 １.２　手机移动端电商网店首页视觉设计 　　（三）手机移动端电商网店首页优惠券视觉设计 　　优惠券可以抵减购买商品时的费用，是商家用于吸引消费者眼球，促进消费者达成购买的重要营销手段。在通常情况下优惠券被放置在手机移动端电商网店首页的开端位置，以便消费者可以第一时间找到，快速引起消费者兴趣，激起购买欲望。好的优惠券视觉设计要避免花哨，要突出关键信息，还要有所创新。例如，可以把优惠活动以按钮形式设计成优惠券来表现，这样可以让消费者有很强的互动参与感，消费者拿到优惠券后大多会产生诸如“有优惠券可以用是机会难得，很划算的事”的联想；还可以在优惠券上添加“点击领取”等视觉元素，同样会在一定程度上引起消费者的点击行为，这种优势是无按钮引导优惠券的短板，越发体现按钮引导操作的优越性。 第一节 手机移动端电商网店视觉设计 １.２　手机移动端电商网店首页视觉设计 　　（四）手机移动端电商网店首页商品分类导航区视觉设计 　　在设计手机移动端电商网店首页商品分类导航区时，由于手机的屏幕限制，一定要把握好显示尺寸与比例，力求简明清晰，易于消费者选择。分类导航区通常紧接店铺优惠券，起到快速导航的作用。 第一节 手机移动端电商网店视觉设计 １.２　手机移动端电商网店首页视觉设计 　　（五）手机移动端电商网店首页商品展示区视觉设计 　　在商品分类导航区之后出现的就是商品展示区。与PC端电商网店一样，商品展示区主要用于展示商品，但因空间局限，不能对商品进行过多装饰与美化，只能进行单排或双排的展示，以此来迎合手机移动端电商网店目标群体求快、求变的心理，方便其浏览和购买。 第一节 手机移动端电商网店视觉设计 １.３　手机移动端电商网店首页视觉设计案例——时尚床品店铺首页 　　案例准备：启动软件，新建一个608像素×1885像素的文件。打开资源库素材文件中的“背景”图片，将其拖动至画面顶部，调整图片大小适应文件。 第一节 手机移动端电商网店视觉设计 １.３　手机移动端电商网店首页视觉设计案例——时尚床品店铺首页 　　案例操作：选择“横排文字工具”，字体设置为黑体，文字大小设置为60点，文字颜色设置为#a6750a。输入文本“舒适的家 新品热卖”将“新品热卖”文本字号设置为42号，右对齐；选择“矩形工具”填充颜色设置为#a6750a，描边颜色设置为无，绘制矩形；输入优惠券文本信息；调入“包装”素材；为每个包装图绘制圆形边框，将边框颜色设置为#5e5c5f，宽度设置为2像素；在每一个包装图的下方绘制一个矩形，将填充颜色设置为#5e5c5f，描边颜色设置为无，在相应的矩形上输入文本。 第一节 手机移动端电商网店视觉设计 １.３　手机移动端电商网店首页视觉设计案例——时尚床品店铺首页 　　案例效果：使用“矩形工具”绘制矩形，将填充颜色设置为#a6750a，描边颜色设置为无。按Ctrl+O组合键，打开资源库素材文件中的“田园风格”图片，将其拖动至矩形右侧，调整大小和矩形等大。在矩形中输入商品文字信息。同样的方法完成“宫廷风格”“梦幻风格”“英伦风格”的制作。商品展示效果如下图。 第一节 手机移动端电商网店视觉设计 １.４　手机移动端电商网店详情页视觉设计 　　（一）手机移动端电商网店详情页视觉设计规范 　　（1）手机移动端电商网店详情页支持文字、图片和音频，其中图片仅支持JPG、GIF和PNG格式。 　　（2）因为在设计手机移动端电商网店详情页时要考虑速度问题，所以详情页总大小（文字+图片+音频）不能超过1.5MB。 　　（3）手机移动端电商网店详情页中单张图片尺寸的高度不大于960像素，宽度为480像素～620像素。 　　（4）手机移动端电商网店详情页中围绕商品特点、产品特色和优惠活动等添加的音频时长建议小于30s，大小不超过200KB，且只能添加一个音频效果。 　　（5）手机移动端电商网店详情页离不开文字，但并不是多多益善，而是要求单个文本框输入文字不超过500个，详情页总字数少于5000个，中文文字大小要大于30号，英文和数字字号大小不小于20号。 第一节 手机移动端电商网店视觉设计 １.４　手机移动端电商网店详情页视觉设计 　　（二）手机移动端淘宝店铺详情页视觉设计要素 　　　1．产品细节的真实感 　　　2．关联销售的逻辑感 　　　３．产品参数的对话感 　　　４．购买评价的氛围感 　　　５．增值服务的亲切感 　　　６．产品认证的正规感 第一节 手机移动端电商网店视觉设计 1.5 手机移动端电商网店详情页视觉设计案例——索尼相机详情页 案例准备：启动软件，新建一个640像素×2467像素的文件。调入“相机1”图片。 第一节 手机移动端电商网店视觉设计 1.5 手机移动端电商网店详情页视觉设计案例——索尼相机详情页 案例操作：“矩形选框工具”绘制矩形选区，填充颜色#46623a，输入文本“好风景来自好相机”，将文本字体设置为楷体，文本颜色设置为白色，设置文本投影效果；绘制黑色矩形和线条，输入文本“产品主要信息”和信息内容，将文本字体设置为黑体，文本颜色设置为白色和黑色。将边框宽度设置为2个像素；输入文本“出色画质 精心呈现”，将文本字体设置为楷体，文本颜色设置为黑色，文本字号设置为36点。按Ctrl+O组合键，插入“优质画面”图片。 第一节 手机移动端电商网店视觉设计 1.5 手机移动端电商网店详情页视觉设计案例——索尼相机详情页 案例效果：依次输入文本，插入资源库素材文件中的“相机2”图片、“相机3”图片，最终效果如图所示。 第二节 手机移动端微店视觉设计 2.1 手机移动端微店首页视觉设计 （一）手机移动端微店店招:微店店招位于首页最上方，最先映入消费者眼帘的位置。与淘宝店铺的店招相同，在设计手机移动端微店店招时，首先要考虑想向消费者传达什么样的信息；其次对店招与店铺风格进行定位和统一；再次文字描述不要过多，应简洁明了；最后要突出主体，主次分明. （二）手机移动端微店店铺公告:用文字来阐述店铺优势、商品卖点、促销信息及服务内容等信息是微店公告的常用方式。凡是可以吸引消费者、告知情况的字眼或商品的重要信息，商家都可以放置在店铺公告内，但需要注意的是，文字必须清晰、简洁，让消费者一看就明白，不能占用浏览者太长时间，消磨其耐心。 第二节 手机移动端微店视觉设计 2.1 手机移动端微店首页视觉设计 （三）手机移动端微店焦点大图:无图不成焦点，有图片才能成为焦点。可以说焦点图也是图片内容的一种展示。一般情况下焦点大图都是以轮播的方式呈现的，是动态的，因此焦点大图容易引起消费者的注意，有很强的吸引力。 第二节 手机移动端微店视觉设计 2.1 手机移动端微店首页视觉设计 （四）手机移动端微店导航分类:在微店首页中，商家可以根据自己的设计和商品的特点将商品划分为不同类别，然后根据类别对商品进行排列展示。在一般情况下，消费者为了节约自己的时间，进入微店后首先会在首页中找到分类区域，直接找到符合自己需求的分类产品，快速完成购买。因此，在进行这部分设计时商家要遵循消费者的浏览习惯和购买习惯来进行分类设计。 （五）手机移动端微店商品展示:商品展示一般分为“限时折扣”“店长推荐”“全部商品”三个模块。“限时折扣”和“店长推荐”向消费者展示的是优惠商品和上新爆款商品，是消费者最关心的模块，也是促成消费者第一时间达成购买的重要区域。“全部商品”模块因为商品太多，很少有消费者愿意浏览，但如果微店中大多数商品都符合消费者的品味和需求，还是有一定的消费者愿意在这个区域反复浏览，寻找更多喜欢的商品。 第二节 手机移动端微店视觉设计 2.2 手机移动端微店详情页视觉设计 （一）商品主图视觉设计:在微店详情页视觉设计 中，商品主图视觉设计最为重要。这是因为消费者 在浏览商品时最先看到的图片就是商品主图，其基 本尺寸要求是640像素×640像素。在设计商品主图 时，要求可以清晰地展示商品细节，主题与背景要 主次分明，文案部分的文字不可过大、也不可过小， 形式和内容简洁明了，商品主图美观才能更吸引消 费者。 第二节 手机移动端微店视觉设计 2.2 手机移动端微店详情页视觉设计 （二）商品描述图视觉设计:商品描述图包括商品图片和商品描述。由于手机篇幅有限，商品描述图的宽度为640像素，高度没有限制。在商品描述图中，要求用最简短的文字突出商品特点、优点和卖点，还要求商品描述图和商品主图、商品标题的风格和文字内容相符合，如果出现商品描述图和商品主图或商品标题不相符的情况，会立刻导致消费者失去兴趣，甚至直接关掉页面。同时还要考虑多图少文的原则，文字大小要合适，颜色也不宜使用过亮的颜色. 第二节 手机移动端微店视觉设计 2.3 手机移动端微店底部导航视觉设计 （一）底部导航的主要作用:由于手机移动端微店的显示依赖智能手机的尺寸，所以留给底部导航的空间极小，但优秀的底部导航不仅可以使详情页看起来更加完整，还可以满足消费者在浏览微店时，轻松完成快速前往下一页或者如何前往某一页的操作，大大增加消费者对微店的兴趣，尽可能长时间吸引消费者浏览。 （二）底部导航设计规范:首先，在进行底部导航设计时尽量少于5个底部导航块，只显示最重要的功能，使页面虽小却清晰，否则容易造成两个图标之间间隙过小，导致误点击或错点击问题。其次，隐藏一部分图标，做成滚动设计的确是解决小屏幕内容多的常用方法，但这种方法却不适合微店底部导航设计，因为即使消费者看到了自己需要的图标，可能仍然需要滚动一下才能看到全部标签。最后，要让消费者清楚“我现在在哪”是手机移动端微店商家重点考虑的因素，应用合适的图标、标签或颜色可以直观地告诉用户当前所处的位置。 第二节 手机移动端微店视觉设计 2.4 手机移动端微店详情页视觉设计案例——年货大集详情页 案例准备：启动软件，新建一个640像素×1920像素的文件，选择“矩形选框工具在文件顶端绘制一个640像素×640像素的选区，填充颜色#a90606，在矩形以外的区域填充颜色#f4ebb5，完成背景颜色的设置。 第二节 手机移动端微店视觉设计 2.4 手机移动端微店详情页视觉设计案例——年货大集详情页 案例操作：输入文本“新春大吉”，将文本字体设置为楷体，文本字号设置为30点，文本颜色设置为黑色，对文本添加“渐变叠加”图层样式；调入“春节元素”图片，抠取图片中灯笼和烟花图案，将其复制到红色背景上进行装饰，将图层模式更改为“正片叠底”，突出层次感；调入“年货”图片，抠取图片中的主图，删除黑色背景；选择“圆角矩形”填充颜色设置为#a90606，描边颜色设置为无，然后绘制三个大小相同的矩形，添加“投影”图层样式，输入文字信息，完成优惠券的制作。 第二节 手机移动端微店视觉设计 2.4 手机移动端微店详情页视觉设计案例——年货大集详情页 案例操作：选择“矩形工具，将填充颜设置色为无，描边颜色设置为#a90606，描边宽度设置为2点，绘制圆角矩形线框。再次打开“春节元素”图片，抠取图片中的烟花图案装饰线框；按Ctrl+O组合键，打开“新年糖”图片，选择“椭圆选框工具”,属性栏中将羽化值设置为20像素，抠取羽化选区，拷贝后放置在步骤8中的圆角矩形线框内左侧;输入文本“新年疯狂购”字体设置为楷体，文本字号设置为30点，文本颜色设置为#a90606。输入文本“原料优质 新鲜到家”，将文本字体设置为楷体，文本字号设置为24点，文字颜色设置为#a90606 第二节 手机移动端微店视觉设计 2.4 手机移动端微店详情页视觉设计案例——年货大集详情页 案例效果：选择“矩形工具”属性栏中将填充颜色设置为无，描边颜色设置为#a90606，描边宽度设置为1像素，然后绘制三个圆角线框，分别输入文本“产品特点”“优惠活动”“新春惊喜”。同样的方法完成剩余主图的制作。 $$