上周幫一位產(chǎn)品同學(xué)改圖改完他感嘆了一句“原來問題不在畫圖工具在畫圖的人?！边@句話讓我很想認(rèn)真聊聊 diagram-design 這件事。很多人以為圖表設(shè)計(jì)就是學(xué)會(huì)某個(gè)繪圖工具拖幾個(gè)框、連幾根線、調(diào)幾個(gè)顏色。但真正決定一張圖好壞的往往是動(dòng)手之前的判斷這個(gè)圖到底要表達(dá)什么關(guān)系讀者是誰看完之后要做什么決定這些想不清楚再熟練的操作也救不了最終的成品。這篇文章不教某個(gè)工具的按鈕在哪里而是把 diagram-design 當(dāng)作一項(xiàng)完整的技能來拆解。我會(huì)從圖表的信息層級(jí)、選型邏輯、節(jié)點(diǎn)與連線的技術(shù)細(xì)節(jié)講到代碼化落地、團(tuán)隊(duì)協(xié)作和排錯(cuò)經(jīng)驗(yàn)適合架構(gòu)師、前端開發(fā)者、產(chǎn)品經(jīng)理以及所有需要把復(fù)雜邏輯講清楚的人。1. 圖表的本質(zhì)把復(fù)雜關(guān)系變成一眼可讀的結(jié)構(gòu)1.1 為什么很多圖“看著很努力但一眼看不懂”先描述一個(gè)高頻畫面一張架構(gòu)圖畫了幾十個(gè)節(jié)點(diǎn)每個(gè)節(jié)點(diǎn)都精心加上了陰影和漸變色連接線密密麻麻中間有幾個(gè)箭頭還交叉成蝴蝶結(jié)。你盯著看了一分鐘完全不知道系統(tǒng)從哪里開始、數(shù)據(jù)往哪里流。這種圖的作者通常很認(rèn)真他把所有知道的元素都放進(jìn)去了卻沒有做減法。問題不在于勤奮程度而在于這張圖缺了三個(gè)東西信息層級(jí)、視覺流和分組邊界。人的視覺處理能力是有限的一屏信息超過一定的復(fù)雜度大腦會(huì)自動(dòng)開啟“跳過模式”。如果你的圖沒有一個(gè)主導(dǎo)性的閱讀路徑讀者就會(huì)隨意亂看然后得出結(jié)論“這圖看不懂。”我習(xí)慣把設(shè)計(jì)一張好圖類比成設(shè)計(jì)一個(gè)交通樞紐。好的樞紐一定有一眼可辨的主干道、清晰的區(qū)域劃分、合理的路牌指引。壞的樞紐就是早高峰的市中心每條路都堵每個(gè)路口都在打結(jié)誰進(jìn)來誰迷路。圖表設(shè)計(jì)本質(zhì)上就是在紙面上修建一個(gè)讓人不走錯(cuò)路的交通系統(tǒng)。1.2 信息層級(jí)的三層金字塔我第一次意識(shí)到信息層級(jí)的重要性是某次評(píng)審會(huì)上。當(dāng)時(shí)我畫了一張訂單系統(tǒng)的鏈路圖自認(rèn)為該畫的都畫了。結(jié)果架構(gòu)師只看了一眼就問“主流程是哪條失敗分支在哪”我一時(shí)指不出來——因?yàn)槲野殉晒β窂胶彤惓Ｂ窂疆嫷靡荒Ｒ粯哟?。后來我給自己定了一個(gè)規(guī)則任何一張圖都必須有三層信息層級(jí)。頂層是主骨架。也就是這張圖要講述的核心敘事。拿訂單系統(tǒng)來說主骨架就是“下單請(qǐng)求從客戶端進(jìn)來經(jīng)過網(wǎng)關(guān)、訂單中心、支付中心最后落到數(shù)據(jù)庫”。這條路徑上的節(jié)點(diǎn)和連線必須在一秒鐘內(nèi)被發(fā)現(xiàn)。第二層是模塊分組。也就是輔助理解的次要結(jié)構(gòu)。比如把訂單中心內(nèi)部拆成創(chuàng)建訂單、訂單狀態(tài)機(jī)、超時(shí)關(guān)單這幾個(gè)子模塊用分組框或者背景色把它們?nèi)ζ饋?。這層信息負(fù)責(zé)讓讀者快速知道“哪些東西是一伙的”。第三層才是節(jié)點(diǎn)細(xì)節(jié)。比如某個(gè)服務(wù)的實(shí)例數(shù)量、某個(gè)接口的超時(shí)時(shí)間、某個(gè)數(shù)據(jù)表的分片鍵。這類信息重要但它是補(bǔ)充性的絕不應(yīng)該搶主骨架的風(fēng)頭。每次畫圖前先用一句話寫下主骨架“這張圖講的是______從______到______的完整過程?！边@句話寫不出來說明你自己還沒想清楚后面的圖畫得再漂亮也沒用。1.3 視覺流人眼掃圖是有固定順序的人的閱讀習(xí)慣基本是固定的橫向從左到右縱向從上到下這是由文字閱讀習(xí)慣塑造的。即使到了圖紙上這個(gè)慣性依然存在。所以圖的內(nèi)容排布應(yīng)該順著這個(gè)自然方向而不是反著來。我曾經(jīng)收到過一張網(wǎng)絡(luò)拓?fù)鋱D主數(shù)據(jù)流是從右往左走的。原因僅僅是作者覺得“右邊空、左邊擠”于是把源頭放右邊。結(jié)果所有評(píng)審的人看第一眼都摸錯(cuò)方向被迫看了三遍才能跟上。這就是違反視覺流的典型代價(jià)。除了左右上下還有一個(gè)流是“從對(duì)比度高的地方開始”。人的眼睛會(huì)被高對(duì)比度的元素吸引。所以主路徑上的節(jié)點(diǎn)應(yīng)該用更高的亮度和更重的字體輔助節(jié)點(diǎn)則要主動(dòng)降低存在感。留白也一樣主路徑與周圍元素之間留出足夠空隙等于在說“這里是主角別忽略我”。這些細(xì)節(jié)單看都很小疊加起來就是“看得懂”和“看不懂”的差別。2. 圖表類型的選型模型先想清楚你在表達(dá)什么關(guān)系2.1 六種常見關(guān)系與圖表的對(duì)應(yīng)關(guān)系很多錯(cuò)誤源于工具使用不規(guī)范但更多錯(cuò)誤源于一開始就選錯(cuò)了圖表類型。流程圖、架構(gòu)圖、時(shí)序圖、樹形圖它們各自擅長表達(dá)的關(guān)系是完全不同的。我把日常最常見的六種關(guān)系整理成下表要表達(dá)的關(guān)系合適的圖表類型典型場景先后順序、步驟流轉(zhuǎn)流程圖 / 泳道圖業(yè)務(wù)流程、審批流、發(fā)布流程層級(jí)歸屬、父子結(jié)構(gòu)樹形圖 / 組織結(jié)構(gòu)圖組織架構(gòu)、類繼承、目錄結(jié)構(gòu)組件依賴、調(diào)用關(guān)系有向圖 / 拓?fù)鋱D服務(wù)依賴、模塊依賴、網(wǎng)絡(luò)拓?fù)鋾r(shí)間順序、消息傳遞時(shí)序圖 / 甘特圖接口調(diào)用鏈、版本排期空間歸屬、模塊組成架構(gòu)圖 / 嵌套關(guān)系圖系統(tǒng)架構(gòu)、子系統(tǒng)劃分、頁面布局反饋回路、動(dòng)態(tài)行為因果回路圖 / 系統(tǒng)圖容量規(guī)劃、成本分析、循環(huán)依賴分析每當(dāng)你準(zhǔn)備畫圖先不要打開工具停下來問自己我要畫的這一堆東西之間本質(zhì)上是什么關(guān)系如果它們存在嚴(yán)格的先后順序那就老老實(shí)實(shí)畫流程圖如果它們只是系統(tǒng)組成部分的靜態(tài)陳列那就用架構(gòu)圖。把這兩者混在一起是新手最常犯的錯(cuò)誤。流程圖里塞進(jìn)部署細(xì)節(jié)架構(gòu)圖里畫上箭頭表示跳轉(zhuǎn)時(shí)序最后兩邊都沒講清楚。2.2 流程圖與架構(gòu)圖的本質(zhì)區(qū)別一次真實(shí)教訓(xùn)某次我負(fù)責(zé)沉淀一個(gè)支付對(duì)賬的流程說明想展示“用戶支付、平臺(tái)確認(rèn)、渠道回調(diào)、對(duì)賬完成”這四個(gè)步驟。我當(dāng)時(shí)的做法是畫了一個(gè)四分塊的架構(gòu)圖把每個(gè)步驟當(dāng)成一個(gè)模塊方框結(jié)果評(píng)審時(shí)被連續(xù)追問“這一步失敗之后走哪條路”“這一步里的超時(shí)重試是哪個(gè)模塊負(fù)責(zé)的”我完全答不上來。原因是架構(gòu)圖擅長表現(xiàn)“什么組件放在哪個(gè)位置”它回答的是靜態(tài)的空間問題流程圖擅長表現(xiàn)“事件如何一步步發(fā)生”它回答的是動(dòng)態(tài)的時(shí)間問題。你在圖里畫了一條從支付到對(duì)賬的連線這個(gè)“動(dòng)作”本身就是流程語義但架構(gòu)圖的布局邏輯是空間歸屬不適合承載動(dòng)作的流轉(zhuǎn)。那次以后我嚴(yán)格給自己立了一個(gè)規(guī)矩含有“先后”或“如果”語義的內(nèi)容一律用流程圖純描述元素構(gòu)成和劃分的內(nèi)容才用架構(gòu)圖。這個(gè)簡單的分類標(biāo)準(zhǔn)消除了我當(dāng)時(shí)工作中一半以上的制圖混亂。2.3 泳道圖的適用場景與繪制細(xì)節(jié)泳道圖是流程圖的一個(gè)升級(jí)版本它在縱向或橫向上增加了一條條泳道用來區(qū)分不同角色、系統(tǒng)或時(shí)間階段的責(zé)任范圍。它的核心價(jià)值不是“好看”而是把“誰負(fù)責(zé)什么”這件事寫進(jìn)圖里。畫泳道圖時(shí)最常見的坑是把參與方給弄混。比如一個(gè)退款流程表面上涉及用戶、商戶端、支付網(wǎng)關(guān)、財(cái)務(wù)系統(tǒng)但實(shí)際上支付網(wǎng)關(guān)內(nèi)部還有“風(fēng)控模塊”“清算模塊”“渠道適配模塊”三個(gè)子角色。到底泳道按系統(tǒng)分還是按角色分我的經(jīng)驗(yàn)是圖是給誰看的就按誰的關(guān)注點(diǎn)分。如果是給業(yè)務(wù)方看泳道按角色分如果是給開發(fā)看泳道按系統(tǒng)分。泳道里的連線也容易混亂。交互線一般用實(shí)線箭頭表示一次請(qǐng)求返回線用虛線箭頭表示回調(diào)或響應(yīng)消息通知可以用點(diǎn)畫線。不要覺得這些線型規(guī)定很死板實(shí)際上正是這種約定讓一張復(fù)雜的多角色流程圖能夠被快速切分和理解。我還見過一個(gè)反面案例一張圖里所有線都是實(shí)線還全都是同一個(gè)顏色結(jié)果讀者根本分不清“誰先發(fā)起誰能結(jié)束”整個(gè)圖變成了一團(tuán)解不開的面條。3. 節(jié)點(diǎn)、連線與布局最容易被忽視的三個(gè)技術(shù)細(xì)節(jié)3.1 節(jié)點(diǎn)設(shè)計(jì)形狀、尺寸、語義的統(tǒng)一確定好圖表類型之后才輪到具體的繪制細(xì)節(jié)。第一步是定義節(jié)點(diǎn)的視覺規(guī)范。我見過很多圖同一個(gè)圖里矩形圓角半徑就有好幾種字體大小五花八門不同層級(jí)的節(jié)點(diǎn)尺寸毫無規(guī)則看起來就像把不同系統(tǒng)導(dǎo)出的截圖硬拼在了一張畫布上。推薦的起點(diǎn)是一套圖里最多使用三種節(jié)點(diǎn)尺寸。主要節(jié)點(diǎn)是承載主路徑的比如網(wǎng)關(guān)、核心服務(wù)使用最大尺寸并加粗邊框次要節(jié)點(diǎn)是輔助模塊使用標(biāo)準(zhǔn)尺寸裝飾性節(jié)點(diǎn)比如外部依賴、數(shù)據(jù)存儲(chǔ)使用稍小尺寸。形狀上同理主路徑節(jié)點(diǎn)統(tǒng)一用圓角矩形決策點(diǎn)用菱形外部實(shí)體用圓柱體或者直角矩形保證每種形狀承載一種且僅一種含義。顏色系統(tǒng)也需要事先約定。主色不超過一種用于主路徑的強(qiáng)調(diào)輔助色一到兩種用于區(qū)分不同大組的背景狀態(tài)色只用于表示異常、告警等特殊情況中性色用于普通節(jié)點(diǎn)的填充和邊框。色板總控制在五色以內(nèi)圖面立刻干凈很多。再補(bǔ)一個(gè)實(shí)用技巧畫完之后把圖轉(zhuǎn)成灰度再看一遍如果灰度下依然能分清層級(jí)說明這套配色是健康的。3.2 連線實(shí)線、虛線、粗細(xì)與交又的隱秘密語連線的可讀性比節(jié)點(diǎn)更容易被低估。線條的樣式本身是一種信息。實(shí)線表示確定的調(diào)用或依賴虛線表示異步、可選或異常路徑粗線代表主鏈路的高流量或高優(yōu)先級(jí)。只要這套規(guī)則統(tǒng)一讀者就能從線型上直接獲取信息而不必看每一個(gè)箭頭旁邊的注釋。交叉最小化是我在做網(wǎng)絡(luò)拓?fù)鋱D時(shí)最頭疼的部分。一個(gè)好的自動(dòng)布局算法會(huì)在意交叉數(shù)的最小化但大部分手動(dòng)調(diào)整的圖連線交叉反而越來越嚴(yán)重。這里給出幾條實(shí)操心法節(jié)點(diǎn)排布盡量對(duì)齊在少數(shù)幾條水平或垂直基線上減少出線方向的隨機(jī)性。連線避免銳角折彎直角折線比任意角度曲線更容易閱讀。長距離連線盡量沿畫布邊緣走不要橫穿中心區(qū)域。當(dāng)一條連線無法避免跨過另一個(gè)節(jié)點(diǎn)時(shí)給它加上“跨橋”或留出空隙而不是直接壓在節(jié)點(diǎn)上。我曾經(jīng)維護(hù)過一張服務(wù)依賴圖節(jié)點(diǎn)超過三十個(gè)依賴線多達(dá)七十條。剛畫完時(shí)幾乎每五條線就有一個(gè)交叉被合作同事戲稱“意大利面圖”。后來我花了整整一個(gè)下午把所有長線改成沿上下邊緣繞行交叉數(shù)從十二個(gè)降到了兩個(gè)。那次修改讓整張圖的可讀性上了不止一個(gè)臺(tái)階。3.3 自動(dòng)布局算法淺析為什么工具排出來的圖還是歪的很多圖表工具都內(nèi)置了“自動(dòng)布局”功能但自動(dòng)排出來的結(jié)果往往不盡如人意。原因在于自動(dòng)布局是一個(gè)全局優(yōu)化問題它試圖在有限的畫布空間里讓交叉最少、邊距均勻、布局緊湊但這些目標(biāo)本身可能存在沖突。工具并不知道哪條路徑是你真正想強(qiáng)調(diào)的主路徑。常見的布局算法主要有三類。一類是力導(dǎo)向布局模擬物理世界中節(jié)點(diǎn)之間的斥力和引力適合無層級(jí)關(guān)系的網(wǎng)絡(luò)圖但結(jié)果隨機(jī)性強(qiáng)每次刷新都可能變化。第二類是分層布局核心思想來自分層繪畫算法把節(jié)點(diǎn)按層次從上游到下游縱向排開然后最小化同一層內(nèi)部的交叉非常適合流程圖和有向依賴圖。第三類是正交布局所有連線都是水平或垂直的直角線段適合架構(gòu)圖和網(wǎng)絡(luò)拓?fù)鋱D。實(shí)際畫圖時(shí)我的做法是先讓工具自動(dòng)布局跑一個(gè)初始版本然后手動(dòng)鎖定重要節(jié)點(diǎn)的位置再微調(diào)關(guān)鍵路徑。完全靠手工從零擺布大圖不現(xiàn)實(shí)完全靠自動(dòng)布局又難以表達(dá)主次。最重要的原則是自動(dòng)布局永遠(yuǎn)要為人的敘事服務(wù)而不是反過來遷就算法。4. 從手繪到生產(chǎn)diagram-design 工具鏈的實(shí)戰(zhàn)選型4.1 輕量手繪階段別急著上重型工具畫圖這件事有一個(gè)反過來的直覺越是重要的圖越應(yīng)該先用粗笨的方式起步。我自己的流程永遠(yuǎn)是先拿白板或一張草稿紙用框、箭頭和簡單的文字把主骨架畫出來。這個(gè)階段的目標(biāo)是快速驗(yàn)證信息結(jié)構(gòu)而不是追求像素級(jí)美觀。如果第一版就直接在專業(yè)工具里精雕細(xì)琢你會(huì)發(fā)現(xiàn)修改成本高得嚇人。挪一個(gè)節(jié)點(diǎn)可能帶動(dòng)二十條連線跟著亂調(diào)一層顏色可能需要手動(dòng)改幾十個(gè)對(duì)象。而紙上的改動(dòng)成本幾乎是零刪了重畫也就幾秒鐘。等到白板上的結(jié)構(gòu)基本穩(wěn)定各部分之間不再需要大改動(dòng)的時(shí)候再遷移到數(shù)字化工具里做精修。這個(gè)順序能省下的時(shí)間保守估計(jì)也有兩倍以上。我見過一個(gè)團(tuán)隊(duì)人人都直接在重型工具里開畫結(jié)果一天過去了一半的時(shí)間都花在“移動(dòng)節(jié)點(diǎn)時(shí)連線跟著亂飛”和“撤銷操作把布局也撤沒了”這類事情上。4.2 開發(fā)者向的繪圖方式代碼即圖當(dāng)你需要畫一張需要長期維護(hù)的圖時(shí)純手工繪制就會(huì)變成一種負(fù)擔(dān)。因?yàn)樾枨笠蛔兪止D就要全盤返工。代碼化繪圖的思路應(yīng)運(yùn)而生把圖表定義寫成結(jié)構(gòu)化文本用工具自動(dòng)渲染成圖形。這類方案的好處非常明顯。第一它可以進(jìn)版本庫每次修改都有歷史記錄能 diff能回滾團(tuán)隊(duì)評(píng)審時(shí)可以清晰看到“上次和這次到底改了什么”。第二它可以用純文本維護(hù)批量生成、模板化修改都很方便。第三它不依賴某個(gè)圖形編輯器的私有格式跨工具遷移的成本很低。不過代碼即圖也有明顯門檻。它適合繪制規(guī)則的、結(jié)構(gòu)化的圖比如流程、架構(gòu)、樹形關(guān)系但不太適合那種需要大量自由布局和精細(xì)排版的宣傳圖或概念圖。它對(duì)于數(shù)據(jù)驅(qū)動(dòng)的圖有天然優(yōu)勢你只要改一個(gè) JSON 文件里的幾個(gè)節(jié)點(diǎn)屬性整張圖就會(huì)自動(dòng)重排這在手工繪制中是不可想象的。4.3 交互式圖表與定制化渲染的工程落地再往前一步是那些需要內(nèi)嵌到產(chǎn)品里的動(dòng)態(tài)圖表。這類需求通常是要把業(yè)務(wù)數(shù)據(jù)實(shí)時(shí)映射到圖形上比如展示集群的健康狀況、任務(wù)調(diào)度的依賴關(guān)系、甚至某個(gè)實(shí)時(shí)流程的當(dāng)前狀態(tài)。這種圖就不是“畫一次就完事”了它需要被一個(gè)渲染引擎反復(fù)更新。我在實(shí)現(xiàn)這類功能時(shí)第一步一般是定一個(gè) JSON Schema節(jié)點(diǎn)有什么字段邊有什么字段狀態(tài)用什么枚舉值。然后渲染引擎負(fù)責(zé)把這份 Schema 映射成圖形元素。節(jié)點(diǎn)顏色、邊框粗細(xì)、線型這些屬性都應(yīng)該由數(shù)據(jù)狀態(tài)驅(qū)動(dòng)而不是手繪時(shí)拍腦袋決定。這種模式之下圖表的可維護(hù)性其實(shí)轉(zhuǎn)移到了數(shù)據(jù)模型設(shè)計(jì)上。如果你的 Schema 設(shè)計(jì)得好新增一種節(jié)點(diǎn)類型或者一種邊關(guān)系只需擴(kuò)展枚舉值而不需要改動(dòng)渲染代碼。如果 Schema 設(shè)計(jì)得不好每次需求變化都要?jiǎng)愉秩具壿嬆蔷妥兂闪肆硪环N“手工維護(hù)”只不過把拖鼠標(biāo)換成了寫代碼。5. 進(jìn)階實(shí)戰(zhàn)我把一張“會(huì)呼吸”的運(yùn)維拓?fù)鋱D從零畫完的心得5.1 需求梳理先寫一份“圖的需求說明書”有一次某基礎(chǔ)架構(gòu)團(tuán)隊(duì)找過來“幫我們畫一張運(yùn)維拓?fù)鋱D。”我說好然后問了一個(gè)問題“這張圖要給誰看要幫他做什么決定”對(duì)方愣了幾秒回答說“就是……把我們現(xiàn)有的服務(wù)都畫出來吧?！边@句話是典型的需求黑洞。把服務(wù)都畫出來最后一定是一張能糊住整面墻的巨型蜘蛛網(wǎng)誰也看不懂。于是我用半天時(shí)間陪他們做了一次需求拆解最后得到的有效需求是這張圖服務(wù)于故障排查讀者是值班運(yùn)維人員核心訴求是當(dāng)一條鏈路的某個(gè)環(huán)節(jié)出問題時(shí)能在一分鐘之內(nèi)找到它影響的上游和下游。需求搞清楚之后圖的范圍直接縮小了三分之二有些邊緣服務(wù)根本不需要畫進(jìn)來有些內(nèi)部細(xì)節(jié)可以折疊成單個(gè)節(jié)點(diǎn)。我基于這段話寫了一份簡單的“圖的需求說明書”內(nèi)容包括圖的讀者、核心問題、必須包含的節(jié)點(diǎn)類型、必須體現(xiàn)的依賴關(guān)系、哪些信息可以省略。有了這份說明書后面每一次修改都變得很有據(jù)可依。5.2 第一版草圖百分之七十五的時(shí)間應(yīng)該花在草圖上明確需求后我并沒有直接開畫正式圖。而是在草稿紙上先畫了三個(gè)版本第一版按機(jī)房維度排布第二版按業(yè)務(wù)鏈路維度排布第三版按故障影響維度排布。畫完三個(gè)草稿之后反復(fù)對(duì)照需求最終選了第三版因?yàn)楣收吓挪閳鼍跋掳础坝绊戞湣苯M織信息最直接。這道工序容易被忽略但價(jià)值極大。草圖階段的目標(biāo)不是把圖畫好而是把結(jié)構(gòu)試探清楚。一張復(fù)雜圖如果第一版的結(jié)構(gòu)就是錯(cuò)的后面所有精修都是白費(fèi)。我當(dāng)時(shí)估算過最終整張圖的總耗時(shí)里草圖和結(jié)構(gòu)調(diào)整占了大約百分之七十五這還不包括需求梳理的時(shí)間。真正在工具里“畫”的時(shí)間反而是小頭。草圖階段還有一個(gè)容易被忽略的點(diǎn)順手在圖的角落記錄那些“要不要保留”的待定項(xiàng)。比如某個(gè)監(jiān)控指標(biāo)是否展示、某個(gè)跨機(jī)房鏈路是否用特殊顏色標(biāo)記。這些待定項(xiàng)如果不在草圖階段記下來等圖畫到一半再發(fā)現(xiàn)返工成本就高了。5.3 復(fù)用與模板化把畫圖經(jīng)驗(yàn)沉淀成團(tuán)隊(duì)規(guī)范當(dāng)同一類圖在團(tuán)隊(duì)里需要反復(fù)產(chǎn)出時(shí)我們不能接受每個(gè)人各畫各的。顏色的意義不統(tǒng)一、線型的語義不一致、節(jié)點(diǎn)形狀隨心所欲這些會(huì)讓團(tuán)隊(duì)協(xié)作層面的可讀性大打折扣。我在做過幾次模板化整理之后沉淀了一份圖標(biāo)繪規(guī)范內(nèi)容大概包括節(jié)點(diǎn)類型與形狀的映射表、顏色使用的層級(jí)約定、連線樣式的語義約定、畫布內(nèi)間距標(biāo)準(zhǔn)。規(guī)范本身不用很長兩三頁就夠但它能保證這些圖換一個(gè)人來維護(hù)閱讀體驗(yàn)依然一致。另一個(gè)重要的沉淀是組件庫。把常用的節(jié)點(diǎn)樣式、常用的分組背景、常用的圖例存成可復(fù)用的模板新圖可以直接拖用。這看起來像偷懶實(shí)際上是對(duì)外部一致性的提升也能極大減少重復(fù)勞動(dòng)。某次我畫了一張新業(yè)務(wù)流程圖從組件庫里拖了不到十幾次就完成了初稿比從零開始快了將近四倍。5.4 代碼化與評(píng)審協(xié)作讓圖變成團(tuán)隊(duì)資產(chǎn)把圖源文件放進(jìn)代碼倉庫是我這幾年最受益的實(shí)踐經(jīng)驗(yàn)之一。圖不再是一個(gè)孤立的圖片文件而是可以評(píng)審、可以追溯、可以復(fù)用的工程資產(chǎn)。圖一旦入庫圖表評(píng)審的方式也會(huì)發(fā)生變化。評(píng)審時(shí)不再只看最終效果圖而是看結(jié)構(gòu)文本的 diff。這樣評(píng)審意見會(huì)落在具體的節(jié)點(diǎn)定義和連線關(guān)系上而不是流于“這個(gè)顏色不好看”“這個(gè)位置有點(diǎn)偏”這類表面反饋。還要考慮多人協(xié)作時(shí)的命名規(guī)范。圖內(nèi)每個(gè)節(jié)點(diǎn)都應(yīng)該有清晰的標(biāo)識(shí)符路徑分組也應(yīng)該語義化。我的習(xí)慣是“模塊名.子模塊.節(jié)點(diǎn)名”的命名風(fēng)格比如“payment.gateway.timeout”。這樣即使一張圖里有幾十個(gè)節(jié)點(diǎn)大家也能快速定位討論目標(biāo)而不是說“右上角那個(gè)藍(lán)色的框”。版本管理方面建議每次結(jié)構(gòu)的重大調(diào)整新建一個(gè)版本分支而不是在原圖上不斷覆蓋。因?yàn)閳D畫到后期經(jīng)常會(huì)出現(xiàn)“新方案試了一下效果不好想退回舊方案”的情況。沒有版本管理就只能靠撤銷操作一遍遍倒退效率很低。6. 高頻踩坑清單與自檢表6.1 十個(gè)人類常踩的坑每一坑都來自真實(shí)經(jīng)歷下面列出的十個(gè)坑基本是我和身邊同事反復(fù)踩過的合集。第一坑節(jié)點(diǎn)文字角度旋轉(zhuǎn)。為了節(jié)省空間把文字豎排或旋成45度讀者必須歪著脖子看圖。正確做法是保持文字水平空間不夠就換行或者縮小字號(hào)。第二坑只用顏色表達(dá)唯一信息。紅色表示異常色盲同事根本分不清。正確的做法是除了顏色還要加上線型、圖標(biāo)或文字標(biāo)注等伴隨信息。第三坑把線連到節(jié)點(diǎn)的中心而不是邊緣?？雌饋硐翊┻^節(jié)點(diǎn)的“貫穿線”尤其當(dāng)多個(gè)線同時(shí)連到中心時(shí)視覺上完全分不清。第四坑過早開始美化。陰影、漸變、描邊加了一堆結(jié)構(gòu)還是亂的本末倒置。第五坑過度使用圓角。大圓角會(huì)讓嚴(yán)肅的架構(gòu)圖顯得過于“可愛”而且圓角本身就帶有風(fēng)格暗示容易引導(dǎo)錯(cuò)誤情緒。第六坑圖層順序混亂。輔助網(wǎng)格線、背景分區(qū)蓋住了節(jié)點(diǎn)或者注釋文字壓在連線上細(xì)節(jié)區(qū)一片狼藉。第七坑箭頭方向不一致。同一張圖有的邊箭頭表示數(shù)據(jù)流方向有的表示調(diào)用方向有的表示依賴方向不統(tǒng)一就很容易誤讀。第八坑節(jié)點(diǎn)數(shù)量失控。一個(gè)圖里放過多節(jié)點(diǎn)信息密度過高。超過十個(gè)主要節(jié)點(diǎn)的圖建議考慮拆分。第九坑缺少圖例。線型、顏色、圖標(biāo)都是有語義的但你不在圖上寫明讀者只能靠猜。一張有質(zhì)量的圖必須自帶圖例默認(rèn)讀者是完全不了解這套語義的。第十坑把畫圖當(dāng)最后一件事。很多項(xiàng)目把畫圖安排在快交付時(shí)趕工趕出來的圖幾乎無法用于溝通。圖應(yīng)該和代碼、文檔同步演進(jìn)從設(shè)計(jì)階段就開始畫每輪迭代同步更新。6.2 發(fā)布之前的十分鐘自檢表每張圖在發(fā)給別人看之前我建議花十分鐘過一遍這份自檢清單。檢查項(xiàng)判斷標(biāo)準(zhǔn)備注信息層級(jí)是否清晰一秒內(nèi)能否找到主骨架找不到就調(diào)整粗細(xì)、顏色和留白主路徑是否一眼可見核心節(jié)點(diǎn)和連線是否最顯眼必要時(shí)把輔助節(jié)點(diǎn)變灰連接線是否有歧義線型和箭頭方向是否統(tǒng)一轉(zhuǎn)彎和交叉是否讓人誤解信息密度是否適中一屏幕能否快速讀完超過承受范圍考慮拆分圖顏色是否可辨轉(zhuǎn)成灰度還能分清層次只依賴顏色必須修正必要標(biāo)注是否齊全圖例、單位、時(shí)間等信息沒有圖例的圖不以發(fā)布這十分鐘換來的是讀者第一次看圖時(shí)少糾結(jié)三次。相比一遍遍被問“你這里是什么意思”這個(gè)檢查表的時(shí)間投入回報(bào)很高。6.3 如何訓(xùn)練自己的“圖感”最后聊聊我怎么練圖感。這一步很多人會(huì)忽略但它恰恰是從“能畫圖”進(jìn)階到“畫好圖”的分水嶺。訓(xùn)練方法有三個(gè)。第一個(gè)是拆圖練習(xí)找一張優(yōu)秀的架構(gòu)圖或流程圖不直接看整體而是先遮住局部嘗試回答三個(gè)問題第一層主骨架是什么第二層分組規(guī)則是什么第三層哪些細(xì)節(jié)是必須保留的把別人的圖拆到能重建的程度你就能內(nèi)化它的設(shè)計(jì)邏輯。第二個(gè)是評(píng)審式看圖的習(xí)慣。參加團(tuán)隊(duì)評(píng)審時(shí)不要只關(guān)注業(yè)務(wù)結(jié)論還要關(guān)注圖表呈現(xiàn)方式為什么這條線要這樣拐為什么這個(gè)模塊放在左上角每一次“為什么”都是一次圖感訓(xùn)練。第三個(gè)是主動(dòng)迭代。同一張圖逼自己畫出三種不同結(jié)構(gòu)方案。在第一次方案里按流程順序排布第二次按里程碑階段排布第三次按角色分組排布。三種方案各有優(yōu)劣最終哪怕用回第一版你也已經(jīng)對(duì)自己“為什么不用別的方案”有了清晰答案。這三件事堅(jiān)持三個(gè)月你再看舊圖會(huì)明顯感覺到原來那些引以為傲的作品里哪些地方值得修改哪些地方一旦調(diào)整立刻就會(huì)變得更好。等到了這個(gè)階段畫圖就不再是一個(gè)操作任務(wù)而是一種真正能輔助決策的思維工具了。我在帶團(tuán)隊(duì)時(shí)最常對(duì)新人說的一句話是“圖不是畫得越多越好而是每一條線都要有它存在的理由?！眲h掉一條線你能不能解釋為什么可以刪保留一條線你能不能解釋為什么必須留。拿起筆和放下筆之間多問自己這兩個(gè)為什么你畫出的圖會(huì)有截然不同的質(zhì)量。