摘要

图表是网络应用开发团队（Web development teams）在沟通信息架构和交互设计方面最基本的工具。本文所讨论的是使用图表来描述系统时所要考虑的事宜、信息架构和用户交互设计时使用这些基本元素的要点，并且介绍这些元素的使用方法。

先决条件

图示词汇表是一套用于描绘某些事物（通常可能是一个系统、结构或过程）的符号库。本词汇表可能在信息结构和交互设计方面，在一个宏观程度上描述网站中用户体验的结构抑或过程。

本文中的描述、图表适用于以下五点主要角色：

• 项目主持人和项目经理
  通过本文所描述的工具能够对项目的范围和形态有所了解。
• 内容制作人
  以获得系统中的内容需求。
• 视觉传达和界面设计师
  使用本工具能够计算出设计工作量，并且初步了解系统的导航结构和界面设计的需求。
• 技术专家
  以了解系统在技术方面的需求
• 信息结构和交互设计师
  通过本工具能够对系统中的每个具体界面设计详细的导航和界面设计要求。
  除项目主持人以外，其他四种角色的人员在进行自己的工作中多需要获得大量的详细信息，但问题在于每种角色所需要了解的信息都各不相同，而且差异很大。并且各个角色所需要的信息的数量与该角色的需求并不成正比。因此对于每个对象确实有效的功用是限定本图表的详细程度。从而能够使得采用本方法所描述的系统结构能够成功项目开发中每个角色所涉及的更详细的描述的基石。

此外，在信息架构和交互设计中对于本图示词汇表还有其他几个重要的要求，包括：

• 易于书写
  图表要足够的简单以便于用户能够快速手绘草图，同时每个图表元素之间需要有明确的区别，这样即便制图破损污染了也不会影响图表被清晰识别。
• 工具无关性
  图示词汇表需要设计成为不需要特殊的软件工具来绘制图表。而虽然使用图示词汇表不需要用户使用特殊的软件工具但需要能够在各种用户的常用软件中能够方便绘制。
• 精练而系统完整
  由于使用本方法的每位用户未必都很深入了解本方法（甚至未必有很大的兴趣），因此本图示词汇表应当不要求客户需要那样专业的知识和兴趣。所以整套元素必须尽可能的精练，严格地将概念和符号一一对应起来，以使图示词汇表能够快速地被用户学会和使用。无论所要描述的系统如何负责，每个表达符号作为基本元素都必须具有自己简单明确的含义。

设计概念

信息结构和交互设计好比是硬币的两面（在本文中所定义的条款请参见《用户体验的原理（The Elements of User Experience）》） 。目前大多数网站和基于Web的应用系统都会涉及这两方面，而对任何一面来说，流程图表的目标是显然和另一方面所不同的。在这两方面，流程图表都从宏观结构上以一个适当的详细程度，让团队成员能够了解项目的大致描述。而系统构架师的职责就是决定流程图表 所说明项目目的适当详细程度。而详细到页面的内容，或微观结构将在以后的开发过程的文档中体现出来。

在描述信息结构时，图表应当着重于项目概念的结构和内容的组织。值得主意的是项目概念的结构不同于导航性的结构，设计信息结构的流程图表的目的不是为了说明详细的导航性结构，因而最好 使用其他相关的文档来描述导航性结构的详细信息。

在描述交互设计时，需要注重于描述用户在系统定义好的任务和任务的每个过程中的行动流程，因此导航条、界面元素等详细信息将不会出现在流程图表中——如果您发现自己在绘制按钮、文字域等元素的时候，可能您已经涉足过分细节的内容了。

因此本图示词汇表同时包含信息构架和交互设计的简单的概念模型为基础，用来描述：

• 系统提供给用户的可行路径；
• 用户在所有路径中的行为；
• 用户行为在系统产生的结果；

本元素: 页面, 文件和相关文件组

网络中用户交互的最基本单元是页面，因此我们采用一个矩形符号来表示页面。值得注意的是，在此我们所提到的页面是一个表达单元，而不仅是网络交互过程中的一个 实际元素。因此流程图中的一个页面符号可能代表多个HTML文件（比如在一个采用帧的页面中集合了多个HTML文件）或多段程序代码文件（比如在服务器端调用的嵌入文件或数据库存储执行过程等）。

除页面之外，还有不具备网站导航属性的文件。通常文件都是给用户用于浏览器以外的操作（比如声音和图象文件、类似与PDF的独立格式的文档或可执行文件等）。对于文件，我们采用一个卷角的文档图标来表示。

图1a： [左侧] “页面”和“文件”
图1b: [右侧] “页面组”和“文件组”

[1] [2] [3] [4] [5] [6] [7] [8] 下一页