《商务网页设计》

1、学习方案单元名称第一章网页设计导引学时8单元 简介人们常从艺术和技术两个维度来看待和处理网页设计，这使得目前网页的 表现形式丰富多彩，功能及应用也在不断完善。我们发现，针对各类商务应用 的网页设计，一般都聚焦于满足客户需求、实现营销目标这一关键环节。本章从构成网页的基本要素出发，通过大量典型样例的介绍，让学习者直 接接触各类常见商务网站的页面结构，迅速理解其功能特点，初步掌握客户需 求分析的基本方法，最终能从具体客户需求出发，掌握商务网页设计的基本原 贝y,合理规划和设计商务网站的栏目结构。1、能有效地进行客户需求分析；2、能合理规划设计网站栏目。知识 目标1、掌握常见商务网站类型及特点；2、

2、理解网页基本构成及相关概念；3、熟悉常见网页风格及特征；4、掌握客户需求分析方法；5、掌握网站栏目规划基本原则及方法。教学设计一、商务网站类型展示（35分钟）【设问】：商务网页设计中的“商务网页”，包含哪些典型类型？教师可使用 WYT010101-WYT010110 所示样例图展示常见的各种商务网 站类型。【注意】：教材中商务网站的类型仅列出商务网页设计领域中需求量较大的 或较典型的类型，供教师参考，教师可适当拓展或提出自己的见解。不冋类型的商务网站，其内容及页面风格、布局等有着较大的差异，讲解 中应多进行比较。【提问】：（给出实际的网站，要求学生分析并指出其类型）。【设问】：网页设计中的“设

3、计”，设计什么？二、网页基本构成的讲授（30分钟）引导动画： WYD010103网页基本兀素以网页组成图（WYT010111 ）为样本，讲述网页的基本组成及相关概念。回答前述设问，以网页逻辑结构图（WYT010112 ）为基础，强调从网页设计的角度来看待网页的组成，即内容、结构、表现、交互。其中，结构（网站 的栏目结构）和表现（风格、色彩、布局等）是本门课程关注的重点。网页结构的处理重点是网站栏目的规划，这在本单兀后续部分强调。而内 容是网页的灵魂，教师在学生了解了网站构成的基础上，应特别强调这一概念，并就内容的表达形式-网页组成兀素做一全面说明。三、网页风格讲授（15分钟）引导动画：WYD0

4、10104色彩与风格引用资源图片 WYT010115-WYT010164 及 WYT010166-WYT0101215 , 通过丰富的案例图片讲解网页设计的风格类型。本单兀列出的网页风格类型仅为常见的网页风格，教师应抓住各类风格的 基本特征加以阐述和讨论。特别注意的是，这些风格类型仅为可参照或可借鉴 的，并不是一个规范或标准，教师应鼓励学生在设计时大胆尝试和创新。【课堂讨论】：（举一国内典型企业网站），这一网站的设计风格是什么？对于国内大部分企业网站而言，基本上在欧版风格上做了不同程度的改变和调整，教师要引导学生认识到这一情况，并指出在具体设计时可以参照这一普遍 做法。四、课后实训“技能训练1

5、-1商务网页空间结构分析”（WYD010105 ）可安排为课后实训，并在下次课点评。要求学生以其所在地的一家知名企业的企业网站为分析对象，分析其网站首页的组成， 并填写的“表1-1企业网站首页空间结构分析 ”其中设计分析可不作太高要求，而由教师适当从风格、色彩、布局、内容等方面加以说明。五、 客户需求分析案例引述（5分钟）参考本单元实训要求和内容，选择一家典型烟花企业网站（或自行选择一家熟悉的企业网站），给定以下案例：【案例】：近年来，浏阳市委、市政府不断为企业探索创新营销方式。一方 面着手建立全球化营销网络，推行整体营销策略。目前已与世界100多个国家和地区建立了长期性的合作关系。另一方面以

6、电子商务为主导，采用现代化信 息手段实行网上直销。此前所做电子商务就是把产品拍成数码图片，在商务网 站发布供求信息和广告。现在越来越多的企业和个人在网上开店甚至直接建立 供求信息网站。据某烟花网的总经理透露，自网站改版半年多的时间以来，已 有2600多位英文会员、2300多位中文会员，他们在网上做生意、 上网卖产品、 上网买原材料、上网找客户等等。此案例引述的重点不是企业如何开展网络营销，而从这一点出发强调企业建立网站的必要性。【课堂讨论】：企业要建网站，如何设计合适的网页？讨论时，教师要注重引导学生认识“客户导向”原则，好的设计固然重要，但客户的需求是第一位的。六、客户需求分析讲授1、引述（

7、2分钟）教师可使用 WYT 010201客户需求分析流程示意图，讲授如何分析客户需求，并强调以下逻辑：了解客户所在行业了解客户竞争对手与客户进行深度沟通确定网站定位 确定网站内容架构 一 确定网页设计风格。【提示】：客户需求分析的重点是做好竞争对手网站的选择与分析。要做到有效地与客户做好沟通，分析并挖掘其真实需求，对客户所在行业其本情况有 所了解是必需的基础，但通过分析其竞争对手的网站，并建立初步的网页设计 思路，是与客户进行有效沟通最快速的途径。2、行业背景分析（3分钟）关于行业背景分析，可做简要说明（可使用的资源图片： WYT010202 PEST 方法示意图、WYT010203波特五力分

8、析模型），强调其分析的意义及基本方法。 具体执行可通过本单元实训完成。3、竞争对手网页的选择（20分钟）【提问】：什么样的网页是我们在设计时可参照的网页？教师在引导学生回答这一问题时，要强调的概念是“用户体验度”。当然这一概念教师可根据自己的见解灵活处理，本单元使用这一概念是希望给出一 个参考准则，尤其是从商务营销的角度来看待网页的设计，只有用户体验度良 好的网页，才是我们选择分析的对象。引用WYT010204用户体验度分析图，对用户体验度这一概念做一概述。【注意】：对于企业网站而言，用户体验度强调的是信任体验即网站内容的 处理是否得当，包括信息完整度、导航设置等等问题，以及网站的可访问性两

9、个方面。至于风格、配色、布局等问题只是其中的一个子问题。【建议】：教师可对比选择两家有着较大反差的网站进行比较，以加深学生的理解和印象。【课后阅读】：WYA010201淘宝案例（淘宝网用户体验分析报告）素材可 供学生课后阅读，以加深学生对这一概念的认知和理解。4、网页表现形式分析（15分钟）【提问】：参照竞争对手的网页， 我们如何规划设计适应客户需求的网页？ 前述的设问，“网页设计，设计什么”，我们强调了结构和表现形式。这里 要引导学生关注的就是网页的表现形式具体包括哪些方面，以及在进行设计时 必需掌握的相关要点。选用资源图片 WYT010115-WYT010164 及 WYT010166-W

10、YT0101215 ， 通过丰富的案例讲解网页设计的风格、配色、布局的概念及基本原理和方法。【注意】：教材中未特别提出版式设计的概念，可将此处的风格、配色、 布局看成是版式设计的主要内容。5、网页内容分析（10分钟）本部分内容的的讲授，教师要强调一个观念，即网站内容架构的设计是网 网页设计中最重要的一环。教师要抓住两个关键点，即网站内容结构和网页内 容组织，弓I导学生关注网页内容的表达。1）网站内容结构引用资源 WYT010205，阐述网站内容结构及相关概念。【注意】：对于门户网站，使用频道、栏目、专题来组织网站的内容，形成 的信息架构体系较复杂。但对于企业网站而言，信息量相对较少，我们一般只

11、 用栏目结构来描述。2）网页内容组织引用资源WYT010206，阐述页面内容组织的要点是准确地向浏览者传递要 表达的商务诉求。6、网页原型分析（10分钟）此处是客户需求分析是否到位的关键点，教师应特别强调其重要性。教师可通过讨论法，采取模拟客户访谈等方式，对教材中提及的三个方面的问题（网站建设的目的、网站服务对象、网站产品和服务定位）进行深入探 讨。讨论过程中，要引导学生充分意识到客户参与的重要性。七、课后实训课时量充足的情况下，“技能训练1-2网站用户体验度分析”（WYD010201） 可考虑在课堂内完成。教师要注重引导学生借鉴和学习其网页设计中优秀的方 面，以加深学生的感性认识和理性思考。

12、八、网站栏目规划讲授【提问】：通过分析竞争对手网站，并与客户进行深度沟通后，如何策划和设计满足客户需求的网站栏目？教师应强调明确客户的真实需求是做好设计的关键，在此基础上，还应掌 握相关的设计原则。1、网站栏目策划” 20分钟）【重点】：策划的基本原则、三级栏目结构。教师在讲解本部分内容时，要抓住以上两个要点。讨论基本原则时，教材 中列出的三个通用原则和五个策划要点，可引用资源WYA010301进行阐述。【注意】：资源WYA010301是一个资讯类网站的栏目结构示意图，其简洁 性在于栏目名称的规范及字数的控制，重点突出反映在栏目设计围绕着汽车维 护、保养及相关产品进行拓展，方便易用是指其三级栏

13、目结构的合理设置。根据课时量，可引用资源 WYA010302- WYA010310进行栏目结构案例讨 论。2、网站栏目设计” 15分钟）引用资源 WYA010302，教师着重以企业网站为对象讲解栏目设计的基本思 路和要点。【注意】：大型商务网站，因其内容体系庞大，不建议使用其做为分析对象， 可做为课后作业，让学生尝试通过分析已有网站进行相关设计。九、课后实训“技能训练1-3网站栏目设置分析” ”WYD010301 ）可做为课后实训内容， 教师要引导学生注意网站导航与栏目结构的关系。对于企业网站，导航中往往 包含了基本的网站栏目，但网上商城等稍大型的商务网站，情况就不是这样， 要从内容的分类角度

14、进行全面分析。十、单元实训” 4课时）动画： WYD010000企业网站栏目规划实训 本单兀实训内容为企业网站栏目规划，米用动画的形式实现。实训的完成 需有上网条件，在实训过程中涉及上网浏览等操作。本实训内容的设计强调是是栏目设计问题，即网页设计中结构方面的问题，关于风格、配色、布局等表现层面的问题在后续章节中强调。十一、课后自主学习视频：WYS010001如何打造营销型网站实训 步骤一、技能训练本单元技能训含：练技能训练1-1、技能训练1-2、技能训练1-3，可根据教材学习内容顺序合理安排。二、单元综合实训综合实训分为四个子任务：网站定位、行业背景分析、典型网页对比分析、网站栏目设计。具体实

15、训步聚如下：1、分析给定实训背景材料，给出网站定位及功能定位，完成网站定位分析 任务；2、通过阅读行业相关材料及浏览行业相关网站，了解行业基本情况及相关 产品，完成行业背景分析任务；3、给定五个相关网站，通过分析比较，选择较典型的两家网站并分析其栏 目结构，完成典型网页对比分析；4、在上述任务完成的基础上，设计网站栏目，完成网站栏目设计任务。教学资源WYT010101、WYT010102、WYT010103、WYT010104、WYT010105、WYT010106、WYT010107、WYT010108、WYT010109、WYT010110、WYT010111、WYT010112、WYD010103、WYD010104、WYD010105、WYD010101、WYD010102、WYT010113、WYT010114、WYT010115-WYT010164、WYT010165、WYT010166-WYT0101215、WYT010121、WYT010121、WYT01012