网站设计：Web流程图的绘画指南

行为系统行为是指系统完成的一系列后台行为操作。例如，我们想要记录用户登录失败时的数据，就可以在流程图中以 “收集错误日志”的系统行为来表示。作为设计师或产品经理，我们虽然不需要将每种后台操作都付之于图，但我们还是有必要把那些和用户体验相关，或那些对我们重要的操作放进流程图，此外还要写入规范或文档里，再次清晰地声明，确保每个人都能领略其义。元素总结3.范例登录下图为一个简易登录流程图，用来描述用户登录时系统如何反应：安全检查以下流程图展示如何使用系统行为和子流程这样的元素。它来自于真实的项目，只是由于版权问题已被我稍稍修改。其它真实范例如你所见，不管业务逻辑多么复杂，流程图都能用来描述系统是如何工作的。4.建议和提示基于调查结果，指引线框图用户和他们的特点是指导绘制流程图的首要因素。用户调查能够发现：用户过去的体验是什么?用户的期望是什么?使用场景和环境是什么?这些问题在流程图的设计中起关键作用。同样，流程图对线框图的制作也有指导作用。多数时候，一旦流程图完工，线框图的内容甚至布局已经基本确定了。当然了，这也正是流程图的目的所在：连接线框图。Note：在流程图之前我们会有如用例这样的其它交付物。上图并没有涉及到这些内容，因为这并非本页的重点。使你的流程图完整制作流程图最难的是，它必须囊括所有可能的情况，在我看来，这一点在应对复杂逻辑的商业需求时是很有挑战性的。你将会遇到很多类似 “要是如何便会怎样”的问题，并且有时候直到工程师告诉你，你才意识到自己之前欠缺考虑!所以，制作完整的流程图不仅需要你了解用户，还需要你懂业务逻辑，甚至要熟悉幕后的系统运作机制!最好的办法是和产品经理、工程师还有其他和商业需求有关的同事在工作中紧密协作。我见过不少交互设计师闷头一人工作，然后在产品会议中遇到猛烈的挑战。别再那样了!相反，和项目相关的人合作，一起制作流程图(以及其它交付物)，从不同角度排除不确定性，使它更完整全面(这样也没人会再挑战你了，因为他们每个人也是参与制作的一份子)。别忘记元数据从协作和文档管理的角度来说，你至少得给流程图起个名字，写下作者、版本和时间。除此之外，即便你的流程图使用了《视觉词汇表》，你的同事或客户仍有可能不明白这些花俏的元素，所以，请记得加上图例。5.工具和模版众多工具中，我推荐OmniGaffle和Microsoft Visio。OmniGaffle对Mac用户们来说，OmniGraffle以前是，现在仍是首选工具。它不仅有丰富的功能，最重要的是，它的用户体验是首屈一指的。我认识的设计师很多已经换了Mac，并随之使用OmniGraffle。Microsoft VisioWindows用户可以考虑用Visio，它有一些内建的模版，也许能大大减轻你的工作。模版Allen Le基于我前一篇文章发布了一系列Visio的模版，很漂亮，对此我不胜感激。你可以在这里找到：http://www.allenle.com/archives/1530.html。OmniGraffle的粉丝可以在http://graffl etopia.com/stencils/905 下载到我制作的模版。收尾编写此文章花了我大概两周时间，并且用英文写更是增加了难度，因为英语并非我的母语。这是我第一次用非母语撰写教程，但我十分乐在其中。对我来说，写作是总结过去、保持创造的一种很好的方式，如果有人可以从中受益，我会十分开心。任何问题或建议，请在这里给我留言：http://dingyu.me/blog/the-definitive-guideto-web-flowchartsVia：The definitive guide to Web flowchartsPPT在莫名其妙被墙的 slideshare 上来源：雷锋网?http://www.leiphone.com/flowcharts-web-design.html