电子商务视觉设计 教案 第8章 手机移动端视觉设计

admin管理员组

文章数量:1530847

2023年12月19日发(作者：)

课题

（项目、钙）

第8章手机移动端视觉设计

知识目标：1.了解手机移动端视觉设计理论；

课时

2.掌握手机移动端电商网店首页视觉设计方法；

3.掌握手机移动端电商网店详情页视觉设计方法；

教学目标

4.掌握手机移动端微店首页视觉设计方法；

5.掌握手机移动端微店详情页视觉设计方法；

6.掌握手机移动端微店尾部导航视觉设计方法。

技能目标：1.能运用Photoshop软件相关操作与命令制作手机移动端电商网店视觉设计

7.能运用Photoshop软件相关操作与命令制作手机移动端微店视觉设计

重点难点

重点：手机移动端电商网店视觉设计

难点：手机移动端电商网店视觉设计与PC端电商网店视觉设计的区别。

方法手段

方法：讲授法，讨论法，直观展示法，自主学习法，任务驱动法，课堂教学等

手段：多媒体幻灯片和投影仪

教学过程与内容

第一节手机移动端电商网店视觉设计

一、创设意境，导入新课

教学环节设计

1.新课导入

2.新课讲授

二、新课教学一：手机移动端电商网店视觉设计认知

（一）手机移动端电商网店与PC端电商网店的区别

3.学生练习

4.教师总结

1 .尺寸：由于手机屏幕较小，如果手机移动端电商网店中图片尺寸不合适，就

会造成界面的混乱或者浏览效果差的问题。

2 .布局：方寸之间尽显大天地，这就要求手机移动端电商网店在布局上要简洁

明了，过多的装饰会影响画面浏览速度。

3 .详情页：PC端电商网店的详情页大多会通过较多的文字来说明产品的特点、

店铺促销活动等信息”而手机移动端电商网店则要惜字如金，尽量使用最简洁的文

字和精准的图片信息阐述商品详情。

4 .分类：手机移动端电商网店的区域划分要明确，模块体现要清晰，最好都用

图片的方式展现，体现少且精的特点。

5 .颜色：由于手机移动端电商网店页面面积较小，浏览者视觉受限，为了增强

消费者浏览的愉快感，因此手机移动端电商网店多用鲜艳、明亮的颜色来装饰店铺，

这与PC端常用深色系装饰店铺的方法完全相反。

（二）手机移动端电商网店视觉设计优势

1.极速浏览

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组合键，打开资源库素材文件中的“田园风格”图

片，将其拖动至矩形右侧，调整大小和矩形等大。在矩形中输入商品文字信息。

步骤10：使用同样方法完成“宫廷风格”“梦幻风格”“英伦风格”的制作。

五、新课教学四：手机移动端电商网店详情页视觉设计

手机移动端电商网店详情页视觉设计的思路和PC端电商网店详情页视觉设计的

思路相同。因此，在设计手机移动端电商网店详情页时需要在借鉴PC端电商网店详

情页视觉设计的基础上充分考虑手机移动端图片尺寸问题和描述文字的简洁问题，

否则，详情页就会出现不显示或排版错乱的情况，或者出现文字过密导致流量跳失

问题。为了提高手机用户的购买率，装修好手机移动端电商网店详情页非常重要。

（一）手机移动端电商网店详情页视觉设计规范

（1）手机移动端电商网店详情页支持文字、图片和音频，其中图片仅支持JPG、

GIF和PNG格式。

（2）因为在设计手机移动端电商网店详情页时要考虑速度问题，所以详情页总

大小（文字+图片+音频）不能超过1.5MB。

（3）手机移动端电商网店详情页中单张图片尺寸的高度不大于960像素，宽度

为480像素〜620像素。

（4）手机移动端电商网店详情页中围绕商品特点、产品特色和优惠活动等添加

的音频时长建议小于30s,大小不超过200KB,且只能添加一个音频效果。

（5）手机移动端电商网店详情页离不开文字，但并不是多多益善，而是要求单

个文本框输入文字不超过500个，详情页总字数少于5000个，中文文字大小要大于30

点，英文和数字字号大小不小于20点。

（二）手机移动端淘宝店铺详情页视觉设计要素

1 .产品细节的真实感

2 .关联销售的逻辑感

3 .产品参数的对话感

4 .购买评价的氛围感

5

.服务的亲切感

6 .商品认证的正规感

六、新课教学五：手机端电商网店详情页视觉设计案例——索尼相机详情页

步骤L启动PhotoshopCC2020软件，执行“文件”一“新建”命令，新建一个

640像素义2467像素的文件。

步骤2：执行“文件”一“打开”命令，打开资源库素材文件中的“相机1”图

片，将其拖动至画面顶部，调整其大小适应文件。

步骤3：使用软件工具箱中的“矩形选框工具”在调入的背景图层下绘制矩形选

区，填充颜色#46623a,输入文本“好风景来自好相机”，将文本字体设置为楷体,

文本颜色设置为#£££用，文本字号调整至大小适中，设置文本投影。

好风景来自好相机

步骤4：绘制黑色矩形和线条，输入文本“产品主要信息”，将文本字体设置为

黑体，文本颜色设置为#ffffff。输入产品主要信息内容，将文本字体设置为黑体，文

本颜色设置为黑色，文本字号调整至大小适中。将边框宽度设置为2个像素。

好风景来自好相机

产品主要信息

发布H期2009年05月

产品矣型APS-C规格数码单反

操作方式全手动支持

传毒；S:23.5X15.8mm

有效像素：1020万

柱状出指示(光度,RGB)

索引侬放

放大视图(最大放大隼):X12(L),X9.1(M).X6.1(S)影像衣朴保护

对然方式

吴型：(TTL)相位检测系统

传感4:CCD蝶性传感;8

对焦点：9点

感光度范Bi:EVO-18(IS0100)

时依模式：自动对候

自动选择，单次，连续自动对以，友接手动对焦，子动对照

懵测对焦控制：-C焦点侦定自动对焦

照明28:内置闪光(的1-56)

步骤5：在宝贝详情处输入文本“出色画质精心呈现”，将文本字体设置为楷

体，文本颜色设置为黑色，文本字号设置为36点。按Ctrl+O组合键，插入“优质画

面”图片，调整其大小至适合背景的大小。

交型：(TTL)栖强检弼系统

传急落：CCO^ttMSS

同焦点：9点

感比凤范围：EVO-10(IS0100)

对，.槎戌：白功时悲

“动逸杯，单次，连续自动对加;，宜扶手动对侬,，手动对黑

雨洌时热拄制：AF-A,AF-C京点饯定勺动时启

黑明露:内豆网丸(#015m)

宝贝详情

出色画质精心呈现

源库素材文件步骤6：操作同步骤5,依次输入文木，插入资中的“相机2”图片

“相机3”图片。

七、学生练习

学生根据教师讲授内容，练习手机移动端首页和详情页视觉设计。

八、教学总结

教师结合学生完成练习的情况，对本节课的教学过程进行小结，指正学生在操

作中存在的问答，强调学生在本节学习中应该注意的要点和难点。

作业

教学小结

课题

（项目、章节）

第8章手机移动端视觉设计

课时

知识目标：1

了解手机移动端视觉设计理论；

掌握手机移动端电商网店首页视觉设计方法；

掌握手机移动端电商网店详情页视觉设计方法；

教学目标

掌握手机移动端微店首页视觉设计方法；

掌握手机移动端微店详情页视觉设计方法；

掌握手机移动端微店尾部导航视觉设计方法。

技能目标：1

能运用Photoshop软件相关操作与命令制作手机移动端电商网店视觉设计

2.能运用Photoshop软件相关操作与命令制作手机移动端微店视觉设计

重点难点

重点：手机移动端电商网店视觉设计

难点：手机移动端电商网店视觉设计与PC端电商网店视觉设计的区别。

方法：讲授法，讨论法，直观展示法，自主学习法，任务驱动法，课堂教学等

手段：多媒体幻灯片和投影仪

教学过程与内容

第二节手机移动端微店视觉设计

教学环节设计

方法手段

1

.复习、新课导入

2

.新课讲授

3 .学生练习

一、创设意境，导入新课

二、新课教学一：手机移动端微店首页视觉设计

（-）手机移动端微店店招

微店店招位于首页最上方，最先映入消费者眼帘的位置。与淘宝店铺的店招相

4 .教师总结

同，在设计手机移动端微店店招时，首先要考虑想向消费者传达什么样的信息；其

次对店招与店铺风格进行定位和统一；再次文字描述不要过多，应简洁明了；最后

要突出主体，主次分明。

方10:19©-

首页

源头好货&方

和7小小推荐

3SSSBS负甜无遣

小小家的精子因现胶发货fM&t

&

个人主交

适品分差

（二）手机移动端微店店铺公告

川文字来阐述店铺优势、商品卖点、促销信息及服务内容等信息是微店公告的

常用方式。凡是可以吸引消费者、告知情况的字眼或商品的重要信息，商家都可以

放置在店铺公告内，但需要注意的是，文字必须清晰、简洁，让消费者一看就明白

不能占用浏览者太长时间，消磨其耐心。

•••••温馨提示•••••

因疫情影响以卜仄的发货和收货，恢复后尽快发出:谢阴支持;

辽宁省

河北省［吉林省］n龙江管

北京市

北京市（大兴区、义区）.河北省（全境）

东三省部分地区无法保证时效（慎拍）

Q诲外客户 ■资金安全

电力■温0.，丁|9s・过■优地S传式/E*

I*失・Mas*.Mtra.

（三）手机移动端微店焦点大图

无图不成焦点，有图片才能成为焦点。可以说焦点图也是图片内容的一种展示。

一般情况下焦点大图都是以轮播的方式呈现的，是动态的，因此焦点大图容易引起

消费者的注意，有很强的吸引力。

（四）手机移动端微店导航分类

在微店首页中，商家可以根据自己的设计和商品的特点将商品划分为不同类别,

然后根据类别对商品进行排列展示。在一般情况下，消费者为了节约自己的时间，

进入微店后首先会在首页中找到分类区域，直接找到符合自己需求的分类产品，快

速完成购买。因此，在进行这部分设计时商家要遵循消费者的浏览习惯和购买习惯

来进行分类设计。导航分类如图8-34所示。

（五）手机移动端微店商品展示

商品展示一般分为“限时折扣”“店长推荐”“全部商品”三个模块。“限时

折扣”和“店长推荐”向消费者展示的是优惠商品和上新爆款商品，是消费者最关

心的模块，也是促成消费者第一时间达成购买的重要区域。“全部商品”模块因为

商品太多，很少有消费者愿意浏览，但如果微店中大多数商品都符合消费者的品味

和需求，还是有一定的消费者愿意在这个区域反复浏览，寻找更多喜欢的商品。

三、新课教学二：手机移动端微店详情页视觉设计

（一）商品主图视觉设计

在微店详情页视觉设计中，商品主图视觉设计最为重要。这是因为消费者在浏

览商品时最先看到的图片就是商品主图，其基木尺寸要求是640像素X640像素。在

设计商品主图时，要求可以清晰地展示商品细节，主题与背景要主次分明，文案部

分的文字不可过大、也不可过小，形式和内容简洁明了，商品主:图美观才能更吸引

消费者。

¥24.23-40.05

小学生课桌桌布局膏男女学生防干裂洞后青无色

口红打底保温滋润口

匕选择分类

发货至北京市-朝阳区

。元总

（二）商品描述图视觉设计

商品描述图包括商品图片和商品描述。由于手机篇幅有限，商品描述图的宽度

为640像素，高度没有限制。在商品描述图中，要求用最简短的文字突出商品特点、

优点和卖点，还要求商品描述图和商品主图、商品标题的风格和文字内容相符合，

如果出现商品描述图和商品主图或商品标题不相符的情况，会立刻导致消费者失去

兴趣，甚至直接关掉页面。同时还要考虑多图少文的原则，文字大小要合适，颜色

也不宜使用过亮的颜色。

豪华婚庆大件套

II

■

四、新课教学三：手机移动端微店底部导航视觉设计

（一）底部导航的主要作用：由于手机移动端微店的显示依赖智能手机的尺寸，

所以留给底部导航的空间极小，但优秀的底部导航不仅可以使详情页看起来更加完

整，还可以满足消费者在浏览微店时，轻松完成快速前往下一页或者如何前往某一

页的操作，大大增加消费者对微店的兴趣，尽可能长时间吸引消费者浏览。

（二）底部导航设计规范：首先，在进行底部导航设计时尽量少于5个底部导航块,

只显示最重要的功能，使页面虽小却清晰，否则容易造成两个图标之间间隙过小，

导致误点击或错点击问题。其次，隐藏一部分图标，做成滚动设计的确是解决小屏

幕内容多的常用方法，但这种方法却不适合微店底部导航设计，因为即使消费者看

到了自己需要的图标，可能仍然需要滚动一下才能看到全部标签。最后，要让消费

者清楚“我现在在哪”是手机移动端微店商家重点考虑的因素，应用合适的图标、

标签或颜色可以直观地告诉用户当前所处的位置。

五、新课教学四：手机移动端微店详情页视觉设计案例——年货大集详情页

步骤1：启动PhotoshopCC2020软件，执行“文件”一“新建”命令，新建一个

640像素X1920像素的文件。

步骤2：选择软件工具箱中的“矩形选框工具”，在文件顶端绘制一个640像素

X640像素的选区，填充颜色而90606,在矩形以外的区域填充颜色#f4ebb5,完成背

景颜色的设置。

步骤3：输入文本“新春大吉”，将文本字体设置为楷体，文木字号设置为30

点，文本颜色设置为黑色，对文本添加“渐变叠加”图层样式。

步骤4：执行“文件”一“打开”命令，打开资源库素材文件中的“春节元素”

图片，抠取图片中灯笼和烟花图案，将其复制到红色背景上进行装饰，将图层模式

更改为“正片叠底”，突出层次感。

新春大吉.

步骤5：执行“文件”一“打开”命令，打开资源库素材文件中的“年货”图片

,抠取图片中的主图，删除黑色背景，然后放置在文本下方的合适位置，并微调图

片大小。

步骤6：选择软件工具箱中的“圆角矩形”，将填充颜色设置为#a90606,描边

颜色设置为无，然后绘制三个大小相同的矩形，依次排开，合并图层后为矩形添加

“投影”图层样式。

步骤7：在圆角矩形上输入文字信息，完成优惠券的制作。

新春大吉瞥

■■■■Mm

步骤8：选择软件工具箱中的“矩形工具”，将填充颜设置色为无，描边颜色设

置为#a90606,描边宽度设置为2点，绘制圆角矩形线框。再次打开“春节元素”图

片，抠取图片中的烟花图案装饰线框。

步骤9：按Ctrl+O组合键，打开资源库素材文件中的“新年糖”图片，选择软件

工具箱中“椭圆选框工具”，在“椭圆选框工具”属性栏中将羽化值设置为20像素,

抠取羽化选区，拷贝后放置在步骤8中的圆角矩形线框内左侧。

步骤10：输入文本“新年疯狂购”，将文本字体设置为楷体，文本字号设置为

30点，文本颜色设置为#@90606。输入文本“原料优质新鲜到家”，将文本字体设

置为楷体，文本字号设置为24点，文字颜色设置为瓶90606。

步喉11：选择软件工具箱中的“矩形工具”，在“矩形工具”属性栏中将填充

颜色设置为无，描边颜色设置为#a90606,描边宽度设置为1像素，然后绘制三个圆

角线框，分别输入文本“产品特点”“优惠活动”“新春惊喜”。

10元器S

20元誉;二

新年艮狂购

原新代用

新弊外拿

(H)(^3

(H]

步骤12：使用同样的方法完成剩余主图的制作，最终效果如卜.图所示。

新春大吉t'

10元7：120元，：1130元人二:

新年底狂购

■原料优“

新年我狂购

自然&3

m名 二«1

冏⑥因

新年现狂跑

鸿雄务失

⑥回回

六、学生练习

学生根据教师讲授内容，练习手机移动端微店首页和详情页视觉设计。

七、教学总结

教师结合学生完成练习的情况，对本节课的教学过程进行小结，指正学生在操

作中存在的问磐，强调学生在本节学习中应该注意的要点和难点。

作业

教学小结

本文标签： 移动手机设计网店商品