干货！程序员需要掌握的几种图

随着互联网寒冬的的到来，程序员就业环境越来越严峻，这就要求我们必须要不断提高自己，来应对高压的工作环境。下面介绍的这几种图是我在工作中经常使用的，所谓的图，都是为了辅助思考的，辅助开发的，比文字描述的更清晰，更有逻辑。

前些年，网上有一个口号喊得很响： “人人都是产品经理” 。这就要求我们需要学习认图、画图的技巧，能从需求文档里快速的抽象出我们想要的东西。最近，网上曝出的程序员和产品经理之间的矛盾，大都是需求不清晰产生的，作为程序员的我们如果掌握的产品经理所必须的技能，那我们以后就可以吊打产品经理了，哈哈哈哈。。。

流程图 是对过程、算法、流程的一种图像表示，在技术设计、交流及商业简报等领域有广泛的应用。

计算机语言只是一种工具。光学习语言的规则还不够，最重要的是学会针对各种类型的问题，拟定出有效的解决方法和步骤即算法。有了正确而有效的算法，可以利用任何一种计算机高级语言编写程序，使计算机进行工作。因此，设计算法是程序设计的核心。

对同一个问题，可以有不同的解题方法和步骤。

例如，求1+2+3+…+100，可以先进行1+2，再加3，再加4，一直加到100，也可采取100+(1+99)+(2+98)+…+(49+51)+50＝100+50+49×100＝5050。

还可以有其它的方法。当然，方法有优劣之分。有的方法只需进行很少的步骤，而有些方法则需要较多的步骤。一般说，希望采用方法简单，运算步骤少的方法。因此，为了有效地进行解题，不仅需要保证算法正确，还要考虑算法的质量，选择合适的算法。

一个计算问题的解决过程通常包含下面几步:

传统流程图

用图表示的算法就是流程图。流程图是用一些图框来表示各种类型的 *** 作，在框内写出各个步骤，然后用带箭头的线把它们连接起来，以表示执行的先后顺序。用图形表示算法，直观形象，易于理解。

美国国家标准化协会ANSI曾规定了一些常用的流程图符号，为世界各国程序工作者普遍采用。最常用的流程图符号见图。

流程图不仅可以指导编写程序，而且可以在调试程序中用来检查程序的正确性。如果框图是正确的而结果不对，则按照框图逐步检查程序是很容易发现其错误的。流程图还能作为程序说明书的一部分提供给别人，以便帮助别人理解你编写程序的思路和结构。

PS：墙裂推荐大家使用ProcessOn，画流程图的神器！！！

心智图 （Mind Map），又称 脑图 、 心智地图 、 脑力激荡图 、 思维导图 、 灵感触发图 、 概念地图 、 树状图 、 树枝图 或 思维地图 ，是一种图像式思维的工具以及一种利用图像式思考辅助工具来表达思维的工具。

心智图是由英国的托尼·博赞（托尼·布詹）于1970年代提出的一种辅助思考工具。心智图通过在平面上的一个主题出发画出相关联的对象，像一个心脏及其周边的血管图，故称为“心智图”。由于这种表现方式比单纯的文本更加接近人思考时的空间性想像，所以越来越为大家用于创造性思维过程中。

ps:我一般都是用的百度脑图，在线的比较方便

拓扑学（TOPOLOGY）是一种研究与大小、距离无关的几何图形特性的方法。 网络拓扑是由网络节点设备和通信介质构成的网络结构图。

拓扑学是数学中一个重要的、基础的分支。起初它是几何学的一支，研究几何图形在连续变形下保持不变的性质(所谓连续变形，形象地说就是允许伸缩和扭曲等变形，但不许割断和粘合) 拓扑图用于计算机网络示意，也就是不考虑计算机实际的位置，只表示网络中每台计算机以及网络设备之间的相互关系。

节点，节点就是网络单元。网络单元是网络系统中的各种数据处理设备、数据通信控制设备和数据终端设备。

链路，链路是两个节点间的连线。链路分“物理链路”和“逻辑链路”两种，前者是指实际存在的通信连线，后者是指在逻辑上起作用的网络通路。链路容量是指每个链路在单位时间内可接纳的最大信息量。

通路，通路是从发出信息的节点到接收信息的节点之间的一串节点和链路。

星型结构的优点是结构简单、建网容易、控制相对简单。其缺点是属集中控制，主节点负载过重，可靠性低，通信线路利用率低。

总线结构的优点是信道利用率较高，结构简单，价格相对便宜。缺点是同一时刻只能有两个网络节点相互通信，网络延伸距离有限，网络容纳节点数有限。在总线上只要有一个点出现连接问题，会影响整个网络的正常运行。目前在局域网中多采用此种结构。

环型结构的优点是一次通信信息在网中传输的最大传输延迟是固定的；每个网上节点只与其他两个节点有物理链路直接互连，因此，传输控制机制较为简单，实时性强。缺点是一个节点出现故障可能会终止全网运行，因此可靠性较差。

树型结构实际上是星型结构的一种变形，它将原来用单独链路直接连接的节点通过多级处理主机进行分级连接。

这种结构与星型结构相比降低了通信线路的成本，但增加了网络复杂性。网络中除最低层节点及其连线外，任一节点或连线的故障均影响其所在支路网络的正常工作。

UML是一种开放的方法，用于说明、可视化、构建和编写一个正在开发的、面向对象的、软件密集系统的制品的开放方法。UML展现了一系列最佳工程实践，这些最佳实践在对大规模，复杂系统进行建模方面，特别是在软件架构层次已经被验证有效。

功能模型， 从用户的角度展示系统的功能，包括用例图。

对象模型， 采用对象，属性， *** 作，关联等概念展示系统的结构和基础，包括类别图。

动态模型， 展现系统的内部行为。包括序列图，活动图，状态图。

实体关系图，简记E-R图是指以实体、关系、属性三个基本概念概括数据的基本结构，从而描述静态数据结构的概念模式。

相信不少人都看过网上各种酷炫的动态交互原型，笔者也是很欣赏的，以前也学着用flash和AE做过类似的高逼格动态原型，但是个人感觉在实际项目中，动态原型图的性价比并不高。动态高保真原型，更适合用于公开展示，需要有对原型相当了解的人来讲解。而我下面要说的这种全流程交互图，在需求评审，方案传递时更为实用，视觉设计师，程序员只要看图，就能快速理解产品功能，比起文字型文档，交互流程图极大降低理解成本，提高沟通效率，制作成起来也比较快速。

下面是笔者以前画的交互流程图，用的工具是Photoshop，比较注重细节。现在由于时间问题，多用axure，无法像Photoshop 那样扣细节了，也没办法画斜线，但好处是快，导出动态demo比较方便。我个人还是比较推荐用Axure的。

接下来进入正题，说说画出易懂，美观的交互流程图的5个技巧

一、完整的主干闭环+可能出现异常反馈

1、确定一个目标，例如：新用户注册，从第一步开始，按用户页面跳转顺序摆放界面。

2、针对新用户注册这个功能，完整的功能交互流程图，必须包含：新用户开启APP，触发注册，注册流程，完成注册，进入游戏这几个关键步骤的完整闭环。

3、在关键步骤的主干闭环之外，需要将所有的异常提示展示出来，如：手机号无效，手机号已注册，网络超时等主干流程中可能遇到的异常提示，以及对应处理反馈。

二、按钮点击效果+页面跳转逻辑

1、主干流程的按钮，均要描述点击后的处理，以及可能出现的异常反馈。

2、触发页面跳转后，需要用箭头标注跳转逻辑，两条流程线之间，尽量不要有十字交叠。

三、标题和注解

1、交互流程图中，主要包含四类注解：模块标题、界面标题、界面注解、流程箭头注解。

2、模块标题：一般是主干流程的功能名称，如新用户注册流程、充值流程等。

3、界面标题：即每个界面的名称，如启动页、登录页等，可展示在每个界面上方，并附带编号。

4、界面注解：是交互图中最重要的文字内容，一般展示在对应界面下方，可包含页面动态描述，页面异常情况描述，页面简要逻辑描述等。

5、流程箭头注解：一般是展示在箭头线上的，对于页面跳转的描述，如：点击注册跳转。

四、视觉相关要素

1、视觉焦点：一个界面，尽量只展示一个重点信息，并且使其成为视觉焦点，从面积，放置位置，颜色，字号等元素，都做强化，其他非焦点信息，则弱化。

2、图像：在交互图中，每个模块尽可能用块状底色区分，避免使用过多线框，否则容易使交互图变得复杂，加重视觉负担。

3、配色：建议交互图中，使用一种基准色，如蓝色或灰色，叠放层级靠后的模块，用深蓝色，靠前的模块，用浅蓝色。同时，按钮可单独使用一种颜色，如绿色。部分需重点突出的元素可用提醒色，如橘色。箭头可用半透明的黄色等。

4、摆放：所有界面上下对齐，间隔一致，保证工整的视觉效果。

再附上一张关于手势 *** 作的描述图，每个 *** 作细节都要清楚描述

附录：如何提升互联网产品体验：

1、把用户假设成一个聪明但是很忙的人，不要指望让用户记住任何 *** 作流程，而是随时提供清晰的指引和尽可能自由的页面跳转入口。

2、用户的高频 *** 作，应尽量减少 *** 作步骤，而低频 *** 作，则无需刻意关注步骤数，更应该关注的是每一步的 *** 作难度和界面信息是否易于理解。应尽量降低选择难度，别让用户花时间去理解。

3、一个页面只突出一个重点，用大小，颜色，形状来做分类，让用户一眼可分辨到重要信息。

4、扁平化和渐进披露相结合，视场景而定，而不是机械地执行扁平化。流程扁平化的好处是，可以让用户提前感知流程，页面跳转的成本也比较低，但是比较考验对页面信息的整合处理，渐进披露是预先把次要信息隐藏，当用户触发了对应 *** 作，进入对应流程，才给出相应反馈或指引，好处是让用户更专注，减少理解成本。

5、页面一致性也是这个道理，就我理解，一致性的是为了让用户形成习惯，进而减少理解成本。比如，确定 *** 作永远在右侧，选中状态永远高亮，红色代表严重警告等等。当用户已经形成统一认知，则会大大降低每一次 *** 作的理解成本。但有时候设计师会过于信仰一致性，导致失去个性，我建议在不影响习惯的前提下，可适时打破所谓一致性的束缚，让设计更加出彩。

6、让用户有反悔机会。误 *** 作后，可恢复，且重要 *** 作需二次确认，并强化感知严重性。

7、避免依赖文字说明，多用图形化的方式让用户直接感知，而不是通过理解文字来感知。且文案使用的格式、主语建议统一，这有助于营造整体调性。另外一点，即按钮文案的使用，建议明确告诉用户该页面的目的和功能，同时引导行为，而不是陈述性文案。用动词+宾语的格式来引导用户 *** 作，如：“去购买”比“商城”更清楚，“去玩牌”比“游戏”更清楚。

8、需同时考虑多平台的用户 *** 作习惯，如ios系统上的应用，页面需提供返回按钮，而安卓上的应用，按钮应避免过于靠近手机底部 *** 作栏，以防误 *** 作。

CAD中的图纸比例也就是制图中的图纸比例，指实物在图纸中的尺寸与实际尺寸间的比例。在图板上画图时，一般要先选择图幅、确定图纸比例后再开始。而在CAD软件中设计时，为了方便通常直接输入物体的实际尺寸。但是在标注或输入文字时，就必须考虑图幅和图纸比例了。例如，如果希望将图形以1：10的比例打印输出时文字的高度是3.5，则输入文字时需要将文字的字高设为35，标注也一样。

图纸比例直接控制文字、剖面填充、尺寸标注、机械符号等标注类对象创建时的大小，也可以用来统一修改标注类对象的大小。

下图是尧创CAD软件图纸比例的设置：

点击程序界面正下方的按钮“图纸比例”，图纸比例功能在启用和关闭两个状态间切换。启用状态时，点击图纸比例按钮后面的比例栏，可以选择或自定义恰当的图纸比例。特别地，如果插入尧创CAD 的机械图框，图纸比例自动开启。

图纸比例

对标注类对象创建时的影响：图纸比例功能开启后，创建标注、文字、符号、剖面等对象时，程序自动根据图纸比例换算其大小。

例如，设置图纸比例为1：10，创建标注或符号，标注或符号整体放大10倍；创建文字，文字的高度放大10倍，假设文字的默认高度设置值是3.5，我们知道图纸比例不开启时，创建的文字其高度是3.5的，而图纸比例开启后，得到的文字高度是35。创建剖面，得到的剖面花纹的比例自动放大10倍，或剖面间距自动放大10倍，即剖面的疏密程序自动调整。

注意：因为图纸比例可以自动换算比例，所以，请按1:1的打印输出效果设置文件中的各项属性，如文字高度，标注样式中的箭头大小、文字高度、标注特征比例等。比如希望文字1：1打印输出的高度是3.5，则将文字的高度设置为3.5，以此类推。

---