电商视觉设计课件 第8章 手机端店铺首页设计

第8章手机端店铺首页设计本章介绍：随着移动互联网的发展与普及，消费者在手机端电商平台进行网购已经成为主流。因此，手机端店铺首页的设计对于所有商家而言都至关重要，是电商视觉设计任务中的核心工作。本章针对手机端店铺首页的基本概念和模块结构等基础知识进行系统讲解，并针对流行风格与典型行业的手机端店铺首页进行设计演练。通过本章的学习，读者可以对手机端店铺首页的设计有一个系统的认识，并快速掌握手机端店铺首页的设计规范和制作方法，成功制作出具有强大购买力的手机端店铺首页。 了解手机端店铺首页的基本概念明确手机端店铺首页的模块结构知识目标明确手机端店铺首页的设计思路掌握手机端店铺首页的制作方法能力目标培养良好的手机端店铺首页设计的操作习惯培养对手机端店铺首页的审美鉴赏能力培养对手机端店铺首页的设计创意能力素质目标8.1手机端店铺基本概述手机端店铺设计的必要性手机端与PC端店铺设计的区别手机端店铺设计的关键点随着移动互联网的发展及普及，大众使用移动设备上网的时间远远超过使用电脑设备。淘宝、京东、一条等电商平台适应时代趋势，相继开发了App极大地满足了广大消费者使用移动设备随时随地网络购物的需求。由于移动设备有着方便灵活的特点，消费者通过移动设备网络购物的数量不断增多，甚至在重大节假日，通过手机端进行购物的消费者已经远超越PC端。因此，手机端店铺的设计与装修对于所有商家而言都至关重要。设计精美的手机端店铺8.1.1手机端店铺设计的必要性1.设计尺寸不同手机端店铺和电脑端店铺的设计尺寸大有不同，电商视觉设计师不能将设计好的PC端店铺图片直接照搬到手机端店铺，否则会引发界面混乱、显示不全和效果不佳等问题。8.1.2手机端与PC端店铺区别手机端店铺首页PC端店铺首页2.页面布局不同由于设计尺寸的不同，手机端店铺与PC端店铺的页面布局也会有所区别，以此增强消费者在手机端店铺的浏览体验。例如，在PC端店铺为左右布局的横版海报，在手机端店铺则需要设计成上下布局的竖版海报。手机端店铺首页8.1.2手机端与PC端店铺区别PC端店铺首页3.模块构成不同手机端的模块构成划分清晰，并且会根据设备特点加入更能吸引消费者的模块。例如，店铺首页中，手机端通常会在店招下方加入文字标题、店铺热搜和店铺会员等模块，较PC端更加丰富。手机端店铺首页

8.1.2手机端与PC端店铺区别PC端店铺首页4.信息内容不同由于尺寸缩小，手机端店铺需要在有限的空间内进行设计。因此相较于PC端店铺，手机端无法通过比较详细的文字说明商品，只会选择更精练的文案内容，并且对价格的字体进行加粗和调整颜色，以强调价格，令其更适合在手机端展示。手机端店铺首页信息内容8.1.2手机端与PC端店铺区别PC端店铺首页信息内容电商视觉设计师面临着手机端店铺设计尺寸小等挑战。因此在进行手机端店铺设计时，电商视觉设计师应该掌握其设计关键点，才能事半功倍，下面分别讲解手机端店铺的4个设计关键点。符合浏览规范统一平台视觉进行页面统一合理运用模块8.1.3手机端店铺设计的关键点8.2手机端店铺首页设计轮播海报设计优惠券设计分类模块设计商品展示设计底部信息设计应用案例——设计简约家具手机端店铺首页手机端店铺首页的轮播海报是电商视觉设计师正式进行设计的模块，其宽度为1200像素，高度为120像素～2000像素，支持.jpg或.png格式，大小不超过2兆。8.2.1轮播海报设计轮播海报效果图手机端店铺首页的优惠券可以依据5.2.3节中PC端首页优惠券的方法进行设计。需要注意的是，设计尺寸、字号大小和色彩搭配等要符合手机端浏览规范。8.2.2优惠券设计优惠券效果图在手机端店铺中，消费者进行浏览时通常采用上下滑动的方式，因此电商视觉设计师在设计时应尽量减少大规模的点击交互，所以分类模块通常在商品类型丰富的店铺中进行保留。手机端首页分类模块的设计可以依据5.2.4节中PC端首页分类模块的方法进行设计。需要注意的是，在手机端中的分类模块有时会在设计上进行简化处理，以节约面积。8.2.3分类模块设计

手机端首页分类模块（左）

PC端首页分类模块（右）月烨家居旗舰店手机端店铺首页的商品展示可以依据5.2.5节中PC端首页商品展示的讲解进行设计。但由于设计尺寸有限，手机端店铺首页的商品展示无法像PC端那样一行4列，通常会以1行1列、1行2列和1行3列的形式进行展示。8.2.4商品展示设计商品展示效果图由于底部信息位于店铺首页的尾部，消费者在浏览该模块时会容易产生视觉疲惫。因此，手机端的大部分店铺会去除底部信息。在个别保留底部信息的手机端店铺中，会将PC端店铺首页的底部信息做内容简化或颜色变化等处理，以吸引消费者观看兴趣、减轻消费者浏览负担。8.2.5底部信息设计手机端店铺首页底部信息PC端店铺首页底部信息使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具、“椭圆”工具、“多边形”工具和“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“创建剪贴蒙版”命令调整图片显示区域。8.2.6应用案例——设计简约家具手机端店铺首页效果图使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”“圆角矩形”“直线”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“添加图层蒙版”命令调整图片显示区域。课堂实训——设计数码产