写点什么

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

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

关注

评论

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

物联网开源生态进入深水区:开发者需在技术与商业的夹缝中寻找破局之道

新消费日报

从局部性原理到一致性模型:深入剖析缓存设计的核心权衡

poemyang

缓存 高并发架构

2026品牌推广新思维:打造“用户痴迷”型品牌的5个策略

Wolink

出海企业 海外营销推广 品牌出海 品牌推广

2026年企业海外营销渠道指南:如何分配预算实现整合增长

Wolink

跨境电商 出海 海外社媒营销 海外营销推广 海外红人营销

实践指南 | 如何科学规划你的兼容性测试策略?

优测云服务平台

兼容性测试

质效飞跃,优测金融数智质效解决方案全新升级!

优测云服务平台

数据可视化智慧金融 优测

疯了!双11,百度文心快码帮我省钱又赚钱?

Comate编码助手

智能编程 AI 编程 文心快码 文心快码Zulu

从“识图”到“购得”:图片搜索商品如何重构消费与供应链逻辑?

Noah

区块链/Web3系统开发核心技术栈

北京木奇移动技术有限公司

区块链开发 软件外包公司 web3开发

服装门店如何选购RFID收银系统提升结算效率?

斯科信息

AI算法RFID门禁 RFID收银系统 CK-DP11A CK-T2B

2026年海外红人营销平台选择:TikTok 还是Instagram?

Wolink

跨境电商 海外社媒营销 海外营销推广 品牌出海 海外红人营销

聚焦数据驱动型预测,构建更科学的财务规划计划

智达方通

数据驱动 全面预算管理 财务管理

“技术策源+生态聚合”2026世亚智博会·北京站!正式官宣

AIOTE智博会

智博会 人工智能展 世亚智博会 北京智博会

全同态密码守护AI时代的个人数据隐私

密流智能

隐私保护 全同态加密 密文推理

EMR StarRocks Stella内核正式发布,登顶TPC榜单全球第一

阿里云大数据AI技术

阿里云 StarRocks EMR 湖仓

新一代智能化家用电器行业MES系统解决方案

万界星空科技

mes 智能化转型 制造业转型 家用电器行业 家用电器mes

CAD图纸如何编辑?超简单,快来试试!

在路上

cad CAD看图王

2026年海外营销全景图:主流渠道与新兴趋势深度解析

Wolink

跨境电商 海外社媒营销 海外营销推广 品牌出海 海外红人营销

数字孪生项目外包开发

北京木奇移动技术有限公司

数字孪生 软件外包公司 webgl开发

企业海外营销战略蓝图:构建从市场进入到提升品牌知名度的完整路径

Wolink

跨境电商 海外社媒营销 海外营销推广 品牌出海 海外红人营销

海外推广终极指南:从0到1的完整策略与执行路径

Wolink

跨境贸易 海外社媒营销 海外营销推广 海外红人营销 品牌推广

CAD中如何设置不同的字体样式?

在路上

cad CAD看图王

实施路径:CIO引入“内置低代码”系统的四步选型法

星云低代码中间件

超融合部署与运维:五大关键技术盘点

智驱前线

5 分钟搞定绩效管理

俞凡

数字孪生项目开发流程

北京木奇移动技术有限公司

软件外包公司 数字孪生开发 webgl开发

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