以图形方式表示页面流的最佳方式是什么，适用于面向操作的Web应用程序？

Question

What is the best way to graphically represent page flow, as applicable to an action oriented web application?

What model do you use to represent page flows (page flow diagrams) encompassing pages (views), user actions on those views (events) and processes?

These diagrams should act as a starting point for understanding between a business domain expert (say someone specifying an e-commerce web site), a technical analyst (someone responsible for designing the web application) and a web developer (someone responsible for implementing the solution)

I am not looking for a software solution to help me draw those diagrams, nor am I looking for a web flow framework that will let me implement these page flows in software.

I am, however looking for a good scheme for drawing out a page flow using pencil and paper

For example, a good answer could be as follows

• Rectangle with label in CAPS represents page
• Arrow with label in lowercase represents user action
• Diamond with label in CAPS represents a process
• Entry points always from the left (arrows come into a page from the left)
• Exit points always from the right (arrows go out of a page to the right)

If there is an accepted standard, or if this problem space is actually a specific case of a larger problem space for which there exists a standard, please highlight this.

In the spirit of Stack Overflow, one scheme per answer please, and votes rather than duplicates

Answer 1

我一直很喜欢Jesse James Garret的视觉语言。

Answer 2

Check out nAML (.NET Application Modeling Language). It includes a Visio stencil and is very interesting amd expressive.

http://code.msdn.microsoft.com/naml

Answer 3

I have found that modifying the state chart diagram is most useful for this purpose. I represent a visual resource (html or jsp page) as a state and the transitions are the actions that the user can perform on that page.

I then introduce another symbol for the actions between the visual pages.

State diagrams are easy for the non-technical person to follow and expressive enough to capture some complex interactions.

Answer 4

看看yuml.me，因为这很容易使用，并生成漂亮的“邋”“图表