生成手机端商品详情页模板

活动背景

为了满足手机端的视觉需求，小可要把布局构图、背景风格等不适宜直接导入手机端的商品详情页，重新生成手机端详情页。小可要如何操作呢？一起来学习吧！

知识窗

随着手机全屏时代的到来，屏幕的高度尺寸也产生了变化；受到屏幕限制的原因，可以考虑利用竖版构图展示商品信息。

设计时可以将一张完整图显示在一屏的浏览界面上；详情页一屏的参考尺寸：

①iphone8 5.5寸，淘宝：750 px×1 118 px；天猫：790 px×1 178 px。

②安卓机6.0寸全面屏，淘宝：750 px×1 297 px；天猫：790 px×1 366 px。

实际尺寸可结合手机用户大数据分析以及店铺商品特点等。

活动目标

了解手机端详情页单屏的构图和设计理念，掌握手机端详情页的设计要素。

活动实施

设计步骤参考如下：

（1）手机端详情页单屏的基本构图法。手机浏览的连贯性不如PC端，所以商品详情页必须简单直接，尽量将商品卖点和展示重点放在前面；可以吸引消费者的注意力。打开“项目6”→“6.3.7素材”图片，参考尺寸：750 px×1110 px，参照效果图进行商品的摆放，如图6.3.6所示。(www.xing528.com)

（2）优化图片和文字。手机端详情字体要适中，不宜过小；文字配色可选用商品颜色，使画面感统一、简洁。只描述重要的东西，往往转化率越高。要打消买家顾虑，解决买家最关心的问题，坚定买家购买决心。如图6.3.7所示。

（3）在线生成详情模板。与手机端导入详情页方式相同；在手机端装修页面进入“详情装修”。点击右侧模块可以进行详情页的图片、文字、视频、动图等内容的添加。可在页面中进行图文编辑、生成详情模板。红色区域①：可以对模块进行上下顺序调整，复制模块、删除本模块等操作。红色区域②：可对该模块内容进行链接添加、图片插入、字体设置等常规操作。如图6.3.8所示。

图6.3.6

图6.3.7

图6.3.8

活动评价

通过本活动的学习，小可掌握了手机端详情页设计能力，了解了手机端详情页与PC端的不同之处。画面整体布局符合手机端浏览习惯，能够对比PC端的图文，对手机端图文进行优化。

活动拓展

请根据所提供素材，为手机端店铺设计详情页前三屏的内容，要做到抓住消费者目光，使其对商品产生兴趣，愿意继续浏览下去。