当前位置:主页 > 潍坊网站设计 >

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

发表日期:2012-08-31 14:46文章编辑:未知浏览次数: 标签:潍坊seo,潍坊网站建设,潍坊网站制作,潍坊做网站   

 

  编者按:本文作者为设计师Felix Ding,丁宇。在作者设计生涯开始的早期,就开始接触流程图。一个好的流程图,可以用来理解需求、解析复杂的业务流程、同时也有助于交互设计。

  为了使流程图的价值最大化,文中着重分析了开始和结束标记、界面、对话框、决策点、条件分支、子流程、跳转点、描述、系统行为等视觉词汇。

  前言

  在我设计生涯的早期,我就开始绘制流程图了。刚开始的时候,我所绘制的流程图大都比较简单,图中的节点不多,逻辑也是直截了当的。因此,一直到我加入支付宝-中国最大的线上支付平台,我才意识到复杂的流程图的用处巨大。在支付宝,业务需求和流程之复杂、变化之迅速,使得理解它们本身已经是一件非常有挑战性的工作。正是此时,我开始依靠流程图来理解需求,并使用这一方法来做交互设计。渐渐地,流程图显现它的魅力:产品经理喜欢它,连工程师也用它来指导开发。

  2008年秋天,我将自己的经验总结为一篇题为《画Web流程图的一点心得》的文章,发表在自己的blog上。该文立即引起了广泛的注意。各种推荐、转载、讨论和跟进的文章在线上线下都频频出现,甚至有人按照我在文章中提到的方法制作了一套流程图模板。时至今日,这篇发表于四年前的文章仍然给我的个人主页带来不少流量。

  然而,上述文章有一个比较严重的问题,使得其内容带有误导性:它并没有使用用于“描述信息架构和交互设计”的《视觉词汇表》。坦白讲,写作的时候我并没有注意到有这样一份广为人知的词汇表存在,而是创建了我自己的词汇,并将其介绍给大众。因此,文章的部分内容没有遵循惯例,从DRY(Don’t Repeat Yourself,不要重复自己)的角度讲这并不是很合适。该文发表一年后,我的确在另一篇文章中指出了这一问题,但遗憾地是这次没能像上次一样引起广泛的注意。

  此外,距离该文章发表已经有几年过去了,我又积累了不少新的经验和想法,希望分享给大家,特别是英文读者们。

  因此现在如你所见,我完成了英文版、带有最新内容的《画Web流程图的一点心得》,并且提供了自制的配套模版下载。

  内容概要

  本文涵盖了你应该了解的关于Web流程图的最重要的几条准则:

  基本思路

  视觉词汇表

  范例

  建议和提示

  工具和模版

  1.基本思路

  什么是流程图?

  流程图,顾名思义,是用来描述某个系统在不同的情况下,如何应对用户的状态、决定和行为的图。

  流程图能给你什么样的帮助?

  通常,对于任何希望创建流程的人来说,无论创建的是什么用的流程,流程图都是很有用的。比如工厂可以用流程图来告知其员工,当有人受伤后正确的急救流程是什么。当然除此以外,在本文中,我只会举关于Web设计流程图的例子。

  对交互设计师和产品经理来说,流程图是一个核心的工具。它可以帮你:

  设计你产品的交互流程

  确保的你的产品在任何时候都是友好的(甚至包括你原来根本未曾考虑过的故障发生时)

  帮助你整合零散的线框图

  帮助你与不同背景的同事进行沟通:比如引导工程师开发

  2.视觉词汇

  接下来的几页中,我将介绍视觉词汇和它们的使用方式:

  起点和终点

  界面

  对话框

  决策点

  条件分支

  子流程

  跳转点

  描述

  系统行为

  起点和终点

  

 

  起点和终点是用来标识交互的开端和结束的地方,任何流程图都必须有且只有一个起点和至少一个终点。

  界面

  

 

  界面元素被用来表现各种用户界面,比如窗体或网页。界面的编号可以用来做识别符,在协作过程中会非常有用。比如在开电话会议时,你可以用 “节点N”来表达你想指明的某个界面元素。

如没特殊注明,文章均为创想网络原创,转载请注明来自我站www.wfzwz.com!
返回列表
热门推荐文章

如何应对网站排名下降的问题

潍坊seo网站优化万变不离其宗

潍坊做网站seo注意的10条事项

2013年电子商务的SEO改怎么做

潍坊网站设计常犯的二十个错误

潍坊哪里有高质量的网站建设

网站设计分析:根据用户的固有习惯来设计

Div+css网站设计布局方式对SEO的影响有哪些

2013年网站设计趋势的预测

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

如何做个真正的设计师

潍坊网站设计-瀑布流布局浅析

选择决定距离 SEO服务赢在起点

SEOer必修课:数据统计与分析

关于外链的一些知识

JavaScript解析:让搜索引擎看到更真实的网页

更新是保证网站seo的前提

用户体验分析:从排队等待谈进度条设计