写点什么

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

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

关注

评论

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

JAVA面试题及答案(200问)

Geek_Yin

程序员 面试 java面试 Java面试题 Java面试八股文

crossover如何永久免费使用?crossover24密钥激活码分享,crossover软件怎么样

阿拉灯神丁

crossover mac 破解版 虚拟机软件 Mac电脑软件 苹果电脑游戏推荐 CrossOver 24

IDM 下载器使用教程,idm破解版永久激活码,idm中文汉化补丁工具

阿拉灯神丁

加速器 IDM idm下载

亚马逊云科技 | Amazon Nova:智能技术新势力

伊克罗德信息科技

大模型安全 | 第九期「创造未来,安全同行」度安讲技术沙龙成功举办

百度安全

知乎,什么时候能“上桌”?

趣解商业

互联网 软件 知乎

昨天刚面完字节——面试经验和总结(已拿offer)

Geek_Yin

程序员 java面试 字节 Java面试题 Java面试八股文

阿里P9架构师终于把毕生心血而成的分布式高可用算法笔记开源了

程序员高级码农

Java 分布式 算法 java面试 Java面试题

圣诞树的装饰挑战:非线性分析能阻止圣诞树倒塌吗?

Altair RapidMiner

设计 仿真 altair Hypermesh

智谱开源 CogAgent-9B,让 AI「看懂」屏幕;Anthropic:大多数任务无需复杂 AI 智能体

声网

Java面试突击手册,一周刷完这300道面试题,你也可以当架构师!

Summer

Java 程序员 面试 架构师 大厂

剖析 Crypto Rumble 游戏测试活动规则,如何从中获得最大化奖励?

股市老人

《计算机组成及汇编语言原理》阅读笔记:p121-p122

codists

计算机组成及汇编语言原理

Java多线程处理文件详解与代码示例

不在线第一只蜗牛

Java Python

Amazon Bedrock 实践 - 利用 Llama 3.2 模型分析全球糖尿病趋势

亚马逊云科技 (Amazon Web Services)

机器学习 -python Amazon Bedrock 生成式 AI 应用

2024过去了,留下十个科技记忆

脑极体

AI

探索HarmonyOS NEXT实战应用【元服务实战-在线答题】

申公豹

HarmonyOS

体验跃升、内部办公应用积极适配,原生鸿蒙在粤蒸蒸日上

最新动态

阿里P8架构师强推java程序员人手一套116页JVM吊打面试官专属秘籍

程序员高级码农

Java 编程 程序员 java面试 Java面试题

阿里人在Github分享的Spring Cloud全栈笔记,你想象不到有多全!

Summer

Java 程序员 面试 架构师 大厂

Docker Container 可观测性最佳实践

观测云

Docker container

大模型推理引擎国产化思考和实践

京东零售技术

芯片 大模型

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