《网店视觉营销设计》 课件 模块5任务3 设计与制作手机端详情页.pdf

•（一）任务工单

•任务目的：通过优化手机端商品详情页的设计和展示效果，提高用户满意度和购买转化率。

•任务描述：利用淘宝装修工具进行手机端详情页的制作。

•知识目标：熟悉详情页设计模块，掌握手机端详情页设计要点。

•能力目标：能利用淘宝旺铺模板以及图形图像处理软件，完成详情页的设计与制作。

•思政元素：强调详情页信息的准确性、真实性，培养学生诚实宣传观念，维护消费者的权益

的职业素养；了解电商助农，树立正确的价值观和职业道德，提升社会责任和公益意识。

•（二）任务情境

商品详情页作为手机端店铺装修过程中重要的环节之一，优化手机端商品详情页的设

计和展示效果可以提高用户满意度和购买转化率。手机端详情页不是对PC店铺页面的直接

缩放，与PC端详情页相比，手机端详情页需要更加注重简洁易懂、移动友好和视觉冲击力

等方面，考虑到移动设备的屏幕尺寸和操作习惯等因素，需要对页面进行更加精细的设计

和优化，以提高消费者的购物体验和满意度。

爱尚服饰根据手机端特征，对爆款女鞋进行商品详情页优化。

•（三）任务解析

应用旺铺详情页装修页面，实现手机端商品详情页设计与规划，利用平台模板提高详

情页装修效率。最终制作完成的详情页，效果如图5.3.1所示。

图5.3.1手机端详情页装修效果图

•（四）知识准备

•知识准备一手机端商品描述图文要求

在发布宝贝时，淘宝平台手机端宝贝描述的图文要求为：

1.480px≤图片宽度≤1500px（手机端图片宽度建议上传750px），0＜图片高度

≤2500px；

2.图片大小≤3M；

3.文字字数≤5000字；

4.摘要≤140字；

5.音频大小≤200k，仅支持MP3格式。

若导入电脑端描述或是直接上传的图片宽高度超过了限制，系统自动会等比例调整至

要求内，有可能会出现图片宽高度显示变形等问题，建议上传时调整好宽高度。旺铺编辑

器升级后，发布成功后仅需维护一份数据，即可在电脑和手机上同步展示。

•（四）知识准备

•知识准备二详情页设计模块

根据详情页的相关内容，可将详情页拆分成以下主要模块，包括基本信息、商品展示、

细节展示、卖点展示、商品对比、核心竞争力、情感营销、商家承诺、客户体验、品牌文

化、实力展示、生产流程、包装展示、资质证书、问与答等。

想一想：

进行详情页设计和制作时是否要将上述模块全部用上？

进行详情页设计时，商家应该根据自身特点和商品需要，确定详情页框架，构思好详情

页的内容，选择重要的模块进行组合展示，避免详情页过长，增加顾客浏览负担。

•（四）知识准备

•知识准备三手机端详情页装修要点

手机端商品详情页设计需要根据手机的特点进行独特的设计，以提高消费者的购物体验和

满意度。

1.颜色搭配简单统一：手机端网店详情页的颜色搭配需要简洁明了，不要使用过多的颜

色，以免干扰用户的注意力。

2.设计一致性：手机端网店详情页的设计需要和整个网店的设计保持一致，符合用户的

使用习惯，提高用户的使用体验。

•（四）知识准备

•知识准备三手机端详情页装修要点

3.简洁明了，注重细节：由于手机屏幕相对较小，商品详情页需要更加简洁明了，同时

在展示商品时需要更加注重产品细节，例如加大描述文字等，以便让用户更加清晰地

了解产品。

4.快速响应：由于手机网络环境的不稳定性，商品详情页需要保证图片容量适当，响应

速度快，让消费者可以快速地获取商品信息。

5.强化互动：手机端商品详情页可加入互动性强的功能，如评论、分享、收藏等，以增

加消费者的参与度和黏性。

•（五）任务实施

利用淘宝旺铺的图文详情编辑器，可以进行模块化操作，完成详情页的编辑。图文详

情编辑器官方模块分为四大类：基础模块、营销模块、行业模块、自定义模块，商家可根

据详情页制作需要，添加、删除相应模块，并选择合适模板，通过替换图片、文字等实现

详情页制作，操作较为简单方便，可提升网

店美工人员的工作效率。本次女鞋手机端详

情页设计主要利用旺铺详情编辑器完成。

具体操作如下：

•步骤