写点什么

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

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

关注

评论

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

软件测试/测试开发全日制|Pytest结合CSV实现测试的数据驱动

霍格沃兹测试开发学社

软件测试/测试开发/全日制 |实践容器化部署与微服务治理

测吧(北京)科技有限公司

测试

数据库内核那些事|一文Get PolarDB IMCI如何对半结构化数据进行高效分析

阿里云瑶池数据库

数据库 阿里云 数据结构 云原生

探索web技术与低代码开发的融合应用

EquatorCoco

云计算 软件开发 低代码 web3

Dubbo 3.3.0-beta 版本正式发布

阿里巴巴云原生

阿里云 云原生 dubbo

API设计:从基础到优秀实践

高端章鱼哥

API

涛思数据获评北京市“专精特新”中小企业

TDengine

涛思数据 tdengine 时序数据库

体育直播系统源码提供哪些安全购买保障策略

软件开发-梦幻运营部

pdd商品详情数据接口

tbapi

拼多多API接口 拼多多商品详情数据接口 pdd详情数据接口 拼多多商品数据采集

数据库与低代码:加速开发,提升效率的完美结合

不在线第一只蜗牛

MySQL 数据库 sql 低代码

实时云渲染赋能2023湾区文采会元宇宙虚拟展厅

3DCAT实时渲染

云VR 元宇宙虚拟展厅 线上展厅

tb商品详情数据抓取

tbapi

淘宝商品详情数据接口 淘宝API接口 天猫商品详情数据接口 天猫API接口 tb商品详情数据接口

2023 IoTDB Summit:天谋科技产品负责人赵馨逸《利其器:如何用 IoTDB 可视化控制台实现高效管理与运维》

Apache IoTDB

软件测试/测试开发/全日制|基于Vue.js构建现代化前端应用

测吧(北京)科技有限公司

测试

探索AI技术的奥秘:揭秘人工智能的核心原理

快乐非自愿限量之名

人工智能 机器学习 AI技术

智能导向的用户钱包画像分析:揭秘 NFT 市场的秘密

Footprint Analytics

NFT 加密钱包

市场动态:在比特币 ETF 投机和摄氏度网络向挖矿转型的背景下,2024 年将保持稳定开局

区块链软件开发推广运营

dapp开发 区块链开发 链游开发 NFT开发 公链开发

软件测试/测试开发/全日制/测试管理丨Vue 访问 api 组件-axios

测试人

软件测试

程序员一定要知道的!屎山代码风格指南(避免被优化&&避免被接盘)

快乐非自愿限量之名

程序员 代码审查 代码

便捷好用的iOS文件管理App

雪奈椰子

软件测试/测试开发/全日制/测试管理丨Vue 页面布局组件-Vuetify

测试人

软件测试

化作乾坤万里春:openGauss跨越生态拐点之后,改变了什么?

脑极体

数据库 自主化

文心一言 VS 讯飞星火 VS chatgpt (176)-- 算法导论13.3 5题

福大大架构师每日一题

福大大架构师每日一题

货拉拉智能监控实践:如何解决多云架构下的故障应急问题?

TakinTalks稳定性社区

期待!《数字化运维路线图》震撼发布(第一部分)

博睿数据

软件测试/测试开发/全日制/测试管理丨Vue 页面布局组件-Semantic

测试人

软件测试

TDengine 签约积成电子

TDengine

tdengine 时序数据库

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