3.5网站专题页面设计（课件）《电子商务视觉设计》（电子工业出版社）

模块一 电商视觉设计认知 《电商视觉设计》 思维导图 目录 CONTENTS 电商视觉营销的规划 电商网站的视觉规划 网站商城整体设计 1 2 3 项目四 网站栏目设计 项目背景 在全渠道数字化运营项目中，电商视觉设计始终贯穿其中，它能够帮助运营人员解决视觉设计方面的相关问题，以精彩缤纷的图文、视频等形式表达出运营者想要呈现的信息，承载和传递商品的卖点和特色。而在电商视觉设计中，网站商城整体设计是非常重要的一步，具有吸引力的网站商城设计能够帮助运营者吸引到更多的消费者浏览，提高商品的成交率。 进行网站商城的整体设计，可以先从确立品牌的调性入手，其次进行框架的搭建，完成商品主图的设计以及网站栏目的设计，最后，对于网站商城而言，活动专题页是重要的门面之一，可以随着不同时期活动的内容和主题的不同随时变化其风格，因此需要对于网站专题页面进行专门的设计。 本次学习的网站商城整体设计主要从以下五个方面着手： 研究内容 品牌调性的确立 网站商城页框架设计 商品主图设计 网站栏目设计 网站专题页面设计 学习目标 1.了解品牌调性的概念、确立方法以及具体体现； 2.了解网站商城页内容构成、框架视觉动线设计、框架设计原则； 3.明确商品主图的类型、构图方式以及设计时的注意事项； 4.熟知网站结构基础知识、网站栏目类型以及网站栏目设计标准； 5.了解专题页的基本概况、专题页的构成以及常见版式。 知识目标 1.能够根据品牌需求、行业状况、目标人群特征确定商城的品牌调性； 2.能够根据网站需求以及消费者浏览习惯设计出网站商城页框架； 3.能够根据商城特征选择符合品牌调性的主图类型并设计出展现产品特征的主图； 4.能够根据给定的网站信息梳理出网站适合的物理结构和逻辑结构，并选择合适的网站栏目类型，设计出符合需求的网站栏目； 5.能够在明确品牌方需求后设计出符合主题的网站专题页面。 技能目标 1.具备积极主动的工作态度、较强的视觉审美与设计能力； 2.具备较强的沟通能力和良好的解决问题能力； 3.培养爱岗敬业、精益求精的工匠精神。 素养目标 任务五 网站专题页面设计 预备知识 树形结构 一、认识专题页 专题页是一个内容聚合页，专题页中的信息来源于同一主题，并通过文字、图片、色块、音频、视频等元素呈现。 专题页的特点是，页面突出视觉效果，主题鲜明，更容易给用户留下深刻印象，同时专题页具有时效性，时间一过，该页面一般不会再使用。 预备知识 1.. 3. 2. 4. 头部Banner 背景 楼层模块 装饰物 二、专题页的构成 预备知识 树形结构 三、专题页的常见版式 1.通栏式专题页： 通栏是较常见的专题页板式，其优点是较为简洁大气、有条理和空间感。特殊的官网首页及一些高端的产品采用较多。通栏式专题页自上而下排列。 预备知识 树形结构 三、专题页的常见版式 2.块状式专题页： 块状式专题页是电商类产品中是最常见的排版样式，其在头部Bannner之下，分一块一块呈现楼层，楼层与楼层之间排列整齐，常用来陈列产品或优惠信息等内容。块状式专题页的优点是层级分明，适合展示多款产品。 预备知识 树形结构 三、专题页的常见版式 3.长条式专题页： 长条式专题页与块状式专题页类似，区别在于块状式专题页是分小块图形展示内容，长条式专题页是整个长条外形整体展示内容，该版式的优点是简洁、大气、统一。 预备知识 树形结构 三、专题页的常见版式 4.引导式专题页： 引导式专题页是在页面中添加引导元素，引导元素可以是线条、箭头或其他有指向性的图形。该版式的优势是页面呈现灵动多变，可以引导用户按照既定浏览顺序浏览网页。 预备知识 树形结构 三、专题页的常见版式 5.曲线式专题页 曲线式专题页是以S形引导用户浏览网页，专题页内容以曲线的形式展开。曲线式与引导式专题页优势类似，都是引导用户按既定路线完成网页浏览，优点是页面灵活。 预备知识 树形结构 三、专题页的常见版式 6.全版式专题页 全版式专题页整个页面没有太多修饰，如色块、花纹等，底色采用纯色，该版式的优点是采用极简的方式展示产品内容，能够突出产品本身并突显产品或品牌质感。 预备知识 树形结构 三、专题页的常见版式 7.自由式专题页 自由式专题页，即网页设计无固定格式，可以是各种格式的混搭，整体网页设计无具体规则。该版式专题页的优势是灵活度高，设计感强，更容易突显专题页特色。 实施准备 了解了专题页的基本情况，接下来需要学习专题页设计的基本流程。网站专题页设计主要分为四个步骤，分别是沟通需求，确定专题页结构、寻找并确定素材、设计并制作专题页以及修改完善。 任务实施与分析 01 沟通需求，确定专题页结构。 02 寻找并确定素材。 03 设计并制作专题页。 04 修改完善。 设计头部Banner 1.根据设计需求、不同的设计主题，明确头图的设计风格； 2.可事先打草稿勾勒草图，评估是否可采用（包括头图元素、结构等）； 3.头图要有延展性，要注意宽屏分辨率下的显示特点； 4.汇总与专题页主题相契合的元素，将元素进行组合，尝试不同头图风格，最终选定最优的一款； 5.设计时，需考虑与后续页面的衔接； 6.设计时，紧贴专题内容，以美观为原则，设计能吸引用户关注的头图。 任务实施与分析 制作各楼层内容图 1.考虑与头图的衔接，衔接忌生硬，需巧妙； 2.需结合专题页整体视觉设计需求、贴合其主题； 3.需明确内容版式，根据版式,设计内容清晰，布局合理的视觉效果； 4.重视楼层各模块的权重，内容的主次要清晰，整体排版有一定的逻辑性和联系； 5.楼层中有需重点显示的模块，需做到视觉突出（如采用颜色、图形等形式使视觉突出），但不能突兀，要与整体相融合； 6.可采用装饰元素，但不能喧宾夺主。 任务实施与分析 拓展知识 专题页设计的技巧 A 以用户为中心 B 专题页元素新颖 C 重视交互细节 D 重视视觉的延伸与统一 E 重视专题页的作用 F 交付前端时，对专题页图层进行分组 思考与总结 学员通过以上操作，完成对网站专题页的设计，请学员在此基础上，进行思考并回答以下问题： 在专题页设计过程中，可以从哪些渠道获取相应素材？ 能力提升 请同学们通过浏览商城网站，找到七种版式对应的专题页面，并结合所找到的专题页阐述各版式专题页面的特点及适用情况。 $$