AICon 上海站|日程100%上线,解锁Al未来! 了解详情
写点什么

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

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

关注

评论

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

WeTest自助压测1折起,最低1分钱参与Q币抽奖

WeTest

Zookeeper配置详解

Regan Yue

zookeeper 配置 10月月更

重学 Java 之 5种字符流读取方法

进击的王小二

java基础 字符流 java

阿里开源的这个库,让 Excel 导出不再复杂(既要能写,还要写的好看)

看山

Java EasyExcel 10月月更

创建线程池学习笔记

风翱

线程池 10月月更

架构训练营 模块五

Leach Sun

模块五作业

potti

架构实战营

NFT商业落地中的思考:区块链

CECBC

绝绝子!美团大牛吐血整理总结“消息队列核心知识笔记”是真的吊

进击的王小二

分布式 MQ 消息队列 java

反序列化漏洞复现总结

网络安全学海

黑客 网络安全 信息安全 WEB安全 安全漏洞

山东移动用明道云赋能一线,打通业务创新最后一公里

明道云

从Android系统架构学习设计模式

轻口味

android 架构设计原则 10月月更

极客时间【架构实战营】第二期 模块五作业

Geek_91606e

架构实战营

5G通话占道4G,你的5G套餐性价比真的高吗?

脑极体

服务业CRM软件能为你提供哪些服务?

低代码小观

企业管理 CRM 管理系统 管理工具 管理软件

自定义View:几何变换实质与技巧

Changing Lin

10月月更

架构实战营 设计微博系统中”微博评论“的高性能高可用计算架构

💤 ZZzz💤

架构实战营

面对疾风吧,如何搭建高协同的精准告警体系?

阿里巴巴云原生

阿里云 产品 云原生 Arms 告警运维中心 告警体系

模块五-微博评论的高性能高可用计算架构

娜酱

「架构实战营」

架构实战营第五次作业

Geek_d18264

架构实战营

一口气面试7家大厂,已拿下4家offer,其实大厂没有你想象中难!

程序员小呆

Java 程序员 面试 架构师 资料

实时监控:基于流计算 Oceanus ( Flink ) 实现系统和应用级实时监控

腾讯云大数据

流计算 Oceanus

如何说孩子才肯听,怎么听孩子才肯说(上)

石云升

读书笔记 育儿 10月月更

构建全屏 Web 应用程序

devpoint

JavaScript html5 大前端 10月月更

模块5作业

4anonymous

微博评论高性能高可用架构设计

Geek_db27b5

用区块链技术打造AEO高信用国际贸易生态圈的创新实践

CECBC

“区块链+物联网”融合 推动产业创新发展

CECBC

Webrtc Rtp/rtcp (2)

webrtc developer

WebRTC rtp/rtcp

声网教育aPaaS 产品灵动课堂:「低代码」开发,15分钟极速上线

声网

人工智能 大数据 云服务

健身房CRM软件帮你寻找更多客户

低代码小观

企业管理 管理系统 健身房 管理软件 行业

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