写点什么

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

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

关注

评论

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

支付系统概述(十四):收入模型

agnostic

支付系统设计与实现

1688商品详情API返回值一览:阿里巴巴中国站数据解析之道

技术冰糖葫芦

API Explorer API 编排 API boy pinduoduo API

京东JD商品SKU信息API返回值解析:精准掌握商品属性

技术冰糖葫芦

API 编排 API boy pinduoduo API

3/28 业务系统高可用设计(下)

hackstoic

架构设计 TGO写作小组28天挑战

事业-最佳实践-编码-单一职责应用

南山

设计模式 SOLID 设计原则 单一职责

事业-最佳实践-编码-高内聚、松耦合

南山

高内聚 低耦合 设计原则 LOD 迪米特法则

事业-最佳实践-编码-继承组合选择

南山

面向对象 代码质量 设计原则 组合 继承

大数据项目实战营-毕业总结

keke

事业-最佳实践-编码-代码解耦

南山

高内聚 低耦合 解耦

Tomcat报BAD packet signature 18245错误的原因

百度搜索:蓝易云

云计算 Linux 运维 云服务器 ECS

linux基础命令cd /xxx和cd xxx的区别

百度搜索:蓝易云

云计算 Linux 运维 云服务器 CD

dolphinscheduler docker compose安装配置

百度搜索:蓝易云

Docker Linux 运维 DAG DolphinScheduler

Nginx和Tomcat负载均衡实现session共享

百度搜索:蓝易云

nginx tomcat Linux 运维 Web

Linux禁止用户或IP通过SSH登录

百度搜索:蓝易云

云计算 Linux 运维 IP SSH

裸金属服务器与云服务器有什么区别,该怎么选择自己合适的服务器

德迅云安全杨德俊

事业-最佳实践-编码-编写高质量代码

南山

面向对象 设计模式 重构 设计原则 高质量代码

事业-最佳实践-编码-接口抽象类选择

南山

接口 抽象类

事业-最佳实践-编码-接口设计

南山

接口 接口规范 接口设计 接口定义

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