2天时间,聊今年最热的 Agent、上下文工程、AI 产品创新等话题。2025 年最后一场~ 了解详情
写点什么

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

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

关注

评论

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

深入探索嵌入式系统开发:从LED控制到物联网集成

申公豹

嵌入式

「智造」第15期:十问用友TimensionDB时序数据库

用友BIP

时序数据库

数智时代,业财融合如何助力企业数智化转型?

用友BIP

业财融合

第七在线引领零售供应链智能化,助力企业实现效能提升

第七在线

嵌入式系统中的低功耗定时器应用与优化实战

申公豹

嵌入式

49 | 搜索:如何用A*搜索算法实现游戏中的寻路功能

鲁米

探秘AI赋能的未来世界:CyberAI深度学习技术助力变革

数新网络官方账号

人工智能 大数据

数字化商品计划已经Out啦 揭秘哪些国际⼤牌⽤了AI智能商品计划?

第七在线

华秋DFM荣获第三届智能制造创新大赛全国总决赛-新技术应用赛道三等奖

华秋电子

火眼金睛破局ES伪慢查询 | 京东物流技术团队

京东科技开发者

数据库 慢查询 Elastic Search

活动预告| 字节跳动基于DataLeap的DataOps最佳实践

字节跳动数据平台

大数据 数据治理 数据安全 数据研发 企业号12月PK榜

深入理解嵌入式系统中的GPIO控制与应用

申公豹

嵌入式

app开发

Geek_8da502

【腾讯云 HAI域探秘】体验大模型的多种业务应用

Hanson

拆解 2 篇文章

6点无痛早起学习的和尚

写作 21 天技术人写作行动营

用友BIP数智干部管理,落实国有企业人才强企战略

用友BIP

干部管理

基于Raft算法的DLedger-Library分析 | 京东物流技术团队

京东科技开发者

算法 分布式系统 raft DLedger

计算机设计大赛信息可视化设计的获奖经验剖析解读—4C大赛【全网最全万字攻略-获奖必读】

申公豹

可视化

基于Vue.js和Spring Boot的口罩自助售卖系统:设计、实现与技术深度解析

申公豹

系统

敏感信息泄漏怎么破?来试试极狐GitLab 的密钥检测吧

极狐GitLab

DevOps 安全 DevSecOps 安全左移 密钥检测

2024年企业堡垒机采购要考虑因素详解

行云管家

网络安全 堡垒机 企业堡垒机

HTML5+Canvas数字孪生智慧机房可视化系统

2D3D前端可视化开发

物联网 数字孪生 三维可视化 智慧机房 智慧数据中心

Spring Cloud Netflix移除后,我们又该何去何从?

木风mind

云原生 spring cloud alibaba java‘ spring cloud

避坑指南之财务共享中心建设项目团队搭建

用友BIP

财务共享

新一代“垫图”神器,IP-Adapter的完整应用解读

京东科技技术说

人工智能

基于STM32的物联网节点设计与实现-传感器数据采集与无线通信

申公豹

嵌入式

JS获取当前系统电量情况

南城FE

JavaScript 前端 电量计算

防御性编程?这不就来了

越长大越悲伤

前端 后端 防御性编程

48 | B+树:MySQL数据库索引是如何实现的

鲁米

华秋荣获亿邦动力2023产业互联网千峰奖,引领电子产业数字化变革

华秋电子

DFM引领电子产业变革,智能制造助力高效生产

华秋电子

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