1. 從diagram-design這個標(biāo)題能讀出什么第一次看到diagram-design這個標(biāo)題我的直覺是這不是一個單純的畫圖工具教程也不是某個具體軟件的說明書而是一個關(guān)于如何設(shè)計圖表的方法論項目。標(biāo)題本身由兩個詞組成——diagram圖表和design設(shè)計中間用連字符連接這種命名方式在技術(shù)圈里通常意味著一個工具庫、一個設(shè)計系統(tǒng)、或者一套關(guān)于圖表設(shè)計的實踐框架。我之所以這么判斷是因為如果只是畫流程圖標(biāo)題大概率會寫成flowchart-tutorial或者draw-io-guide如果只是講配色可能會叫color-scheme-for-charts。但diagram-design把圖表和設(shè)計并列說明它關(guān)注的核心問題是圖表不只是把信息畫出來而是要設(shè)計出來。這兩者之間的差別恰恰是很多技術(shù)從業(yè)者容易忽略的地方。大多數(shù)人畫圖表的習(xí)慣是這樣的打開工具拖幾個框連幾條線填上文字導(dǎo)出圖片完事。這個過程里設(shè)計的成分幾乎為零。但真正讓一張圖表好用的往往不是工具用得多熟練而是你在畫之前想清楚了什么、畫的過程中取舍了什么、畫完之后驗證了什么。diagram-design這個項目要解決的就是把這套想清楚—取舍—驗證的流程顯性化、可復(fù)用。這篇文章適合三類人看第一類是需要頻繁畫架構(gòu)圖、流程圖、時序圖的技術(shù)從業(yè)者第二類是做技術(shù)文檔、產(chǎn)品文檔、方案匯報的文檔工作者第三類是任何覺得自己畫的圖總是不夠清楚的人。不管你是用專業(yè)繪圖工具還是隨手用在線白板這套思路都能直接遷移過去。接下來我會從圖表設(shè)計的底層邏輯講起然后拆解一套可落地的設(shè)計流程再針對幾種常見圖表類型給出具體的實操方法最后分享一些我在實際項目中踩過的坑和總結(jié)出來的技巧。整篇內(nèi)容不綁定任何特定工具因為工具會過時但設(shè)計圖表的思維方式不會。2. 圖表設(shè)計的底層邏輯為什么你畫的圖別人看不懂2.1 圖表的本質(zhì)是降低認(rèn)知負(fù)荷不是展示信息很多人畫圖表時的心態(tài)是我要把我知道的都畫上去這其實是一個根本性的誤區(qū)。圖表的本質(zhì)不是信息展示而是認(rèn)知負(fù)荷的轉(zhuǎn)移。什么意思一段文字描述一個系統(tǒng)架構(gòu)讀者需要在大腦里逐句解析、建立關(guān)聯(lián)、形成整體印象這個過程的認(rèn)知負(fù)荷很高。而一張好的圖表是把這種在大腦里建立關(guān)聯(lián)的工作提前由畫圖的人完成了讀者只需要看就能理解。所以判斷一張圖表好不好標(biāo)準(zhǔn)不是信息全不全而是讀者看懂它需要花多少腦力。我見過太多架構(gòu)圖框框線線密密麻麻每個框里塞滿了文字箭頭交叉得像蜘蛛網(wǎng)。畫的人覺得自己很嚴(yán)謹(jǐn)?shù)吹娜说谝环磻?yīng)是我不想看。這就是典型的認(rèn)知負(fù)荷沒有轉(zhuǎn)移反而增加了。這里有一個很實用的檢驗方法把圖發(fā)給一個不了解這個項目的人看他多久能說出這張圖在講什么。如果超過30秒還說不清楚那這張圖的設(shè)計就是失敗的。注意我說的是說出這張圖在講什么不是看懂每個細(xì)節(jié)。好的圖表應(yīng)該讓人先抓住主干再按需深入細(xì)節(jié)。2.2 視覺層級決定閱讀順序閱讀順序決定理解效率人眼看圖不是隨機(jī)的而是被視覺層級引導(dǎo)的。什么是視覺層級就是圖中哪些元素更重、哪些更輕。顏色深的重顏色淺的輕大的重小的輕實線的重虛線的輕有邊框的重?zé)o邊框的輕。這些輕重關(guān)系組合起來就形成了一條隱形的閱讀路徑。問題在于很多人在畫圖時完全沒有意識到自己在建立視覺層級。所有框一樣大所有線一樣粗所有文字一樣黑結(jié)果就是讀者不知道先看哪里。我見過一張微服務(wù)架構(gòu)圖二十多個服務(wù)框大小完全一致顏色完全一致連線粗細(xì)也完全一致。這張圖的信息量其實很大但因為沒有視覺層級讀者只能一個一個框去讀效率極低。正確的做法是先確定這張圖要傳達(dá)的核心信息是什么然后讓核心信息在視覺上最重。比如你要講的是用戶請求經(jīng)過網(wǎng)關(guān)分發(fā)到三個核心服務(wù)那么網(wǎng)關(guān)和這三個核心服務(wù)就應(yīng)該用更深的顏色、更大的框、更粗的線其他輔助服務(wù)、監(jiān)控組件、日志系統(tǒng)就應(yīng)該用淺色、小框、細(xì)線甚至放到圖的邊緣位置。2.3 圖表的留白和對齊比你想的重要得多這一條是我踩過坑之后才真正重視的。剛開始畫圖時我總想把空間填滿覺得留白是浪費(fèi)。后來發(fā)現(xiàn)留白恰恰是讓圖表呼吸的關(guān)鍵。一張圖如果元素擠在一起讀者的眼睛會疲勞理解速度會下降。適當(dāng)?shù)牧舭啄茏尣煌畔K之間形成自然的邊界讀者不需要額外的線條或顏色就能區(qū)分它們。對齊也是同樣的道理。人的眼睛對不對齊非常敏感哪怕只差幾個像素也會讓人覺得哪里不對勁。而這種不對勁會消耗讀者的注意力讓他們分心去處理這種不適感而不是專注于內(nèi)容。所以我在畫圖時有一個習(xí)慣畫完之后把所有元素框選一遍用對齊工具統(tǒng)一對齊。這個動作花不了幾秒鐘但效果立竿見影。提示如果你用的工具沒有對齊功能那就手動把元素拖到參考線附近。大多數(shù)工具都有智能參考線拖到接近對齊位置時會自動吸附。2.4 顏色不是裝飾是信息編碼很多人選顏色憑感覺這個藍(lán)色好看就用這個。但在圖表設(shè)計里顏色是一種信息編碼手段。同一類元素用同一種顏色不同類元素用不同顏色這是最基本的用法。更進(jìn)一步顏色的深淺可以表示層級或權(quán)重顏色的冷暖可以表示狀態(tài)或類別。我常用的一個原則是主色不超過三種輔助色不超過兩種。主色用于區(qū)分主要類別輔助色用于標(biāo)注特殊狀態(tài)比如警告、異常、待辦。顏色太多讀者記不住反而增加認(rèn)知負(fù)擔(dān)。另外顏色的選擇要考慮色盲用戶紅綠色搭配要盡量避免可以用藍(lán)橙、紫黃這類對比。還有一個容易被忽略的點(diǎn)背景色和前景色的對比度。我見過有人在淺灰色背景上放淺藍(lán)色文字看起來很高級但實際閱讀時非常費(fèi)勁。對比度不夠讀者需要更用力地辨認(rèn)這又回到了認(rèn)知負(fù)荷的問題。一般來說正文文字和背景的對比度至少要達(dá)到4.5:1這個標(biāo)準(zhǔn)在大多數(shù)設(shè)計規(guī)范里都有。3. 一套可落地的圖表設(shè)計流程3.1 第一步先寫圖表的中心句再動手畫這是我從寫作里借來的方法。寫文章之前先寫中心句畫圖表之前也先寫中心句。所謂中心句就是用一句話說清楚這張圖要表達(dá)什么。比如這張圖展示用戶從下單到支付的完整流程或者這張圖對比三種方案的性能差異。為什么這一步重要因為如果沒有中心句你畫著畫著就會跑偏。本來想畫流程圖結(jié)果畫著畫著開始補(bǔ)充異常處理又畫著畫著開始加監(jiān)控點(diǎn)最后變成了一張四不像。有了中心句你就有了一個判斷標(biāo)準(zhǔn)這個元素和中心句有關(guān)嗎無關(guān)就刪掉。我自己的習(xí)慣是把中心句寫在畫布的最上方畫完之后再刪掉。這樣在整個繪制過程中我隨時能看到自己的目標(biāo)。這個方法看起來很簡單但實際用起來效果非常好尤其是畫復(fù)雜圖表的時候。3.2 第二步用紙筆先畫草圖別急著打開工具這一步很多人會跳過直接打開工具開始拖框。但我的經(jīng)驗是在紙上畫草圖的速度比在工具里快五到十倍。因為紙上沒有對齊、沒有樣式、沒有顏色你只能專注于結(jié)構(gòu)。而結(jié)構(gòu)恰恰是圖表設(shè)計里最重要的部分。草圖階段要確定的是有幾個主要模塊、模塊之間怎么連接、信息流向是什么、哪些是核心哪些是輔助。這些確定之后再打開工具你就是在翻譯草圖而不是在探索結(jié)構(gòu)。翻譯的速度遠(yuǎn)快于探索。我一般會用一張A4紙橫過來先用鉛筆畫出大概的布局。畫錯了就擦掉重來一張紙可以畫三四個版本。等確定了最終版本再打開工具。這個過程可能只花十分鐘但能省下后面反復(fù)調(diào)整的一兩個小時。3.3 第三步確定視覺層級給元素排座次草圖確定結(jié)構(gòu)之后接下來要做的是給元素排座次。哪些是一級元素最重要哪些是二級元素次重要哪些是三級元素輔助。排完座次之后用視覺手段把座次體現(xiàn)出來。具體來說一級元素用最大的框、最深的顏色、最粗的線二級元素用中等大小的框、中等深度的顏色、中等粗細(xì)的線三級元素用小框、淺色、細(xì)線。這樣讀者一眼就能看出哪些是重點(diǎn)。這里有一個常見的誤區(qū)把所有元素都當(dāng)成一級元素。我見過很多圖每個框都很大每個顏色都很深結(jié)果就是沒有重點(diǎn)。記住重點(diǎn)之所以是重點(diǎn)是因為有非重點(diǎn)的襯托。如果所有東西都是重點(diǎn)那就沒有重點(diǎn)。3.4 第四步統(tǒng)一視覺規(guī)范別讓細(xì)節(jié)毀掉整體視覺規(guī)范包括字體、字號、顏色、線寬、圓角、間距、箭頭樣式。這些東西單獨(dú)看都很小但組合起來決定了圖表的整體質(zhì)感。我見過內(nèi)容很好但視覺很亂的圖問題往往就出在這些細(xì)節(jié)上。我的做法是在開始畫之前先定一套規(guī)范。比如字體統(tǒng)一用某個無襯線字體一級元素字號16二級14三級12線寬統(tǒng)一用2px箭頭統(tǒng)一用實心三角圓角統(tǒng)一用4px同類元素之間的間距統(tǒng)一用20px。定好之后整個繪制過程都遵守這套規(guī)范。這樣做的好處是圖表看起來會很整。即使內(nèi)容復(fù)雜讀者也會覺得這張圖很專業(yè)。而專業(yè)感本身就能降低讀者的認(rèn)知負(fù)荷因為他們不需要花精力去處理視覺上的不一致。3.5 第五步畫完之后冷處理再回來檢查這一步是我個人覺得最有用的。畫完一張圖之后不要馬上發(fā)出去先放一放。去喝杯水或者做點(diǎn)別的事過半小時再回來看。這時候你會有一種陌生人視角能發(fā)現(xiàn)很多剛才沒注意到的問題。我經(jīng)常在冷處理之后發(fā)現(xiàn)某個箭頭指錯了方向、某個文字有錯別字、某個顏色對比度不夠、某個元素沒有對齊。這些問題在剛畫完時因為自己知道自己想表達(dá)什么而自動忽略了但讀者沒有這個背景他們會直接看到這些問題。如果時間允許我還會把圖發(fā)給一個同事讓他看一眼然后告訴我第一眼看到了什么。如果他的回答和我的中心句一致說明圖的設(shè)計是成功的如果不一致那就需要調(diào)整。4. 幾種常見圖表類型的設(shè)計要點(diǎn)4.1 架構(gòu)圖分層是王道但別為了分層而分層架構(gòu)圖是最常見的圖表類型之一也是最容易畫亂的。我的經(jīng)驗是架構(gòu)圖的核心是分層但分層要服務(wù)于表達(dá)不能為了分層而分層。常見的分層方式有按邏輯分層接入層、業(yè)務(wù)層、數(shù)據(jù)層、按部署分層客戶端、服務(wù)端、存儲、按職責(zé)分層展示、邏輯、存儲。選擇哪種分層方式取決于你要表達(dá)什么。如果你要講的是請求怎么流轉(zhuǎn)那就按邏輯分層如果你要講的是系統(tǒng)部署在哪里那就按部署分層。分層之后每一層內(nèi)部也要有結(jié)構(gòu)。我通常會把同一層的元素放在同一個水平帶里用淺色背景區(qū)分不同層。層與層之間用箭頭連接箭頭的方向表示調(diào)用或數(shù)據(jù)流向。這里要注意箭頭不要太多。如果兩個層之間有大量交互不要畫十幾條箭頭而是用一條粗箭頭加文字說明。還有一個細(xì)節(jié)跨層調(diào)用怎么畫。比如業(yè)務(wù)層的某個服務(wù)直接調(diào)用了數(shù)據(jù)層的某個組件這條線如果直接畫會穿過中間層看起來很亂。我的做法是用虛線并且盡量走圖的邊緣避免穿過其他元素。4.2 流程圖主干要清晰分支要收斂流程圖的難點(diǎn)在于分支。一個流程如果有五六個分支畫出來很容易變成一團(tuán)亂麻。我的處理原則是主干用粗線分支用細(xì)線主干走中間分支走兩側(cè)分支盡量收斂不要發(fā)散。具體來說先畫出主流程用一條粗線從左到右或從上到下貫穿。然后畫分支分支從主干上引出用細(xì)線并且盡量讓分支在某個節(jié)點(diǎn)重新匯入主干。如果分支太多可以考慮把次要分支折疊起來用文字說明此處有異常處理詳見XXX。另外流程圖里的判斷節(jié)點(diǎn)菱形不要太多。我見過一張圖有十幾個判斷節(jié)點(diǎn)讀者根本跟不下來。一般來說一張流程圖里的判斷節(jié)點(diǎn)不超過五個超過的話就應(yīng)該拆成多張圖。4.3 時序圖參與者要少消息要編號時序圖用來展示交互過程核心是誰在什么時候發(fā)了什么消息。設(shè)計時序圖時我遵循兩個原則參與者不超過五個消息必須編號。參與者太多圖會變得很寬讀者需要左右掃視很累。如果確實有超過五個參與者可以考慮把一些次要參與者合并或者拆成多張圖。消息編號是為了讓讀者能按順序閱讀尤其是在有異步消息或并發(fā)消息的時候編號能幫助讀者理清順序。時序圖還有一個容易忽略的點(diǎn)激活條生命線上的矩形。激活條表示對象在處理消息的時間段畫好激活條能讓讀者看出哪些對象在什么時候是活躍的。很多人畫時序圖時忽略激活條結(jié)果圖看起來就是一堆箭頭缺少時間維度的信息。4.4 對比圖維度要統(tǒng)一差異要突出對比圖用來比較兩個或多個方案。設(shè)計對比圖時最重要的是維度統(tǒng)一。你不能拿A方案的性能和B方案的成本比那不是對比那是混淆。所有被比較的對象必須在同一組維度下比較。維度確定之后用表格或分組柱狀圖來呈現(xiàn)。表格適合精確對比柱狀圖適合直觀對比。如果差異很明顯可以用顏色或標(biāo)注突出差異如果差異不明顯就不要強(qiáng)行突出否則會誤導(dǎo)讀者。我個人的偏好是能用表格就用表格。表格的信息密度高讀者可以快速掃描。柱狀圖雖然直觀但精度不夠而且當(dāng)維度較多時柱狀圖會變得很擁擠。5. 我在實際項目中踩過的坑5.1 坑一為了好看犧牲了好讀剛開始做圖表設(shè)計時我特別追求好看。用漸變、用陰影、用立體效果覺得這樣才高級。結(jié)果有一次把一張架構(gòu)圖發(fā)給團(tuán)隊評審大家的反饋是太花哨了看不清重點(diǎn)。我當(dāng)時還挺不服氣覺得他們不懂審美。后來自己把圖打印出來看才發(fā)現(xiàn)問題漸變和陰影讓元素的邊界變得模糊讀者需要花更多精力去辨認(rèn)每個元素的輪廓。從那以后我給自己定了一個規(guī)矩圖表的第一目標(biāo)是好讀第二目標(biāo)才是好看。在保證好讀的前提下再考慮美觀。而且我發(fā)現(xiàn)真正好讀的圖表往往本身就是好看的。簡潔、對齊、留白這些讓圖表好讀的原則同時也是讓圖表好看的原則。5.2 坑二文字太多把圖表當(dāng)文檔寫這個坑我踩了很多次。每次畫圖時總覺得這個信息很重要要寫上那個信息也不能漏也寫上。結(jié)果一個框里塞了五六行文字整張圖看起來像一篇文檔。后來我學(xué)到一個方法圖表里的文字只寫關(guān)鍵詞詳細(xì)說明放到圖外的注釋里。比如一個服務(wù)框里面只寫服務(wù)名不寫它的職責(zé)、接口、依賴。這些信息可以放在圖下方的說明里或者用編號標(biāo)注在圖外展開。這樣做的好處是圖表本身保持清爽讀者能快速抓住結(jié)構(gòu)需要細(xì)節(jié)時再去看注釋。這其實就是漸進(jìn)式披露的思路先給讀者一個概覽再按需提供細(xì)節(jié)。5.3 坑三忽略讀者的背景知識有一次我給一個非技術(shù)背景的團(tuán)隊畫系統(tǒng)架構(gòu)圖用了很多技術(shù)術(shù)語比如網(wǎng)關(guān)負(fù)載均衡消息隊列。畫完之后團(tuán)隊負(fù)責(zé)人跟我說圖很漂亮但我看不懂。我當(dāng)時才意識到我默認(rèn)讀者有技術(shù)背景但實際上他們沒有。從那以后我在畫圖之前會先問自己這張圖的讀者是誰他們知道哪些概念不知道哪些概念如果讀者是非技術(shù)背景我就會把技術(shù)術(shù)語替換成業(yè)務(wù)術(shù)語或者加一些簡單的類比。比如網(wǎng)關(guān)可以寫成統(tǒng)一入口消息隊列可以寫成任務(wù)排隊區(qū)。這個坑的本質(zhì)是知識的詛咒你知道的東西你會默認(rèn)別人也知道。但實際情況往往不是這樣。所以畫圖時要有意識地問自己如果我不知道這個項目我能看懂這張圖嗎5.4 坑四不重視圖表的版本管理這個坑比較隱蔽但影響很大。我早期畫圖時每次修改都是直接在原圖上改改完之后覆蓋保存。結(jié)果有一次需要回退到之前的版本發(fā)現(xiàn)已經(jīng)找不到了。還有一次團(tuán)隊里兩個人同時改一張圖最后合并時沖突了花了很多時間才理清。后來我養(yǎng)成了一個習(xí)慣每次修改圖表都另存為一個新版本并在文件名里標(biāo)注日期和修改內(nèi)容。比如架構(gòu)圖-v2-20240115-增加緩存層。這樣既能追溯歷史也能避免沖突。如果工具支持版本歷史很多在線工具都支持那就更好直接利用工具的能力。6. 幾個能立刻用上的實操技巧6.1 用灰度測試檢查視覺層級畫完圖之后把圖轉(zhuǎn)成灰度大多數(shù)工具都有這個功能或者截圖后用圖片編輯工具去色。如果轉(zhuǎn)成灰度之后你依然能一眼看出哪些是重點(diǎn)、哪些是輔助說明視覺層級是清晰的如果轉(zhuǎn)成灰度之后所有元素都混在一起說明你過度依賴顏色來建立層級一旦顏色去掉層級就消失了。這個方法我經(jīng)常用尤其是畫復(fù)雜圖表的時候。它能幫我發(fā)現(xiàn)顏色掩蓋了結(jié)構(gòu)問題的情況。6.2 用瞇眼測試檢查整體布局把圖縮小或者瞇著眼睛看。如果瞇眼之后能看出圖的大致結(jié)構(gòu)比如分成幾塊、主干在哪里說明整體布局是合理的如果瞇眼之后只看到一團(tuán)模糊說明布局太碎缺少整體感。這個方法的原理是瞇眼會過濾掉細(xì)節(jié)只留下大塊的明暗和形狀。如果大塊的明暗和形狀是有組織的說明布局有整體感如果是雜亂的說明需要調(diào)整。6.3 用三色原則控制顏色數(shù)量前面提到過主色不超過三種輔助色不超過兩種。具體操作時我會先選一個主色比如藍(lán)色然后選一個輔助色比如橙色用于強(qiáng)調(diào)再選一個中性色比如灰色用于輔助元素。這樣整個圖表的顏色就控制在三種以內(nèi)看起來會很干凈。如果需要區(qū)分更多類別我會用同一主色的不同深淺而不是引入新的顏色。比如深藍(lán)、中藍(lán)、淺藍(lán)這樣既區(qū)分了類別又保持了整體感。6.4 用對齊工具統(tǒng)一元素位置這個技巧很簡單但效果很好。畫完圖之后把所有同類元素框選用對齊工具統(tǒng)一對齊左對齊、居中對齊、頂對齊等。如果工具沒有對齊功能就手動拖到參考線附近。對齊之后圖表會立刻顯得整很多。我見過很多圖表內(nèi)容其實不錯但因為元素沒有對齊看起來就是業(yè)余。對齊這個動作花不了幾秒鐘但能顯著提升圖表的專業(yè)感。6.5 用編號圖例處理復(fù)雜關(guān)系如果圖表里的關(guān)系很復(fù)雜比如多個模塊之間有多種交互可以考慮用編號圖例的方式。具體來說在圖上用數(shù)字標(biāo)注每個關(guān)系然后在圖下方用文字說明每個數(shù)字代表什么。這樣圖本身可以保持簡潔復(fù)雜的關(guān)系放在圖例里展開。這個方法特別適合架構(gòu)圖和流程圖。我畫過一張微服務(wù)架構(gòu)圖服務(wù)之間有十幾種調(diào)用關(guān)系如果全畫成箭頭圖會亂得沒法看。后來我用編號標(biāo)注圖下方列出每種調(diào)用的說明效果很好。7. 關(guān)于圖表設(shè)計我最后想分享的幾點(diǎn)體會圖表設(shè)計這件事說到底是一個翻譯的工作。你把腦子里的結(jié)構(gòu)、邏輯、關(guān)系翻譯成視覺語言讓讀者能看懂。翻譯得好不好不取決于你用了多高級的工具而取決于你有沒有站在讀者的角度想問題。我做了這么多年圖表最大的體會是好的圖表是改出來的不是畫出來的。第一版往往有問題第二版好一些第三版才差不多。所以不要指望一次畫好要留出修改的時間。我現(xiàn)在的習(xí)慣是重要圖表至少改三版第一版畫結(jié)構(gòu)第二版調(diào)視覺第三版做檢查。另一個體會是圖表設(shè)計的能力是可以刻意練習(xí)的。每次看到好的圖表就分析它為什么好每次看到不好的圖表就分析它哪里可以改進(jìn)。時間長了你會形成一種直覺看到一張圖就知道哪里有問題。這種直覺比任何工具技巧都值錢。還有一個容易被忽略的點(diǎn)圖表是要維護(hù)的。系統(tǒng)在變圖表也要跟著變。我見過太多過期的圖表畫的時候是對的但半年后系統(tǒng)改了圖表沒更新結(jié)果誤導(dǎo)了讀者。所以我在項目里會指定圖表的維護(hù)人每次系統(tǒng)變更時同步更新圖表。這個習(xí)慣看起來麻煩但能避免很多溝通成本。最后說一個我自己的小習(xí)慣我會建一個圖表庫把自己畫過的所有圖表分類存起來。下次畫類似的圖時可以參考之前的不用從零開始。這個庫里有架構(gòu)圖、流程圖、時序圖、對比圖每類都有幾個模板。用的時候稍微改改就能用效率很高。圖表設(shè)計不是什么高深的技術(shù)但它確實需要用心。你多花十分鐘想清楚結(jié)構(gòu)讀者就能少花十分鐘理解。這個投入產(chǎn)出比怎么算都劃算。