這可能是一篇很多博客的讀者都期待的文章，我最終還是決定說(shuō)一說(shuō)『如何為技術(shù)文章配圖』這一話題，過(guò)去的幾年一直都有非常多的讀者在博客、微博和公眾號(hào)下面提出這樣的問(wèn)題 —— 『你的圖是用什么工具畫的？』，對(duì)于這種問(wèn)題我我一直都很少回復(fù)，一方面是因?yàn)槲以诓┛拖旅嫫鋵?shí)已經(jīng)寫明了畫圖工具：
本作品采用知識(shí)共享署名 4.0 國(guó)際許可協(xié)議進(jìn)行許可。 轉(zhuǎn)載時(shí)請(qǐng)注明原文鏈接，圖片在使用時(shí)請(qǐng)保留圖片中的全部?jī)?nèi)容，可適當(dāng)縮放并在引用處附上圖片所在的文章鏈接，圖片使用 Sketch 進(jìn)行繪制。
另一方面，我不認(rèn)為工具在幫助我們配圖時(shí)起到了決定性的作用，無(wú)論是使用 Photoshop 還是 OmniGraffle 甚至是其他的工具都能達(dá)到完全相同的效果，更加重要的其實(shí)是我們對(duì)于制圖規(guī)則的思考并形成一套自恰的體系，這篇文章就會(huì)分享一下作者在過(guò)去的幾年中是如何完成這一套制圖規(guī)則的。
概述
在理解作者對(duì)制圖規(guī)則的思考之前，我想先簡(jiǎn)單分享一下最開(kāi)始寫博客并且分享一些經(jīng)驗(yàn)和知識(shí)背后的原因，這對(duì)于作者制圖規(guī)則的形成起著比較重要的作用；國(guó)內(nèi)的大多數(shù)技術(shù)博客（包括 CSDN 在內(nèi)的一眾平臺(tái)）并沒(méi)有提供邏輯清晰、排版合理并且足夠優(yōu)雅的內(nèi)容，很多博客對(duì)于內(nèi)容的排版和設(shè)計(jì)非常糟糕，作者在查詢到國(guó)內(nèi)的資料時(shí)總有一種讀不下去和不忍直視的感覺(jué)，所以想輸出一些在內(nèi)容和排版上都相對(duì)優(yōu)質(zhì)的內(nèi)容，而圖片作為一種能夠承載大量信息的媒介和博客的重要一個(gè)組成部分自然也要做到足夠美觀和清晰。
從開(kāi)始寫博客、畫圖到今天也有 5、6 年的時(shí)間了，在這個(gè)過(guò)程中我也不斷地完善了對(duì)制圖規(guī)則的設(shè)計(jì)，其中有幾個(gè)準(zhǔn)則是非常重要的：
- 圖片必須足夠美觀并且清晰地傳達(dá)想要表現(xiàn)的內(nèi)容；
- 是技術(shù)博客中出現(xiàn)圖片的意義；
- 圖片必須能夠在短時(shí)間內(nèi)實(shí)現(xiàn)量產(chǎn)，不影響寫作的效率；
- 博客中的全部圖片都是在寫作的過(guò)程中一一繪制的，而不是最后統(tǒng)一完成的，所以會(huì)希望畫圖的時(shí)間可以盡量短，一旦畫圖的時(shí)間超過(guò)過(guò)長(zhǎng)，那么整個(gè)思路就會(huì)被打斷；
- 博客的內(nèi)容和邏輯相比于圖片更加重要，作者不希望在上面花費(fèi)過(guò)長(zhǎng)的時(shí)間；
- 圖片需要保證風(fēng)格上的一致性，不會(huì)顯得非常突兀；
- 圖片的風(fēng)格和配色對(duì)于作者來(lái)說(shuō)就是簽名，形成統(tǒng)一的風(fēng)格之后會(huì)給讀者留下比較深的印象；
這些準(zhǔn)則也是作者這么多年總結(jié)下來(lái)的，也是在整理個(gè)人制圖規(guī)則時(shí)遵循的一些指南，在文章的剩余部分，你會(huì)看到作者在對(duì)于制圖方法和風(fēng)格的變化和演進(jìn)。
演進(jìn)
博客中圖片的風(fēng)格其實(shí)也不是一開(kāi)始就像今天這樣的，現(xiàn)在博客中的大多數(shù)圖片都會(huì)使用使用 Sketch 進(jìn)行繪制，圖片的風(fēng)格非常統(tǒng)一、配色也高度一致：
不過(guò)在剛開(kāi)始為博客制作流程圖的時(shí)候還會(huì)使用 OmniGraffle、Paper 等工具，到目前為止，除了 Sketch 和 LucidChart 之外的工具作者也都不再使用了，博客上絕大多數(shù)的圖片都是 Sketch 繪制的。
OmniGraffle
剛開(kāi)始使用制作插圖時(shí)，作者還會(huì)使用 OmniGraffle 這樣的工具，它提供的功能其實(shí)比較強(qiáng)大，繪制流程圖、時(shí)序圖也非常方便，如果你對(duì)這個(gè)工具非常熟悉，也比較推薦使用它畫圖。
作者對(duì)于這個(gè)工具并不是特別熟悉，使用了一段時(shí)間還是覺(jué)得沒(méi)有 Sketch 來(lái)的順手，由于其本身的目的就是繪制流程圖、UML 圖，所以在設(shè)計(jì)上會(huì)對(duì)一些樣式做一些限制，如果覺(jué)得遵循這套限制是可以接受的話，使用 OmniGraffle 其實(shí)會(huì)有非常大的優(yōu)勢(shì)，但是作者更希望減少工具的限制，所以最終還是選擇放棄了它。
Paper
除了 OmniGraffle 之外，在一兩年前作者還會(huì)使用 Paper 這種手繪的工具畫圖，使用 Paper 為博客畫插圖其實(shí)是一件比較耗費(fèi)時(shí)間和精力的事情，但是這種風(fēng)格的圖片確實(shí)非常有辨識(shí)度，作者在 Redis 和 I/O 多路復(fù)用 中就使用這種方式繪制插圖：
雖然手繪的插圖非常有辨識(shí)度并且 Paper 默認(rèn)的風(fēng)格其實(shí)也比較美觀，但是這種類型的插圖作者沒(méi)有辦法進(jìn)行『量產(chǎn)』，而且每一張圖片都需要消耗比較多的時(shí)間，圖片的修改過(guò)程也比較麻煩，所以作者最終放棄了這種方法，不過(guò)手繪的方式確實(shí)是一種不一樣的體驗(yàn)。
除了這種圖片需要較多時(shí)間、無(wú)法量產(chǎn)之外，前期的設(shè)備投入其實(shí)也比較大，如果想要使用 Paper 進(jìn)行畫圖，iPad 和 Apple Pencil 基本上是必需品，如果不是特別熱衷于手繪的讀者并不建議使用這種方式。
LucidChart
LucidChart 其實(shí)就是用于繪制 UML 圖、流程圖的商業(yè)軟件，它其實(shí)就是 SaaS 版本的 OmniGraffle，但是與 OmniGraffle 相比，它提供的默認(rèn)配色和樣式其實(shí)看起來(lái)非常美觀，哪怕是之前沒(méi)有經(jīng)驗(yàn)的人也可以比較容易的畫出優(yōu)雅的流程圖，詳解 Kubernetes DaemonSet 的實(shí)現(xiàn)原理 中的圖片就都是通過(guò) LucidChart 進(jìn)行繪制的：
然而 LucidChart 其實(shí)是收費(fèi)軟件，免費(fèi)版限制了可以保存圖片的最大數(shù)量，作者購(gòu)買了最低價(jià)格的套餐，一年的成本大概是 60$ 左右，價(jià)格相對(duì)來(lái)說(shuō)還是比較貴的，不過(guò)非常適合經(jīng)驗(yàn)較少的博主。
國(guó)內(nèi)其實(shí)也有一些比較類似的服務(wù)，例如 ProcessOn，但是它們提供的一些樣式和設(shè)計(jì)在作者看來(lái)相對(duì) LucidChart 還是有一定距離，沒(méi)有達(dá)到作者心中對(duì)于圖片樣式要求的那根線，所以也不是特別推薦使用。
Sketch
最后要介紹的就是目前作者最常使用的工具 Sketch 了，相對(duì)于 Photoshop 來(lái)說(shuō)比較簡(jiǎn)單，它的場(chǎng)景也并不是對(duì)圖片進(jìn)行處理，更偏向于一個(gè) UI 設(shè)計(jì)工具，最開(kāi)始使用 Sketch 也是作者的一個(gè)設(shè)計(jì)師朋友推薦的，不過(guò)目前來(lái)看 Sketch 其實(shí)已經(jīng)成為了比較常用的設(shè)計(jì)工具。
Sketch 對(duì)于 UI 設(shè)計(jì)是非常友好的，它也提供了非常多的插件，相比于更專業(yè)的 Photoshop 也沒(méi)有那么復(fù)雜，使用它的一些最基本功能就完成高度定制的插圖，作為一個(gè)相對(duì)來(lái)說(shuō)比較專業(yè)并且自由的工具，作者目前在日常工作中經(jīng)常會(huì)使用 Sketch 來(lái)處理和創(chuàng)作一些圖片和插圖。
畫圖
在這一節(jié)中，作者將介紹為技術(shù)博客繪制圖片時(shí)總結(jié)的一些經(jīng)驗(yàn)，希望幫助各位讀者找到自己的制圖風(fēng)格，為技術(shù)文章繪制圖片和使用 PS 修改圖片、為 App 繪制 UI 設(shè)計(jì)圖是完全不同的，技術(shù)文章的配圖主要作用還是為了輔助說(shuō)明內(nèi)容，圖畫的再好看如果不能很好地解釋問(wèn)題都沒(méi)有太多的作用，相比于圖片的樣式，我們應(yīng)該更加關(guān)注圖片的內(nèi)容是否清晰和簡(jiǎn)單。
內(nèi)容
正如我們上面所介紹的，圖片的內(nèi)容是配圖時(shí)至關(guān)重要的，作者在一個(gè)問(wèn)題太過(guò)復(fù)雜或者連續(xù)的文字過(guò)多時(shí)，就會(huì)選擇為文章插入適合的圖片，內(nèi)容作為博客中插圖的核心，我們需要清楚地知道需要表達(dá)什么，作者將博客中的圖片簡(jiǎn)單的分成了以下三類分別用于描述和展示不同的內(nèi)容：
- 用于展示多個(gè)平等的概念時(shí)；
- 用于描述模塊以及概念之間的關(guān)系時(shí)；
- 用于描述特定場(chǎng)景下概念的特性時(shí)；
在需要展示某個(gè)問(wèn)題的多個(gè)方面、多個(gè)原因或者階段等處于相同層次的概念時(shí)就會(huì)使用如下所示的圖片：
這張圖片介紹了選擇版本控制系統(tǒng)時(shí)應(yīng)該關(guān)注的三個(gè)特性：分布式、性能和可靠性，使用列表的方式也是沒(méi)有問(wèn)題的，這只是作者的配圖習(xí)慣，而你在這篇文章稍微靠前的部分中也會(huì)看到用于展示繪圖工具的插圖，這些圖片的內(nèi)容類型都是相似的。
除了展示概念的配圖之外，作者還會(huì)使用如下所示的圖片來(lái)展示不同概念或者模塊之間的關(guān)系，流程圖、架構(gòu)圖等類型的圖片都會(huì)被作者歸到這一類中：
上述圖片展示了在分布式的版本控制系統(tǒng)中，各個(gè)倉(cāng)庫(kù)之間的樹(shù)形結(jié)構(gòu)，圖中使用不同的顏色將不同倉(cāng)庫(kù)在樹(shù)中的高度做出了區(qū)分，這種圖片能夠很好地幫助讀者理解各個(gè)模塊之間的關(guān)系，我們?cè)?LucidChart 一節(jié)中分享的圖片其實(shí)也屬于這種類型的圖片，只是使用的工具不同：
除了這兩種比較常見(jiàn)的插圖類型之外，作者在遇到一些特殊問(wèn)題時(shí)也會(huì)選擇通過(guò)圖片幫助讀者理解問(wèn)題，例如 為什么 DNS 使用 UDP 協(xié)議 中就使用了如下所示的圖片：
這張巨型圖片的主要作用就是幫助讀者理解 DNS 協(xié)議使用 TCP 或者 UDP 獲取域名解析時(shí)所需要傳輸數(shù)據(jù)的大小，通過(guò)這張圖片我們能夠比較直觀的了解不同協(xié)議在處理 DNS 協(xié)議時(shí)在數(shù)據(jù)方面的差別。
樣式
圖片的內(nèi)容是它的核心價(jià)值所在，而圖片的樣式是決定圖片是否『優(yōu)雅』的關(guān)鍵，內(nèi)容和樣式之間的關(guān)系，就是 Web 前端中 HTML 和 CSS 的關(guān)系一樣，我們?cè)谶@一節(jié)中就詳細(xì)介紹作者對(duì)于博客中圖片樣式的一些約定。
配色
圖片的配色其實(shí)非常重要，它決定了整個(gè)圖片從第一眼看過(guò)去給人的感覺(jué)，如果一個(gè)博客的配色你使用了非常長(zhǎng)的時(shí)間，這也會(huì)成為你的標(biāo)志。
每次看到其他博客中有相同配色的圖片時(shí)，都會(huì)點(diǎn)進(jìn)去看一下，大多數(shù)博客的博主都會(huì)把圖片上的水印去掉并且不加引用，對(duì)于這種行為作者也不多評(píng)論，我只是希望各位讀者在使用圖片時(shí)能夠在圖片上或者文章末尾增加引用。
作者在最開(kāi)始畫圖時(shí)都會(huì)使用不同的配色方案，但是大多數(shù)的配色如果長(zhǎng)時(shí)間使用并且每天接觸確實(shí)會(huì)有一定的審美疲勞，這時(shí)就會(huì)選擇進(jìn)行更換，你可以在通過(guò)下面的鏈接在歷史的博客中查看作者使用過(guò)的配色方案：
你可以看到作者在三年前使用的配色和畫圖方式與今天完全不同，這也是作者在實(shí)踐的過(guò)程中不斷進(jìn)行的修正，關(guān)于配色選擇可以通過(guò)一些在線的網(wǎng)站獲取，你可以使用 Coolors 這一服務(wù)生成你的配色，作者之前就是用過(guò)這一服務(wù)，選擇配色時(shí)一定要使用相對(duì)較為和諧的配色，至于是否和諧就依賴各位讀者自己的審美了。
圖片長(zhǎng)寬
很多平臺(tái)其實(shí)會(huì)限制博客的頭圖或者封面的長(zhǎng)寬比例，比如微信公眾號(hào)，這種時(shí)候我們就只能接受平臺(tái)的設(shè)定，不過(guò)對(duì)于其他圖片的長(zhǎng)寬，我們只需要注意兩個(gè)比較關(guān)鍵的問(wèn)題：
- 保證圖片的寬度一定，長(zhǎng)度不要太長(zhǎng)；
- 保證圖片的大小被合理利用；
因?yàn)榇蠖鄶?shù)人在閱讀博客時(shí)都會(huì)使用顯示器，這個(gè)時(shí)候過(guò)長(zhǎng)的圖片會(huì)影響顯示效果，很可能一頁(yè)沒(méi)有辦法展示全部的內(nèi)容，這會(huì)非常影響閱讀的體驗(yàn)，所以我們可以固定圖片的寬度，目前作者博客的圖片寬度都是 1200px，這個(gè)值的選擇與使用的平臺(tái)和博客引擎都有關(guān)系，各位讀者可以按需選擇。
對(duì)于一張圖片自然是越清晰越好，但是大圖片會(huì)消耗較多的下載資源，如果使用 CDN 服務(wù)來(lái)加速圖片的分發(fā)，這其實(shí)會(huì)影響博客的運(yùn)維成本，你的支出會(huì)與博客的訪問(wèn)量成正比，所以選擇的時(shí)候也應(yīng)該量力而行。
字號(hào)
接下來(lái)我們簡(jiǎn)單介紹一下字號(hào)的選擇，對(duì)于字號(hào)大小的選擇，我只能說(shuō)要根據(jù)情況進(jìn)行，不過(guò)作者一般會(huì)遵守以下的兩個(gè)規(guī)則（在寬度為 1200px 的圖片中），如果圖片的大小改變，字號(hào)也會(huì)相應(yīng)增減：
- 圖片標(biāo)題的字號(hào)
31px； - 圖片非標(biāo)題的字號(hào)
18~20px；
當(dāng)然我們不能排除一些極端的情況，比如文字過(guò)長(zhǎng)或者過(guò)多，遇到這種問(wèn)題時(shí)會(huì)首先考慮減少文字的數(shù)量和長(zhǎng)度，如果無(wú)法解決再縮小字號(hào)，保證圖片中文字的正常顯示。
圓角
圓角其實(shí)是一個(gè)非常有意思的設(shè)計(jì)，作者在圖片中基本不會(huì)使用直角的矩形，出現(xiàn)在圖片中的形狀都是圓形或者圓角矩形，所以對(duì)于圓角矩形也需要選擇合適的圓角。根據(jù)歷史的一些經(jīng)驗(yàn)，作者一般會(huì)選擇 15px 以下的圓角，盡可能地保證圓角不會(huì)太大也不太小，看起來(lái)相對(duì)比較柔和。
總結(jié)
希望在這篇文章之后不會(huì)有人再問(wèn)『你的圖片是用什么畫的』，因?yàn)槭褂檬裁垂ぞ卟⒉恢匾?，之前微博上有一個(gè)評(píng)論我覺(jué)得說(shuō)得特別對(duì)也特別好：
畫圖的工具并不重要，重要的其實(shí)是你應(yīng)該如何形成自己的規(guī)則體系，想要為博客配圖并不是一件困難的事情，比較困難的是長(zhǎng)期堅(jiān)持并且經(jīng)常思考，對(duì)自己形成的規(guī)則不斷改善，最終就一定能夠做好。
假如你讀到這里并且想要獲得這篇文章中的 Sketch 文件，可以關(guān)注『真沒(méi)什么邏輯』公眾號(hào)并回復(fù) Sketch，你會(huì)得到一份 Sketch 的源文件，其中包含了這篇文章中的一些插圖；如果有意愿的話，相信從這個(gè)源文件開(kāi)始你就可以構(gòu)建自己的規(guī)則了，也希望各位讀者能夠從這篇文章中有所收獲并遇到和我一樣的問(wèn)題，而我也能從相同的問(wèn)題中解脫（不太可能）。
