3.2网站商城页框架设计（课件）《电子商务视觉设计》（电子工业出版社）

模块一 电商视觉设计认知 《电商视觉设计》 思维导图 电商视觉营销的规划 电商网站的视觉规划 网站商城整体设计 1 目录 CONTENTS 2 3 项目三 网站商城整体设计 项目背景 在全渠道数字化运营项目中，电商视觉设计始终贯穿其中，它能够帮助运营人员解决视觉设计方面的相关问题，以精彩缤纷的图文、视频等形式表达出运营者想要呈现的信息，承载和传递商品的卖点和特色。而在电商视觉设计中，网站商城整体设计是非常重要的一步，具有吸引力的网站商城设计能够帮助运营者吸引到更多的消费者浏览，提高商品的成交率。 进行网站商城的整体设计，可以先从确立品牌的调性入手，其次进行框架的搭建，完成商品主图的设计以及网站栏目的设计，最后，对于网站商城而言，活动专题页是重要的门面之一，可以随着不同时期活动的内容和主题的不同随时变化其风格，因此需要对于网站专题页面进行专门的设计。 网站商城整体设计主要从以下五个方面着手： 研究内容 品牌调性的确立 网站商城页框架设计 商品主图设计 网站栏目设计 网站专题页面设计 学习目标 1.了解品牌调性的概念、确立方法以及具体体现； 2.了解网站商城页内容构成、框架视觉动线设计、框架设计原则； 3.明确商品主图的类型、构图方式以及设计时的注意事项； 4.熟知网站结构基础知识、网站栏目类型以及网站栏目设计标准； 5.了解专题页的基本概况、专题页的构成以及常见版式。 知识目标 1.能够根据品牌需求、行业状况、目标人群特征确定商城的品牌调性； 2.能够根据网站需求以及消费者浏览习惯设计出网站商城页框架； 3.能够根据商城特征选择符合品牌调性的主图类型并设计出展现产品特征的主图； 4.能够根据给定的网站信息梳理出网站适合的物理结构和逻辑结构，并选择合适的网站栏目类型，设计出符合需求的网站栏目； 5.能够在明确品牌方需求后设计出符合主题的网站专题页面。 技能目标 1.具备积极主动的工作态度、较强的视觉审美与设计能力； 2.具备较强的沟通能力和良好的解决问题能力； 3.培养爱岗敬业、精益求精的工匠精神。 素养目标 任务二 网站商城页框架设计 预备知识 一、网站商城页内容构成 1.页头 网站商城页页头主要放置的内容有网站logo、导航栏、账号登录以及搜索框。 预备知识 一、网站商城页内容构成 1.页头 （1）网站logo 网站logo，或者说是品牌logo，是企业品牌文化的形象缩影，因此一般需要放在页头位置，实现品牌宣传作用。 预备知识 一、网站商城页内容构成 1.页头 （2）导航栏 导航栏是指位于页面顶部或者侧边区域，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内各个页面的作用。对于网站商城而言，导航栏类似于整个商城的“指南针”，能够帮助消费者根据导航栏中的分类寻找自己需要的商品。 本来生活网首页页头导航栏 小米商城首页页头导航栏 预备知识 一、网站商城页内容构成 1.页头 （3）账号登录 很多网站商城需要会员才能进行购买操作，因此账号登录页面一般也会放置在页头位置，方便消费者进入商城后直接登录。 本来生活网首页账号登录 预备知识 一、网站商城页内容构成 1.页头 （4）搜索框 搜索框能够帮助消费者直接搜索所需商品，因此一般放置在首页最显眼的位置，即页头。 预备知识 一、网站商城页内容构成 2.主体 商城页面主体是商城主要想向消费者呈现的内容，一般由商品分类、轮播海报、活动专区、产品推荐四个部分构成。 （1）商品分类 预备知识 一、网站商城页内容构成 2.主体 （2）轮播海报 又叫首页海报，一般位于导航栏下方，占有较大面积，其常见形式为多张海报进行循环播放。 预备知识 一、网站商城页内容构成 2.主体 （3）活动专区 即专门介绍商城活动的一方区域模块，一般出现在轮播海报下方，产品推荐模块上方，但因为活动专区是专门为商城活动所设，因此一般情况下不会出现，除非商城有特殊活动，才会专门在商城页面开设部分区域充当活动专区，宣传和介绍商城活动。 预备知识 一、网站商城页内容构成 2.主体 （4）产品推荐 商城页面主体占比最大的区域，就是产品推荐模块，在产品推荐模块中，商城会将商品分为不同的类别，然后在各个类别中会挑选精选产品进行推荐。 本来生活网产品推荐页面部分 预备知识 一、网站商城页内容构成 3.页脚 在网页设计中，页面底部通常存在一个区域称为页脚。对于网站商城而言，页脚主要包含的内容有版权声明、使用协议、联系方式、友情链接、备案信息以及其他关联网站等。 本来生活网页脚 预备知识 一、网站商城页内容构成 3.页脚 在页脚设计方面，应尽量采用极少的色彩元素并和网站整体风格一致，尽量避免图片背景形式，如需让内容显得更加丰富，可选择文字和图标结合的形式来展现，且内容也不宜过多，应简洁。 一般页脚的颜色都会比上边内容区域要暗，因为页脚的信息在逻辑级别上是次要的，所以在设计时需要进行相应的降级处理，不要让页脚变得更加明显。 页脚内容对排布和分类要求较高，毕竟所占据的网站板块区域较小，因此要遵循以简洁明了的形式展示最直接和全面的内容的原则，无论是网站基本内容的目录，还是联系方式、友情链接，最好进行组织分类。 内容都是以概况的文字或图标进行展示，更多详细内容可以单击文字或图标链接跳转到详细页面，因此要合理安排链接，保证用户体验，以防出现空链接等情况。 预备知识 二、网站商城页视觉动线设计 视觉动线是指视觉注意在平面空间注意点的移动轨迹，网站商城页的视觉动线是通过对商城首页上的各种元素进行灵活运用和合理编排，在元素之间形成一种秩序关系，使视觉呈现出规律性，从而在视觉上形成秩序感。 常用的动线设计有Z型、E型两种。 预备知识 二、网站商城页视觉动线设计 1.Z形 Z形是指将店铺首页上的各种元素按照“Z”的形状编排，引导买家从左到右，从上到下的浏览页面，如图所示为“Z形”的店铺首页。 预备知识 二、网站商城页视觉动线设计 1.E形 E形是指将店铺首页上的各种元素按照“E”的形状编排，引导买家先从左到右浏览页面，在从上到下的浏览页面，然后再从左到右浏览页面。 预备知识 三、网站商城页框架设计的原则 要求用户在点击网页后能够快速明确该网页的功能、交互内容以及能够为用户解决的问题 清晰 形式统一 主题明确 以用户为中心 布局合理 可以从版式、色彩、风格等方面，强调其共性 了解目标用户的需求、浏览习惯、操作习惯，设计方便用户操作、用户审美偏好的网页；将网页设置为支持所有浏览器格式等 表现在页面结构需要合理，如页面布置讲究有主有次，整体结构清晰匀称，还表现在颜色之间的合理搭配 网站设计要表达一定的意图和需求，需有明确的主题，并通过文字、图片、色彩等将主题传达给用户 实施准备 品牌调性的确立能够帮助视觉设计师明确网站的整体风格特色，而网站商城页框架的搭建能够更进一步确立网站商城页的整体架构，方便后续的具体内容的填充。网站商城页框架搭建主要分为以下四个步骤： 1 确定商城页模块 2 选择框架视觉动线 3 细化模块内容 4 形成框架搭建效果图 任务实施与分析 步骤1：确定商城页模块 商城页面分为页头、主页和页脚三个部分，页头部分一般放置网站logo、导航栏、账号登录以及搜索框；主页部分放置商品分类、轮播海报、活动专区、产品推荐；页脚部分放置版权声明、使用协议、联系方式、友情链接、备案信息以及其他关联网站等。 确定商城页模块是指需要确定页头、主页和页脚的具体模块，由于商城的要求不同，所需要呈现的内容会有所差异，因此需要通过确定商城页模块确定商城页必须展示的内容。 任务实施与分析 步骤2：选择框架视觉动线 视觉动线能够决定消费者的浏览页面的视线走向，常见的视觉动线分为Z型和E型两种，视觉设计师需要根据本网站商城所面对的目标用户的视觉习惯选择合适的视觉动线。 任务实施与分析 步骤3：细化模块内容 以本来生活网为例，在产品推荐模块中又分为不同类别的商品推荐，因此为了使得网站商城页面设计能够落实地更加具体，需要细化一些模块内容，例如产品推荐页面具体分为哪些类别，每一类别大致推荐多少款产品等。 任务实施与分析 步骤4：形成框架搭建效果图 拓展知识 网站页面设计的注意事项 （1）采用高清大图，图片不能有水印；（2）有图片的位置最好配有文字说明，避免大面积图片摆放；（3）文字排版时，标点符号不能在一行的第一个，一个文字除特殊情况外不要独立占据一行；（4）如果色块中有文字，文字的位置要适宜，避免有太多留白空间；（5）设计菜单栏，如果箭头朝下则需设置下拉菜单，如果下拉菜单是合起的状态，其箭头朝右；（6）Banner不能是现成的图片，需要进行合成与设计，也需要有文字匹配；（7）产品分类中需体现不同类型的产品；（8）如有链接需要，链接点击入口要明显，让用户可以快速找到；（9）在网页设计中不要有重复图片；（10）统一版块内的图片要选择同一种类型与风格；（11）图片与文字要保持适当的距离，不要太近或太远。 思考与总结 学员通过以上操作，完成对网站商城页框架搭建的学习，请学员在此基础上，进行思考并回答以下问题： 视觉动线设计还有哪些类型？ 能力提升 某品牌计划创建一个女装网站商城，请同学们通过浏览其他网站商城页面，结合本节课所学知识，完成网站商城页框架设计，绘制成图，并陈述设计理由。 $$