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