开工福利|免费学 2200+ 精品线上课,企业成员人人可得! 了解详情
写点什么

画好 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:268489
用户头像

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

关注

评论

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

light-rtc: 理念与实践

阿里云CloudImagine

架构 音视频 WebRTC RTC

内存分页不就够了?为什么还要分段?还有段页式?

yes

操作系统 内存管理

2020年不容错过的10本大咖之作 | 你最Pick哪一本?

博文视点Broadview

Flink 双流 Join 的3种操作示例

Apache Flink

flink 流计算

开源整套Netty源码笔记+19个案例调优+游戏项目,终于彻底顿悟了

Java架构追梦

Java 源码 架构 Netty 游戏项目

完美!华为爆出Redis宝典,原来Redis性能可压榨到极致

996小迁

redis 架构 面试 资料

干货|原来IPFS是这样存储文件的

QTech

区块链技术 IPFS 星际文件系统

主从哨兵集群终于给你说明白了

moon聊技术

数据库 redis

优化了MYSQL大量写入问题,老板奖励了1000块给我

华为云开发者联盟

MySQL sql 写入

2020年国内前端团队都做了些什么?

徐小夕

大前端 技术栈 2021

面试官:数据库自增ID用完了会怎么样?

艾小仙

数据库

曲折!目标腾讯,字节,拼多多;最后居然五面进了阿里?

Java架构之路

Java 程序员 架构 面试 编程语言

面试软件测试所需要掌握的7个技能

华为云开发者联盟

sql 面试 测试

重学JS | 数组知识点大全,必收藏!

梁龙先森

大前端 编程语言

面试腾讯,字节跳动首先要掌握的Java多线程,一次帮你全掌握

Java架构之路

Java 程序员 架构 面试 编程语言

准备去阿里以及大厂面试你都需要会些什么?我从任职阿里的朋友口中,总结出了一些答案!

Java架构之路

Java 程序员 架构 面试 编程语言

架构师训练营第六周作业

zamkai

阿里拆中台?从架构师角度解读中台

javaba韩老师

架构 中台战略 TOGAF 中台的前世今生 中台的由来

基于GaussDB(DWS)的全文检索特性,了解一下?

华为云开发者联盟

数据库 数据仓库 数据

基于 Flink+Iceberg 构建企业级实时数据湖

Apache Flink

大数据 flink 流计算

我画了 40 张图就是为了让你搞懂计算机网络层

苹果看辽宁体育

计算机网络 IP 网络层 ipv6 ipv4

敏捷与安全不可兼得吗?看完这篇文章后,我想说:未必!

华为云开发者联盟

敏捷 安全 开发

软件测试--前后端数据交互

测试人生路

软件测试

Flink SQL 实战:HBase 的结合应用

Apache Flink

flink

打造新一代企业数据驱动体系

StarRocks

数据库 大数据 数据分析 数字化转型 OLAP

软件架构设计方案实战

Andy

LeetCode题解:264. 丑数 II,三指针,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

深层互联带领自动旅游讲解耳麦进入“非入耳”时代

DT极客

AI人脸识别技术门禁系统解决方案智慧社区建设

13828808769

人脸识别 智慧城市 智慧平安小区平台开发 刷脸

Polkadot系列(四)——Polkadot茶溪岸啤(XCMP),干杯!

QTech

区块链技术 polkadot 跨链

40亿条/秒!Flink流批一体在阿里双11首次落地的背后

Apache Flink

flink 流计算

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