电商设计电子课件

第10章手机端活动专题页设计本章介绍：手机端活动专题页较PC端活动专题页的可视范围变小，商品变得更加集中，更容易吸引用户，因此手机端活动专题页的商品销量更好。本章针对手机端活动专题页的基本类型、呈现特点以及手机端店铺活动专题页设计等基础知识进行系统讲解，并针对流行风格与典型行业的手机端活动专题页进行设计演练。通过本章的学习，读者可以对手机端活动专题页的设计有一个系统的认识，并快速掌握手机端活动专题页的设计规范和制作方法，成功塑造出色精彩的手机端活动专题页。了解手机端活动专题页的基本类型了解手机端活动专题页的呈现特点熟悉手机端活动专题页的版块设计学习目标

手机端活动专题页与PC端活动专题页一样可以分为平台专题页和店铺专题页，其中手机端平台专题页Banner常设计为为横屏小尺寸，而店铺专题页则设计为竖屏大尺寸。10.1手机端活动专题页的基本类型手机端活动专题页10.2手机端活动专题页的呈现特点文字可见内容精简层次分明重点突出手机端屏幕较PC端屏幕，在设计尺寸和观看方式都发生了根本性变化。设计时，应跳出大屏排版小而美的惯性思维，字号需要在24像素以上，以确保内容的识别性和可读性。10.2.1文字可见效果展示虽然专题页拥有大量的促销信息和商品信息，但手机端的屏幕空间有限，因此需要在表意明确与突出卖点的前提下，尽量做到信息内容的精简，依次提高信息传达的效率。10.2.2内容精简效果展示专题页作为各类商品的总入口，承担了流量分发和商品转化的双重作用，因此针对每个商品的信息设计都需要做到层次分明、条理清晰。通常商品的信息内容会设计出商品名称、商品卖点、商品促销、商品价格以及购买按钮五个层次，有时这几个层次也可以根据需要合并在一起。10.2.3层次分明购买按钮五个层次尽管对活动专题页划分了层级，但仅靠划分层级的专题页无法快速传递出核心信息，还需要设计师将核心层级进行重点突出。通常会通过改变文字大小字重、改变文字颜色以及加入文字背景框这三种形式进一步划分主次关系，以上三种形式都是结合使用，较少单独使用。10.2.4重点突出商品设计效果10.3手机端活动专题页的版块设计手机端店铺活动专题页的设计尺寸手机端活动专题页的页面结构课堂案例-手机端品质国货家电平台专题页设计

手机端活动专题页的设计尺寸可以参考手机端电商平台和店铺首页设计的尺寸进行设置。通常将平台专题页的宽度设置为750像素，店铺专题页的宽度设置为1200像素，两侧的边距一般有20px、24px、30px、32px、40px以及50px，建议采用30px以上的边距。高度不限，可以根据商家不同需要进行变化。10.3.1手机端店铺活动专题页的设计尺寸手机端活动专题页与PC端活动专题页一样，由Banner、活动促销区以及商品陈列区组成，参考1.5.3栅格系统确立好活动专题页的栅格，根据主流电商设计活动专题页的版块尺寸，同样可总结出紧凑型和宽松型共7种版块，并根据不同呈现内容进行同类型的组合使用。10.3.2手机端活动专题页的页面结构板块类型使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“直线”工具、“椭圆”工具和“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果，使用“创建剪贴蒙版”命令调整图片显示区域。10.3.3课堂案例-手机端品质国货家电平台专题页设计效果展示学习使用绘图工具、文字工具制作手机端初春焕新家电平台专题页。10.4课堂练习-手机端初春