写点什么

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

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

关注

评论

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

SRv6 L3VPN的工作原理

穿过生命散发芬芳

8月月更 SRv6

前端食堂技术周刊第 46 期:Chrome 三方 cookie 计划、npm 引入更多安全增强功能、Awesome Bun

童欧巴

Linux npm Cookie

基于微前端qiankun的多页签缓存方案实践

vivo互联网技术

Vue 前端 微前端 qiankun

毕业作业-设计电商秒杀系统

Fan

#架构实战营

学习英语的网站与资料

玄兴梦影

学习 英语

PDF转Word有那么难吗?做一个文件转换器,都解决了

IC00

C# 签约计划第三季

鲲鹏编译调试插件实战

乌龟哥哥

8月月更

SAP 云平台上一种 Low Code Development(低代码开发)解决方案

汪子熙

低代码 云平台 lowcode SAP 8月月更

Linux性能调优之内存负载调优的一些笔记

山河已无恙

签约计划第三季

GRPC MacOS M1 处理器的问题

HoneyMoose

mysql进阶(二十一)删除表数据与数据库四大特性

No Silver Bullet

MySQL 8月月更 四大特性 表删除

Serverless基础知识

阿泽🧸

Serverless 8月月更

【Go实现】实践GoF的23种设计模式:迭代器模式

元闰子

Go 设计模式 迭代器模式

Nacos配置中心之加载配置

急需上岸的小谢

8月月更

如何优雅的消除系统重复代码

慕枫技术笔记

设计模式 代码 签约计划第三季 8月月更

你认同这个观点吗?大多数企业的数字化都只是为了缓解焦虑

雨果

数字化转型 数字化

【SeaTunnel】从一个数据集成组件演化成企业级的服务

Apache SeaTunnel

大数据 微服务 数据处理 数据集成 大数据 开源

Android编译系统初探

桑榆

8月月更

物无定味适口者珍,Python3并发场景(CPU密集/IO密集)任务的并发方式的场景抉择(多线程threading/多进程multiprocessing/协程asyncio)

刘悦的技术博客

多线程 协程 多进程 Python3 Python.

好好活就是做有意义的事,有意义的事就是好好活

宇宙之一粟

8月月更

你认同这个观点吗?大多数企业的数字化都只是为了缓解焦虑

雨果

数字化转型 数字化

1对1视频源码——快速实现短视频功能提升竞争力

开源直播系统源码

软件开发 直播系统源码 一对一视频聊天系统

kafka_2.13-3.2.0.tgz配置安装

Cjpler

签约计划第三季

STM32+MPU6050设计便携式Mini桌面时钟(自动调整时间显示方向)

DS小龙哥

8月月更

系统可用性:SRE口中的3个9,4个9...到底是个什么东西?

董哥的黑板报

运维 后端 可用性 SRE

Python 教程之输入输出(1)—— 在 Python 中接受输入

海拥(haiyong.site)

Python 8月月更

LeetCode第三题(Longest Substring Without Repeating Characters)三部曲之一:解题思路

程序员欣宸

LeetCode 8月月更

开源一夏|要有遥不可及的梦想,也要有脚踏实地的本事

坚果

开源 HarmonyOS OpenHarmony 8月月更

Gitee图床被屏蔽后,我搭建了一个文件系统并封装成轮子开源!

IT学习日记

Java springboot 签约计划第三季 seaweedfs文件系统 Gitee图床崩了

一、《图解HTTP》- WEB和网络基础

懒时小窝

图解https

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