写点什么

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

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

关注

评论

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

企业一定要部署堡垒机吗?理由是什么?

行云管家

网络安全 堡垒机

【HarmonyOS相机开发系列】折叠屏镜头切换优秀实践

最新动态

FinClip驱动中国应用全球出海的降本增效实践

xuyinyin

云速搭 AI 助理发布:对话式生成可部署的阿里云架构图

阿里巴巴云原生

阿里云 AI 云原生

大模型工具的 “京东答案”

京东科技开发者

为鸿蒙应用“赋智”,灵云、译图智讯OCR等人工智能类SDK适配鸿蒙5

新消费日报

RL 和 Memory 驱动的 Personal Agent,实测 Macaron AI

阿里巴巴云原生

阿里云 AI 云原生

RFID 标签在封闭空间漏扫?系统化应对策略解析

斯科信息

RFID标签

1688商品详情API:从数据获取到商业价值落地的全攻略

Noah

MyEMS:引领能源管理升级的全方位解决方案

开源能源管理系统

开源 能源管理系统

MyEMS:赋能能源精细化管理的数字化利器

开源能源管理系统

开源 开源能源管理系统

中国中铁回应尖扎黄河特大桥事故:舆情管理的危机与修复

沃观Wovision

舆情监测 沃观Wovision 舆情监测系统 中铁回应尖扎黄河特大桥

让浏览器自己工作:AI自动化技术落地全攻略【AI助力全员提效方向】

京东科技开发者

虚引用GC耗时分析优化(由 1.2 降低至 0.1 秒)

京东科技开发者

行业速览:中国新能源汽车市场格局与关键趋势

DevOps和数字孪生

【客户喜报】消费者追捧,勃肯鞋亚洲收入激增24%

第七在线

就在明天!8月26日丨EasyModel新品发布会等你来!

袋鼠云数栈

数字孪生 数字孪生技术 易知微 空间智能 EasyModel发布会

全面开放下载!Fabarta个人专属智能体免邀请码体验,功能重磅更新

Fabarta

人工智能 智能体

山海L7 PLUS将领衔捷途汽车登陆成都车展,掀起“旅行小房车”新风潮

科技热闻

FinClip组件化方案实现App前端轻量化重构

xuyinyin

智绘蓝图,共赢未来|Honeywell品牌发布会暨首场招商财富会圆满收官!

新消费日报

Lazada 如何用实时计算 Flink + Hologres 构建实时商品选品平台

Apache Flink

大数据 flink 实时计算

软件工程 + AI 不是 “硬凑”,3 步走通落地关键环节

行云创新

平台工程 AI 赋能软件工程 AI赋能研发

跑冷链,汕德卡G5S冷藏车自有“享”法!

科技热闻

速来!CodeBuddy IDE国内版公测开启!🎉

CodeBuddy

G端业务需求的高效管理——禅道实践中的“破局”与“避坑”

禅道项目管理

软件 软件需求管理 禅道项目管理 软件需求设计 需求管理软件

2025物联网与RFID产业:万亿赛道的技术破局与市场重构

斯科信息

RFID技术 RFID产业

MyEMS:让能源管理从 “模糊粗放” 走向 “清晰可控”

开源能源管理系统

开源 能源管理系统

Dify 性能瓶颈?Higress AI 网关为它注入「高可用之魂」!

阿里巴巴云原生

阿里云 云原生 dify

ADManager Plus:突破 ADUC 与 PowerShell 局限的 AD域管理工具

运维有小邓

AD域 AD域管理 AD域组管理

为鸿蒙应用“赋智”,灵云、译图智讯OCR等人工智能类SDK适配鸿蒙5

科技热闻

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