课题
（项目、钙）
第8章手机移动端视觉设计
课时
设计手机字体样式用什么软件
教学目标
知识目标：1.了解手机移动端视觉设计理论；
2.掌握手机移动端电商网店首页视觉设计方法；
3.掌握手机移动端电商网店详情页视觉设计方法；
4.掌握手机移动端微店首页视觉设计方法；
5.掌握手机移动端微店详情页视觉设计方法；
6.掌握手机移动端微店尾部导航视觉设计方法。
技能目标：1.能运用Photoshop软件相关操作与命令制作手机移动端电商网店视觉设计
7.能运用Photoshop软件相关操作与命令制作手机移动端微店视觉设计
重点难点
重点：手机移动端电商网店视觉设计
难点：手机移动端电商网店视觉设计与PC端电商网店视觉设计的区别。
方法手段
方法：讲授法，讨论法，直观展示法，自主学习法，任务驱动法，课堂教学等
手段：多媒体幻灯片和投影仪
教学过程与内容
教学环节设计
第一节手机移动端电商网店视觉设计
一、创设意境，导入新课
二、新课教学一：手机移动端电商网店视觉设计认知
（一）手机移动端电商网店与PC端电商网店的区别
1.尺寸：由于手机屏幕较小，如果手机移动端电商网店中图片尺寸不合适，就
会造成界面的混乱或者浏览效果差的问题。
2.布局：方寸之间尽显大天地，这就要求手机移动端电商网店在布局上要简洁
明了，过多的装饰会影响画面浏览速度。
3.详情页：PC端电商网店的详情页大多会通过较多的文字来说明产品的特点、
店铺促销活动等信息”而手机移动端电商网店则要惜字如金，尽量使用最简洁的文
字和精准的图片信息阐述商品详情。
4.分类：手机移动端电商网店的区域划分要明确，模块体现要清晰，最好都用
图片的方式展现，体现少且精的特点。
5.颜：由于手机移动端电商网店页面面积较小，浏览者视觉受限，为了增强
消费者浏览的愉快感，因此手机移动端电商网店多用鲜艳、明亮的颜来装饰店铺，
这与PC端常用深系装饰店铺的方法完全相反。
（二）手机移动端电商网店视觉设计优势
1.极速浏览
1.新课导入
2.新课讲授
3.学生练习
4.教师总结
2.信息简洁，便于传播
（三）手机移动端电商网店视觉设计要点
1.保障速度
2.考虑简洁
3.重视彩
4.保持常新
三、新课教学二：手机移动端电商网店首页视觉设计
（-）手机移动端电商网店首页店招视觉设计
1.底图为背景图片：选择好看的背景图片作为店招的底图，再搭配清晰的文字
2.底图为单一纯图片•：山于手机端电商网店篇幅限制，经常有很多商家在设
计手机移动端电商网店店招时采用单一纯图片，这样的设计会使文字所传达的信
息更加清晰，一目了然。
3.底图为促销活动内容：在设计时把促销活动的图片、主题或文字内容作为背
景，不仅迎合设计主题，而且可以强化优惠信息，吸引消费者眼球。
•••Q回?中国需物5    08:15；
<<■■■■■■■■*=
“一孤镯昌昌舞胃事注领券
[□节日来这里    券翻■
（二）手机移动端电商网店首页焦点图视觉设计
手机移动端电商网店首页焦点图也叫轮播图，和PC端电商网店首页海报视觉设
计相同，通常被放置在店铺的首页，也就是手机第一屏中可以被消费者快速看到的
关键位置。但是，由于手机屏幕较小，又要展示产品和促销活动等内容，所以主题
要简明突出、文字要清晰准确、层次要主次分明。在制作手机移动端电商网店首页
焦点图时，轮播的图片要控制在4张以内。
（三）手机移动端电商网店首页优惠券视觉设计
优惠券可以抵减购买商品时的费用，是商家用于吸引消费者眼球，促进消费者
达成购买的重要营销手段。在通常情况下优惠券被放置在手机移动端电商网店首页
的开端位置，以便消费者可以第一时间到，快速引起消费者兴趣，激起购买欲望
开心领券包包惊喜
（四）手机移动端电商网店首页商品分类导航区视觉设计
在设计手机移动端电商网店首页商品分类导航区时.，由于手机的屏幕限制，一
定要把握好显示尺寸与比例，力求简明清晰，易于消费者选择。分类导航区通常紧
接店铺优惠券，起到快速导航的作用。
（五）手机移动端电商网店首页商品展示区视觉设计
在商品分类导航区之后出现的就是商品展示区。与PC端电商网店一样，商品展
示区主要用于展示商品，但因空间局限，不能对商品进行过多装饰与美化，只能进
行单排或双排的展示，以此来迎合手机移动端电商网店目标体求快、求变的心理,
方便其浏览和购买。
四、新课教学三：手机移动端电商网店首页视觉设计案例——时尚床品店铺首页
步骤1：启动PhotoshopCC2020软件，执行“文件”一“新建”命令，新建一个
608像素X1885像素的文件。
步骤2：执行“文件”一“打开”命令，打开资源库素材文件中的“背景”图片
,将其拖动至画面顶部，调整图片大小适应文件。
步骤3：选择软件工具箱中的“横排文字工具”，在“横排文字工具”属性栏中
将字体设置为黑体，文字大小设置为60点，文字颜设置为#@6750£1。在背景图的右
上方输入文本“舒适的家新品热卖”，将“新品热卖”文本字号设置为42点，右对
齐。
步骤4：选择软件工具箱中的“矩形工具”,在“矩形工具”属性栏中将填充颜
设置为#@6750@,描边颜设置为，然后无绘制矩形，将其作为优惠券背景，再复
制生成两个矩形，微调矩形大小、位置，设置矩形对齐方式为“底对齐”和“水平
居中分布”。
步骤5：在三个矩形内分别输入优惠券文本信息、，将文本颜设置为#ffffff文本
字体设置为黑体，文本字号调整至大小适中。
步骤6：按Ctrl+O组合键，打开资源库素材文件中的“包装”图片，将其拖动至
优惠券的下方，调整图片大小适应文件。
步骤7：为步骤6插入的图片中的每个包装图绘制圆形边框，将边框颜设置
为#5e5c5f,宽度设置为2像素。
步骤8：在每一个包装图的下方绘制一个矩形，将填充颜设置为#5o5c5f,描
边颜设置为无，在相应的矩形上输入文本，将文本字体设置为黑体，文字颜设
置为文本字号调整至大小适中，如图8-15所示。
会员，区
步骤9：使用软件工具箱中的“矩形工具”绘制矩形，将填充颜设置为#a6750a
,描边颜设置为无。按Ctrl+O组合键，打开资源库素材文件中的“田园风格”图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。