网站流量交互的映射图

Question

我不确定应该使用什么类型的工作流程图标准来传达Web应用程序如何对非技术和技术人员起作用的流程。

因为对于我自己来说，作为一个技术人员，我希望能够知道某些组件如何与数据库交互，当涉及到我必须重新审视的那一点时。

我会将其描述为

主页

  -> sign up page
      ->sign up connects to database if successful go to thank you page.
      ->sign up connects to database if successful go back to sign up page.    
  -> contact us
  -> etc...

Answer 1

要描述用户界面（网站），我更喜欢state machines。状态机的每个状态都与您的用户界面状态相匹配，系统通过更改其状态来响应用户交互。在每个状态中，您可以通过向状态添加操作来说明系统处于该状态时会发生什么。这些操作显示了界面如何与系统交互。

Answer 2

此类图表通常以信息架构方法指定。令人惊讶的是，我知道，IA中没有广泛使用的标准。其他名称包括用户体验设计（UXD），交互设计（IxD）等。每个公司或开发工具都支持不同的类型。

以下是一个示例方法： “用于描述信息架构和交互设计的视觉词汇”：http://www.jjg.net/ia/visvocab/

我喜欢vainolo的建议，然而，几年前我尝试了这一点，利益相关者陷入了最基本的概念，比如 state 。

非技术性利益相关者更容易理解的是 UML 活动图（这只是Petri网的简单混搭和流程图）。通过添加“泳道”，活动图可以模拟多个页面和过程。虽然活动图听起来很复杂，但很容易遵循（对于简单的线性场景）。

示例活动图： “UML活动图：详细描述用户界面导航”：http://www.ibm.com/developerworks/rational/library/4697.html

Answer 3

如何开始以下内容？

符号基于Petri Net图形或图标，以及＆＃34;连接＆＃34;的规则。每个图标（正方形和圆形）遵循创建Petri网的规则。标有T3的图标是我提出的＆＃34;基于表示多个Petri网元素的高级表示法（我认为是Nutt或Noe或两者都是宏电子网） - 我使用了PowerPoint中的行属性。