写点什么

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

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

关注

评论

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

Android Launcher——ui框架,嵌入式音视频方向

android 程序员 移动开发

Android Studio 4(1),Android面试超详细知识点

android 程序员 移动开发

Android Studio 模拟器卡慢、占内存解决方法,35岁技术人如何转型做管理

android 程序员 移动开发

2021年11月墨天轮国产数据库排行榜:openGauss闯入前三,Kingbase流行度与日俱增,TDengine厚积薄发

墨天轮

opengauss TiDB oceanbase 国产数据库

墨刀发布企业版v3.5 ! 再度赋能“团队协同”新模式

Android OKHttp 可能你从来没用过的拦截器 【实用推荐】

android 程序员 移动开发

Android RecyclerView的简单使用,我的阿里手淘面试经历分享

android 程序员 移动开发

android LifeCycle-简单使用和详细原理解析,2021大厂Android面试经历

android 程序员 移动开发

Android NDK 开发之 CMake 必知必会,后台开发Android岗

android 程序员 移动开发

Android Studio 3,android通知栏自响应事件

android 程序员 移动开发

Android Studio上Kotlin的入门,一次关于JVM的面试经历

android 程序员 移动开发

Android MTK 设置默认启动 Launcher,android实战pdf

android 程序员 移动开发

Android PinnedHeaderListView 详解,flutter技术解析与实战

android 程序员 移动开发

企业很难招到合适的员工,怎么办?

低代码小观

招聘 企业管理 企业招聘 招聘系统 招聘管理系统

耗时两个月,我终于把牛客网最火的Java面试题整理成册了,在Github标星60K

Sakura

Java 程序员 架构 面试 后端

Android Retrofit 2,flutter游戏源代码

android 程序员 移动开发

android Jetpack Navigation组件——堆栈操作和动画效果

android 程序员 移动开发

Android Material Design尝鲜,阿里P8面试官都说太详细了

android 程序员 移动开发

Android OOM:内存管理分析和内存泄露原因总结,网易架构师深入讲解Android开发

android 程序员 移动开发

Android Studio 4,移动开发平台

android 程序员 移动开发

rabbitmq的死信队列

小鲍侃java

11月日更

Android Glide 3,flutter小程序

android 程序员 移动开发

会声会影VS剪映?免费虽好,但花钱的快乐你想象不到!

懒得勤快

Android R 新特性变化,三级缓存框架问题你都了解了吗

android 程序员 移动开发

android hxgsecurity 常用的集中加密方式封装,android项目开发案例

android 程序员 移动开发

Android Jsoup:实现HTML解析和Epub解析,论程序员成长的正确姿势

android 程序员 移动开发

Flutter性能监控实践

贝壳大前端技术团队

flutter 性能 监控 优化

iOS开发-百度一面总结

iOSer

ios iOS面试 ios开发 百度面试

Android NDK之旅——图片高斯模糊,30岁以后搞Android已经没有前途

android 程序员 移动开发

android RoundedBitmapDrawable最简单方式实现圆角,事件分发机制流程图

android 移动开发

《设计模式就该这样学》之使用策略模式重构电商折扣和支付场景

Java高级开发

程序员 设计模式 java

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