写点什么

画好 Web 流程图

  • 2008-10-13
  • 本文字数:742 字

    阅读完需:约 2 分钟

画流程图是程序设计的基本功,但又似乎属于各有各的高招的一个领域。那么到底用什么标准评价流程图的好坏呢?从事用户体验设计咨询的丁宇在博客上分享了他“画 Web 流程图的一点心得” 。除了给出他自己的一套形状,还逐一说明注意事项,很有爱心:

作为整张流程图的头和尾,必须标清楚到底具体指哪个页面,以免日后出现歧义。
[……]
所有从形状出来的线条,都具有和此形状边框一样的颜色。这样的做法不仅看起来漂亮,在复杂的流程图中还能轻易地标明各形状的关系。
[……]
几乎总是让‘是’的分支往下流动,让‘否’的分支向右流动。因为流程图一般都是从上向下、从左到右绘制的,遵循上述规则一方面可以让绘制者不用为选择方向操心,另一方面也方便了读者阅读。
[……]
并非所有后台动作都绘入流程图中(否则流程图就会变成庞然大物了),只有需要特别强调的后台动作(和用户体验直接相关的)才使用此形状。
[……]
可以利用跳转点来分割篇幅巨大的流程图
[……]
分割篇幅巨大的流程图,更好的办法是用子流程。
[……]

他还特别强调: > 在团队合作中,图例是必须的,否则没人知道你画出来的东西到底是什么。

除了确保别人能看懂你的流程图,评价流程图的好坏,还要谨记“流程图是要指导 UI 设计的,是 UI 设计的参照物”,必须“覆盖了各种可能的情况和细节”,“考虑到系统的设计和承受能力”。

支付宝交互设计师 Joycce 总结得更加扼要:

  1. 简单易懂
  2. 表达正确全面,有重点、有细节
  3. 形像生动

丁宇也发起了一个征集活动,邀请大家一起分享自己的心得,各位达人请不吝赐教,InfoQ 中文站将继续跟踪报道。

如果想了解流程图的一般用法,Arky Tan 翻译了Jesse James Garrett 撰写的“描述信息结构和交互设计的图示词汇表 ”。顺便一提,流程图这东西是有标准的,在发明自己的一套图形之前,不妨先翻一下 ISO 5807:1985

2008-10-13 22:268936
用户头像

发布了 225 篇内容, 共 74.2 次阅读, 收获喜欢 53 次。

关注

评论

发布
暂无评论
发现更多内容

长安链源码分析之交易过程分析(2)

JDK中自带的JVM分析工具

Java 架构

HashMap源码分析(七)

知识浅谈

hashmap 10月月更

Opencv 图像处理:图像通道、直方图与色彩空间

timerring

OpenCV 图像处理 10月月更

从零到一搭建一个属于自己的博客系统(弎)

木偶

MySQL django 前端 10月月更

【译】深究 Go CPU profiler

非晓为骁

Go 翻译 pprof

房产|1-9月份全国房地产开发投资下降8.0%

前嗅大数据

数据 房地产业 房地产

应用数据库常见的数据切分方式

乌龟哥哥

数据库 10月月更

探索证券行业智能化升级核心引擎:成就客户价值

易观分析

证券

力扣刷题训练(二)

lovevivi

数据结构 C语言 10月月更

【web 开发基础】PHP 快速入门(10)-PHP 其他运算符详解

迷彩

web开发 10月月更 PHP基础 三元运算符

CLIP-as-service 0.8.0 版本发布:新增支持大型 ONNX 模型文件

Jina AI

开源 工程师 开发工具

Redis数据结构(一)-Redis的数据存储及String类型的实现

京东科技开发者

二进制 哈希算法 数据存储 结构化 Redis 数据结构

Jenkins pipeline Git 检出的 Step

HoneyMoose

用户故事地图——让迭代计划灵动起来

Bruce Talk

Scrum User Story Product Owner User Story Mapping

CLIP-as-service 0.8.0 版本发布:新增支持大型 ONNX 模型文件

Jina AI

开源 工程师 开发工具 开源软件

一行命令安装docker和docker-compose(CentOS7)

程序员欣宸

Docker Docker-compose 10月月更

房产|9月全国70城房价出炉!快来看看你的城市房价变化

前嗅大数据

数据 房地产 房产

迷宫最短路径问题

lovevivi

数据结构 C语言 10月月更

Opencv 图像处理:图像基础操作与灰度转化

timerring

OpenCV 计算机视觉 10月月更

长安链源码分析之交易过程分析(3)

【一Go到底】第二十五天---内置函数和Go错误机制

指剑

Go golang 10月月更

“程”风破浪的开发者|python GUI开发记录

衝鋒壹号

学习方法 个人成长 “程”风破浪的开发者

fastposter v2.9.3 简单易用的海报生成器

物有本末

海报生成器 海报编辑器 海报生成

高效IO之零拷贝技术

乌龟哥哥

10月月更

在线问题反馈模块实战(十九):实现数据批量导出到excel文件中功能

bug菌

springboot 项目实战 10月月更

1024 分享|如何打造围绕开源理念的团队工程师文化

Jina AI

人工智能 开源 1024 1024我在现场

长安链源码分析之交易过程分析(1)

数据湖(十):Hive与Iceberg整合

Lansonli

数据湖 10月月更

Jenkins pipeline 如何到子文件中去执行命令

HoneyMoose

JNI中实现类似C++回调方法-结构体操作

中国好公民st

c++ jni 10月月更

画好Web流程图_最佳实践_郭晓刚_InfoQ精选文章