专题网站建设自查整改报告,wordpress 开源主题,企业系统管理,深圳app开发公司排行一、引言 作为一名IT从业者#xff0c;不仅要有扎实的知识储备#xff0c;出色的业务能力#xff0c;还需要具备一定的软实力。软实力体现在具体事务的处理能力#xff0c;包括沟通#xff0c;协作#xff0c;团队领导#xff0c;问题的解决方案等#xff0c;这些能力在…一、引言 作为一名IT从业者不仅要有扎实的知识储备出色的业务能力还需要具备一定的软实力。软实力体现在具体事务的处理能力包括沟通协作团队领导问题的解决方案等这些能力在关键时刻比硬性的技术水平更能体现一名工程师的价值它决定了IT职业生涯的高度和视野。 而本文所分享的绘图能力与其说是软实力不妨说是基本功。无论从事的是开发、运维、通信甚至产品经理交互设计、运营这些有交集的岗位都会在工作中用到。因为在计算机的世界里大多数场景都是抽象的当我们在描述他们的时候一定是通过其实现原理和机制抽象出一个行为逻辑最后再具象到一张图。想象一下当我们在浏览器中输入了一个地址在敲击回车之后所发生的一切是多么地复杂如果能拍成电影那么可以取名叫《一个数据包的奇幻漂流》。如果你能够以具象的画面来表述一个计算机世界中发生的一个场景那很好说明你的思路清晰对原理的理解非常透彻然后你要做的工作就像导演创作分镜一样将它们体现在画纸上。 这是一种所谓抽象思维的能力最好的锻炼方式之一便是画图。很多时候我们会觉得说不清楚一旦你发现说不清楚那么我们就可以用画图来说明这些图包含了你想要表达的思想或者逻辑而不是一个画得非常逼真的主机箱。因此在工作学习中养成画图的习惯把复杂模糊的文字描述转换成一张清晰直白的图不仅可以降低许多沟通的成本还可以锻炼个人的抽象思维能力。 下图重新绘制取自Jesse James Garrett 的《用户体验的要素以用户为中心的Web设计》一书中的用户体验模型可以说整本书就是围绕这张图展开论述的是很多产品经理的入门经典书籍。从2000年3月初次发布到网上以来Jesse所绘制的这个模型已经被下载了2万多次。事实上用户体验是一种非常抽象的东西所谓大师就是具备这样的能力将极为抽象的思想投射到一个简单的二维空间上表现为具象的图表从而形成具有逻辑的信息这就是真正意义上的深入浅出。 那么很多人会问说了这么多用什么工具画图比较好等等这里要说明的是本文所要分享的内容并不局限于某一种画图的工具和技巧工具本身没有什么高低之差差别在于是否具备抽象思维的能力在于绘图的操作是否规范高效在于是否理解事务的机理关注这些才能够提升绘图能力而不是陷入工具之争这没有任何意义即便是最普通的windows画图板一样可以画图无非图标不够漂亮但我们并不在乎这些对于IT从业者来说并不需要视觉上艺术上的美感而是这张图背后承载的信息。 下面要介绍的基本是各个绘图软件都相通的功能特性使用这些功能可以提升我们绘图的效率另外还提出了一些绘图的规范建议供大家参考毕竟这不是一份绘图软件的说明书。希望大家能够了解绘图的思想而不是工具本身的使用。 二、ProcessOn简介 本文所使用的是在线绘图工具——ProcessOn这是一个方便易用、免费高效的在线作图工具运用它可以免费制作多种图。 之所以会使用这个工具主要有几个原因 一是因为它是一个在线的工具自然也就有了跨平台的特性。作为一个IT从业者很多情况下会穿梭在WindowsLinuxMac OS这些操作系统之间工作而常用的绘图软件通常只能运行在Windows当然Linux和Mac OS也有非常不错的绘图软件但终究无法实现移动办公。而作为在线工具也就屏蔽了因为不同操作系统带来的麻烦你可以方便地在家中MacBook中使用它打开公司下班前画的一张半成品图继续完成然后明天上班就可以直接给领导作汇报了。 二是因为其在线存储这也很重要可以避免一些悲剧的发生例如赶了一晚上的图突然断电蓝屏什么的然而并没有保存不得不满腹怨气地重画。 三是因为它操作简单它基本吸取了visio之类常用绘图软件的操作特点因此对于有绘图经验的用户学习成本几乎为零。 四是因为结合网络社交的特性不同图表的作者可以轻松地在平台分享各自作品用户也可以方便地对公开的作品进行搜索同时还支持多人协作的功能适合团队内部协同工作 当然这个工具也不是十全十美的毕竟是2015年才上线提供服务产品还存在或大或小的不稳定因素如丢失数据据其他网友反馈存在这样的情况不过笔者在实际使用中未遇到过菜单功能卡住图标相对比较少等不过这些问题也还在可忍受的范围之内。作为国内免费的在线绘图工具可以做到这般实为不易。 三、操作技巧 对于ProcessOn登录注册等其他操作这里不过多介绍说多了就像软文下面介绍一些常用的操作技巧这些技巧通常也适用于visio等其他绘图软件大家可以自行对应。可以说这些技巧相当于绘图效率的催化剂可以让我们实际的绘图工作提升效率并且完成的图又不失美观和专业。 对于已经掌握这些技巧的读者可以跳过本节 3.1 平均分布 在很多场景下我们会画一排或者一串矩形之类的元素但是由于手动拖拽的随意性导致这些元素的间距不尽相同这时我们可以使用图形分布的功能将这些元素调整为相等间距这样在元素比较多的情况下可以保持整幅图的整洁。 操作时选中对应的元素然后选择屏幕顶部的工具栏中的“排列“并选择“图形分布“-”垂直平均分布” 对应有两种分布 水平平均分布即水平方向上使多个元素以相等的间距进行排列 垂直平均分布即垂直方向上使多个元素以相等的间距进行排列 3.2 元素对齐 大多数绘图软件中在拖动一个元素的时候会自动地出现一些对齐线方便用户将元素对齐到特定的位置但是一旦元素比较多拖动的操作就有点杯水车薪了事实上我们可以使用对齐的功能快速地进行元素对齐如下图 我们可以将需要对齐元素选中然后右键或者点击屏幕顶部的工具栏中的“排列“并选择“图形对齐“-”居中对齐” 这些对齐方式可以从字面意思理解 左对齐即选中的所有元素向处于屏幕最左侧的元素对齐 居中对齐即选中的所有元素根据屏幕最左侧和最右侧的位置计算得到中线并向该中线对齐 右对齐即选中的所有元素向处于屏幕最右侧的元素对齐 顶端对齐即选中的所有元素向处于屏幕最上方的元素对齐 垂直居中对齐即选中的所有元素根据处于屏幕最上方和最下方的位置计算得到中线并向该中线对齐 底端对齐即选中的所有元素向处于屏幕最下方的元素对齐 3.3 大小控制 有时候我们在框内会标注上一些文字由于标注的文字长短一步就出现框本身的宽度不一致为了保持整齐通常就会将这些元素宽度或高度保持统一一般操作就是手动地逐个调整方框大小或者选中之后统一调整高宽的数值当然也可以使用批量操作的方式 选中对应的元素然后选择屏幕顶部的工具栏中的“排列“并选择“匹配大小“-”宽度” 说明不论是调整高度还是宽度都是调整为所选元素中高度最大或宽度最大的数值 3.4 Z轴排列 这里所谓“Z轴“的概念是从CSS中的“z-index”属性借鉴过来的亦即垂直屏幕向外的方向。 在多个元素进行组合的时候通常会涉及到前后遮挡的问题这时候需要用到z轴排列如下图中的圆环其中就是由三个圆层叠而成其中橙色的圆在最底层红色的圆在中间白色的圆在最顶层。 默认情况下元素的z轴值是根据创建的先后顺序决定大小的越是后创建的元素其Z轴的数值越大也就是能遮挡在它之前创建的元素。 绘制该图形时首先需要选中这3个圆然后使用“居中对齐“和“垂直居中对齐“使其成为同心圆如果此时橙圆遮挡住了其他两个圆则点击橙圆并选择屏幕顶部的工具栏中的“排列“然后点击“置于底层“于是橙圆就会被推到最底层接着可以选中红圆先同样的操作将它置于底层然后点击“上移一层“这样红圆就会叠在橙圆之上如果此时白圆仍然没有出现在最顶层可以选中它点击“置于顶层“这样就完成了 3.5 分组 分组这个功能在复杂元素组成的图形中非常实用它相当于将某几个元素封装成为一个组件以整体的方式进行拖拽旋转连线等操作并且可以有效地防止意外拖动而打乱布局之类的误操作。 下图是表示负载均衡结构的一个简单拓扑图图中load balancer 节点和web server的节点是由3个元素组成“主机““图标“和“圆角矩形“。通常我们会把这个三个元素进行组合然后再连接线等其他操作这样一旦这个拓扑图趋于复杂而又需要做调整的时候就可以方便地选中相关的节点不至于元素漏选或错选而导致整个布局失败。 操作也非常简单这样选中想要组合的元素然后右键或选择屏幕顶部的工具栏中的“排列“并选择“组合“即可完成。 3.6 框内文字对齐 在很多框图中为了表示一个集合的概念通常会在表示父元素的框内标注上集合的名字下图所示的是spring框架内核容器的组成。一般情况下父元素内的标注文字会使用“顶端对齐“的方式而子元素则是居中这也是框内文字默认的对齐方式。 操作时先选中元素然后打开屏幕上方工具栏中的“对齐“菜单就可以选择相应的对齐方式。 其中第一排表示水平方向的对齐方式从左往右依次是左对齐水平居中对齐右对齐第二排表示垂直方向的对齐方式从左往右依次是顶端对齐垂直居中对齐底端对齐。 3.7 快捷键 点击屏幕顶部的工具栏中的“帮助“我们可以查看Processon目前支持的快捷键整理如下 通用 Alt 按住Alt通过数据可以对页面进行拖动 Alt(/) 视图放大或缩小 T 插入文本 Ctrl 按住Ctrl点击一个图形将其添加到选择图形中或者从中移除 CtrlA 全部选中 I 插入图片 L 插入连线 图形被选中时 箭头 (←↑↓→) 将选中图形向左、向上、向下、向右移动 Ctrl 箭头 (←↑↓→) 每次微移一个像素 调整图形大小时按住Ctrl 调整图形大小并且约束比例 CtrlZ 撤销 CtrlY 恢复 CtrlX 剪切 CtrlC 复制 CtrlV 粘贴 CtrlD 复用 CtrlShiftB 格式刷 Delete,Backspace 删除 Ctrl] 将选中的图形置于顶层 Ctrl[ 将选中的图形置于底层 Ctrlshift] 将选中的图形上移一层 Ctrlshift[ 将选中的图形下移一层 CtrlL 锁定选中的图形 CtrlshiftL 将选中的图形解锁 CtrlG 组合选中的图形 CtrlshiftG 将选中的图形取消组合 编辑文本 空格 编辑文本 CtrlB 粗体 CtrlI 斜体 CtrlU 下划线 CtrlEnter 保存文本编辑 其中除了CtrlCCtrlVCtrlA等常用的快捷键我们会经常使用CtrlD该快捷键相当于按了一次CtrlC再按一次CtrlV也就是复制和粘贴一键完成在复制多个元素的时候非常实用效率提升一倍。 另外组合功能CtrlG插入文本T插入连线L置于顶层Ctrl]置于底层Ctrl[按住Ctrl约束比例调整大小也是使用率极高的快捷键。 我们在实践过程一定要多使用快捷键来提升操作效率不要在对齐排列调整大小拖拽布局等操作上浪费过多的时间。 3.8 综合案例 下面介绍一个综合案例我们将运用上述技巧绘制Linux中的awk数据处理模型示意图如下图所示。了解awk命令的人都知道awk是以行为单位处理数据的并且可以按照指定的分隔符将数据切割成多列其中RS为行分隔符FS为列$数字表示取列。 下面列举几个重要的操作步骤 绘制表示行的横向矩形 首先创建5个矩形使用复用快捷键CtrlD然后全选完成对齐操作接着将最下方的矩形拖动到合适的位置最后使用“垂直平均分布“功能完成。 绘制表示列的垂直矩形 将行置于列之上使用“置于底层“的功能这里最好将列的各个矩形进行分组。这样如果觉得布局不是特别合适就可以比较方便地重新进行水平分布。 最后完成 标注文字说明尽量使用CtrlD进行元素的复用 调整行矩形的透明度 列矩形中的文字使用“顶端对齐“即可 四、规范建议 4.1 大小 在默认情况下processon的画纸比A4略大即1250px*1550px不过也可以按照需要进行调整。在绘图时所有的元素应当尽量布局在一张画纸上这样置于A4大小的文档或者宽度为1000px左右的网页不会显得特别突兀尺寸过大会导致整体比例缩小之后局部元素显得过小看不清楚。 另外我们在生成相同元素的时候尽量先手动地配置大小并且这个大小是你记得住的然后使用CtrlD进行复用那么当某一个元素被误拖拽而导致大小发生了变化之后就可以迅速地调整回来另外如果在后期还想添加一个相同元素那么也可以直接配置对应的大小。简言之配置元素的大小使用一个你可以记住的数值从而提高工作效率。 4.2 字体 先来介绍一些关于字体的背景知识 通常字体可以分为衬线体和无衬线体熟悉CSS的同学一定知道设置字体时有san-serif属性san-serif即无衬线体词根serif即衬线的意思。所谓的衬线就是在每个字符的边缘部分有一定的描边修饰。举例来说中文字体中的“宋体“英文字体中的“Times New Roma”就是典型的衬线体而中文字体中的“黑体“英文字体中的“Arial”就是典型的无衬线体。 按照字符的宽度还可以将字体分为等宽字体和非等宽字体顾名思义等宽字体也就是每个字符的宽度都相同。在IT领域一般都倾向于使用等宽字体例如微软开发的Consolas字体就是典型的等宽字体它被使用在windows的控制台中新版本eclipse默认也使用该字体旧版本默认的是Courier New字体。从下面的对比中可以很清楚地看到等宽字体和非等宽字体的差别。 一般来说由于衬线体具有笔画上的修饰使得感官上字符之间有一定的连续性这样对于大段的文字就比较方便横向阅读这也就是我们的课本报纸等读物使用宋体进行印刷的原因之一而无衬线体更符合现代美学从简的观念也比较适合作为标语来印刷例如挂着的大红横幅通常就是用黑体来印刷的。 我们在绘图的过程中并不需要大段的文字因此建议尽量使用同一种无衬线体并且除了标题部分等进行特殊大小处理的字体其他元素的文字都统一字号。在processon提供的字体中笔者建议统一使用“微软雅黑“字体字号大小为14px并且加粗。这样可以使得导出的图片粘贴在word等文档中时显得比较和谐。 如果我们要在图中引入代码或配置文件等专业性的内容则尽量使用等宽字体以保证内容排版的整齐性这里建议使用Lucida Console因为它既是等宽字体又是无衬线字体。 4.3 配色 还是先介绍一些关于颜色的背景知识引用自《超越平凡的平面设计版式设计原理与应用》 色轮由12基本颜色组成首先由红、黄、蓝三原色然后两两混合得到间色间色再两两混合得到三级色 明度色彩有明暗有明度值来衡量深色就是在纯色里加入黑色浅色就是在纯色里加入白色。 色彩关系由色轮和明度就可以产生颜色之间的关系一个有6种基本关系单色、近似色、补色、分裂补色、原色、间色 毕竟笔者不是学设计或美术出身谈不上专业角度的美学配色方案这里就引用网络上一篇关于中国街头广告牌设计的文章以此借鉴对颜色的运用方法 素材来源微博《中国的招牌为什么这么丑大象公会》 上图就是充斥各个城市街头的广告牌高纯度的大红色背景高纯度颜色的字体且没有充分留白不同的色彩占据相似的面积相比之下下图的排版采用的是低纯度的暗色以及充分的留白档次明显高了很多这就是通常讲的“素色审美“有时候我们会称之为“小清新“类似于宜家给人们的印象。 绘图中使用颜色的时候建议不要过于追求高饱和度和鲜艳的色彩而是采用低纯度和充分的留白。这一点processon的调色板也给出非常好的示范 processon的调色板提供的颜色基本属于web安全色所谓web安全色就是在不同浏览器都可以显示相同的颜色它们用十六进制的00336699ccff表示三原色其中我们可以方便地找到饱和度低的配色如上图的颜色方案他们位于调色板的第二行将其应用于框内背景色可以让整幅图显得比较柔和不会刺眼。 4.4 最小化原则 在运维的工作中有一个重要的指导思想即“最小化原则“例如最小化安装操作系统最小化启动服务最小化安全权限等等。同样我们也可以把这个思想引入到绘图的实践中来主要体现在一下几点 一个方块除了包含文字和足够留白就可以应该保持在最小的尺寸而不应该毫无逻辑地扩大建议四个方向上的留白大约保持在5px左右 元素之间连线除了在连续上标注足够的文字就应该保持的在最短的长度 相邻的元素之间也应该保持在最小的间隔之内不应该过大大约在5px-20px之间 整体比例保持在最小不应该留有大面积的空白但也不应过于拥挤留有适当空间可以让整体具有呼吸属性不会让人觉得“密不透风“ 五、实战 因为IT细分领域内有着非常多的专业图表但笔者知识边界有限所以下面着重介绍两种通用性比较高的图基本流程图和系统拓扑图 5.1 基本流程图 有关流程图的概念最早是在软件工程中接触到的程序流程图早期流程图目的就是描述程序的执行过程一直以来就是软件设计的重要工具随着使用者增多流程图的概念也不再限制于软件设计只要涉及有关流程的任何场景我们都可以用流程图来表示。 这里所谓的基本流程图是相对于其他流程图来说的。这里简单介绍一下泳道图下图所示泳道图包含了流程中每一个步骤对应的相关单位其中单位可以是部门也可以是职位等泳道图可以很好地表现了一个流程中不同的职能分工以及协作的逻辑关系是项目管理者制定项目计划的常用工具。 5.1.1 常用符号 下面整理了基本流程图常用的符号图示掌握以下10个足够应付99%的流程图其中最常用也就是第一行的符号 开始和结束用圆弧矩形表示 处理过程用矩形表示 分支判断用菱形表示 元素之间用带箭头的线连接 5.1.2 基本结构 了解了常用符号之后就可以画出流程图中的三个基本结构即顺序结构分支结构和循环结构 顺序结构也是最简单的结构即按照事务的顺序依次执行 分支结构流程中会进行条件的判断根据不同的判断结果采取不同的处理例如启动服务时先检查pid文件是否存在如果不存在则启动服务否则报错 循环结构当条件不被满足时重复执行同一个或几个处理例如常会被用于遍历数组等操作 事实上流程图就是由这三种基本的结构根据实际业务情况相互组合而成。我们在绘制流程图首先就是要确定所要描述的业务实际的流程逻辑然后推敲每个步骤的执行是否存在分支和循环目的就是要阅读流程图的人一目了然迅速地理解流程的每个环节。 5.1.3 流程图案例 下面我们以“超市购物“为案例综合运用一下上述3个基本结构。 如图其中购物是一个循环结构如果购物清单上的物品还没有买全则继续购买物品否则就可以去收银台结算了而支付环节就是一个分支结构如果现金足够的话就选择用现金支付否则就使用手机的APP支付。 像这样的流程我们在工作和学习中还是有非常多的实战案例的例如部署服务安装软件等等在整个流程中一定是会出现各种问题那么对于各种异常的处理就可以用一个分支结构来表示我们可以试着把工作遇到的问题和排查过程通过流程图的方式落实到文档中那么长久下来对于经验的积累会起到非常大的帮助作用。 5.2 系统拓扑图 这里分享的系统拓扑图主要是指集群架构图对于其他拓扑图从绘图的角度来说本质上是一样的可以融会贯通。 下面还是以一个案例来分享一些笔者浅薄的经验如图这是一个经典的中小规模web集群架构参考自《跟老男孩学Linux运维web集群实战》包括负载均衡web服务数据库主从复制读写分离网络文件系统文件备份批量管理yum仓库等诸多单元。 5.2.1 方案规划 首先在新建一张空白画纸之前我们应该对当前这个系统架构有充分了解不论你是否已经实现了这个架构都至少有一个方案规划方案描述了这个系统应该要完成的哪些功能以及为了完成这些功能需要提供哪些基础的服务等另外还应当包含服务器规划表用来说明为了完成这个系统至少需要哪些服务器这些服务器提供哪些服务等信息。 5.2.2 模块分割 在确定方案之后就可以对系统中的各个模块进行分割这个过程与软件设计的模块设计比较相似先确定功能模块先不管这个功能模块如何实现只要确定他在系统架构中的位置和作用以及提供服务的方式数据的流向等。这些确定之后整个系统的框架就设计完成了。如图我们抽象出了几个模块负载均衡web服务数据库文件存储以及管理五个模块。这些模块就可以实现一个基本的web服务解决方案了。 一般来说每个模块内部可以根据不同需求和资源实现不同的方案 负载均衡可以由nginxlvs或者硬件等实现 web服务根据开发语言的特性实现不同web容器如apachetomcatnginxphp等 数据库的实现就更多了传统的关系型数据库和NoSQL数据库产品甚至还可以实现利用redismemcached等实现缓存 文件存储可以通过GlusterFS等各种分布式文件系统实现 管理模块的功能比较多例如安装部署监控等对应有多种实现方式这里就一一列举了 但不管如何实现以后即便模块内部进行调整大的框架仍然不变。因此在绘图时框架的确定尤为重要也是我们着手绘制架构图的关键一步。 5.2.3 节点设计 接下来就可以设计模块内部的实现了我们可以通过各类的图标绘制不同服务的节点。processon提供的图标并没有MS visio中的丰富但也足够使用了。 笔者的做法是使用“服务器“图标”功能“图标圆角矩形组合成一个节点如上面3.5小节中看到的那个图。之所以要用圆角矩形进行包裹一方面为了方便输入文字标注更重要的一点是在架构比较复杂连接线比较多的情况下矩形的边可以连接更多的线而如果直接连接服务器的图标会显得非常杂乱有时候也会遮挡文字标注。 “服务器“和“功能“图标在processon绘图界面右下角“更多图形“中的网络拓扑图下可以找到分别在network和Azure子目录这个Azure就是微软的云另外也有aws的图标但是不太看得懂-_-|| 绘制各个节点时尽量使用CtrlD进行复用。对于“功能“图标由于默认的图标比较大在调整大小时可以按住Ctrl键进行拖拽的操作这样可以保持图标的大小比例就不会失真了。 5.2.4 连线调整 当我们需要将每个节点连接起来的时候务必记得对节点进行分组操作不然一旦置于大框架之内再想选择这个节点或者再次添加连线操作就非常麻烦。比较遗憾的是processon的分组功能比较单薄当我们将一个分组作为一个元素与其他的元素再次分组时原来的分组就会撤销掉也就是说分组不具有嵌套的特性这和MS visio不太一样所以在分组操作时最好的方式就是单个节点分组。 分组之后节点中的三个元素就作为一个整体此时再与其他节点进行相连连接时也务必连接到对方的边上这样在拖动时就可以跟着一起动。针对重要节点连线需要进行一定的文字标注说明其意义。 5.2.5 整体调整 这里就需要应用最小化原则进行调整。在设计节点的时候为了能够包含各个节点通常会把大框调整到比较大的尺寸不至于影响节点的拖拽而当模块内部完成之后就要将整幅图的比例调整到合适的大小去掉无意义的空白使得布局趋于紧凑合理。 然后去掉框架之间的连线将提供服务的节点和使用服务的节点直接相连由于管理中的节点与其他节点都需要连接如果画线就显得比较凌乱并且连线的意义不大故而省去。 最后再加上一些修饰以及外部的调用情况就完成了整个系统架构图。 六、总结 本文主要分享了以下几点 介绍了绘图作为IT从业人员软实力的重要性以及绘图在日常工作中的重要作用 绘图工具processon中各个功能特性和使用技巧主要有分布对齐z轴排列快捷键等 提出了一些绘图的规范建议包括大小字体颜色最小化原则均是体现在细节上不过这些细节最终会影响到整体的质感 流程图和系统拓扑图的绘制要领和经验。 绘图是抽象思维能力的培养方式之一 流程图的常用符号基本结构以及实战运用 以web集群架构为案例介绍了绘制系统拓扑图的步骤 一点微薄的经验分享希望可以帮助到那些不习惯画图或者想画好图却在画图各种操作上耗费过多精力的小伙伴们。转载于:https://www.cnblogs.com/yangliheng/p/6082250.html
