写点什么

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

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

关注

评论

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

Sentieon软件应用之公共卫生机构

INSVAST

公共卫生 基因数据分析

Sentieon | 每周文献-Agrigenomics(农业)-第四期

INSVAST

基因测序 基因数据分析

体细胞突变检测分析流程-系列1( WES&Panel)

INSVAST

变异 基因测序

Sentieon实战:NGS肿瘤变异检测流程

INSVAST

基因测序 基因数据分析 NGS

Sentieon安装时 jemalloc error 解决办法

INSVAST

代码 教程分享 基因

Sentieon | 每周文献-Epidemiology(流行病学)-第五期

INSVAST

基因测序 基因数据分析 流行病学

如何构建 Sidecarless 模式的高性能服务网格

阿里巴巴云原生

阿里云 云原生 asm

华为云828企业节:助力精细化运营,提升开发效率

mecchi

小程序 云主机 云服务器 网站建设 云电脑

Sentieon数据质控QC模块介绍

INSVAST

数据分析 QC 质控工具

面部表情识别技术的神经科学基础

数据堂

Sentieon | 每周文献-Tumor Sequencing(肿瘤测序)-第三期

INSVAST

数据分析 基因测序 基因数据分析

Sentieon | 应用教程: 使用DNAscope对HiFi长读长数据进行胚系变异检测分析

INSVAST

教程分享 Hifi DNAscope

一文读懂 Nuxt.js 服务端组件

树上有只程序猿

React nuxt

提升UMI分析精度和计算效率:Sentieon UMI分子标记处理模块

INSVAST

umi 基因数据分析 技术服务

08.25 北京站|阿里云 Serverless 技术实践营( AI 专场)开放报名

阿里巴巴云原生

阿里云 Serverless 云原生

Sentieon | 每周文献-Gene Editing(基因编辑)-第六期

INSVAST

数据分析 基因测序 基因编辑

数据分析实战│时间序列预测

TiAmo

数据挖掘 算法 数据分析

茶桁的AI秘籍 - 人工智能数学基础篇 导言

茶桁

人工智能 数学 math

PrecisionFDA:多组学样本错标校正挑战赛

INSVAST

数据分析 PrecisionFDA

What's new in Pika v3.5.0

apache/dubbo-go

数据库 redis kv Redis 7 KV存储

小灯塔系列-中小企业数字化转型系列研究——协同OA测评报告

向量智库

最佳卸载程序和清洁助手 App Cleaner & Uninstaller中文最新

胖墩儿不胖y

Mac软件 卸载工具 清理软件

加速体细胞突变检测分析流程-系列2(ctDNA等高深度样本)

INSVAST

变异 基因测序 基因数据分析

如何构建适合自己的DevOps软件测试改进方案

DevOps和数字孪生

DevOps

Sentieon发布RNAseq加速分析方案

INSVAST

数据分析 基因测序 RNAseq

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