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

第8章

手机端店铺

首页设计;了解手机端店铺首页的基本概念

明确手机端店铺首页的模块结构;明确手机端店铺首页的设计思路

掌握手机端店铺首页的制作方法;培养良好的手机端店铺首页设计的操作习惯

培养对手机端店铺首页的审美鉴赏能力

培养对手机端店铺首页的设计创意能力;8.1手机端店铺基本概述;随着移动互联网的发展及普及，大众使用移动设备上网的时间远远超过使用电脑设备。淘宝、京东、一条等电商平台适应时代趋势，相继开发了App极大地满足了广大消费者使用移动设备随时随地网络购物的需求。由于移动设备有着方便灵活的特点，消费者通过移动设备网络购物的数量不断增多，甚至在重大节假日，通过手机端进行购物的消费者已经远超越PC端。因此，手机端店铺的设计与装修对于所有商家而言都至关重要。;1.设计尺寸不同

手机端店铺和电脑端店铺的设计尺寸大有不???，电商视觉设计师不能将设计好的PC端店铺图片直接照搬到手机端店铺，否则会引发界面混乱、显示不全和效果不佳等问题。;2.页面布局不同

由于设计尺寸的不同，手机端店铺与PC端店铺的页面布局也会有所区别，以此增强消费者在手机端店铺的浏览体验。例如，在PC端店铺为左右布局的横版海报，在手机端店铺则需要设计成上下布局的竖版海报。;3.模块构成不同

手机端的模块构成划分清晰，并且会根据设备特点加入更能吸引消费者的模块。例如，店铺首页中，手机端通常会在店招下方加入文字标题、店铺热搜和店铺会员等模块，较PC端更加丰富。;4.信息内容不同

由于尺寸缩小，手机端店铺需要在有限的空间内进行设计。因此相较于PC端店铺，手机端无法通过比较详细的文字说明商品，只会选择更精练的文案内容，并且对价格的字体进行加粗和调整颜色，以强调价格，令其更适合在手机端展示。;电商视觉设计师面临着手机端店铺设计尺寸小等挑战。因此在进行手机端店铺设计时，电商视觉设计师应该掌握其设计关键点，才能事半功倍，下面分别讲解手机端店铺的4个设计关键点。

符合浏览规范

统一平台视觉

进行页面统一

合理运用模块;8.2手机端店铺首页设计;手机端店铺首页的轮播海报是电商视觉设计师正式进行设计的模块，其宽度为1200像素，高度为120像素～2000像素，支持.jpg或.png格式，大小不超过2兆。;手机端店铺首页的优惠券可以依据5.2.3节中PC端首页优惠券的方法进行设计。需要注意的是，设计尺寸、字号大小和色彩搭配等要符合手机端浏览规范。;在手机端店铺中，消费者进行浏览时通常采用上下滑动的方式，因此电商视觉设计师在设计时应尽量减少大规模的点击交互，所以分类模块通常在商品类型丰富的店铺中进行保留。手机端首页分类模块的设计可以依据5.2.4节中PC端首页分类模块的方法进行设计。需要注意的是，在手机端中的分类模块有时会在设计上进行简化处理，以节约面积。;手机端店铺首页的商品展示可以依据5.2.5节中PC端首页商品展示的讲解进行设计。但由于设计尺寸有限，手机端店铺首页的商品展示无法像PC端那样一行4列，通常会以1行1列、1行2列和1行3列的形式进行展示。;由于底部信息位于店铺首页的尾部，消费者在浏览该模块时会容易产生视觉疲惫。因此，手机端的大部分店铺会去除底部信息。在个别保留底部信息的手机端店铺中，会将PC端店铺首页的底部信息做内容简化或颜色变化等处理，以吸引消费者观看兴趣、减轻消费者浏览负担。;使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具、“椭圆”工具、“多边形”工具和“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“创建剪贴蒙版”命令调整图片显示区域。;使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”“圆角矩形”“直线”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“添加图层蒙版”命令调整图片显示区域。;使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果。