QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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

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

关注

评论

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

学习Typescript(一)

bo

前端 ts 7月月更

数据分析如何解决商业问题?这里有份超详细攻略

博文视点Broadview

OpenAtom OpenHarmony分论坛,今天14:00见!附大事记精彩发布

OpenHarmony开发者

OpenHarmony

web前端技术前景如何?

小谷哥

《数字经济 科技向善》大咖对谈干货来啦

易观分析

金融科技

阿里P8熬了一个月肝出这份32W字Java面试手册,在Github标星31K+

程序员啊叶

Java 编程 程序员 架构 java面试

YonBuilder赋能创新,用友第四届开发者大赛“金键盘奖”开启竞逐!

科技热闻

通过14个入门实战案例教大家快速学习Python编程语言

小院里的霍大侠

Python Python初学者 程序员‘ 编程入门 兴趣编程

深入理解MySQL主从复制原理以及集群部署过程

jiangxl

MySQL 数据库 运维 dba 签约计划第三季

在web前端培训机构应该如何学习前端

小谷哥

面试官常问:如何手撸一个“消息队列”和“延迟消息队列”?

程序员啊叶

Java 编程 程序员 架构 java面试

Redis总结:缓存雪崩、缓存击穿、缓存穿透与缓存预热、缓存降级

程序员啊叶

Java 编程 程序员 架构 java面试

什么是私域流量?

源字节1号

软件开发

程序员培训学习后好找工作吗

小谷哥

以科技传递温度,vivo亮相数字中国建设峰会

极客天地

Seata 在蚂蚁国际银行业务的落地实践

SOFAStack

开源项目 seata 项目实践 多编程语言 蚂蚁国际

尚硅谷Elasticsearch8.X视频教程

小谷哥

腾讯云联合中国工联院发布工业AI质检标准化研究成果加速制造业智能化转型

科技热闻

Snowflake vs. Databricks谁更胜一筹?2022年最新战报

雨果

数据中台 数据平台 snowflake DaaS数据即服务 Databricks

es6 class 继承的重点

掘金安东尼

JavaScript 前端 ES6 7月月更

Java——AOP案例之测量业务层接口执行效率

王小凡

Java 程序员 apo

Go语言系列:如何搭建Go语言开发环境?

小黑豆豆

后端 安装 教程 Go 语言 签约计划第三季

续上,Python爬虫在 fiddler 中调用本地 JS 代码文件

梦想橡皮擦

Python 爬虫 7月月更

字节前端面试题总结

buchila11

前端面试

初学者入门:使用WordPress搭建一个专属自己的博客

hum建应用专家

数据库 Wordpress 博客部署 WordPress

2022 秋招 Java 岗面试高频问题总结

程序员啊叶

Java 编程 程序员 架构 java面试

WEB服务如何平滑的上下线

转转技术团队

nginx Java web

华硕无双,这可能是屏幕最好的平价高刷轻薄笔记本

科技热闻

Java 多商户外贸版 PC 端功能,出场就是这么硬核!

CRMEB

责任链模式在转转精准估价中的应用

转转技术团队

设计模式 责任链

学习Java开发技术建议

小谷哥

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