重新设计交互流程图——重新造轮子

#现有方案

我司的交互设计师所使用流程图系统是一套较为复杂而不易掌握的符号体系。这套符号体系在最初运行得较好（至少看以前的文档感觉还挺规范），各种符号都大致被正确的运用。

随着新晋设计师开始使用这套体系，这套体系较为复杂繁琐的一面使得设计师并不能很好的运用。同时随着时间变化，因为许多特殊的符号使用不便并且不能及时反映最新的交互行为变化，因此逐渐被各个设计师所遗忘和忽略。流程图作为交互设计师的产出，其主要的阅读对象是负责界面部分的程序员以及测试人员。一套较为复杂的体系不利于程序员的记忆和学习，更不利于他们快速分辨与理解其中的主要内容和流程。原有体系有多种多样的颜色和形状，力图涵盖交互过程中的诸多细节。事实上这些多种多样的要素，反而让流程图混杂着各种颜色和形状而降低了整体可读性。

#竞品分析（文献回顾

市面上现有各种各样的流程图方案，其中部分以高保真界面为主，通过连线展现各个界面之间的关联。这种流程图似乎较为适用于移动端并且需要大量时间进行绘制，与此同时产出结果通常是一张很大的图...遗憾的是多数程序员和产品经理都没有配备较大的显示器。也有部分流程图方案强调把页面各种各样的要素抽象化为图形，并且希望连接这些图形。遗憾的是，要维护和记忆一套较大的符号库对设计师和团队而言都是负担。软件工程本身的uml体系中有许多不同的符号，但是这些符号本身使用并不容易。首先其图形较为复杂所以无法在其中排布太多文字（这样设计师就需要画更多精力进行排版），其次各种各样的图形以及其含义并不容易记忆，也容易导致各种符号在使用上被混淆的情况。

（本处并不考虑那些更接近信息图的流程图....

##第一部分小结——为什么要重新设计流程图的相关控件和规范：

——便于设计师学习，记忆，使用

——便于工作流上下游的各方都能快速阅读流程图，并且迅速分辨主要流程

——便于用软件进行整齐的排版，减少赘余要素

——减少团队潜在的维护成本

——————————————————————————————————————————————

#重新设计的前提条件

——继续以流程图本身为基础，流程图内不包含实际界面

——流程图尽量保持合适的规模：过于细致的小功能不必然需要流程图；过为庞大的流程需要拆分为多个流程

——通过流程图本身的普使性和易用性，让全部相关参与者都能获得较好的使用体验。

#重新设计的思路展示：

##色彩

从以往的红，绿，蓝，黄，灰色，简化为蓝色和橙色... 

（因为蓝色比较商务和正式，而橙色和蓝色对比度足够

##形状

全部简化矩形…（方便在里面填充内容）

##凸显主要流程

通过对于关键节点以及复杂节点的title提供背景色（其实就是反白），用户能一眼就关注到主要流程。

——————————————————————————————————————————————

展示部分：（等我做完以后会放出sketch or omnigraffle版本）