网站流交互映射图

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的建议，然而，几年前我尝试过，利益相关者陷入了最基本的概念，比如国家。

非技术涉众更容易理解的是UML网活动图(它只是网和流程图的简单混搭)。通过添加“泳道”，活动图可以对多个页面和流程进行建模。虽然活动图听起来很复杂，但它很容易理解(对于简单的线性场景)。

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

Answer 3

从以下几点开始如何？

​

​

该符号基于Petri网图形或图标，并且“连接”每个图标(正方形和圆圈)的规则遵循创建Petri网的规则。标记为T3的图标是我基于表示多个Petri网元素的高级表示法(我认为是Nutt或Noe，或者两者兼而有之，Macro E-nets)“想出来的”--我使用了PowerPoint中找到的线条属性。