跨境电商视觉设计与营销（第2版） 课件 项目8-店铺详情页设计

项目八店铺详情页设计跨境电商视觉营销跨境电商B2B数据运营职业技能等级证书（初级）课程01详情页结构设计02详情页元素设计03详情页装修目录CONTENTS跨境电商视觉营销知识目标技能目标思政目标学习目标LearningGoals掌握详情页结构的常见设计方法掌握详情页元素的设计要素掌握详情页装修的基本规范能够设计产品详情页结构能够设计信息图等元素能够装修店铺详情页培养审美意识在跨境电商数据分析过程中坚持科学的价值观和道德观详情页结构设计任务一跨境电商视觉营销详情页结构设计知识梳理

Content

of

Chapter详情页设计基础操作体验应用实战设计服装店铺详情页结构设计手机店铺详情页结构知识梳理01知识要点详情页功能详情页设计要求详情页内容详情页逻辑详情页功能介绍产品功能增加促销入口树立品牌形象进阶功能合格目标优秀产品详情展示产品信息基本功能减少人工沟通优秀产品详情详情页功能转化图片好，设计感足够营销，有重点，买家能明确感知到产品图片有些许不足，设计较弱无卖点，没有营销感，无核心转化率：8%转化率：0%详情页设计要求信息完整图形化表达层次分明商品详情描述是对商品详实、具体的表述，可将买家关注的商品的细节特征、参数、质量标准、服务、现货/库存情况等全面的展示出来图像和视频在信息表达上有着天然的优势，因此可以多用图像与视频进行表述。例如婚纱，文字描述再生动，不如图片来得直观。建议图文结合，将买家关注的信息如细节、面料等展示出来。内容层次分明、条理清晰,如分段有标号且有核心词的写法，或提炼参数表格化显示，重点突出，以吸引更多买家关注详情页内容010203060504品牌介绍品牌理念商品图片展示·广告图·细节图交易说明·品质保障·客服信息·购物需知·包装·物流·售后服务交易促进·促销说明·实力展示：仓储、生产等·买家秀等商品功能介绍·功能参数·产品特点·使用说明促销推荐·促销·关联推荐·新品上架·热销推荐产品详情模块详情页逻辑引发兴趣激发需求产生信任信任到占有促进成交产品图片产品广告图产品使用场景图为什么购买产品特点用户痛点产品图片产品细节图客户评价商家实力展示产品图片产品广告图（拥有感觉）交易说明品质保障，客服信息，购物需知，包装，物流售后服务客户评价实力展示仓储生产研发促销推荐促销；关联推荐新品上架；热销推荐品牌介绍详情页逻辑第一部分以情怀和感性为立足点，讲述品牌故事及品牌背景和实力，以生动的语言描述，引导客户看到栩栩如生的场景。让客户在生动的场景获得代入感，引起情感共鸣，获得客户认可。第二部分围绕产品本身，精准描述产品参数、工艺等各种细节，让客户更准确地理解产品本身。第三部分描述卖家为客户提供的各种保障，品质保证、售后服务等内容都是这一部分需要重点强调的内容，起到打消客户疑虑的作用。第四部分讲述产品的包装信息，包装里包含的各种配件和赠品等，可以一一列举出来，而对于卖家打算作为赠品的配件，也要详细地罗列在包装清单中。包装配件保障提供产品本身感性情怀四段式产品详情描述布局法，包括感性情怀、产品本身、保障提供、包装配件。以整齐规范的页面格式，配以生动翔实的内容，再加上上述四段式的产品描述布局，产品功能和情感诉求双双落地，这样的产品描述足以让订单转化率得到提升。详情页逻辑B2B买家和B2C买家的关注点不同，B2C是个人购买行为，B2B更多的是企业购买行为。因此，B2C买家会比较关注产品款式、材料、功能、价格或者商品评价，B2B买家大部分可能是企业、工厂或是批发商经销商，他们不单只关注产品款式、功能及质量，还会关注公司实力、供货能力。FABE分别指的是Features属性、Advantag优势、Benefits益处、Evidence证明四大要素，合格的B2B详情页应该涵盖这四大要素。属性一般包括材质、结构、功能、包装，优势一般指产品卖点，益处指商家的供货能力，证明包括认证、客户合照、展会、生产线等。（2）B2B产品详情FABE营销法则（1）B2B/B2C产品详情设计差异操作体验02K公司设计师Grace与项目经理Mike需要为该公司Leggings服装店铺设计产品详情页，请调研平台详情页页面，并给出设计方案。设计服装店铺产品详情页任务实施产品展示模块产品对比模块productdescription模块产品信息模块广告图模块详情页企业环境/评价等展示模块应用实战03K公司设计师Grace与项目经理Mike需要为该公司服装店铺设计产品详情页，请调研详情页页面，并给出设计方案。设计手机店铺产品详情页不同行业的产品详情页，有什么不同？详情页元素设计任务二跨境电商视觉营销详情页元素设计知识梳理

Content

of

Chapter详情页素材类型操作体验应用实战设计服装店铺详情页元素设计店铺详情页母版知识梳理01知识要点详情页素材类型详情页海报图详情页产品信息图详情页服务保障图知识要点01详情页海报图营销海报图精心设计的文案和图形，可以营造促销氛围，引发顾客的兴趣。在新款上线推广、主推款重点推广等场景有广泛的应用02详情页产品描述图商品详情描述图是一种将商品的各种信息以图文形式展示给客户的方式。这些信息通常包括商品特点、功能、尺寸、材质、使用方法等03详情页产品信息图是展示产品参数尺寸等信息的图片，根据行业不同有不同的信息类型04服务及保障信息图一般包括：COMPANYPROFILE，WORKSHOP，CERTIFICATE，ADVANTAGE，CUSTOMERVISIT，TARGETMARKET，CONTACTUS七部分内容详情页海报图在设计中，将点线面三者进行组合应用可以制作出丰富的视觉效果，向买家传达对应的情感诉求设计元素在设计时把握好主色调、辅助色、点缀色的应用，避免设计色彩应用杂乱，造成视觉疲劳色彩搭配可读性强、搭配合理的文案能够直观地向买家倾诉活动和产品的详细信息，引导买家完成产品的浏览与购买文案设计需要根据商品与主题要求，将要表现的信息合理地组织起来，构成一个协调完整的画面视觉构图详情页产品信息图服务及保障信息图服务及保障信息一般包括：COMPANYPROFILE，WORKSHOP，CERTIFICATE，ADVANTAGE，CUSTOMERVISIT，TARGETMARKET，CONTACTUS七部分内容。操作体验02K公司的设计师Grace完成了Leggings产品详情页结构的设计，并想要在此基础上设计详情页元素。Leggings产品详情页设计任务实施（1）打开PHOTOSHOP软件，新建画布。首先，建立一个750PX×1200PX像素的画布(高度可调)。（2）设计productdescription模块：使用文字工具输入标题：可以统一属性为：字体使用黑体类；字体样式bold，字体颜色为深灰色。任务实施（3）设计详情页海报图第一，搜索并借用手绘类背景素材，放置该区域底层；第二，用符合该背景的紧身裤的照片图，进行抠图，并放置在背景图层之上；第三，制作符合背景风格的圆润类漫画风字体，放置于产品图之上，并调整大小和颜色。为了将文字标题突出，可以在文字下方，放置透明度低的白色矩形层打底。任务实施（4）设计产品信息模块：选用左图右文的方式布局这一模块；当然，在产品信息介绍之后，可以添加尺码表，让客户作为购买尺寸的参考依据。任务实施（5）设计产品展示模块：本模块用左右结构，将大小图有层次的排列出来；并将特点用形状和序号强调出来，让客户对产品的优势做以更加兴形象和深入的了解。（6）设计产品对比模块：分析产品优势，通过对比，强化客户对本公司产品的认可。任务实施（7）设计企业环境/评价等展示模块：设计这一部分的目的在于打消顾客疑虑，巩固对产品的信任。制作要点：使用形状工具绘制区域，将相应的照片嵌入其中。应用实战03K公司设计师Grace与项目经理Mikes设计完毕详情页结构与元素后，设计师Grace需要进一步实施服装类店铺详情页的母版设计，这一模板设计之后，将其中的文字和图片进行更替，就可以快速的改版应用到新的产品描述页中。以此体现同一类产品页面的美观性、逻辑性和规范性。请和Grace共同完成详情页母版的设计。设计店铺详情页母版详情页的母版与模版在应用场景上有什么不同？店铺详情页设计详情页装修任务三跨境电商视觉营销详情页装修知识梳理

Content

of

Chapter详情页装修规范操作体验应用实战服装店铺详情页装修手机店铺详情页装修知识梳理01知识要点智能编辑器使用店铺装修案例智能编辑器规范智能编辑器规范01图片尺寸.建议保持图片尺寸为750px（宽）*800px（高），表格的尺寸宽度为750px，超出750px的部分将无法展示

02一键多图多图模块支持一键上传多张图片，单图模块支持一图多链，营销模块支持一键勾选推荐商品，提升商详流量利用率

03视频模块有视频模块，支持视频上传

04批量修改支持批量投放推荐商品至多个商品，提升营销效率店铺装修案例编辑器使用编辑器使用编辑器使用编辑器使用编辑器使用编辑器使用编辑器使用编辑器使用编辑器使用编辑器使用编辑器使用操作体验02K公司的设计师Grace完成了店铺详情页结构、详情页元素的任务，并想要在此基础上进行店铺装修，请和Grace共同使用详情页智能编辑器完成店铺装修。店铺装修应用实战03K公司设计师Grace与项目经理Mike为了体现同一类产品页面的美观性、逻辑性和规范性，需要设计详情页装修模版，在产品发布时可以统一应用，请将项目二完成的产品详情页母版设置为详情页装修模版详情页装修智能编辑与普通编辑的优劣各是什么？详情页装修跨境电商视觉营销任务小结ProjectSummary本章主要介绍详情页的设计。首先，介绍详情页结构的设计准则，包括详情页设计五步法、B2B/B2C详情页设计准则等。接下来，依次介绍详情页元素的设计，包括产品信息图、产品海报图等。最后，介绍了详情页装修的