第4章 Web网站设计准则

《第4章 Web网站设计准则》由会员分享，可在线阅读，更多相关《第4章 Web网站设计准则（32页珍藏版）》请在金锄头文库上搜索。

1、第4章 Web网站设计准则,注意： 前面，我们已经初步学习了创建网页的方法，但是真正构建一个网站是很不容易的。 本章内容就是教我们怎样设计一个好的网站（开发一个软件），学完本章内容，大家将会得到一个完整的设计文档的模板。,主要内容,4.1 定义网站的目标 4.2 概要设计 4.3 网站功能设计 4.4 网站结构设计 4.5 网站的可视化设计,4.1 定义网站的目标,这一阶段是回答建网站做什么。 1. 定义网站的目标 网站的内容和目标是客户和设计者通过协商、共同一致的表达。 开始做工程前，需要做两件事。 1.首先，确定哪些人是参加定义网站的目标的关键人物。 2.另外，还要确定做一个目标的正式定义

2、或非正式定义。这取决于工程的规模。,2. 需求调查 在确定哪些人参加网站设计之后，需要列出问题的清单。这些问题帮你确定网站的任务和每个子目标。 基本问题包括： 网站的任务或每个子目标是什么？ 这是最重要的问题，可以通过阅读客户的任务陈述和商业计划得到一些好主意。,网站的近期目标和远期目标是什么？ 设计者应该比客户看的更长远些。 谁是确定的访问者？ 为什么人们会来到你的网站？ 记下每个人的回答，设计者精炼这些回答。,3. 需求分析 整理客户的答案，将需求调查阶段问题的答案转变成子目标，并指出哪些目标是最重要的。 首先，把访问者的答案分离出来，将其概述为目标并把它们列表。如果列表很长，把它们分类。

3、把这些列表返回给客户看，让他们评价每个目标的重要性。,其次，也是最重要的部分，当收集了每个人的评价后，设计者需要把他们过滤成一个主表，将其交给公司重要人物审核，听取他的意见并予以更多的重视。 有了一套清晰的目标后，还需要先保证对这些目标的确认，以确定目标没有产生二义性。 写一个可行性报告作为文档，把目标清单总结成几段，进行简单的概括。,上述工作总结如下：（调查客户需求） 仔细阅读客户的任务陈述和商业计划。 网站的近期目标和远期目标是什么？ 确定谁是访问者？ 为什么人们会来到你的网站？ 把这些问题的混乱的答案过滤一遍,整理成目标列表。 把这些列表返回给被调查者看，让他们评价每个目标的重要性。 重

4、新过滤整理成一个正式的目标清单,取得客户重要人物支持。 如果必要，召开一个会议,确保客户同意并在网站目标清单上签名。,4. 书写文档 - 网站的目标 第1章 可行性报告 1.1 目标定义 1.2 有客户签名的目标列表 1.3 软硬件环境, 拟采用的技术路线, 队伍, 财务预算 ,4.2 概要设计,这一阶段的目标是回答为谁而建网站。 1. 定义访问者 需要把所有的访问者分类编辑成访问者清单。 2. 创建情节 情节就是用户访问网站的经历。情节也对实现网站的设计有帮助。如果情节与网站访问者的实际行为相匹配，设计者就设计对了 。,3. 竞争性分析 可以把竞争者列一个清单。 评价每个竞争者网站的一系列特

5、征和规则。 最后，对评价的结果做文档。记下优缺点,4. 设计文档 - 访问者，场景和竞争性分析 在需求说明书加入访问者定义和情节。然后，写竞争性分析的概要并放入设计文档中。竞争性分析本身可以作为附录。 第2章 需求说明书 2.1 访问者定义 2.2 访问者情节预测 2.3 竞争性分析概述 附录A：竞争性对手分析表,4.3 网站功能设计,这一阶段的目标是回答网站有什么。 1. 网站内容 设计你的网站将包含什么内容。 要点是收集创建结构和网站组织的要素。 设计者要回答两个问题：网站需要什么内容？需要什么功能？（例如建一个机器人）,2. 确定内容和功能 作两个新的清单：一个是网站的内容，一个是网站的

6、功能。 内容的类型包括静态的、动态的；功能的、事物处理的等。静态内容包括版权信息、独家声明、成员规则等。功能性的内容应包括：会员登录页、Email时事通讯登录页面以及其它涉及表单和事物处理的网页。,3. 分组和标记内容 设计者要组织内容和定义网站的结构。在每个索引卡片上记下内容清单中的一项，把这些卡片分组，给每组一个名字，名字既要描述准确，又不能太长。把每组的名字和每组中的元素记下来。让开发人员每个人完成上述工作。在每个人完成后，把他们的结果进行比较和对照。,最终确定的内容分组方式和组名是网站的基础。但要注意：网站的内容都是易变的。它们的名称和内容可能在下一阶段发生改变。如果有必要，修订“内容

7、、功能清单”，以便反映最新的信息。,4. 设计文档 - 内容和功能 内容和功能需求 内容清单中出现的业务名词应该组织成“数据字典”。“数据字典”是设计文档附录的一部分，完成后让每个开发人员都能看到。 第3章 网站内容和功能描述 3.1 内容分组和命名 3.2 功能需求 附录B: 数据字典,4.4 网站结构设计,这一阶段的目标是如何方便用户访问网站内容。 1. 网站结构 定义网站结构，相当于人体骨架，设计者做其它事情的基础。 设计者必须考虑设计一个可扩充的、高度结构化的、易用的、相对独立的网站。 精心设计的结构能使定义网站的导航系统变得更容易。 在这两者的基础上设计者才可以最后设计页面布局和模板

8、。,2. 装饰风格 装饰风格就是网站结构的表现形式。 好的装饰风格会在帮助用户使用和导航网站上起很好的作用。 设计网站有三种有用的装饰风格可供参考： 1）组织性装饰风格 组织性装饰风格依赖于已经存在的小组、系统或组织的结构。例如，百货的网站，装饰风格应该像一个超市。产品按类型（如罐装蔬菜、乳制品等）逻辑地分类。,2）功能性装饰风格 功能性装饰风格与某些软件环境实现的任务相似。例如，Photoshop是一种图形软件，它有许多功能性装饰风格。 3）可视性装饰风格 可视性装饰风格基于多数人熟悉的常用图形元素。如音乐网站，,3. 网站结构的描述方法 有两种方法来描述网站结构。 第一种是基于文本的网站层

9、次结构列表。 先根据网站结构列表的“根”确定网站的主要部分。下一步，把每部分的组织与内容清单的条目对应起来并采用缩进格式描写。 Section 1 Section 1.1 Section 1.2Section 2 Section 2.1 Section 2.2 Section 2.2.1 Section 2.2.2 Section 2.2.3 Section 3,第二种是基于图形的网站结构化蓝图。 它是网站结构的可视化表示。它是一种显示网站中的元素如何分组和联系的图表。,4. 定义导航 用户如何访问网站？他们怎样从一个地方到另一个地方？怎样防止他们在网页中迷失方向？定义网站的导航系统就是解决这

10、些问题。 对于一个网站一般要为其设计全局导航系统和局部导航系统两种。 网站的结构清单是设计全局导航系统的基础。全局导航系统应出现在网站的每页上，使用户能很方便地在不同部分之间跳转。 局部导航系统出现在网站的某组上，使用户很方便地在组内跳转。局部导航可以有不同的形式。可以是主题的列表；可以是选项菜单的形式；或者可以是一些相关条目的列表。,5. 设计文档 网站结构。 写一个关于网站结构背景概述。 为全局和局部导航系统设计做文档。把结果公布给项目组每个开发人员。 第4章 网站结构 4.1 网站结构概述 4.2 网站层次结构列表描述或网站结构化蓝图描述 4.3 全局和局部导航系统设计 附录C:网站结构

11、列表补充说明（可选）,4.5 网站的可视化设计,这一阶段的目标是如何使你的网站充满魅力。 1. 可视化设计 设计者已经完成了为什么要建网站，访问者是谁，即网站的内容，所有的内容如何组织起来，现在可以进行可视化设计了，也就是设计者终于可以设计网页了。,设计者可能需要图形设计人员、艺术指导、创作指导和产品工作人员的帮助。需要考虑的包括: 1） 布局网格图 布局网格是描述网页的模板。 2） 设计框架和页面模型 设计框架和页面模型用来建立对网站的直观感受。框架是布局网格图的具体实现。设计页面模型涉及各个框架的页面表现形式。,2. 设计文档 可视化设计。 把布局网格做在文档中，包括所作的图表。编辑设计框

12、架，把充实页面的图片也加入文档中。 第5章 详细设计说明书可视化设计 5.1 可视化设计：布局网格 5.2 设计框架和页面模型 附D 网页设计代码,4.6 实施网站建设工程的步骤总结,实施一项网站建设工程的一般步骤： 1.定义网站的目标(回答为什么建网站?) 结束标志:可行性报告(包含目标定义,有客户签名的目标列表)。 2.概要设计(回答为谁而建网站?) 结束标志:需求说明书(包含访问者定义,访问者情节预测,竞争性分析表) 3.网站的内容和功能设计(回答网站有什么?) 结束标志:信息字典(包含内容的分组和命名,功能描述) 4.网站的结构设计(回答信息应如何组织,如何检索?) 结束标志:结构设计说明书(包含基于文本的网站层次结构列表,基于图形的网站结构化蓝图,全局导航系统和局部导航系统) 5.网站的可视化设计(回答怎样使网站充满魅力?) 结束标志:详细设计说明书(包含布局网格图,框架设计与页面模型, 网页设计代码),练 习,实施一项网站建设工程的一般步骤是什么？,