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

项目七店铺首页设计跨境电商视觉营销跨境电商B2B数据运营职业技能等级证书（初级）课程01店铺首页结构设计02首页素材设计目录CONTENTS03首页装修知识目标技能目标思政目标LearningGoals掌握首页结构要素与设计准则了解首页店招、banner等视觉元素的装修规范掌握店铺首页装修规范能够设计店铺首页结构能够设计与制作店招、banner等店铺首页装修素材能够进行店铺首页装修培养审美意识在跨境电商视觉营销过程中坚持科学的价值观和道德观跨境电商视觉营销学习目标店铺首页结构设计任务一跨境电商视觉营销店铺首页结构设计知识梳理

Content

of

Chapter店铺首页结构设计操作体验应用实战设计路由器店铺首页布局手机产品店铺首页设计

知识梳理01知识要点首页布局首页内容首页设计原则视觉动线与产品陈列首页设计基础店铺首页可以分为品牌型视觉店铺首页和营销型店铺首页两种类型。跨境电商B2B店铺首页以以品牌形象塑造为主，其设计重点是彰显品牌优势。一般来说，在进行店铺首页设计时，在风格、色彩、版式的设计上需要符合店铺整体风格定位；其次通过展示店铺服务、产品质量和竞争优势，体现品牌的独特性，在采购商心中树立良好的企业形象。店铺首页需要弱化营销信息，引导访问者关注工厂实力、产品信息等，以强化用户信任。首页内容首页内容01商品信息02海报图03店铺首页的内容一般包含商品信息、促销信息、分类导航、店招、商家信息等主要类别。商品信息包括爆款商品、主推商品展示等，一般通过店铺装修商品展示模块的组件、通栏海报、轮播海报等多种形式进行表述，以和商品列表页的铺货展示形式有所区别。海报是商品和其他信息展示的一种特殊形式，在丰富页面内容的同时，给消费者带来视觉视觉冲击，增加消费者的新鲜感，是店铺吸引消费者的重点视觉元素。首页布局第一屏又称为首焦，首焦是消费者进入店铺后第一时间看到的内容，一般会采取图片结合文案的设计形式，此位置一般使用轮播海报，或者通栏海报来展示信息。第二屏一般放置主推商品，采取图像拼接的设计形式，吸引用户的注意。第三屏通常放置图文形式的商品分类模块和商品陈列区。第4-N屏，主要根据店铺需求放置商品陈列、信息展示、导航等。起到丰富店铺首页信息，充分展示店铺特典的作用。页中的设计遵循分屏法则。在设计网页时应该让消费者不需要滚动页面便可以把最重要的信息看完整，并且留下深刻的第一印象。所以，一般会把页中进行进一步的区分，构成首焦、第二屏、第三屏、第N屏、页尾等分区。分屏法则视觉动线与商品陈列视觉动线与商品陈列是在首页设计的其他两个重点要素。视觉动线是指眼睛在阅读时，视线移动而构成的浏览路径。常见的视觉动线有“Z”型和“W”型。“Z”字型视觉动线营造是最常规的视觉动线营造方法。可以带来整齐划一的效果，让消费者看到整齐排列的商品。操作体验02GNCB贸易公司的设计师Tim需要为该公司阿里巴巴国际站路由器店铺首页进行整体设计，请和Tim按照如下要求共同完成店铺首页设计：（1）设计首页装修模块框架；（2）添加必要模块并进行设置；（3）发布新版首页。店铺首页设计路由器店铺首页设计任务实施序号序号模块内容首焦1店招+导航公司名/电话/邮箱/官网2全屏海报商品海报3多语言工具栏—第二屏4商品优势每周上新，商品认证，5核心商品分类KA，KB，LA，LB，LC第三屏6商品陈列热销商品7公司优势生产经验，生产员工，研发团队等8公司视频—第N屏9商品陈列单品模块10商品陈列主营类目11轮播海报公司优势12商品陈列橱窗商品13轮播海报商品海报页尾14公司信息公司介绍/主营市场/证书/核心优势等15客服—16自定义海报参展图片/工厂工艺流程图17智能推荐模块—18询盘直通车—此类首页设计存在什么特点？请为该店铺设计其他不同风格的首页店铺首页。店铺首页设计应用实战03GNCB贸易公司的设计师Tim需要为该公司阿里巴巴国际站店铺首页进行整体设计，请和Tim按照如下要求共同完成店铺首页设计：（1）设计首页装修模块框架；（2）添加必要模块并进行设置；（3）发布新版首页店铺首页设计手机产品店铺首页设计

任务实施点缀色1．首页装修模块框架设计根据对同类店铺调研及结合当前店铺实际情况，Tim确定了店铺首页装修模块框架根据视觉规范制作广告图、海报图、背景图、热区切图等。3．添加设置页面模块依次拖拽添加各个子模块，并上传图片，设置参数（详述参见参考任务7-1至7-5）。4．首页发布保持店铺首页装修结果，并发布首页，店铺首页装修效果如图7-25所示。店铺首页设计点缀色该页面中是否有缺少的模块，应如何进行优化？店铺首页设计首页素材设计任务二跨境电商视觉营销首页素材设计知识梳理

Content

of

Chapter店铺首页素材操作体验应用实战设计店招设计banner知识梳理01知识要点店招设计Banner设计店铺店招设计原则店招需要直观明确地展示店铺的经营内容及卖点、特点、优势，店招的主要设计原则包括如下3点：（1）视觉重点不宜过多，要放弃无意义的多余元素，用色须简洁（一般不超过3种）；（2）要能凸显品牌特性；（3）需要结合店铺现阶段的情况如营销、配色、主推商品等进行设计。

从内容上讲，店招通常包括店铺名称、LOGO、广告语、认证、广告促销等信息。作为店铺中流量最大的一个模块，店招在不影响视觉体验的情况下可以尽可能多地添加有益信息。店招的种类品牌宣传类店招制作品牌宣传类店招时，首先要考虑的内容是店铺名称、LOGO、广告语等品牌宣传的最基本的内容；其次是联系方式等。活动促销类店招活动促销类店招首先要考虑的因素是活动名称、优惠券、促销产品等活动信息；其次是店铺名称、LOGO、广告语等品牌宣传为主的内容。在气氛设计和内容展示上，活动信息占据较大的篇幅。这类店招在平台举行大型营销活动时商家使用得较多。阿里巴巴国际站PC端店招底图尺寸为200像素×120像素。知识要点banner分为普通banner与通栏banner两种，普通banner的宽度为1200px，高度为250/350/450三个尺寸，全屏通栏横幅尺寸建议宽1920，高650或550像素，支持JPG/PNG格式。在设计Banner时，一般需要注意风格统一、构图合理三个方面。通栏广告，是店铺装修中最常见的模块，它以横贯页面的形式出现。该类型广告尺寸大、视觉冲击力强，能给访问者留下深刻印象。精美的banner能够引起用户的兴趣，增加页面停留时间。通栏广告通栏广告，是店铺装修中最常见的模块，它以横贯页面的形式出现。该类型广告尺寸大、视觉冲击力强，能给访问者留下深刻印象，通栏广告仅支持在首页、自定义页和无线旺铺的首页添加，一个页面支持添加一个通栏广告。PC端图片高度有2种：550像素、650像素，宽统一为1920像素。Banner设计banner的风格需要与店铺风格适配，而店铺的风格很大程度上取决于店铺所经营的商品，为了树立店铺的品牌形象，彰显店铺的专业和品质，风格化店铺的店招、商品、店铺风格是统一的01BANNER风格设计Banner构图设计的目的是处理好图片和文字之间的位置关系，使其整体和谐，并突出主体。Banner构图一般可以分为左右构图、三分式构图、上下构图、多层次构图、斜切构图02banner构图设计在网络环境下，买家对一则广告的关注时间平均不超过2秒，因此banner文案要做到精简，才能给买家留下深刻的印象。Banner文案一般分为刺激性文案和说服性文案两种类型。03banner文案设计操作体验02GNCB贸易公司的设计师Tim需要为该公司宠物用品类店铺设计新店招，要求该店招符合公司的品牌定位，请和Tim共同完成店招设计。店铺首页设计设计店招图片任务实施：设计店招图片（1）策划店招内容：因该店招类型为品牌宣传类店招，该店招内容包括公司名称、公司LOGO。（2）确定店招尺寸：打开Photoshop，新建一个200像素×120像素的画布。（3）添加店招内容：导入已经设计好公司的LOGO，并添加凸显品牌形象的元素。（4）设计店招排版：根据店招设计规范进行排版，最终效果如图所示。服装行业和宠物用品行业的店招，在设计风格上会有哪些不同？店铺首页设计GNCB贸易公司的设计师Tim需要为该公司阿里巴巴国际站店铺首页添加通栏广告，并设置轮播时间为每10秒切换，请和Tim共同完成该店铺装修模块的设置。店铺首页设计洗手机产品通栏海报设计海报图的不同切换时间将带来哪些不同的视觉体验？店铺首页设计店铺首页装修任务四跨境电商视觉营销店铺首页装修知识梳理

Content

of

Chapter首页装修规范操作体验店铺首页装修知识梳理01知识要点首页装修编辑器店招设置导航栏设置Banner设置店铺装修编辑店铺首页装修编辑器左侧由产品、图文、视频、公司等模块组成，每个模块包含丰富的模块组件，是首页装修的重要组成部分。中间是展示区，把装修模块拖拽到展示区，当出现绿色加号的时候松开，就可以实现所见即所得的装修效果。点击展示区的装修模块，就会出现右侧属性设置区，属性设置区可以设置装修模块的属性参数。Banner设置在店招中可设置店招图片、公司名展示、添加/更换导航条上的自定义页面等。进Home页的编辑器>点击展示区的店招模块>在右侧编辑弹框中，即可编辑内容。公司简介可以设置“显示”或“隐藏”。设置“显示”公司简介，则可进一步设置公司简介的字体和颜色。店招底图也可设置“显示”或“隐藏”。选择“显示”则可上传店招的背景图片，店招图片尺寸为1200*280px，但图片下方实际是有44px被导航条遮挡的，请注意给店招的内容留出空间；设置“隐藏”，则店招这块就会直接透出大背景，如示例图所示，就是隐藏店招底图后，看编辑后台的效果，实际预览是透明，且直接显示大背景。导航设置导航的页面顺序：Home、Product

Categories、CompanyProfile、Contacts４个官方强制页面，为了保证一致性，这４个页面必须有，且顺序不可调整。商家可以新增Video、Feeds、Promotion、Member、Custom（自定义）等页面。这几个页面是否呈现可由商家自主决定，并且还可以手动调整顺序。导航开启先决条件：有些页面的开启需要先决条件，如Video页需要视频产品数达到20个以上才能自动开启。轮播banner设置Banner模块最多可上传5张图片，仅支持JPG/PNG格式，一般图片像素应一致。轮播banner高有250像素、350像素、450像素三种选项，通栏banner高有550像素、650像素两种选项。为了保证显示效果，建议图片像素保持一致，并使用符合要求的图片。轮播时间可以设置为不轮播（买家手动切换）、每五秒切换、每十秒切换。产品设置产品在店铺装修里有多重类型，包括带类目商品、橱窗商品等，以下以带类目商品为例进行说明。带类目商品的添加路径是，编辑器-产品推荐-带类目产品>拖拽添加。带类目商品可展示4个产品，可以选择自动选品或者手动选品。大标题为大类目，右侧展示的4个产品均在该大类目下，红框位置的小的分组是该大类目下的子分组，可在“产品分组”里修改。操作体验02全球跨境电子商务公司的设计师Coral完成了首页布局设计与装修元素制作，请和Coral共同完成如下店铺装修任务。（1）店铺装修添加合适的页面背景，页面主题色应符合背景色调。（2）装修店铺店招。（3）装修导航栏。（4）装修通栏广告。（5）装修商品展示。（6）添加公司介绍模块。店铺首页设计店铺装修该页面中是否有缺少的模块，应如何进行优化？店铺首页设计跨境电商视觉营销任务小结ProjectSummary本项目通过对店铺首页整体设计与发布分析，从而掌握店铺首页的整体设计和店铺背景设置方法。一个具有自身特色和文化内涵的店铺，如果能够通过店铺首页的整体设计和店铺背景设置传达给消费者一个与其心理诉求相符合的文化理念，就更容易被消费者记住，而文化理念只要能被消费者记住，其引发复购的可能性就会大大提高。因此，拥有自己的特色对商家来说是非常重要的。店铺的风格也是店铺的一种特色。店铺首页的整体