第9章移动端网店视觉设计与装修《Photoshop CC网店美工视觉设计实战》同步教学（工信版）（课件）

Photoshop CC网店美工视觉设计实战（全彩微课版） 第9章 移动端网店视觉设计 与装修 目录 Contents 移动端网店首页设计基础 移动端网店首页设计 9.2 9.1 移动端网店首页装修 9.3 移动端详情页的设计 9.4 实战演练——制作家具网店移动端首页 9.5 9.1.1 了解移动端网店首页 3 01 02 03 04 05 尺寸对比 布局对比 详情对比 分类对比 颜色对比 移动端网店首页与计算机端网店首页的区别具体体现在尺寸、布局、详情、分类和颜色5个方面。 9.1.2 移动端网店首页模块的组成 4 和计算机端网店首页一样，各电商平台也为移动端网店首页装修提供了模块，当下最主流的移动端是手机端，这里以淘宝网手机端为例来介绍移动端网店首页模块。下图所示为移动端网店首页的模块布局。 9.1.2 移动端网店首页模块的组成 5 04 03 02 01 轮播图海报模块 单图海报模块 文字标题模块 优惠券模块 05 网店热搜模块 06 宝贝类模块 下面介绍常用的移动端网店首页页面模块的组成与设计要点。 9.1.3 移动端网店首页设计的注意事项 6 对页面整体内容的把握 与计算机端的内容统一 注重舒适性 合理控制页面的长度 受到移动端设备屏幕大小的限制，移动端网店首页能承载的信息有限，所以网店美工在设计移动端网店首页时，还需特别注意以下4个方面。 目录 Contents 移动端网店首页装修 9.3 移动端详情页的设计 9.4 实战演练——制作家具网店移动端首页 9.5 移动端网店首页设计基础 移动端网店首页设计 9.2 9.1 9.2.1 海报设计 8 打开背景 输入文字1 1 2 海报位于移动端首页的第一屏，其位置十分显眼，尺寸也相对较大，能承载的信息也多，因此优质的海报能够起到很好的引流效果。 韵琴行准备为纯手工古琴制作海报，在设计时直接采用古琴商品图片作为背景，并添加与古琴相关的文字，如纯手工古琴、伏羲式等，方便消费者了解古琴的详情信息，在字体选择上可选择毛笔字效果的字体，以体现古琴的韵味，具体操作如下。 9.2.1 海报设计 9 4 设置内阴影 设置外发光 3 9.2.1 海报设计 10 最终效果 6 输入文字2 5 9.2.2 优惠券设计 11 绘制矩形 绘制圆并输入文本 2 1 与计算机端相比，移动端优惠券的位置更显眼，引流效果更好。网店美工在海报的下方制作优惠券，设计时以黑色为底色，以红色作为优惠券的颜色，使其更加醒目，便于消费者查看。具体操作如下。 9.2.2 优惠券设计 12 创建剪贴蒙版并设置不透明度 输入文本 4 5 3 绘制圆角矩形并更改文本颜色 9.2.2 优惠券设计 13 设置投影 制作其他优惠券 7 6 9.2.3 商品分类设计 14 绘制圆角矩形并输入文本 绘制矩形 2 1 移动端商品分类设计与计算机端的分类设计相比，文本的字体更大，分类板块也更加分明。在设计商品分类时，网店美工可继续沿用海报中的黑色作为主色，然后根据不同的用途进行分类设计，如初级类古琴、考级类古琴、演奏类古琴、收藏类古琴等，便于消费者快速查看需要的古琴，具体操作如下。 9.2.3 商品分类设计 15 添加素材 输入文本 4 3 9.2.4 宝贝展示设计 16 绘制矩形 输入“▲”符号 2 1 绘制直线 3 为了便于消费者清晰地浏览宝贝信息，移动端的宝贝展示图一般分为一行展示图和两行展示图。网店美工要在分类板块的下方继续制作宝贝展示板块，可将整个设计分为热卖商品、新品上架两个部分，具体操作如下。 9.2.4 宝贝展示设计 17 复制并移动直线后的效果 变换直线 5 4 输入文本 6 9.2.4 宝贝展示设计 18 绘制标签图形 8 添加素材 7 绘制正圆 9 9.2.4 宝贝展示设计 19 制作“新品上架”页头 11 输入文本1 10 添加素材并绘制形状 12 9.2.4 宝贝展示设计 20 完成后的效果 14 输入文本2 13 目录 Contents 移动端详情页的设计 9.4 实战演练——制作家具网店移动端首页 9.5 移动端网店首页设计基础 9.1 移动端网店首页设计 9.2 移动端网店首页装修 9.3 9.3.1 模块装修 22 添加单图海报模块 单击“装修页面”超链接 单击“上传图片”按钮 1 2 3 网店美工在使用模块装修网店时，需要先进入装修页面，选择并添加需要的模块，然后在模块右侧的面板上编辑图片、文本、视频、链接地址等信息。古韵琴行的移动端网店首页设计完成后，需要进行装修，具体操作如下。 9.3.1 模块装修 23 设置图片裁剪区域 选择图片 输入跳转链接 4 5 6 9.3.1 模块装修 24 添加热区 添加优惠券图片 7 8 9.3.2 一键智能