电商视觉设计-第4章-店铺首页视觉设计说明
店铺首页视觉设计与案例讲解
商品 店首铺首焦页轮视觉播设区计和设案计例讲三解要素
广告 文字
4.3 首焦轮播区视觉设计 2 构建设计图三要素
以七夕节为 主题的背景
以“双11” 活动为主题
的背景
不同主题的背景图
店铺首页视觉设计和案例讲解
4.3 首焦轮播区视觉设计 2 构建设计图三要素
色彩灰暗，画质朦胧， 画面层次不清晰，背景
色调不理想
2 店铺名称的艺术化处理
3 使用修饰元素提升观赏性
使用帽子的图案来修饰店铺名称，文字 与图案在外形上的契合让店铺名称更具 个性和艺术感，更容易在消费者心中形
成特定的印象
为店铺名称添加修饰元素
店铺首页视觉设计和案例讲解
4.2 店招视觉设计
3 图层样式的应用
图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也 发挥着重要的作用。
店铺首页视觉设计和案例讲解
4.1 首页视觉水平的四大指标
1 首页跳失率 2 首页点击率 3 首页人均点击次数 4 首页平均停留时间
店铺首页视觉设计和案例讲解
4.1 首页视觉水平的四大指标
1 首页跳失率
首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问 次数占该入口总访问次数的比例。
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感 2 添加特效突出特殊性和醒目度 3 使用修饰元素提升观赏性
店铺首页视觉设计和案例讲解
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
将店铺名称的首个英文字母放大，并使用 不同于其他字体风格的手写体，让店铺名
用“渐变叠加”图层样式来表现导航条功能 按钮被鼠标触碰后的状态，在视觉上形成凹 陷的效果，将其与导航条中正常状态下的功
店铺首页视觉设计方案PPT课件
03
4.2 店招视觉设计
1 店招视觉设计规范
店招高度设计规范
淘宝后台的店招高度为120像素，建议设计时设定店 招尺寸为950×120像素，加上导航条高度30像素，共
150像素，可避免发布后导航不显示的问题
4.2 店招视觉设计
1 店招视觉设计规范
店招元素设计
清晰的店铺名称
品牌宣传语
移动端二维码
4.2 店招视觉设计
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
4.3 首焦轮播区视觉设计
设计聚焦消费者视线
1
构建设计图三要素
2
溶图的应用范围
3
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
首焦位置
管理培训课件安全培训讲义工作培训 教材工 作汇报 课件PPT 服务技 术店铺 首页视 觉设计 方案(P PT57页 )
4.3 首焦轮播区视觉设计
1 设计聚焦消费者视线
首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。
两类店铺首页排版
4.1 首页视觉水平的四大指标
3 首页人均点击次数
首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某 日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为 600次，那么首页人均点击次数为：600次÷150人=4次/人。
人均点击次数
4.1 首页视觉水平的四大指标
电商网页界面的设计与视觉表现分析
电商网页界面的设计与视觉表现分析随着互联网的飞速发展，电子商务成为了很多企业的重要渠道，而网页界面的设计与视觉表现对于电商网站来说至关重要。
一个优秀的电商网页设计可以给用户带来良好的用户体验，从而提高购买转化率。
本文将对电商网页界面的设计与视觉表现进行分析，并探讨如何设计出具有吸引力和易用性的电商网页。
一、电商网页设计的视觉表现1. 色彩搭配色彩在网页设计中扮演着非常重要的角色，它直接影响到用户的情绪和体验。
对于电商网页来说，色彩搭配既要符合企业的品牌定位，又要符合产品的特性。
服装类电商网站可以采用明快鲜艳的色彩，而家居类电商网站可以采用温暖舒适的色彩。
色彩的搭配也要具有足够的对比度，以保证文字和图片的清晰度，确保用户能够轻松地获取所需信息。
2. 页面布局页面布局是电商网页设计中的重要环节，它决定了用户在网页上的浏览方式和购物体验。
一般来说，电商网页的布局应该简洁明了，避免过多的装饰和干扰，以免影响用户的阅读和操作。
页面布局要合理分配各个元素的位置，比如将搜索框、导航栏等放置在用户容易找到的位置，提高用户的使用便利性。
3. 图片质量在电商网页中，图片是最直观的产品展示方式，因此图片的质量直接关系到用户对产品的认知和购买意愿。
为了提高网页的视觉表现，电商网站应该采用高清晰度的产品图片，并提供多角度的展示，以让用户更全面地了解产品的外观和特点。
1. 导航和搜索在电商网页中，导航和搜索功能是用户最常使用的功能之一。
这两个功能的设计要直观明了，提供用户便捷的浏览和检索方式。
导航栏需要包含清晰的分类和标签，让用户一目了然地找到所需的商品；而搜索功能则需要具有强大的搜索能力，能够根据关键词快速准确地找到用户需要的商品。
商品详情页面是用户了解和选择商品的重要环节，因此它的设计应该包含丰富的信息和清晰的展示方式。
在商品详情页面中，应该展示产品的图片、价格、规格、详细参数等信息，让用户能够对产品有一个全面的了解。
电商视觉营销 第2版 第4章 店铺首页的视觉营销设计
• 植入品牌形象 • 抓住商品定位
4.2.2 店招与导航的设计与制作
WISDOM店铺需要制作店招和导航，用于展示店铺品牌形象和商品信息。在制作 店招与导航时，输入店铺的英文名称，并进行变形设计，然后添加热卖商品，最后根 据商品分类制作导航，具体操作如下。
1. 输入文字
2 . 转换为形状
3 . 调整文字
4.1.2 店铺首页结构布局
1．页头
页头位于店铺首页的顶端，包括店招和导航。卫仕官方旗舰店首页页头效果如图所示。
店招也叫店铺招牌，位于店铺页面的最上 方，主要由品牌Logo、品牌名称、少量文 案、商品图片和收藏按钮等部分组成。
店招
导航位于店招的下方，主要用 于展示店铺的商品分类，方便 用户快速寻找店铺内的商品。
构图
全屏海报需要保持色调 的统一，可通过明暗对 比和颜色搭配来确定全 屏海报的整体风格，重 要的文字信息则用突出 醒目的颜色进行强调。
配色
4.3.3 全屏海报的表现手法
全屏海报的表现手法主要包括直接展示法、对比衬托法和突出特征法。
直接展示法
流直接展示法是一 种运用较广泛的表 现手法，它将商品 或主题以突出、引 人注目的方式呈现 出来，并直接展示 在全屏海报上。
4.2.2 店招与导航的设计与制作
WISDOM店铺需要制作店招和导航，用于展示店铺品牌形象和商品信息。在制作 店招与导航时，输入店铺的英文名称，并进行变形设计，然后添加热卖商品，最后根 据商品分类制作导航，具体操作如下。
1. 创建参考线
2. 输入文字
3 . 转换为形状
4 . 调整文字
4.2.2 店招与导航的设计与制作
4.1.1 店铺首页的视觉定位
1．品牌型视觉定位
《电子商务视觉设计(第2版)》-课程标准
电子商务视觉设计（第2版）》课程标准一、课程性质该课程是电子商务专业核心课程，同时也是电子商务专业的一门面向职业岗位（群）的综合性实训课程。
本课程以PhotoshopCC2018和PremiereCC2019为操作平台，依据电子商务视觉设计工作任务规划课程内容，以理论+实例的形式全面介绍了PC端电商网店与移动端电商网店、微店的视觉设计思路和具体的实现方法，打破了以理论传授为主要特征的课程模式，转变为以工作任务为中心组织课程内容，并让学生在完成具体任务的过程中构建相关理论与实践知识，锻炼技能，发展职业能力。
通过本课程的讲解、演练与实践，能够促进学生更好地掌握电子商务视觉设计实战技能，具备利用Photoshop和Premiere进行电子商务视觉设计的实操能力，让学生从营销的角度，利用视觉手段来进行店铺形象、品牌、商品信息的传达，吸引与转化流量，提升转化率。
该课程的先修课程为《Photoshop网店美工实例教程》《网店美工》等，后续课程为《电子商务视觉营销》《网店运营实务》等。
二、设计思路本课程秉承“视觉是手段，营销是目的”的宗旨，从营销的角度来解析电子商务视觉设计的方法与技巧，涵盖电商网站视觉配色设计、店铺标志视觉设计、店铺首页视觉设计、商品详情页视觉设计、高点击率推广图片视觉设计、网店促销活动页视觉设计、移动端网店用户体验设计、手机移动端淘宝店铺视觉设计、手机移动端微店视觉设计和商品短视频视觉设计等。
本课程按照电子商务视觉设计工作任务安排学习内容，采用情境教学、理实一体的授课方法，通过“操作+报告”的考试方法，全面考核学生电子商务视觉设计的实际能力。
1．遵循职业性。
高职教育就是就业教育，是一种适应市场需求、培养高等技术应用人才的职业教育，所以高职电子商务专业的《电子商务视觉设计》就应该达到直接为提高学生专业操作技能服务，并最终为学生就业服务的教学效果。
《电子商务视觉设计》课程的设计突出职业性，着力营造职业氛围，逐步提高学生电子商务视觉设计意识，培养学生电子商务视觉设计的实际能力。
电商视觉设计第4章店铺首页视觉设计
②水平浏览范围缩短。此时图片的布局没
有任何变化，消费者对于图片浏览的新鲜度 就会降低，开始失去浏览的耐心，于是对第
二排图片的水平浏览范围便会缩短。
③失去耐心，开始进行垂直浏览。当消
费者看到第三排仍然是一成不变的图片排列 后，浏览的耐心就会减少，还可能会想图片 怎么这么多，大概地往下看看吧，于是形成
对左边的垂直浏览。
F形浏览模式
4.4 商品陈列区视觉设计
1 营商造品视海觉报动线展示图：将重点推荐的商品以
单张海报的方式呈现，较为丰富的表现形 式能很好地让消费者注意到商品信息。
单张商品展示图：较为重要的商品以单
张图片形式排列，较大的展示面积更能获 得消费者的瞩目。
三张商品展示图：非重点推荐的产品可
以三张并排展示的效果呈现。
单张图片：除了商品展示图片以外，还可
以搭配一些与展示商品相关的商品组合图 片，进一步吸引消费者的购买兴趣。
4.4 商品陈列区视觉设计 2 商品布局艺术化
4.4 商品陈列区视觉设计 2 商品布局艺术化
4.4 商品陈列区视觉设计 2 商品布局艺术化
标题文字设置的字号较大，利用
4.5 化妆品店铺首页视觉斜设面和计浮雕案、例投影等效果来点缀 标题文字，使其更加精致
01
填充背景色
4.5 化妆品店铺首页视觉设计案例
02
设置文字属性
4.5 化妆品店铺首页视觉设计案例
03 添加商品图及优惠券
4.5 化妆品店铺首页视觉设计案例
04 绘制导航条背景
4.5 化妆品店铺首页视觉设计案例
05 为导航条添加文字
4.5 化妆品店铺首页视觉设计案例
添加文字并设置图层
06
样式
电子商务视觉设计教案
第1章初识电商视觉设计教学内容一、视觉设计的定义二、电商视觉设计前的准备三、电商视觉设计黄金构图法教学要求【知识目标】1．了解视觉设计的定义及其类型。
2．了解电商视觉设计前的准备工作。
3．掌握电商视觉设计黄金构图法。
【技能目标】1．熟悉电商视觉设计前的准备工作。
2．掌握并运用电商视觉设计黄金构图法。
教学重点熟练掌握并运用电商视觉设计黄金构图法教学难点熟练运用电商视觉设计黄金构图法教学方法讲授法、案例法课时数6课时教学内容第一节什么是视觉设计一、视觉识别设计视觉识别设计来源于企业形象识别系统，简称为CIS。
企业形象识别系统一般分为三个方面，即企业的理念识别——Mind Identity（MI），行为识别——Behavior Identity（BI）和视觉识别——Visual Identity（VI）。
视觉识别系统规范手册就是用来规范企业形象的图书，内容主要分为基本设计要素和应用设计要素两个部分。
二、视觉传达设计视觉传达设计是以视觉媒介为载体，以文字、图形和色彩作为创作要素，利用视觉形象传达特定的信息给受众，从而使被传达对象产生影响的过程。
视觉传达的作用是让人与人之间利用“看”的形式进行交流，是通过视觉语言进行表达传播的方式。
第二节电商视觉设计前的准备一、网店的视觉定位视觉定位，就像人的风格定位一样。
不同的产品对应不同的视觉定位，不同的消费群体有着不同的视觉偏好，关键是要将产品的定位和卖家的视觉偏好进行整合，使店铺在风格上能够呈现出一种整体的效果。
（一）营销型网店的视觉定位原则在于营造促销氛围，主要体现在通过对比强烈的颜色突出显示打折、包邮、半价等优惠活动的字眼。
（二）品牌型网店的视觉定位原则是突出品牌优势，整体设计风格偏向于简洁、干净，重点突出品牌Logo的形象代言等元素。
（三）服务关系型网店的视觉定位原则是包装服务形象。
二、明确视觉规范的作用制定视觉规范有以下几个方面的意义：统一识别：视觉规范可以确保网店在整体风格、售前售后服务和产品包装形象等方面都保持整体风格的一贯性，既有利于买家识别和区分店铺，也可以避免买家在浏览时出现理解困难，甚至是理解错误的现象。
《电子商务视觉设计》教学大纲
《电子商务视觉设计》教学大纲一、课程说明1.课程代码：xxxxxxxxxx2.课程名称：视觉设计3.课程学时：72学时4.课程学分：3分5.适用专业：电子商务专业6.先修课程：PHOTODHOP二、课程性质、目的与任务1.性质：本课程是电子商务专业大一第二学习开设的专业基础课程，教学方式为课堂教学，结合教育见习实践，为该专业学生毕业后从事网店美工职业做好理论和技能的准备。
2.目的：通过本课程的学习，培养学生行业认知理解力和实践操作能力。
随着电子商务行业的兴起和飞速发展，以及企业竞争的不断加剧，网上店铺蓬勃发展的同时，简单枯燥的网店页面已经远远不能打动消费者，在这种趋势下电子商务企业的岗位用人需求也日渐细分化，“网店美工”这一类技术人才在电子商务快车上的作用凸显出来。
当我们深入了解那些脱颖而出的店铺时，会发现这些店铺不仅有着过硬的爆款商品，还有店家颇具视觉冲击力的装修设计和吸引消费者眼球的亮点，完成课程学习可以顺利解决这一问题。
3.任务：本课程理论结合实践，要求学生学期内完成八个章节的学习。
了解绪论、电商视觉设计体现、电商视觉影像传达等内容，掌握电商商品图片的处理、电商网店首页视觉设计、电商网店详情页视觉设计和推广图与促销活动页视觉设计等内容，理解手机移动端视觉设计等内容。
三、学时分配四、教学内容第1章绪论目标和要求：了解视觉设计的内容；掌握电商网店的视觉定位；了解视觉营销的内容。
能够掌握商品文案的策划；能够拍摄产品；能够处理图片。
重点和难点：电商网店视觉图像的色彩调整；电商网店的字体设计，电商网店视觉设计创意及构图。
第2章电商视觉设计体现目标和要求：了解电商网店视觉体现的内容；掌握电商网店视觉风格的概念；了解广告视觉传达的概念及意义。
能够掌握商品视觉体现的主要内容；能够根据商品确定电商网店的风格。
重点和难点：商品视觉体现；电商视觉营销策略。
第3章电商视觉影像传达目标和要求：了解拍摄常用的器材；掌握构图的含义与目的；了解开播前必不可少的准备工作。
电商网页界面的设计与视觉表现分析
电商网页界面的设计与视觉表现分析随着网络的发展和普及，电子商务已经成为了企业和消费者之间交流和交易的重要方式之一。
电商网页界面的设计和视觉表现对于用户的购物体验和品牌的形象塑造起着至关重要的作用。
一、设计风格电商网页的设计风格要简洁、明了、大方，并体现出企业的品牌风格和文化。
设计师应该注意元素的排版是否合理，布局是否紧凑，风格是否一致。
为了端正网站的品质，颜色、图形、字体等都应该与企业文化相符，例如支付宝的黄色配色、天猫的黑色配色等。
二、页面布局电商网页的布局应该符合用户的习惯，且要与产品相关联。
例如，商品页面应该包括商品名称、颜色、型号、价格、进货地、品牌和图片，这样可以展现商品的特点和卖点，也方便用户购买决策。
此外，如果可以在商品页面添加客户评价，用户就能更好地了解商品启示，进而选择最心仪的产品。
三、易用性电商网站的易用性是另外一个重要的方面。
所有的操作流程应该简单明了，所有的按钮、链接都应该在符合用户兴趣的区域，便于访问。
品牌信用也要表现出来，比如支付方式、退换政策等都应该很清晰明了。
四、可视性可视性是指页面交互效果的良好，例如鼠标悬停、平稳显示、无广告干扰等。
如果能有一些特殊的效果，例如动画、活动页面、比赛游戏等都能增进用户的兴趣和购买的激情。
五、网站速度用户的等待时间不应该超过3秒以上，这要求客户端程序和服务器进行优化，做好网页加速，使其能在较短时间内加载。
同时，页面也要选择较低的分辨率和文件压缩，减少用户的等待时间，提升用户的使用感受。
六、可访问性网页的可访问性是指能否通过搜索引擎在网页中搜索关键词。
在网页开发中，应该使用结构化数据，利用优化方法，使网页的信息尽量在搜索引擎上有展现，从而得到用户访问。
此外，还可以在网站上设置关键词、描述信息等，吸引流程购买。
总之，电商网页的设计与视觉表现是为用户提供购物体验、品牌塑造和企业形象推广的重要方面。
设计师应该考虑到以上六个方面，为产品的推广和销售注入更多的生机和活力。
《电子商务视觉设计(第2版 慕课版)》读书笔记模板
第9章手机移动端淘宝店铺视觉设计
9.1手机移动端淘宝店铺首页优化设计 9.2电子数码类商品店铺首页案例解析 9.3手机移动端淘宝店铺详情页优化设计 9.4家纺视觉设计案例实操 课后习题
第10章手机移动端微店视觉设计
10.1微店首页优化设计 10.2商品详情页优化设计 10.3母婴微店视觉设计案例构思 10.4母婴微店视觉设计案例实操 课后习题
第6章高点击率推广图片视觉设计
6.1推广图片构图法则 6.2直通车图设计 6.3钻展图设计 6.4直播封面图设计 6.5聚划算主图设计 课后习题
第7章店促销广告视觉设计
7.1促销广告的黄金设计要素 7.2不同发展阶段的促销广告设计 课后习题
第8章移动端店用户体验设计
8.1移动端店的设计标准 8.2移动端店视觉设计 课后习题
5
第11章商品短 视频视觉设计
第1章初识电商视觉设计
1.1什么是视觉设计 1.2电商视觉设计前的准备 1.3电商视觉设计的黄金构图法 课后习题
第2章电商站视觉配色设计
2.1店铺页面的配色方案 2.2店铺页面的配色误区 2.3店铺的整体配色案例 课后习题
第3章店铺标志视觉设计
3.1店标的设计形态 3.2店标的设计技巧 3.3不同风格的店标设计 3.4店标的设计流程 课后习题
第4章店铺首页视觉设计
4.1首页视觉水平评价的四大指标 4.2店招视觉设计 4.3首焦轮播区视觉设计 4.4商品陈列区视觉设计 4.5茶叶店铺首页视觉设计案例 课后习题
第5章商品详情页视觉设计
5.1商品主图设计 5.2商品细节展示区设计 5.3商品功效简介区设计 5.4女鞋商品详情页视觉设计案例 课后习题
目录分析
第1章初识电商视 觉设计内容提要第2章电商站 Nhomakorabea觉 配色设计
电子商务视觉设计-店铺首页视觉设计
第4章店铺首页视觉设计店铺首页在电商店铺所起到地作用就好像实体店地店面,作为品牌地门脸,它地主要作用是向消费者做展示,通过视觉,氛围,商品与服务地综合感受让消费者对品牌有初步地了解与接触。
首页设计得是否有新意直接关系到商品信息地转化率,因此在进行店铺首页视觉设计时要尽可能地让设计能够聚集消费者地注意力,提高商品信息地转化率,这才是首页视觉设计要达到地重要目地。
首页视觉水平地四大指标4.1目录CONTENTS店招视觉设计4.2首焦轮播区视觉设计4.3商品陈列区视觉设计4.4茶叶店铺首页视觉设计案例4.5首页视觉水平地四大指标4.1判断一个店铺首页设计是否合格要从四大指标来评判:首页跳失率,首页点击率,首页均点击次数与首页平均停留时间。
首页跳失率首页跳失率是指消费者通过某种渠道进入店铺,只访问了一个首页就离开地访问次数占该入口总访问次数地比例。
针对不同地店铺规模与所售商品地类型,可以参照地判断标准是:如果是心级店铺,那么跳失率在 70% 及以下都属于正常,不需要进行优化。
如果是钻级店铺,那么跳失率在 60% 以上就需要考虑是否是海报设计与商品信息地问题了,需要根据具体地数据做出相应地优化与调整。
首页点击率首页点击率是商品在首页展现后地被点击比率,即首页点击率 = 首页点击量 ÷ 首页展现量。
店铺地首页大致可以分为两类:店铺首页罗列出各种光彩夺目地商品,希望有一款商品能够吸引消费者。
店铺首页没有单品展示,以全屏商品海报形式引导为主。
两类店铺首页排版4.1.3首页均点击次数首页均点击次数首页均点击次数是指在一段时间内均点击了多少次。
均点击次数4.1.4首页平均停留时间首页平均停留时间首页平均停留时间为访问店铺首页地所有访客总地停留时长除以访客数（单位:秒）,多天地平均停留时间为各天均停留时长地日均值。
行业性质不同,每个访客在不同行业店铺停留地时间差异很大。
在进行分析时,可以以一段时间内访客在店铺首页地平均停留时间作为基数,并记录下这段时间地销售量,以后再拿新数据进行对比就知道平均停留时间内销量是提高了还是下降了。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
溶图
4.4 商品陈列区视觉设计 1 营造视觉动线 2 商品布局艺术化
4.4 商品陈列区视觉设计 1 营造视觉动线
商品陈列图
4.4 商品陈列区视觉设计
①浏览初期，视线水平移动，且浏览 1 营范造围视最觉大动。线 刚开始浏览时，消费者对商品
色调不理想
色彩纯净，画面清晰， 画面层次感强，商品形
象更突出 处理前后的商品形象对比
4.3 首焦轮播区视觉设计 2 构建设计图三要素
如下图所示，为几种风格的首焦轮播图文字编排效果，从中可以看出 文字的字体与字号、色彩的变化等是设计中最为关键的环节。
文字元素的设计
4.3 首焦轮播区视觉设计 3 溶图的应用规范
用“渐变叠加”图层样式来表现导航条功能 按钮被鼠标触碰后的状态，在视觉上形成凹 陷的效果，将其与导航条中正常状态下的功
能按钮区分开
4.2 店招视觉设计
3 图层样式的应用
当鼠标指针触碰到导航条中任意一个功能按钮时，该 按钮就会呈现出不同的效果，这就是添加图层样式的 效果，给人视觉上的错觉，让按钮上的文字更具层次
感，更易于展示当前操作的结果
4.3 首焦轮播区视觉设计
设计聚焦消费者视线
1
构建设计图三要素
2
溶图的应用范围
3
4.3 首焦轮播区视觉设计
1 设计聚焦消费者视线
在店铺首页的商品图片展示版块中，在其开端位置放置单张海报图片可以在 一定程度上聚焦消费者的视线，让其有继续浏览页面的兴趣。
首焦位置：由于该 位置所占面积较大， 所以成为最能吸引 消费者眼球的位置
4 首页平均停留时间
首页平均停留时间=访店铺首页的所有访客总的停留时长÷访客数 （单位：秒），多天的平均停留时间为各天人均停留时长的日均值。和首 页人均点击次数一样，首页平均停留时间也可以用来判断一个店铺首页是 否能留住访客。
4.2 店招视觉设计
店招视觉设计规范
01
店铺名称的艺术化处理
02
图层样式的应用
03
4.2 店招视觉设计
1 店招视觉设计规范
店招高度设计规范
淘宝后台的店招高度为120像素，建议设计时设定店 招尺寸为950×120像素，加上导航条高度30像素，共
150像素，可避免发布后导航不显示的问题
4.2 店招视觉设计
1 店招视觉设计规范
店招元素设计
清晰的店铺名称
品牌宣传语
移动端二维码
4.2 店招视觉设计
相关信息
4.3 首焦轮播区视觉设计 2 构建设计图三要素
背景
商品 首焦轮播区设计三要素
广告 文字
4.3 首焦轮播区视觉设计 2 构建设计图三要素
以七夕节为 主题的背景
以“双11” 活动为主题
的背景
不同主题的背景图
4.3 首焦轮播区视觉设计 2 构建设计图三要素
色彩灰暗，画质朦胧， 画面层次不清晰，背景
1 店招视觉设计规范
店招和导航条风格统一
风格的统一及修饰元素的设 计，突出店铺的品牌形象
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感 2 添加特效突出特殊性和醒目度 3 使用修饰元素提升观赏性
4.2 店招视觉设计
2 店铺名称的艺术化处理
1 用不同字体和字号的组合营造艺术感
4.2 店招视觉设计
2 店铺名称的艺术化处理
3 使用修饰元素提升观赏性
使用帽子的图案来修饰店铺名称，文字 与图案在外形上的契合让店铺名称更具 个性和艺术感，更容易在消费者心中形
成特定的印象
为店铺名称添加修饰元素
4.2 店招视觉设计
3 图层样式的应用
图层样式是图像处理与网页制作中的常用功能之一，在电商视觉设计中它也 发挥着重要的作用。
两类店铺首页排版
4.1 首页视觉水平的四大指标
ቤተ መጻሕፍቲ ባይዱ
3 首页人均点击次数
首页人均点击次数，指在一段时间内人均点击了多少次，如下图所示。假设某 日点击该网店的唯一访问者数为150人，在此期间内点击本店铺首页的总访问数为 600次，那么首页人均点击次数为：600次÷150人=4次/人。
人均点击次数
4.1 首页视觉水平的四大指标
展示图充满了新鲜感和好奇，很可能将第
一排图片全部浏览完毕，并根据从上到下
的浏览经验，转向对第二排图片的浏览。
②水平浏览范围缩短。此时图片的布局没
有任何变化，消费者对于图片浏览的新鲜度 就会降低，开始失去浏览的耐心，于是对第
二排图片的水平浏览范围便会缩短。
③失去耐心，开始进行垂直浏览。当消
费者看到第三排仍然是一成不变的图片排列 后，浏览的耐心就会减少，还可能会想图片 怎么这么多，大概地往下看看吧，于是形成
学习目标
了解首页视觉水平的四大指标 掌握店招的设计规范及技巧 掌握首焦轮播区的设计技巧 了解商品陈列区的布局方式 掌握商品陈列区的布局技巧
目录
4.1 首页视觉水平的四大指标 4.2 店招视觉设计 4.3 首焦轮播区视觉设计 4.4 商品陈列区视觉设计 4.5 化妆品店铺首页视觉设计案例
4.1 首页视觉水平的四大指标
1 首页跳失率 2 首页点击率 3 首页人均点击次数 4 首页平均停留时间
4.1 首页视觉水平的四大指标
1 首页跳失率
首页跳失率，指买家通过某种渠道进入店铺，只访问了一个首页就离开的访问 次数占该入口总访问次数的比例。
进入店铺首页的渠道
4.1 首页视觉水平的四大指标
2 首页点击率
首页点击率是宝贝在首页展现后的被点击比率，即：首页点击率=首页点 击量÷首页展现量）。
4.3 首焦轮播区视觉设计
1 设计聚焦消费者视线
下面这样的表现形式与内容安排并不足以在第一时间聚焦消费者的目光。
首焦位置
4.3 首焦轮播区视觉设计
1 设计聚焦消费者视线
首焦位置的内容安排与表现能让消费者有进一步浏览店铺的欲望。
有趣的图片展示，能 让消费者通过视觉获 得较为愉悦的体验
文案信息告知了消费者店铺中的优惠活动， 因为店铺的优惠活动信息对于大部分消费者 而言都是极具吸引力的。同时，简洁的文字 与图形装饰的结合让消费者能够轻松地获取
将店铺名称的首个英文字母放大，并使用 不同于其他字体风格的手写体，让店铺名
称文字的版式更加醒目、更具艺术感
不同字体字号的组合
4.2 店招视觉设计
2 店铺名称的艺术化处理
2 添加特效突出特殊性和醒目度
为了将店铺名称与导航条的颜色区 分开，使用了发光效果来修饰店铺 名称，营造出的层次感，也贴合了
店铺中销售的照明设备的特点