写点什么

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

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

关注

评论

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

Linux awk命令

芯动大师

深入浅出了解华为云API网关的Gzip功能

YG科技

华为云全新上线Serverless应用中心,支持一键构建文生图应用

YG科技

提示找不到某些组件?

矩视智能

深度学习

一文读懂 Fabarta ArcGraph 图数据库丨技术解读

Fabarta

人工智能 AI 图数据库 大模型 向量数据库

向量数据库:释放数据潜能,重塑信息世界

熬夜磕代码、

向量数据库

有什么好用的IP代理吗?要求速度快,使用方便

Geek_ccdd7f

MySQL 数据库表格创建、数据插入及获取插入的 ID:Python 教程

小万哥

Python 程序员 软件 后端 开发

如何使用 NFTScan NFT API 在 zkSync 网络上开发 Web3 应用

NFT Research

NFT\ NFTScan nft工具

LeetCode题解:171. Excel 表列序号,哈希表,TypeScript,详细注释

Lee Chen

JavaScript LeetCode

PyTorch从精通到入门06:基于LSTM实现文本分类

王玉川

神经网络 深度学习 RNN 文本分类 LSTM

智能低代码洪流涌动程序员节,华为云Astro触发1024的乘法效应!

YG科技

亚马逊云科技海外服务器初体验

三掌柜

亚马逊云科技

强大好用的shell:shell的工作原理

小齐写代码

海外IP代理使用三年的经验之谈

Geek_ccdd7f

亚马逊云EC2哪些端口默认不能用

孤虹

亚马逊云 EC2 Amazon EC2 云服务器

20行JS代码实现屏幕录制

南城FE

JavaScript 前端 浏览器 屏幕录制

C++高并发异步定时器的实现

1412

开源 定时器 异步 workflow C++

质量诊所案例分享之Junior QA常见问题诊断

QE_LAB

质量 质量保障

2024杭州国际智慧城市与安防产品展览会

AIOTE智博会

智慧城市展 安防展

阿里Java一面,难度适中!(下篇)

王磊

Java 面试

凡泰极客亮相香港金融科技周,投身大湾区数字化建设

FinClip

数字政府!3DCAT实时云渲染助推上海湾区数字孪生平台

3DCAT实时渲染

实时渲染 实时云渲染

VR虚拟现实应用——原型制作

3DCAT实时渲染

虚拟现实 实时云渲染 VR虚拟现实

划重点!rola-ip跑路事件被同行商业互黑?丑态百出

Geek_ccdd7f

PyTorch从精通到入门05:基于ResNet迁移学习和微调,实现图像分类

王玉川

神经网络 深度学习 迁移学习 图像分类 resnet

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