/

技术配图的色彩选择与组件设计

该篇文章首发于boyn.top,转载请声明

为什么技术文章需要配图

我们在网上看很多技术文章的时候,通常离不开三个元素:文字,图片和代码

在其中,文字是起到主要的说明作用的,比如说主题,对某个知识的讲解以及详细的说明.而图片则是一个辅助的功能(但是有时也会占到重要的部分),它的作用是辅助文字的说明,让读者对概念更加清晰,且有的时候对架构,流程进行绘图,会更加清晰,甚至起到文字所不能达到的表达能力.而代码则是处于可有可无的地步,这主要取决于文章的内容.当文章的主题比较细化,比如是某一些技术问题,某一些细化的知识点的时候,直接展示代码,会更加容易解决问题.但是当文章比较理论化,展示的内容抽象程度很高的时候,很有可能不会展示出具体的代码,而可能使用伪代码进行替代.

综上所述,技术文章对于图片的依赖度还是很高的,一篇好的技术文章,其技术深度固然需要有,但是好的配图也是必不可少的,它既可以帮助作者在写作的时候梳理思路,也可以帮助读者更好地理解作者的意思.

关于我的配图方案

  • 在一开始的时候,我的绘图主要是iPad + Apple Pencil + Notability的三件套,也就是手绘作图.这种方式,实话实说,十分糟糕.问题在于,首先我自己画的并不怎么好,而且画出一张图需要非常久的时间,后面也就逐渐放弃这种方法了.

  • 后面曾经用过一些Draw.io,ProcessOn还有亿图等工具,他们都是十分优秀的工具,但是对于我来说,还是比较单调了.而且可能是我不太会用的原因,他们的组件化做的并不好,无法让所有的图形成统一的风格.所以也只是用了一段时间,他们的风格就像这样

  • 所以现在使用的工具叫做Sketch(Mac Only),为什么它好呢? 首先,他的组件化做的非常好,可以将组件有效地组织起来放到一个库中,我们在另外的文件中,可以直接对组件库进行引用,直接拿取成熟的组件.同时,我们还可以在网上找到许多成熟的组件库直接使用.其次,它用起来很顺手,这种感觉是非常主观的,但是在我使用的时候,并不会感觉到他的复杂性,但是又可以体会到其功能的丰富,或许这就是软件设计的哲学吧.在使用的时候,有一种能够搭建一切设计的感觉,这也是这款软件带给我的第一感觉,所以直到现在,还一直在用这款软件进行技术配图的输出.

我的配色与设计

配色

在我的知识体系中,是没有色环这个概念的(笑),我对颜色的把控力并不高,所以以自己的标准完成配色方案并不现实.好在现在有许多网站能给出很多优雅大方的配色方案.在这里我为大家推荐一个可以选择配色方案的网站,Coolor,这篇文章的封面图就是这个网站的首页,他里面涵盖了很多的配色方案,可以随机挑选一个,也可以自己打开库挑选

设计

由于对于软件的使用只是刚刚起步,还是有许多不明白的地方,所以我目前只有一些比较简单的设计方案,以供大家参考与批评.

考虑到我的博客主题是技术分享,难免会画出一些架构图和运行的组件图,所以确定了主要元素是圆角矩形和圆形,同时伴以固定格式的文本与标题形式.

可以改进的地方

其实如大家所见,我现在所作出的组件库还是比较简陋的,里面的元素非常少.后面可以作出更多的改进,比如做一个流程图模板,时序图模板等等.良好的开始就是成功的一半!加油吧~

参考文章

  1. https://draveness.me/sketch-and-sketch 技术文章配图指南

关于图片和转载

知识共享许可协议
本作品采用知识共享署名 4.0 国际许可协议进行许可。 转载时请注明原文链接,图片在使用时请保留图片中的全部内容,可适当缩放并在引用处附上图片所在的文章链接,图片使用 Sketch 进行绘制,你可以在 技术文章配图指南 一文中找到画图的方法和素材。