出色的 PPT 不管是对述职晋级,还是技术分享,都有很大的助力作用。出色的 PPT,往往包含大量的图。图能生动形象的把事情讲清楚,一图胜千言。

本文是面向程序员的,介绍开发相关领域的做图技法。想点亮做图技能的,不妨来看看~

做图技法

做图分为三步:内容,呈现,优化。
outline.jpg

内容

内容是图的根本。为了画图而画图,就像“少年不知愁滋味,为赋新词强说愁”。因此,做图首先想清楚要表达的内容。从描述的内容中,提炼主体和主体之间的关系

举个例子,我们要介绍 Vue。Vue 官网的介绍如下:

Vue:渐进式 JavaScript 框架。

易用:已经会了 HTML、CSS、JavaScript?即刻阅读指南开始构建应用!。

灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。

高效:20kB min+gzip 运行大小;超快虚拟 DOM;最省心的优化。

我们可以初步提炼出主体:Vue,简介,易用及描述,灵活及描述,高效及描述。

content-vue-1.png

进一步提炼,可以将易用,灵活,高效归类为 Vue 的优点。将优点的描述,提炼成一些关键字。

content-vue-2.png

主体之间都是从属关系。

呈现

想清楚要表达的内容后,下面做的是选择合适的呈现方式。本文介绍的是适合用图来呈现内容的场景。

流程图

流程图:以特定的图形符号加上说明,表示算法的图。

流程图适合呈现信息,内容等的流动。主体之间有先后关系。常用流程图来呈现算法。下图描述了二分法求解方程的算法:
process.jpg

泳道图也叫跨职能流程图,是一种特殊的流程图。泳道图是在流程图的基础上,添加了职能的维度。如,下图描述了饿了么的订餐流程:
yongdao.jpeg

画流程图,推荐几个工具:

PressOn

专业强大的作图工具,支持多人实时在线协作,可用于原型图、UML、BPMN、网络拓扑图等多种图形绘制。

官网: https://www.processon.com/

上面的两个图,都是用 PressOn 做的。

diagrams.net

Security-first diagramming for teams.
Bring your storage to our online tool, or go max privacy with the desktop app.

官网: https://www.diagrams.net

diagrams.net 以前叫 draw.io。VS Code 有个集成 draw.io 的插件,通过它,可以在 VSCode 中使用 draw.io 来画图。如下图所示:

drawio.jpg

插件地址:https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Markdown Preview Mermaid Support

Adds Mermaid diagram and flowchart support to VS Code’s builtin markdown preview

插件地址:https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid&ssr=false

这是一个 VSCode 插件,通过它,可以用 Markdown 的拓展语法来画流程图:

渲染效果:
mermaid-1.jpg

复制一点的例子

渲染效果:

mermaid-2.jpg

架构图

架构图:用来描述整体结构与其组成部分关系的图。

架构图适合来呈现一个大的结构,以及组成部分的关系。比如:业务架构、应用架构、数据架构和技术架构。下面是一个前后端分离的架构图
structure.png

推荐文章:《一文看懂架构图怎么画》(https://zhuanlan.zhihu.com/p/269201440)。

可以用 Keynote,Power Point 来画架构图。架构图主要以一些矩形,文字组成,用 Keynote 可以完全胜任。
keynote.jpg

下图也是用 Keynote 画的:

image.png

思维导图

思维导图又叫心智导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种革命性的思维工具。

思维导图适合呈现主体间有从属,关联关系的信息。

content-vue-2.png

下面推荐几个画思维导图的工具

MindNode

MindNode 最大的优点是漂亮,缺点是只支持 Mac。本文的思维导图,都是有这画的。付费版支持多款主题:

nodemind-1.jpg
nodemind-2.jpg

官网: https://mindnode.com/

XMind

a full-featured mind mapping and brainstorming tool, designed to generate ideas, inspire creativity, brings efficiency both in work and life. Millions and millions of people love it.

官网: https://www.xmind.net/

其他

其他的图还有很多,如:UML 图,饼图,折线图,甘特图等。这里就不做一一介绍了。推荐个网站:

图之典

可视化图表的词典。
简单易用的图表词典,为你的学习和工作提供科学的可视化建议。

地址: http://tuzhidian.com/introduce

优化

最后,我们对图做些优化。优化的方向包括:排版配色

排版

好的排版应该符合四大原则:对齐原则,对比原则,重复原则,亲密原则。

对齐原则

对齐指:任何元素都不能在页面上随意安放,每一项都应当与页面上的某个内容存在某种视觉联系。

align.jpeg

对齐能让内容规整有序、严谨美观。常规情况下,我们将内容做左对齐即可。

推荐文章:《设计太乱?“对齐”原则肯定没学会》(https://zhuanlan.zhihu.com/p/112299210)

对比原则

对比指:强调两个或者两个以上事物之间的差异性。

duibi.jpeg

对比可以让内容主次分明,突出重点。做图时常用的对比有:大小,颜色。

推荐文章:《画面太平?你学会对比原则了吗》(https://zhuanlan.zhihu.com/p/108677853)

重复原则

重复指:视觉要素要重复出现。功能上一样的内容,应该用相同的 UI。

重复可以加强一致性。处处不一样的图,给人的感觉是东拼西凑的,会看得非常难受。比如下图:
not-repeat.jpg

推荐文章:《你会用“重复原则”来设计排版吗?》(https://www.shejidaren.com/chongfu-yuanze-paiban.html)

亲密原则

亲密指: 指彼此相关的项应当靠近。

亲密原则和就近原则是一个意思。亲密原则,就是分类,把相似的内容放在一起。亲密原则可以让内容显得井井有条。

推荐文章:《利用“亲密性”原则,让排版不再散乱》(https://www.shejidaren.com/qinmi-xing-yuan-ze.html)

配色

配色指:色彩的搭配。

不同的色彩带给人不同的视觉效果,从而产生不同的心理感受。通过合理的配色,能更好的体现想表现的内容。做好配色,要学习色彩理论和配色方法。偷懒一点,可以直接从配色网站上选:

推荐阅读:《知乎问题:如何学习配色?》(https://www.zhihu.com/question/22148127)

设计入门书籍推荐

推荐我以前看过的一本书,内容通俗易懂,读起来很轻松。
design-book.jpeg

最后

本文比较笼统的介绍了做图的技法。后面,我会针对常见的图(流程图,思维导图等),做一些深入的内容~

关注公众号: 前端GoGoGo,助你升职加薪~