3.1网站商城整体设计（教案）《电商视觉设计》（华东师范大学出版社）

《网站商城整体设计》课程教案 教学模块 项目三 网站商城整体设计 课时数 15 教学班级 主讲教师 教学目的和要求 知识目标 1.了解品牌调性的概念、确立方法以及具体体现； 2.了解网站商城页内容构成、框架视觉动线设计、框架设计原则； 3.明确商品主图的类型、构图方式以及设计时的注意事项； 4.熟知网站结构基础知识、网站栏目类型以及网站栏目设计标准； 5.了解专题页的基本概况、专题页的构成以及常见版式。 技能目标 1.能够根据品牌需求、行业状况、目标人群特征确定商城的品牌调性； 2.能够根据网站需求以及消费者浏览习惯设计出网站商城页框架； 3.能够根据商城特征选择符合品牌调性的主图类型并设计出展现产品特征的主图； 4.能够根据给定的网站信息梳理出网站适合的物理结构和逻辑结构，并选择合适的网站栏目类型，设计出符合需求的网站栏目； 5.能够在明确品牌方需求后设计出符合主题的网站专题页面。 素养目标 1.具备积极主动的工作态度、较强的视觉审美与设计能力； 2.具备较强的沟通能力和良好的解决问题能力； 3.培养爱岗敬业、精益求精的工匠精神。 教学手法 1.基础知识，教师利用讲授法和问答法，首先通过提问引发学生思考，让学生发表自己关于问题的见解，教师总结学生答案并讲授重要知识点； 2.重难点知识，教师利用任务驱动法，在课程开始前告知学生学习目标，引导学生围绕学习目标先自行探索、再进行合作探究，总结遇到的困难和问题，然后老师指导学生进行实操，梳理并总结出知识要点。 教学重 难点 重点： 1.网站商城页框架设计； 2.商品主图设计。 难点： 1.品牌调性的确立； 2.网站专题页面设计。 教学要点设计 1.教师首先通过展示案例，让学生观看并指出网站商城设计的品牌调性，并阐述自己对品牌调性的理解。在学生对于品牌调性有一定认识的基础之上，引导学生分组讨论，进行品牌调性概念和确定方法，并在小组内推举代表发言。教师总结学生发言并系统讲解品牌调性的具体体现，为学生建立完整的知识体系；（90分钟） 2.教师在课程一开始，先设置问题，引发学生思考：网站商城页内容构成有什么？引导学生对问题进行讨论并陈述自己的认识，教师根据发言情况进行知识讲解，并配合案例展示加深学生的印象和理解；让学生观察网站商城视觉动线的设计，并总结出有哪些类型。最后讲师讲解网站商城页框架设计的原则，并引导学生实操，让学生按步骤进行网站商城页框架搭建，教师随时关注学生的进展并解决设计过程中遇到的各种问题；（180分钟） 3.教师在课程开始前，告诉学生本次课程的目标是掌握商品主图设计，鼓励学生通过资料搜索与阅读、合作讨论等方式先自行了解相关内容。具体操作问题，可以参考老师的操作演示，教师及时关注学生学习进展，对学生产生的疑问进行解答，并在课程结束前总结知识框架，最后给予学生选题，让学生独立进行设计。（135分钟） 4.教师将学生分成小组，让学生自主查阅并交流网站栏目设计有哪些要点，设计中可能会遇到的问题，结合问题讲解梳理网站结构基础知识整个知识框架。最后结合案例讲解网站栏目设计标准，梳理设计的步骤。（135分钟） 5.教师讲解：教师演示讲解网站专题页面设计，并讲解网站专题页面设计的基础知识。教师通过案例展示专题页的常见版式，并引导学生讨论这些板式之间的区别，以及在制作中可能遇到的问题，教师对学生的问题进行逐一引导，让学生明确每一步的编写要点，最后大家一起讨论进行补充。最后通过问答的方式回顾本讲的要点知识（135分钟） 教学过程 任务一 品牌调性的确立 【预备知识】 一、品牌调性的概念 品牌调性是指品牌在市场中所运用的独有的语言识别，品牌调性的构成主要包括品牌核心价值定义阐释、品牌价值诉求、品牌标识语、品牌故事以及品牌主广告语等。简单来说，品牌调性是指一家企业长期的、稳定的、统一的风格。这种风格最终达到的目的是让消费者能够快速、准确地识别出品牌，并形成认知，进而培养出粉丝经济，产出经济利润。 站在视觉设计的角度而言，品牌调性是一种包括品牌符号化的传达到消费者的印象记忆。品牌符号可以是名字、logo、颜色、字体、口号、包装、代言人、网站风格等。具体到网站商城整体设计中，视觉设计师需要根据相应的品牌及企业定位设计与其风格一致的网站页面，包括首页、专题页、产品列表页、产品详情页、后台页等。 二、品牌调性的确立方法 品牌调性的确立方法主要有三点，分别是找准品牌定位，了解目标人群、找到差异化竞争点以及打造视觉符号，形成消费者记忆点。 1.找准品牌定位，了解目标人群 2.找到竞争化差异点 3.打造视觉符号，形成消费者记忆点 三、品牌调性的具体体现 在视觉设计的领域中，品牌调性的具体体现主要表现在品牌LOGO、字体、文案、色彩等方面。 【任务实施与分析】 1.步骤1：调研 确立品牌调性，需要先明确品牌调性的方向，想要实现这一目标，需要通过调研进行确定。调研主要分为三个方向：品牌方、行业其他商城以及企业方目标人群。 步骤2：分析 当调研完基本信息，需要针对基本信息展开分析，这些分析的具体信息汇总起来最终指向品牌调性的具体体现。 步骤3：策划 信息分析完毕之后，在实施之前需要进行策划，策划的方面包括网站风格、网站元素、品牌LOGO、网页字体、网页版式、网页文案风格、网站色彩等。 步骤4：实施 完成品牌调性策划之后，当后续商城框架搭建成功按照策划表确定信息进行实施即可。 【拓展知识】 一、电子商务网站设计准则 无论是大型的电商平台网站，还是中小型的电子商务类网站，在网站设计初始，都应考虑网站的美观性、界面的友好性以及访问的便捷性。因此，网站设计需要遵循一定的准则，具体如下： 1.明确网站建设的目的和用户的需求 2.总体设计主题明确 3.链接准确无误 4.保证网站信息的时效性 【思考与总结】 品牌调性的确立还与哪些内容有关？ 【能力提升】 请同学们简述品牌调性确立的具体步骤，并将其绘制成脑图形式进行呈现。 【任务训练】 根据本任务章节内容，根据任务步骤，完成拓展任务。 任务二 网站商城页框架设计 【预备知识】 一、网站商城页内容构成 网站商城页主是一个企业或品牌用于展示其产品或服务的页面，网站商城页面主要由页头、主体、页脚三部分构成。 2、 网站商城页视觉动线设计 视觉动线是指视觉注意在平面空间注意点的移动轨迹，网站商城页的视觉动线设计是通过对商城首页上的各种元素进行灵活运用和合理编排，在元素之间形成一种秩序关系，使其呈现出规律性排布的视觉效果，从而在视觉上形成秩序感。 常用的动线设计有Z型、E型两种。 3、 网站商城页框架设计的原则 在进行网站商城页设计时，视觉设计师需遵循一定的原则，主要有以下几方面： 1.清晰 2.以用户为中心 3.形式统一 4.布局合理 5.主题明确 【任务实施与分析】 步骤1：确定商城页模块 步骤2：选择框架视觉动线 步骤3：细化模块内容 步骤4：形成框架搭建效果图 【拓展知识】 一、网站页面设计的注意事项 网站页面设计需要注意以下内容： 1.采用高清大图，图片不能有水印； 2.有图片的位置最好配有文字说明，避免大面积图片摆放； 3.文字排版时，标点符号不能在一行的第一个，一个文字除特殊情况外不要独立占据一行； 4.如果色块中有文字，文字的间距要适宜，避免有太多留白空间； 5.设计菜单栏，如果箭头朝下则需设置下拉菜单，如果下拉菜单是合起的状态，则箭头朝右； 6.Banner不能是现成的图片，需要进行合成与设计，也需要配有文字说明； 7.产品分类中需全面展示产品的不同类型； 8.如有链接设置需要，链接点击入口要醒目，让用户可以快速找到； 9.在网页设计中不要有重复图片； 10.同一版块内的图片要选择同一种类型与风格； 11.图片与文字要保持适当的距离，不要太近或太远。 任务三 商品主图设计 【预备知识】 一、商品主图的类型 商品主图指的是电子商务平台中在产品搜索页面和产品详情页面中用于展示商品整体样貌的图片。根据主图的设计排版和图片展示效果，商品主图的类型主要有品牌感主图、简约型主图、场景化主图、营销型主图四种。 2、 商品主图的构图方式 作为展示产品的重要窗口，主图的构图尤为重要。常见的主图构图方式有左右排版构图、中心对称排版构图、中心围绕排版构图、上下排版构图等四类。 3、 主图设计的注意事项 在进行主图设计时，需要注意以下内容： 1.主图的页面需要做到干净、整洁，文案精简明了 2.主图色彩搭配和谐 3.图片营销文案设计合理 【任务实施与分析】 步骤1：选择主图类型 步骤2：拍摄照片 步骤3：设计主图文案 步骤4：确定排版方式 步骤5：制作主图 【拓展知识】 一、淘宝网店主图发布标准 淘宝平台对于卖家发布的商品主图有着明确规定，大部分品类都需要遵守如下要求，如果违反以下任一规定，平台将会给予下架商品且单个商品搜索降权三天的处理。 1.应至少发布两张及以上的主图，图片为正方形的JPG格式，图片大小800×800 px，分辨率72 dpi。 2.所有主图不得拼接，不得出现任何形式的边框，不得出现水印，无“牛皮癣”。 3.第一张主图的文字描述只能出现在图片底部的十分之二高度以内，不得包含促销类信息，该类信息包括但不限于限时折扣、包邮、×折、满×送×等。当卖家为商标所有人，如在第一张主图放置品牌logo，必须放置在整体主图的左上角，尺寸不得超过宽度的十分之四，高度的十分之二。 4.第二张主图必须为无任何logo、文字描述的纯图。 5.商品需要正面展示，尽量避免侧面或者背面展示，主体不要左右倾斜。 6.图片美观度高，品质感强，商品展现尽量平整，不要有褶皱。 7.构图明快简洁，商品主体清晰、明确、突出，要居中放置。 8.每张主图中只能出现一个主体，不可出现多个相同主体。 9.图片中的商品主体必须展示完整，展现比例不要过小，商品主体要大于300×300 px。 任务四 网站栏目设计 【预备知识】 一、网站结构基础知识 从网站建设的角度来看，网站搭建有两个层面的结构形式： 1.网站的物理结构 （1）扁平式结构 （2）树形结构 2.网站的逻辑结构 二、网站栏目分类 网站是指在互联网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。一般来说，网站页面分为两种，首页和内页。对于网站商城而言，首页是商城的入口页面，作用是引导消费者浏览网站其他部分页面，而内页是商城的内容页，在树形结构中，网站的首页可能链接着下一个包含子类别的内容页。为了方便消费者通过首页进入具体产品页面，视觉设计师需要针对网站栏目进行设计，通过设计网站栏目，搭建起网站的整体框架。 三、网站栏目设计标准 合理的网站栏目设计，不仅能够正确表达网站的基本内容及其内容之间的层次关系，而且也能够方便用户在浏览网站时准确获取信息。因此，网站栏目的设计标准主要有以下四点： 1.通过首页可以到达任何一个一级栏目首页、二级栏目首页以及最终内容页面； 2.通过任何一个网页可以返回上一级栏目页面并逐级返回首页； 3.主栏目清晰并且全站统一； 4.通过任何一个网页可以进入任何一个一级栏目首页。 【任务实施与分析】 步骤1：梳理网站内容 步骤2：选择网站结构 步骤3：选择网站导航栏 步骤4：创建网站类目 步骤5：设计并制作导航栏 【拓展知识】 一、网店导航栏的分类 导航好比是整个店铺的“指南针”，能够有效帮助粉丝跳转到各个关键页面，精心设计的网店导航，能够让店铺中的各个页面串联起来，方便消费者在不同的栏目板块之间快速切换。网店导航栏按照类别可以分为以下几类： 1.隐形导航 2.半隐形导航 3.显形导航 【思考与总结】 网站栏目设计与网店导航设计有哪些不同？ 【能力提升】 请同学们浏览小米商城官网，分析其网站结构，并将其网站结构通过脑图形式绘制出来，思考并解决以下问题： （1）小米商城的网站结构选取了哪种形式？ （2）小米商城的网站导航栏采取的哪种形式？ （3）小米商城主要销售哪些类目的商品？ （4）小米商城的导航栏最多分了几级类目？ 【任务训练】 根据本任务章节内容，根据任务步骤，完成拓展任务。 任务五 网站专题页面设计 【预备知识】 一、认识专题页 专题页是一个内容聚合页，专题页中的信息来源于同一主题，并通过文字、图片、色块、音频、视频等元素呈现。电子商务企业专题页多用来呈现某一活动主题或营销主题，页面内容均围绕宣传目标展开。专题页的特点是，页面突出视觉效果，主题鲜明，更容易给用户留下深刻印象，同时专题页具有时效性，时间一过，该页面一般不会再使用。 在设计专题页时，要重视页面功能使用的便捷性以及页面内容的交互性，优化用户浏览体验。视觉呈现上侧重布局、间距、色彩、按钮、LOGO等内容。同时可以添加有趣的互动元素，达到吸引用户的目的。在页面布局和交互上，相较于首页要自由许多，设计师可以结合需求构建合适的专题页布局。 二、专题页的构成 专题页的呈现效果千变万化，但从本质上来讲，主要由四个部分构成，分别是： 1.头部Banner。 1.楼层模块 2.背景 3.装饰物 三、专题页的常见版式 专题页的常见版式主要分为以下七种： 1.通栏式专题页 专题页的常见版式主要分为以下七种： 1.通栏式专题页 2.块状式专题页 3.长条式专题页 4.引导式专题页 5.曲线式专题页 6.全版式专题页 7.自由式专题页 【任务实施与分析】 步骤1：沟通需求，确定专题页结构 步骤2：寻找并确定素材 步骤3：设计并制作专题页 步骤4：修改完善 【拓展知识】 一、专题页设计的技巧 1.以用户为中心 专题页最终的受众是用户，因此在设计时，应重视用户的需求和偏好。 2.专题页元素新颖 专题页设计要紧随时代审美，选择符合大众审美的风格、元素等。 3.重视交互细节 区别于首页，专题页的交互性相对较弱，但设计师同样应站在用户的角度考虑交互问题，设计符合用户浏览习惯的交互功能。 4.重视视觉的延伸与统一 专题页需重视页面效果的延伸和统一，包括头图与楼层之间、楼层与楼层之间，以及背景、颜色、其他元素的统一和延伸。 5.重视专题页的作用 专题页的作用是传达信息，因此除了视觉呈现美观之外，还要考虑专题页的实用性，信息传达准确性，围绕该原则进行专题页的设计。 6.交付前端时，对专题页图层进行分组 专题图层众多，设计完交付前端时，可以对图层进行分组，使前端在使用时更明确。 【思考与总结】 在专题页设计过程中，可以从哪些渠道获取相应素材？ 【能力提升】 请同学们通过浏览商城网站，找到七种版式对应的专题页面，并结合所找到的专题页阐述各版式专题页面的特点及适用情况。 【任务训练】 根据本任务章节内容，根据任务步骤，完成拓展任务。 1 学科网（北京）股份有限公司 $$