电子商务视觉营销课件 项目六 移动端店铺的视觉营销设计

移动端店铺的视觉营销设计项目六CONTENTS目录移动端店铺的视觉设计要点任务一移动端店铺首页与商品详情页的制作任务二任务目标Taskobjectives移动端店铺成交量的好坏和移动端店铺首页、商品详情页的好坏有直接的关系，因此设计师在设计首页和商品详情页时，常通过富有视觉冲击力的设计来吸引消费者的注意力。本任务将帮助读者掌握移动端店铺首页视觉设计要点和移动端商品详情页视觉设计要点。（一）移动端店铺首页视觉设计要点由于目前网店大多数的流量和订单都来自移动端，因此设计师对移动端首页的视觉设计变得尤为重要。在设计移动端店铺首页时，通常需注意以下4点。1234注重感官的舒适性与PC端的视觉统一合理控制页面的长度把握页面整体内容（二）移动端商品详情页视觉设计要点商品详情页决定了店铺流量和商品转化率，由于越来越多的消费者选择使用移动设备购物，因此移动端的商品详情页也变得越来越重要。与PC端的商品详情页相比，移动端的商品详情页具有以下4个特征。一屏一主题卖点展示更加精练商品更突出强化细节质感01020304任务实训——分析沙发移动端商品详情页的视觉设计要点Tasktraining结合本任务所学知识，观察左图所示的沙发移动端商品详情页，分析该移动端商品详情页每一屏的视觉设计要点。实训要求Tasktraining实训目标掌握移动端商品详情页的设计要点。实训思路步骤01第1张图主要对客厅沙发的场景设计理念的由来进行展现。步骤02第2张图主要展现沙发材质和内里填充物，突出沙发的舒适、弹软，加深沙发在消费者眼中实用性强的印象。步骤03第3张图主要对沙发细节部分进行展现，包括扶手细节、底座细节、沙发脚细节等，增加消费者的信赖感。步骤04第4张图主要对沙发的尺寸进行展现，包括产品参数、具体尺寸等，增加消费者对沙发尺寸的了解。任务实训——分析沙发移动端商品详情页的视觉设计要点任务考核Taskassessment观察右图所示的家居移动端店铺首页，分析本任务中的移动端店铺首页的视觉设计要点。CONTENTS目录移动端店铺的视觉设计要点任务一移动端店铺首页与商品详情页的制作任务二任务目标Taskobjectives移动端店铺首页是店铺的门面，而移动端商品详情页则是决定商品成交的重点。本任务先帮助读者掌握移动端店铺首页的制作方法，再熟悉移动端商品详情页的设计方法。（一）移动端店铺首页的制作移动端店铺首页与PC端店铺首页的板块类似，主要由店招、海报、优惠券、商品展示区等组成。其中店招由于是固定模块，只需要更换背景，这里不再赘述。下面以茶叶店铺为例，针对各个板块进行制作，具体操作如下。125346（一）移动端店铺首页的制作7811910（一）移动端店铺首页的制作12131415（二）移动端商品详情页的制作移动端商品详情页的设计方法与PC端类似，都可分为焦点图、信息展示图、卖点图等内容的设计，但其文字较少，图片展示较多。下面将制作粽子移动端详情页，在制作时要体现粽子的味道、外观和原材料等，并通过图片与文字的组合让商品详情页的效果更加美观，其具体操作如下。1234（二）移动端商品详情页的制作56789（二）移动端商品详情页的制作121310111415（二）移动端商品详情页的制作1916171820（二）移动端商品详情页的制作24212223任务实训——制作陶瓷茶具移动端商品详情页Tasktraining结合本任务所学知识，根据提供的素材制作陶瓷茶具移动端商品详情页。由于该茶具比较简洁、通透，因此风格以简洁为主，搭配说明文字起到宣传商品的目的。整个商品详情页分为焦点图、商品展示区、商品信息区、服务保障区4个部分，其完成后的参考效果如左图所示。实训要求Tasktraining实训目标掌握移动端商品详情页的设计方法。实训思路步骤01制作焦点图。添加陶瓷茶具素材，使用“横排文字工具”和“直线工具”制作焦点图。步骤02制作商品展示图。步骤03制作商品信息图。步骤04制作服务保障图。使用“矩形工具”绘制多个圆角矩形，在其中输入服务保障相关文字。任务实训——制作陶瓷茶具移动端商品详