第4章 Web网站设计准则

第4章Web网站设计准则注意：前面，我们已经初步学习了创建网页的方法，但是真正构建一个网站是很不容易的。本章内容就是教我们怎样设计一个好的网站（开发一个软件），学完本章内容，大家将会得到一个完整的设计文档的模板。主要内容4.1定义网站的目标4.2概要设计4.3网站功能设计4.4网站结构设计4.5网站的可视化设计4.1定义网站的目标这一阶段是回答建网站做什么。1.定义网站的目标网站的内容和目标是客户和设计者通过协商、共同一致的表达。开始做工程前，需要做两件事。1.首先，确定哪些人是参加定义网站的目标的关键人物。2.另外，还要确定做一个目标的正式定义或非正式定义。这取决于工程的规模。2.需求调查在确定哪些人参加网站设计之后，需要列出问题的清单。这些问题帮你确定网站的任务和每个子目标。基本问题包括：网站的任务或每个子目标是什么？这是最重要的问题，可以通过阅读客户的任务陈述和商业计划得到一些好主意。网站的近期目标和远期目标是什么？设计者应该比客户看的更长远些。谁是确定的访问者？为什么人们会来到你的网站？记下每个人的回答，设计者精炼这些回答。3.需求分析整理客户的答案，将需求调查阶段问题的答案转变成子目标，并指出哪些目标是最重要的。首先，把访问者的答案分离出来，将其概述为目标并把它们列表。如果列表很长，把它们分类。把这些列表返回给客户看，让他们评价每个目标的重要性。其次，也是最重要的部分，当收集了每个人的评价后，设计者需要把他们过滤成一个主表，将其交给公司重要人物审核，听取他的意见并予以更多的重视。有了一套清晰的目标后，还需要先保证对这些目标的确认，以确定目标没有产生二义性。写一个可行性报告作为文档，把目标清单总结成几段，进行简单的概括。上述工作总结如下：（调查客户需求）仔细阅读客户的任务陈述和商业计划。网站的近期目标和远期目标是什么？确定谁是访问者？为什么人们会来到你的网站？把这些问题的混乱的答案过滤一遍,整理成目标列表。把这些列表返回给被调查者看，让他们评价每个目标的重要性。重新过滤整理成一个正式的目标清单,取得客户重要人物支持。如果必要，召开一个会议,确保客户同意并在网站目标清单上签名。4.书写文档-网站的目标第1章可行性报告§1.1目标定义§1.2有客户签名的目标列表§1.3软硬件环境,拟采用的技术路线,队伍,财务预算……4.2概要设计这一阶段的目标是回答为谁而建网站。1.定义访问者需要把所有的访问者分类编辑成访问者清单。2.创建情节情节就是用户访问网站的经历。情节也对实现网站的设计有帮助。如果情节与网站访问者的实际行为相匹配，设计者就设计对了。3.竞争性分析可以把竞争者列一个清单。评价每个竞争者网站的一系列特征和规则。最后，对评价的结果做文档。记下优缺点GeneralSiteFeaturesSite1Site2Site3Site4SiteDesign(1-10)Navigation(1-10)74225454BookmarkableURLsLayout(1-10)V4X3V4V5LookandFeel(1-10)AdvertisingAllowed6V2X4V5VPersonalizationPersonalStartPagesXVVVEmailNewsletterSavedSearchesXXXXVVXVTechnologyJavaScriptVXVXJavaVVVV4.设计文档-访问者，场景和竞争性分析在需求说明书加入访问者定义和情节。然后，写竞争性分析的概要并放入设计文档中。竞争性分析本身可以作为附录。第2章需求说明书§2.1访问者定义§2.2访问者情节预测§2.3竞争性分析概述附录A：竞争性对手分析表4.3网站功能设计这一阶段的目标是回答网站有什么。1.网站内容设计你的网站将包含什么内容。要点是收集创建结构和网站组织的要素。设计者要回答两个问题：网站需要什么内容？需要什么功能？（例如建一个机器人）2.确定内容和功能作两个新的清单：一个是网站的内容，一个是网站的功能。内容的类型包括静态的、动态的；功能的、事物处理的等。静态内容包括版权信息、独家声明、成员规则等。功能性的内容应包括：会员登录页、Email时事通讯登录页面以及其它涉及表单和事物处理的网页。3.分组和标记内容设计者要组织内容和定义网站的结构。在每个索引卡片上记下内容清单中的一项，把这些卡片分组，给每组一个名字，名字既要描述准确，又不能太长。把每组的名字和每组中的元素记下来。让开发人员每个人完成上述工作。在每个人完成后，把他们的结果进行比较和对照。最终确定的内容分组方式和组名是网站的基础。但要注意：网站的内容都是易变的。它们的名称和内容可能在下一阶段发生改变。如果有必要，修订“内容、功能清单”，以便反映最新的信息。4.设计文档-内容和功能内容和功能需求内容清单中出现的业务名词应该组织成“数据字典”。“数据字典”是设计文档附录的一部分，完成后让每个开发人员都能看到。第3章网站内容和功能描述§3.1内容分组和命名§3.2功能需求附录B:数据字典4.4网站结构设计这一阶段的目标是如何方便用户访问网站内容。1.网站结构定义网站结构，相当于人体骨架，设计者做其它事情的基础。设计者必须考虑设计一个可扩充的、高度结构化的、易用的、相对独立的网站。精心设计的结构能使定义网站的导航系统变得更容易。在这两者的基础上设计者才可以最后设计页面布局和模板。2.装饰风格装饰风格就是网站结构的表现形式。好的装饰风格会在帮助用户使用和导航网站上起很好的作用。设计网站有三种有用的装饰风格可供参考：1）组织性装饰风格组织性装饰风格依赖于已经存在的小组、系统或组织的结构。例如，百货的网站，装饰风格应该像一个超市。产品按类型（如罐装蔬菜、乳制品等）逻辑地分类。2）功能性装饰风格功能性装饰风格与某些软件环境实现的任务相似。例如，Photoshop是一种图形软件，它有许多功能性装饰风格。3）可视性装饰风格可视性装饰风格基于多数人熟悉的常用图形元素。如音乐网站，3.网站结构的描述方法有两种方法来描述网站结构。第一种是基于文本的网站层次结构列表。先根据网站结构列表的“根”确定网站的主要部分。下一步，把每部分的组织与内容清单的条目对应起来并采用缩进格式描写。Section1Section1.1Section1.2Section2Section2.1Section2.2Section2.2.1Section2.2.2Section2.2.3Section3第二种是基于图形的网站结构化蓝图。它是网站结构的可视化表示。它是一种显示网站中的元素如何分组和联系的图表。4.定义导航用户如何访问网站？他们怎样从一个地方到另一个地方？怎样防止他们在网页中迷失方向？定义网站的导航系统就是解决这些问题。对于一个网站一般要为其设计全局导航系统和局部导航系统两种。网站的结构清单是设计全局导航系统的基础。全局导航系统应出现在网站的每页上，使用户能很方便地在不同部分之间跳转。局部导航系统出现在网站的某组上，使用户很方便地在组内跳转。局部导航可以有不同的形式。可以是主题的列表；可以是选项菜单的形式；或者可以是一些相关条目的列表。5.设计文档网站结构。写一个关于网站结构背景概述。为全局和局部导航系统设计做文档。把结果公布给项目组每个开发人员。第4章网站结构§4.1网站结构概述§4.2网站层次结构列表描述或网站结构化蓝图描述§4.3全局和局部导航系统设计附录C:网站结构列表补充说明（可选）4.5网站的可视化设计这一阶段的目标是如何使你的网站充满魅力。1.可视化设计设计者已经完成了为什么要建网站，访问者是谁，即网站的内容，所有的内容如何组织起来，现在可以进行可视化设计了，也就是设计者终于可以设计网页了。设计者可能需要图形设计人员、艺术指导、创作指导和产品工作人员的帮助。需要考虑的包括:1）布局网格图布局网格是描述网页的模板。2）设计框架和页面模型设计框架和页面模型用来建立对网站的直观感受。框架是布局网格图的具体实现。设计页面模型涉及各个框架的页面表现形式。2.设计文档可视化设计。把布局网格做在文档中，包括所作的图表。编辑设计框架，把充实页面的图片也加入文档中。第5章详细设计说明书可视化设计§5.1可视化设计：布局网格§5.2设计框架和页面模型附D网页设计代码4.6实施网站建设工程的步骤总结实施一项网站建设工程的一般步骤：1.定义网站的目标(回答为什么建网站?)结束标志:可行性报告(包含目标定义,有客户签名的目标列表)。2.概要设计(回答为谁而建网站?)结束标志:需求说明书(包含访问者定义,访问者情节预测,竞争性分析表)3.网站的内容和功能设计(回答网站有什么?)结束标志:信息字典(包含内容的分组和命名,功能描述)4.网站的结构设计(回答信息应如何组织,如何检索?)结束标志:结构设计说明书(包含基于文本的网站层次结构列表,基于图形的网站结构化蓝图,全局导航系统和局部导航系统)5.网站的可视化设计(回答怎样使网站充满魅力?)结束标志:详细设计说明书(包含布局网格图,框架设计与页面模型,网页设计代码)练习实施一项网站建设工程的一般步骤是什么？