模块二 任务一首页设计与制作（课件） -《网店运营（活页教材）》（人大版）同步精品课堂

任务一 首页设计与制作 网店运营（活页教材） 同步精品课堂 （人大版） 1 学习目标 1.熟悉店铺专属视觉识别(VI)概念和网店装修设计包含的内容，掌握店铺首页的作用。 2.熟悉网店首页的框架布局，能够说出移动端店铺首页的组成元素和布局原则。 3.掌握店标的展示位置和店标的设计原则。 4.掌握横幅广告(Banner) 的设计规范、设计要点、布局方式和文案的布局方法。 学习目录 1.首页框架布局 2.店标设计 3.店招设计 4.Banner设计 问题探究 小白已经在淘宝开设了名为“乡里人家”的店铺，接下来小白开始着手准备店铺 “装修”了。店铺“装修”前，小白需要结合果蔬农产品的特点和面向的客户群体进行分析，从而设计店铺的Logo、店招和Banner。 他该如何完成以上工作呢？ 温故知新 1.京东店铺的类型有哪些？ 2.《电子商务法》对电商行业的影响？ 新知学习 一、首页框架布局 新知学习 1.PC 端店铺首页整体布局和定位 (1)店铺首页的概念及作用 一、首页框架布局 传递品牌形象 配合营销活动 展示商品 引导分流 减少跳失率 新知学习 (2)店铺视觉定位。 店铺视觉风格的定位可根据店铺和产品定位选择最适合的风格。一般会从以下三个方面来进行设计： 一、首页框架布局 VI 色彩 字体 新知学习 (2)店铺视觉定位。 1)VI VI(Visual Identity),即视觉识别，指以标志、标准色彩、标准字体为核心展开的完整的视觉传达识别体系，是将企业理念、文化特质、服务内容、企业规范等抽象元 素换为具体符号的概念。 一、首页框架布局 新知学习 (2)店铺视觉定位。 2)色彩。 色彩是一种具有视觉冲击力的传播工具，它能影响人们的心情与感受。因此，理解和把握好色彩的应用，是做到有效视觉传达的关键。同样，色彩也能带给人不同的心理感受，包括冷暖感、轻重感、空间感、动力感、透明感等。 一、首页框架布局 新知学习 (2)店铺视觉定位。 a. 店铺主色：主色一般是起决定性作用的色彩，直接显示了店铺的定位。 b. 搭配色彩：一般来说，店铺的色彩会控制在3～5种。色彩数量过少，会显得画面单一，不够吸引人；色彩数量过多，则会让画面显得杂乱，充满廉价感。 c. 色彩标准：营销型网店和平价产品网店更愿意使用多色彩，而品牌型网店和高价位商品的色彩运用明显偏少。 一、首页框架布局 新知学习 (2)店铺视觉定位 3)字体。 a. 字体类型。 字体包括中文和英文两种，从设计的角度，可以把字体分为衬线体、等线体、艺术体和书法体四种类型。 一、首页框架布局 新知学习 (2)店铺视觉定位 3)字体。 b. 字体风格。 一般情况下，网店的字体数量不会超过五种。其中，中文字体两种，分 别用于标题和内文描述；数字字体和英文字体各一种，书法字体或艺术字体只 在特定活动时使用，字号大小根据实际情况而定。 一、首页框架布局 新知学习 一、首页框架布局 议一议 其成功之处和不足之处？ 新知学习 (3)店铺首页框架布局 淘宝店铺的首页分为店铺页头、店铺内页和店铺页尾三个部分， 一、首页框架布局 新知学习 (3)店铺首页框架布局 1)店铺页头。 店铺页头由店铺招牌(以下简称“店招”)和导航栏两个模块组成。店招位于店铺页面的上方，起到一个传递店铺信息的作 用。在设计过程中一般会包含以下三个方面： 一、首页框架布局 品牌信息 产品定位 价格信息 新知学习 (3)店铺首页框架布局 2)店铺内页 一、首页框架布局 Banner 商品展示 商品分类 客服区域 新知学习 2.移动端店铺首页布局 移动端由于手机屏幕尺寸的限制，顾客只能是从上至下浏览。移动端首页分为两部分： 一、首页框架布局 自定义模块 商品陈列模块 新知学习 店标，指店铺Logo, 是识别店铺的标志，是网店最主要的视觉符号。店标一般出现在店招左上角最显著的位置，或者在客户搜索店铺时也会出现。店标主要通过造型简洁和意义明确的视觉符号，将企业的经营理念、企业文化、经营内容、企业规模和 产品特性等要素传递给消费者。其设计策略取决于网店的经营战略定位、品牌定位和 产品风格定位。 二、店标设计 新知学习 设计网店Logo的步骤如下： 二、店标设计 新知学习 1.店标展现位置 二、店标设计 新知学习 2.店标展示形式 店标可以选择自然图像、文字、几何图形作为原型，它们各有利弊。自然图像记忆深刻，文字传播容易(尤其适用于网络搜索),几何图形应用范围广泛。 店标从视觉上可以分为 二、店标设计 纯文字 Logo 纯图形 Logo 图文结合Logo 新知学习 2.店标展示形式 (1)纯文字Logo。 纯文字店标主要是由文字和拼音字母等单独构成，适用于多种传播方式。 二、店标设计 新知学习 2.店标展示形式 (2)纯图形Logo。 纯图形店标即仅用图形构成标志。这种标志形象生动，色彩明快，且不受语言限制，非常易于识别。但由于图形标志没有名称，因此表意不如文字标志准确。 二、店标设计 新知学习 2.店标展示形式 (3)图文结合Logo。 图文结合店标即由文字和图案组合而成的标志。这种标志发挥了文字及图案标志的优点，图文并茂，形象生动，又易于识别。 二、店标设计 新知学习 3.店标设计原则 二、店标设计 原创性 统一性 易识别性 合法性 新知学习 店招一般包括店铺名称和店标(Logo), 以便更好地宣传店铺，使顾客牢牢记住店铺。除此之外，商家还可以根据店铺设计定位放置如收藏、关注的二维码或店铺代金券等。 三、店招设计分析 新知学习 1.店招设计思路 店招的设计思路有三种： (1)以品牌宣传为主，主要展示店铺名称和店标(Logo); (2) 以促销活动为主，会在店招中放一些店铺优 惠券或店铺活动等； (3)以产品推广为主，会在店招中放一些店铺商品图片。 三、店招设计分析 新知学习 1.店招设计思路 三、店招设计分析 新知学习 2.店招设计原则 (1)直观、明确地告诉顾客网店卖的是什么,表现形式最好用实物照片。 (2)直观、明确地告诉顾客网店的卖点，如特点、优势、差异等。 三、店招设计分析 新知学习 3.店招设计要点 三、店招设计分析 网店名字 实物照片 产品特点 网店(产品)的优势和差异化 新知学习 Banner是指网店页面的横幅广告，是顾客进入首页后看到的第一个画面，也是店 铺风格最直观的显示位置，对于营造氛围起着巨大的作用。淘宝、速卖通店铺中的首页焦点轮播图、促销海报、商品推荐和商品焦点图采用的都是 Banner的形式。 四、Banner 设计 新知学习 1.Banner设计要点 (1)主题明确。 设计Banner时需要确定设计主题和内容，是新品上架、店铺公 告，还是节日活动策划。 四、Banner 设计 新知学习 1.Banner设计要点 (2)风格统一。 Banner的设计必须符合网店的整体视觉风格，网店装修的所有元素都要服务于页 面的整体视觉风格，配色和字体也要遵守视觉识别规范，避免出现不同类型的视觉元 素。 四、Banner 设计 新知学习 1.Banner设计要点 (3)定位精准。 分析同类消费人群的共有特征，根据这些 特征来把握 Banner设计的整体风格、色彩、字体、文案等设计元素。 (4)图像清晰。 网店中的所有图片都应该保证其清晰度，平面设计要求分辨率在300像素/英寸以上，网页要求分辨率为72像素/英寸左右。 四、Banner 设计 新知学习 2.Banner排版布局 (2)三栏式。 三栏式构图更具层次感，服饰、鞋包类需要模特展示的商品适合使用三栏式构图。这种布局方式中间为文字两边放图，主要是为了展示文案信息。 四、Banner 设计 新知学习 2.Banner排版布局 (3)上下结构。 上下结构的 Banner一般为上面文字下面图。这种构图方式容易突出主题。 四、Banner 设计 新知学习 2.Banner排版布局 (4)组合结构。 组合结构是一种比较特殊的结构，根据不同的需求可以产生不同的组合效果。 四、Banner 设计 新知学习 2.Banner排版布局 (5)倾斜结构。 倾斜结构的布局会让画面显得时尚且具有动感，适合用在活泼、动感的设计主题 上。采用此种构图方式时，中心点和重心点会偏离画面当中的元素布置，不与水平线或垂直线平行的时候， 画面就会产生不平衡的效果，让人产生一种动感的视觉效果。 四、Banner 设计 新知学习 3.Banner 视觉文案设计 (1)标题。 在一个设计项目中，根据文字的地位可将文字分为不同的层级。比如主标题、副 标题、附加内容(正文)等。处于不同文字层级的文字对字体的要求也不同。主标题的字体要突出、醒目，附加内容(正文)则要求清晰易读。 四、Banner 设计 新知学习 3.Banner 视觉文案设计 (2)文案创意。 关于文案的主题主要有两个方面：一方面是产品的特点，通过简单的词汇表 达出主题信息，以满足消费者的需求；另一方面是折扣和利益，以促销信息吸引消费 者。 四、Banner 设计 新知学习 3.Banner 视觉文案设计 (3)热点标题。 网店Banner占据网店首页的核心位置，为了吸引消费者注意，可以在设计时与社 会的热点话题、热门影视剧等相关联。 四、Banner 设计 新知学习 议一议 先分析他们的布局类型，再讨论其适用场景！ 四、Banner 设计 拓展提升 请你尝试为图书类商品设计 Banner。 注：图片素材请登录中国人民大学出版社官网(www.crup.com.cn)下载。 练一练 店铺首页框架布局中，淘宝店铺的首页分为店铺页头、店铺内页和（ ）三个部分。 答案： 店铺页尾 练一练 店标只能是纯图形 Logo。（ ） 答案：✖ 解析：店标从视觉上可以分为纯文字 Logo、纯图形 Logo、图文结合 Logo。 练一练 店铺首页布局不具有以下哪些作用？（） A. 传递品牌形象 B. 配合营销活动 C. 展示商品 D. 促进销售 答案：D 解析：店铺首页布局除了能有效地指引顾客浏览，还具有传递品牌形象、配合营销活动、展示商品、引导分流、减少跳失率等作用。 练一练 店铺视觉定位一般从哪几个方面进行设计？（） A. 店铺专属 VI、色彩、字体 B. 店铺名称、店标、Banner C. 商品展示、商品分类、客服区域 D. 商品详情 答案：A 解析：店铺视觉风格的定位可根据店铺和产品定位选择最适合的风格，一般会从店铺专属 VI、色彩、字体三个方面来进行设计。 练一练 店招的设计思路不包括以下哪种？（） A. 以品牌宣传为主 B. 以促销活动为主 C. 以产品推广为主 D. 以客服服务为主 答案：C 解析：店招的设计思路有三种：以品牌宣传为主，主要展示店铺名称和店标 (Logo)；以促销活动为主，会在店招中放一些店铺优惠券或店铺活动等；以产品推广为主，会在店招中放一些店铺商品图片。 练一练 Banner 的排版布局不包括以下哪种？（） A. 两栏式 B. 三栏式 C. 四栏式 D. 倾斜结构 答案：C 解析：Banner 的排版布局包括两栏式、三栏式、上下结构、组合结构和倾斜结构。 练一练 (多选)以下哪些是店铺首页的作用？（ ） A. 传递品牌形象 B. 仅展示商品 C. 配合营销活动 D. 增加店铺成本 答案：AC 解析：店铺首页布局除了能有效地指引顾客浏览，还具有传递品牌形象、配合营销活动、展示商品、引导分流、减少跳失率等作用。B 选项不全面，D 选项增加店铺成本不是店铺首页的作用。 练一练 (多选)店标可以分为以下哪些形式？（ ） A. 纯文字 Logo B. 纯图形 Logo C. 图文结合 Logo D. 纯英文 Logo 答案：ABC 解析：店标从视觉上可以分为纯文字 Logo、纯图形 Logo、图文结合 Logo。D 选项纯英文 Logo 不是店标的分类形式之一。 练一练 简述店铺首页的概念及作用？ 答案：店铺框架的搭建，犹如给顾客提供了一个购物场所。首页布局除了能有效地指引顾客浏览，还具有传递品牌形象、配合营销活动、展示商品、引导分流、减少跳失率等作用。具体包括为品牌塑造形象、展示营销活动吸引顾客下单、展示类似商品提升转化率、通过搜索和导航功能快速找到商品、设计精美以留住顾客减少跳失率。 练一练 简述 Banner 设计要点？ 答案：Banner 在店铺首页最重要的位置，设计时需要注意主题明确，确定设计主题和内容，符合新品上架或节日活动等不同情况；风格统一，符合网店的整体视觉风格，遵守视觉识别规范；定位精准，考虑产品受众的喜好等特征来把握整体设计元素；图像清晰，保证商品图像的清晰度，以获得顾客对商品质量的认可。 总结思考 本堂课主要讲述网点店铺首页设计与制作，需掌握首页框架布局、店标设计、店招设计、Banner设计的理论知识，能熟练运用理论进行网店首页制作。 作业布置 1.简述店铺首页的作用。 2.简述店铺首页内容。 3.简述店标展示形式。 4.简述店标设计原则。 5.简述Bannner设计要点。 感谢观看 $$