1. 為什么大部分架構(gòu)圖、流程圖讓人看得一頭霧水很多技術(shù)項(xiàng)目做到中期之后最稀缺的資源往往不是代碼注釋而是一張能讓新同學(xué)在三分鐘內(nèi)建立全局認(rèn)知的圖。diagram-design 是我在一次大規(guī)模系統(tǒng)梳理過(guò)程中被迫做出來(lái)的圖表設(shè)計(jì)方案——它不是什么酷炫的設(shè)計(jì)軟件也不要求你有平面設(shè)計(jì)功底而是一整套從信息結(jié)構(gòu)到視覺(jué)表達(dá)都有明確約定的實(shí)操方法。這篇文章把它完整記錄下來(lái)包括背后的原理、落地時(shí)選的工具鏈、一次真實(shí)的重構(gòu)過(guò)程以及那些反復(fù)踩過(guò)的坑適合經(jīng)常畫(huà)架構(gòu)圖、流程圖、時(shí)序圖但總覺(jué)得畫(huà)出來(lái)沒(méi)人看的開(kāi)發(fā)者和架構(gòu)師。先說(shuō)一個(gè)我觀察到的規(guī)律凡是團(tuán)隊(duì)協(xié)作順暢的項(xiàng)目文檔里一定有一兩張公認(rèn)的主圖凡是溝通成本高的項(xiàng)目往往就是缺一張所有人都認(rèn)的圖。圖的本質(zhì)是思維模型的投影圖亂通常意味著思維沒(méi)理順。diagram-design 這個(gè)名字看起來(lái)很樸素但它的目標(biāo)很直接——讓每一張圖都能回答三個(gè)問(wèn)題系統(tǒng)里有什么誰(shuí)和誰(shuí)有什么關(guān)系事情按什么順序發(fā)生如果畫(huà)圖前沒(méi)想清這三個(gè)問(wèn)題那畫(huà)出來(lái)的就只是裝飾過(guò)的混亂。1.1 一個(gè)反直覺(jué)的事實(shí)圖不是越滿(mǎn)越好大多數(shù)人畫(huà)圖的第一反應(yīng)是把知道的東西全部畫(huà)上去。我曾見(jiàn)過(guò)一張系統(tǒng)現(xiàn)狀圖二十多個(gè)節(jié)點(diǎn)、十幾條連線(xiàn)每個(gè)節(jié)點(diǎn)里都塞了三五行說(shuō)明文字甚至把配置文件的路徑和備注也搬了上去。結(jié)果整張圖變成一面文字墻放大三倍才能看縮小一版又什么都看不清。問(wèn)題出在人的認(rèn)知帶寬上。眼睛在快速掃視一張圖時(shí)真正在處理的信息其實(shí)很少先看大致分區(qū)再看幾個(gè)關(guān)鍵節(jié)點(diǎn)然后沿著主干連線(xiàn)走一遍。如果所有信息都用同等力度被呈現(xiàn)等于沒(méi)有重點(diǎn)。我把這種狀態(tài)稱(chēng)為信息平鋪它是圖表可讀性的頭號(hào)殺手。你可以把它類(lèi)比成一張地圖——如果每條小巷、每個(gè)店鋪、每個(gè)公交站都標(biāo)出來(lái)這張地圖就失去導(dǎo)航價(jià)值了。圖的核心價(jià)值恰恰是選擇性地放大關(guān)鍵信息主動(dòng)屏蔽次要細(xì)節(jié)。一張圖能承載的信息量是有限的所以畫(huà)圖前必須先做取舍而不是把腦內(nèi)全部存量直接傾倒到畫(huà)布上。能夠刪掉的內(nèi)容越多剩下的內(nèi)容才越值錢(qián)。1.2 四種最常見(jiàn)的廢圖每張都浪費(fèi)了團(tuán)隊(duì)的耐心這幾年我評(píng)審過(guò)的設(shè)計(jì)圖沒(méi)有一百也有八十至少有一半可以直接歸入下面四類(lèi)遇到這種圖我通常會(huì)讓作者拿回去重畫(huà)。第一種是元素堆砌圖。所有節(jié)點(diǎn)平鋪在畫(huà)布上核心服務(wù)、附屬模塊、外部系統(tǒng)混在一起大小一致、位置隨意。讀者需要自己從一堆方框里猜哪個(gè)是入口、哪個(gè)是終點(diǎn)。這種圖適合用來(lái)自我安慰顯示我畫(huà)了架構(gòu)圖實(shí)際上誰(shuí)也不想細(xì)看。第二種是箭頭亂飛圖。連線(xiàn)沒(méi)有任何布線(xiàn)規(guī)則能直走偏要繞彎能并行偏要交叉。更致命的是不同類(lèi)型的依賴(lài)關(guān)系全部用同一種實(shí)線(xiàn)箭頭表達(dá)讀者要自己推斷每條箭頭的語(yǔ)義。當(dāng)連線(xiàn)的走向和含義都需要猜測(cè)時(shí)這張圖就已經(jīng)失去溝通功能了它只是看起來(lái)在表達(dá)關(guān)系而已。第三種是彩虹圖。每個(gè)模塊一個(gè)顏色漸變、熒光、高飽和色全部上陣畫(huà)的時(shí)候覺(jué)得自己層次分明打印成黑白文檔后什么都分不清。顏色如果只是裝飾它就是噪音而不是信息。一張合格的圖應(yīng)該做到去色之后仍然可以正常閱讀。第四種是說(shuō)明書(shū)圖。作者舍不得丟掉任何信息把一整個(gè)項(xiàng)目介紹塞進(jìn)節(jié)點(diǎn)文字溢出邊界、字號(hào)縮到八號(hào)讀者要把臉貼到屏幕上才能看清。圖的優(yōu)勢(shì)是呈現(xiàn)結(jié)構(gòu)不是承載細(xì)節(jié)一旦追求信息完整性就等于放棄了圖形表達(dá)的所有優(yōu)勢(shì)。你可以對(duì)照一下手頭的圖只要命中了其中一條基本就可以認(rèn)定它在日常協(xié)作中是低效的。不必自責(zé)這是大多數(shù)人都會(huì)經(jīng)歷的階段。真正的轉(zhuǎn)折點(diǎn)是你意識(shí)到畫(huà)圖是一種可被設(shè)計(jì)的工程活動(dòng)的時(shí)候。2. diagram-design 的底層思路先定信息結(jié)構(gòu)再排視覺(jué)元素2.1 項(xiàng)目的起點(diǎn)一張無(wú)人能讀懂的全景圖我為什么非要做一個(gè)叫 diagram-design 的項(xiàng)目原因是某次線(xiàn)上問(wèn)題復(fù)盤(pán)。當(dāng)時(shí)一群人圍著一面墻上面貼著一張?zhí)柗Q(chēng)系統(tǒng)全景圖的大圖每個(gè)人都順著箭頭找鏈路找了五分鐘也沒(méi)找到一條完整通路。最后發(fā)現(xiàn)圖里三個(gè)不同的箭頭指向同一個(gè)節(jié)點(diǎn)但它們分別表達(dá)數(shù)據(jù)流向控制調(diào)用和配置依賴(lài)作者沒(méi)有做任何區(qū)分。復(fù)盤(pán)結(jié)束后我做了個(gè)決定不再依賴(lài)個(gè)人感覺(jué)畫(huà)圖而是把圖表設(shè)計(jì)當(dāng)成一個(gè)有輸入、有輸出、有規(guī)則的工程流程來(lái)對(duì)待。于是就有了 diagram-design。它本質(zhì)上是一份我私人的畫(huà)圖規(guī)范后來(lái)在幾次跨團(tuán)隊(duì)方案評(píng)審里被反復(fù)使用效果出乎意料地好——不是因?yàn)樗鄬?zhuān)業(yè)而是因?yàn)樗鼜?qiáng)迫你在動(dòng)筆之前先回答問(wèn)題。這件事給我最大的啟發(fā)是大部分圖爛不是畫(huà)圖技巧問(wèn)題而是思考順序問(wèn)題。大多數(shù)人是先拉幾個(gè)框再連線(xiàn)邊畫(huà)邊想畫(huà)完自己都不確定邏輯對(duì)不對(duì)。正確順序應(yīng)該反過(guò)來(lái)——先確保信息結(jié)構(gòu)經(jīng)得起推敲再動(dòng)手設(shè)計(jì)視覺(jué)呈現(xiàn)。2.2 三個(gè)核心維度層級(jí)、流向、邊界我把任何一張技術(shù)類(lèi)圖表都拆成三個(gè)基本面層級(jí)、流向、邊界。這三者分別回答有什么怎么走歸誰(shuí)管。層級(jí)解決的是主次問(wèn)題。一張圖必須有一眼可見(jiàn)的層級(jí)差核心節(jié)點(diǎn)視覺(jué)權(quán)重最大附屬節(jié)點(diǎn)其次外部依賴(lài)最弱。可以用尺寸、位置、容器三重手段來(lái)表達(dá)。最保險(xiǎn)的做法是讓核心服務(wù)占據(jù)畫(huà)布中央偏左的位置體量最大周邊模塊按依賴(lài)關(guān)系環(huán)繞排列而不是所有人等大小均勻排開(kāi)。圖里面所有節(jié)點(diǎn)體量都一樣時(shí)層級(jí)就消失了這就是我之前說(shuō)的信息平鋪。流向解決的是順序問(wèn)題。圖里每一個(gè)箭頭都應(yīng)該有明確語(yǔ)義是同步調(diào)用、異步消息、數(shù)據(jù)流還是物理鏈路這必須通過(guò)線(xiàn)型和圖例固定下來(lái)。更重要的是一張圖最好只有一條主流向其他都是支流。我畫(huà)圖時(shí)經(jīng)常問(wèn)自己如果整張圖只能讀懂一條路徑應(yīng)該讓讀者讀哪條那條就是主鏈路。主鏈路要盡量平直、少打斷、少交叉從入口一路通到出口。邊界解決的是歸屬問(wèn)題。哪些模塊屬于同一個(gè)業(yè)務(wù)域哪些屬于同一個(gè)部署單元哪些是外部系統(tǒng)邊界通常用容器表達(dá)——一個(gè)大圓角矩形把若干個(gè)節(jié)點(diǎn)包起來(lái)再給它一個(gè)名字。邊界畫(huà)不清楚圖里就會(huì)出現(xiàn)跨系統(tǒng)直連的假象好像不同模塊可以直接通信實(shí)際上中間還隔著一層網(wǎng)關(guān)。很多爭(zhēng)議圖本質(zhì)上是邊界畫(huà)錯(cuò)了。2.3 一套最小可行的圖形語(yǔ)言約定形狀、線(xiàn)型、色板只有原則不行必須落地成看得見(jiàn)、可復(fù)制的約定。diagram-design 里我規(guī)定了一套三件套形狀表示元素類(lèi)型線(xiàn)型表示關(guān)系類(lèi)型顏色表示歸屬或狀態(tài)。形狀方面我規(guī)定圓角矩形代表服務(wù)或模塊直角矩形代表數(shù)據(jù)存儲(chǔ)或外部系統(tǒng)菱形代表判斷分支圓柱體代表消息隊(duì)列或緩存。不要一個(gè)項(xiàng)目里出現(xiàn)七八種形狀形狀越多讀者的記憶負(fù)擔(dān)越大。只有四種每種都有明確含義配一個(gè)圖例放在圖的角落。線(xiàn)型方面實(shí)線(xiàn)表示同步強(qiáng)依賴(lài)虛線(xiàn)表示異步或弱依賴(lài)雙線(xiàn)表示物理鏈路或數(shù)據(jù)復(fù)制。這樣既能把復(fù)雜的依賴(lài)關(guān)系區(qū)分開(kāi)又不會(huì)太燒腦。配合方向還要約定箭頭只在語(yǔ)義明確時(shí)出現(xiàn)如果一條線(xiàn)只表達(dá)屬于或包含關(guān)系就可以不畫(huà)箭頭甚至用普通線(xiàn)段。顏色方面這是我踩坑最多的地方?，F(xiàn)在我的色板嚴(yán)格限制在五種以?xún)?nèi)并且每種顏色必須對(duì)應(yīng)一個(gè)圖例說(shuō)明。比如藍(lán)色表示核心鏈路灰色表示支撐組件綠色表示數(shù)據(jù)存儲(chǔ)黃色表示外部系統(tǒng)。顏色承擔(dān)語(yǔ)義不承擔(dān)裝飾。同一層級(jí)的所有節(jié)點(diǎn)顏色保持不變哪怕它們?cè)诓煌萜骼?。為了兼容黑白打印我還會(huì)在關(guān)鍵節(jié)點(diǎn)上加淺底色或邊框粗細(xì)變化確保丟掉顏色信息后依然能辨認(rèn)主次。這套約定并不復(fù)雜但它保證了團(tuán)隊(duì)里任何一個(gè)人畫(huà)出來(lái)的圖另一個(gè)人都能無(wú)障礙讀懂。約定之所以能被堅(jiān)持是因?yàn)樗挠洃洺杀緲O低——不需要查手冊(cè)只要貼在圖例區(qū)就行。比約定更重要的是它逼著你在畫(huà)圖前先問(wèn)這個(gè)元素是什么類(lèi)型這條線(xiàn)是什么關(guān)系這個(gè)顏色是什么含義問(wèn)題答完了圖心里已經(jīng)畫(huà)好一半。3. 落地工具鏈把規(guī)范固化到軟件和流程里3.1 為什么我放棄了在線(xiàn)協(xié)作白板選了開(kāi)源離線(xiàn)繪圖工具規(guī)范定得再好如果工具不支持最后還是會(huì)被拋棄。我在 diagram-design 項(xiàng)目里走了一圈彎路一開(kāi)始用的是在線(xiàn)協(xié)作白板大家都能同時(shí)編輯自帶各種便捷的容器模板看起來(lái)很適合畫(huà)架構(gòu)圖。但用了兩個(gè)月就發(fā)現(xiàn)三個(gè)問(wèn)題。第一在線(xiàn)白板的文件格式是私有的導(dǎo)出成圖片之后再想改一處細(xì)節(jié)就得回到白板里去操作無(wú)法在代碼評(píng)審里查看結(jié)構(gòu)性變更。第二多人同時(shí)編輯時(shí)很容易出現(xiàn)一人拖動(dòng)節(jié)點(diǎn)、另一個(gè)人的布局全亂的情況協(xié)作反而變成了相互干擾。第三在線(xiàn)工具的免費(fèi)額度有限一旦項(xiàng)目變大文檔數(shù)量一多要么付費(fèi)要么面臨導(dǎo)出限制。后來(lái)我換成了開(kāi)源離線(xiàn)繪圖工具文件以純文本格式保存每個(gè)節(jié)點(diǎn)、每條線(xiàn)都是可讀的文本描述。這意味著圖表文件可以直接放進(jìn)代碼倉(cāng)庫(kù)跟代碼一起走版本管理和變更評(píng)審。離線(xiàn)工具的畫(huà)布操作雖然沒(méi)那么平滑但勝在確定性高布局是你完全掌控的不會(huì)因?yàn)閯e人動(dòng)了一下畫(huà)布而全部亂套。在我這個(gè)項(xiàng)目里哪怕?tīng)奚稽c(diǎn)界面流暢度也必須換取文件可讀、可 diff、可回溯。代碼評(píng)審能把一段邏輯變更講清楚圖表為什么不能答案是完全可以前提是你選的工具愿意把文件格式開(kāi)放給你。3.2 元件庫(kù)和模板頁(yè)讓規(guī)范長(zhǎng)在工具里而不是躺在文檔里很多人定了規(guī)范就完事了放在新人文檔里吃灰。我的做法是讓規(guī)范長(zhǎng)在繪圖工具里打開(kāi)文件就能用。具體的做法是在繪圖工具里面建一個(gè)專(zhuān)門(mén)的元件庫(kù)頁(yè)把之前定義的四類(lèi)形狀、五類(lèi)線(xiàn)型、五色色板全部放到這一頁(yè)每個(gè)元件下方標(biāo)注它的用途和命名規(guī)則。真正畫(huà)圖時(shí)從元件庫(kù)里復(fù)制粘貼而不是從工具欄里從頭拖拽。這樣出來(lái)的圖形天然統(tǒng)一不存在有人用了圓角矩形、有人用了直角矩形這種半路走樣的情況。同類(lèi)型圖使用統(tǒng)一模板頁(yè)頁(yè)面尺寸統(tǒng)一圖例區(qū)固定放在右下角主標(biāo)題放在左上角版本號(hào)放在頁(yè)腳。每個(gè)模板頁(yè)里還預(yù)留了評(píng)審意見(jiàn)區(qū)讓評(píng)審人可以直接在圖上批注。模板的作用不是限制發(fā)揮而是讓每一次新畫(huà)圖都不用重新發(fā)明排版。我實(shí)測(cè)下來(lái)一旦大家習(xí)慣了這套模板新圖畫(huà)起來(lái)的速度反而比自由發(fā)揮快很多因?yàn)椴恍枰m結(jié)每個(gè)元件的樣式只需要把精力放在信息組織上。3.3 把圖表納入代碼倉(cāng)庫(kù)diff 審查解決靜默變化圖表一旦進(jìn)入代碼倉(cāng)庫(kù)就可以享受版本控制系統(tǒng)帶來(lái)的好處。我在倉(cāng)庫(kù)里專(zhuān)門(mén)建了一個(gè)目錄存放所有正式圖表文件。每次有人提交圖表變更代碼評(píng)審的 diff 頁(yè)面里能直接看到新增了一個(gè)節(jié)點(diǎn)刪除了一條連線(xiàn)某個(gè)節(jié)點(diǎn)改了顏色這種細(xì)顆粒度的變化。這比截圖對(duì)比要可靠得多因?yàn)榻貓D只能看到視覺(jué)差異看不到作者改動(dòng)的意圖。評(píng)審重點(diǎn)三件事結(jié)構(gòu)是否變化、流向是否被破壞、邊界是否移動(dòng)。如果只是新增了一個(gè)附屬節(jié)點(diǎn)那沒(méi)問(wèn)題如果把主鏈路的箭頭方向反了那就得說(shuō)明為什么。為了讓評(píng)審更省力我要求提交者必須在變更說(shuō)明里寫(xiě)清楚這次改動(dòng)的對(duì)象是層級(jí)、流向還是邊界。剛開(kāi)始團(tuán)隊(duì)成員覺(jué)得這樣太重了畫(huà)個(gè)圖還要走評(píng)審流程。但隨著圖資產(chǎn)積累得越來(lái)越多大家發(fā)現(xiàn)這套機(jī)制最大的價(jià)值是防止靜默腐化——一張圖被改著改著就偏離了原有設(shè)計(jì)但沒(méi)有人察覺(jué)。有了 diff每次變化都被記錄在案圖的演進(jìn)歷史完全透明。到今天這套流程已經(jīng)變成項(xiàng)目里約定俗成的規(guī)矩沒(méi)有人再問(wèn)為什么要為一張圖搞這么正式。4. 實(shí)戰(zhàn)把一張?jiān)囟询B技術(shù)圖改造成清晰架構(gòu)圖4.1 原圖診斷一眼看去是墻細(xì)看全是洞我拿一個(gè)真實(shí)的改造案例來(lái)說(shuō)。這是一張支付鏈路相關(guān)模塊的技術(shù)現(xiàn)狀圖畫(huà)的人其實(shí)很有耐心二十六個(gè)節(jié)點(diǎn)十六條連線(xiàn)十個(gè)不同顏色每個(gè)節(jié)點(diǎn)內(nèi)部都有一段描述文字。我第一眼看到這張圖的感覺(jué)不是內(nèi)容真多而是壓力真大。為了找出它的問(wèn)題我按 checklist 過(guò)了一遍層級(jí)關(guān)系沒(méi)有。核心服務(wù)、數(shù)據(jù)庫(kù)、第三方接口全部平鋪沒(méi)有容器沒(méi)有主次。流向語(yǔ)義沒(méi)有。實(shí)線(xiàn)、虛線(xiàn)、粗箭頭混用全都沒(méi)有圖例說(shuō)明有些線(xiàn)甚至沒(méi)有方向。邊界歸屬?zèng)]有。哪些模塊屬于同一個(gè)進(jìn)程哪些模塊屬于外部系統(tǒng)完全看不出來(lái)。顏色語(yǔ)義沒(méi)有。十個(gè)顏色純屬裝飾沒(méi)有一種顏色能讓我一眼看出這是核心鏈路。最致命的是門(mén)面節(jié)點(diǎn)里的文字無(wú)法快速定位。我嘗試從左上角開(kāi)始順著連線(xiàn)走走了三步就迷路了——因?yàn)閮蓷l線(xiàn)在中間交叉而交叉處沒(méi)有橋接標(biāo)識(shí)我無(wú)法判斷它們是各自通行還是要發(fā)生交互。這不是讀者粗心而是作者把信息結(jié)構(gòu)層面的問(wèn)題全部用視覺(jué)密度掩蓋了。4.2 重構(gòu)步驟從元素清單到最終布局我將重構(gòu)拆成六個(gè)步驟這六個(gè)步驟是 diagram-design 方法論的縮影。第一步重新列元素清單。把原圖里的所有節(jié)點(diǎn)抄出來(lái)標(biāo)注類(lèi)型哪些是服務(wù)哪些是存儲(chǔ)哪些是外部依賴(lài)哪些只是備注。刪掉備注類(lèi)和重復(fù)類(lèi)節(jié)點(diǎn)最終保留十六個(gè)必要元素。這個(gè)步驟最花時(shí)間因?yàn)樗竽銓?duì)系統(tǒng)邊界有足夠清晰的認(rèn)知。第二步劃分層級(jí)。我把十六個(gè)元素分成五組用戶(hù)入口、接入層、核心服務(wù)、數(shù)據(jù)層、外部依賴(lài)。其中用戶(hù)入口和數(shù)據(jù)層是配角核心服務(wù)是主角外部依賴(lài)只放在邊上。分組完成后再把它們放進(jìn)容器里每組一個(gè)容器容器之間有明確的邊界。第三步確定主鏈路。這張圖最核心的流程是用戶(hù)請(qǐng)求從入口進(jìn)來(lái)經(jīng)過(guò)接入層由核心服務(wù)處理落庫(kù)并返回結(jié)果。我把這條主鏈路放在畫(huà)布中央偏左從左上到右下路徑盡可能平直。主鏈路上的節(jié)點(diǎn)用核心色填充支鏈路上的節(jié)點(diǎn)用灰色填充。第四步先畫(huà)主鏈路再補(bǔ)支路。很多人習(xí)慣把所有節(jié)點(diǎn)一次性拖上來(lái)我相反一開(kāi)始畫(huà)布上只有三四個(gè)節(jié)點(diǎn)入口、核心服務(wù)、存儲(chǔ)、出口。主鏈路走通以后再逐個(gè)添加分支每加一個(gè)就檢查一次新連線(xiàn)是否會(huì)造成交叉。這個(gè)方法能控制復(fù)雜度避免一上手就陷入連通圖。第五步統(tǒng)一線(xiàn)型。同步調(diào)用用實(shí)線(xiàn)異步通知用虛線(xiàn)外部系統(tǒng)的 HTTP 調(diào)用用獨(dú)立標(biāo)注。每條線(xiàn)只保留一個(gè)含義沒(méi)有亦此亦彼的曖昧。第六步刪減文字。每個(gè)節(jié)點(diǎn)只留名稱(chēng)和一行核心說(shuō)明其他細(xì)節(jié)移到圖例或附注區(qū)。如果節(jié)點(diǎn)文字超過(guò)二十個(gè)字符就說(shuō)明該信息應(yīng)該放在文擋而不是圖里。最終呈現(xiàn)在畫(huà)布上的是十六個(gè)元素五個(gè)容器四條主鏈路線(xiàn)八條支路四種顏色。節(jié)點(diǎn)之間零交叉黑白打印后依然能分辨主次。4.3 前后對(duì)比與評(píng)審反饋從看不懂到三十秒講清改造前后的對(duì)比非常鮮明。原圖二十四號(hào)節(jié)點(diǎn)擠在 A3 畫(huà)布里信息密度極高評(píng)審會(huì)上大家的第一反應(yīng)是沉默——因?yàn)闆](méi)人敢承認(rèn)自己沒(méi)看懂。新圖出來(lái)的那天我在評(píng)審會(huì)上說(shuō)請(qǐng)大家先用三十秒看這張圖然后每人講一遍主流程。結(jié)果是每個(gè)人都講對(duì)了連新來(lái)的實(shí)習(xí)生都能順著主鏈路把請(qǐng)求全過(guò)程串下來(lái)。核心原因不是大家變聰明了而是這張圖已經(jīng)把先看什么、后看什么、什么是重點(diǎn)全部安排好了。閱讀順序就是視覺(jué)引導(dǎo)順序不再需要讀者自己去闖迷宮。這次改造也讓我意識(shí)到一個(gè)規(guī)律圖的復(fù)雜度不取決于系統(tǒng)真實(shí)復(fù)雜度而取決于作者有沒(méi)有做信息分級(jí)。同樣的系統(tǒng)有人畫(huà)成二十六個(gè)節(jié)點(diǎn)的混沌網(wǎng)有人畫(huà)成十六個(gè)節(jié)點(diǎn)的清晰分層結(jié)構(gòu)差距不在于系統(tǒng)只在于思考深度的差異。評(píng)審會(huì)上不需要夸這張圖漂亮因?yàn)樗緛?lái)就該長(zhǎng)這樣——清晰不是恩賜而是設(shè)計(jì)的結(jié)果。5. 可讀性自檢清單與踩坑記錄5.1 五條便宜又有效的自檢規(guī)則diagram-design 項(xiàng)目運(yùn)行一段時(shí)間后我沉淀出一份檢查清單。每張圖在提交前都過(guò)一遍大概能過(guò)濾掉八成以上的常見(jiàn)問(wèn)題。第一條是三秒鐘原則。把圖縮到剛好能一眼看完的大小盯著它三秒鐘能不能說(shuō)出主流程說(shuō)不出說(shuō)明圖的引導(dǎo)結(jié)構(gòu)有問(wèn)題。這一條能逼你分清主次。第二條是零交叉原則。全圖連線(xiàn)交叉數(shù)為零這是硬性要求。如果交叉不可避免至少要用橋接線(xiàn)或繞行來(lái)消除視覺(jué)歧義。交叉不是錯(cuò)讓人分不清交叉處是否發(fā)生交互才是錯(cuò)。第三條是顏色可去原則。把圖復(fù)制一份轉(zhuǎn)成灰度看看還能不能讀懂。如果信息隨著顏色一起消失了說(shuō)明你的顏色承擔(dān)了唯一表達(dá)通道而這不是所有讀者都具備的閱讀條件。第四條是圖例先于圖形原則。一張圖如果出現(xiàn)了三種以上形狀、兩種以上線(xiàn)型或三種以上顏色就必須有圖例。圖例不是附加題它是圖的一部分。第五條是字號(hào)底線(xiàn)原則。節(jié)點(diǎn)內(nèi)的文字不得小于某號(hào)字保證在 150% 縮放比例下依然可讀。為了塞更多內(nèi)容而縮小字號(hào)是止損還是注水答案通常是后者。5.2 踩過(guò)的幾個(gè)具體坑箭頭、彩虹色和圖例缺失規(guī)范不怕不完美就怕不執(zhí)行。我自己就在執(zhí)行過(guò)程中踩過(guò)不少坑。第一個(gè)坑是強(qiáng)調(diào)箭頭。我第一次畫(huà)主鏈路圖時(shí)為了突出核心流程把主鏈路的箭頭畫(huà)得特別粗還加了深色填充。結(jié)果發(fā)現(xiàn)讀者視線(xiàn)一開(kāi)始就被箭頭吸走反而忽略了箭頭兩端的節(jié)點(diǎn)——連線(xiàn)的視覺(jué)權(quán)重超過(guò)了節(jié)點(diǎn)這是本末倒置。后來(lái)我規(guī)定連線(xiàn)永遠(yuǎn)比節(jié)點(diǎn)輕強(qiáng)調(diào)手段只能作用于節(jié)點(diǎn)本身不能作用于連線(xiàn)。第二個(gè)坑是彩虹色復(fù)發(fā)了。我以為自己已經(jīng)規(guī)定了五色板結(jié)果在美化階段還是忍不住給某些模塊加了漸變填充。表面上看層次更豐富實(shí)際上漸變讓節(jié)點(diǎn)邊界變模糊打印之后更是災(zāi)難。從那以后我徹底禁止?jié)u變把色板固定在純色范圍內(nèi)。第三個(gè)坑是圖例缺失。有一次我用不同顏色區(qū)分生產(chǎn)和測(cè)試環(huán)境畫(huà)完覺(jué)得很清晰結(jié)果新同學(xué)對(duì)著圖完全懵了——他不知道紅色是生產(chǎn)還是測(cè)試因?yàn)檎麖垐D右下角沒(méi)有圖例。這個(gè)坑讓我把圖例必須存在變成了硬性要求而不是可選項(xiàng)。第四個(gè)坑是強(qiáng)制網(wǎng)格對(duì)齊。為了讓節(jié)點(diǎn)整齊我把所有方框都對(duì)齊到同一網(wǎng)格結(jié)果主鏈路被迫繞了一個(gè)大彎反而增加了連線(xiàn)交叉。整齊不應(yīng)該是形式上的而應(yīng)該服務(wù)于信息流。只要信息流清晰少量錯(cuò)位是可以接受的。5.3 多人協(xié)作下怎么保證規(guī)范不被慢慢磨掉最后是協(xié)作問(wèn)題。規(guī)范最大的敵人不是沒(méi)人讀而是這次破例沒(méi)關(guān)系。一旦破例兩次規(guī)范就名存實(shí)亡。我的做法有三個(gè)。第一默認(rèn)模板強(qiáng)制約束——所有圖從模板頁(yè)復(fù)制模板里的色板、元件、圖例區(qū)都是現(xiàn)成的想自由發(fā)揮也得多費(fèi)力氣。默認(rèn)約束比事后提醒更有效。第二圖表變更走確認(rèn)流程。哪怕很小的改動(dòng)也要走一次快速評(píng)審。這不是為了卡人而是為了保持結(jié)構(gòu)的連續(xù)性。評(píng)審人不需要審查每一處對(duì)齊只需要關(guān)注層級(jí)、流向、邊界三個(gè)維度有沒(méi)有被破壞。如果連續(xù)三次變更都沒(méi)有引起結(jié)構(gòu)問(wèn)題人就可以放行。第三定期做一次結(jié)構(gòu)化回顧大概每個(gè)月花半小時(shí)把庫(kù)里比較重要的圖重新過(guò)一遍看看有沒(méi)有出現(xiàn)信息平鋪回潮、顏色泛濫或標(biāo)注缺失的苗頭。提醒比整改成本低得多而且往往復(fù)查時(shí)就能順手修掉。很多人覺(jué)得管圖比畫(huà)圖麻煩但實(shí)際上開(kāi)始管理之后畫(huà)圖反而變輕松了——因?yàn)槊看萎?huà)圖你用的都是驗(yàn)證過(guò)的模板和元件不需要重新摸索樣式。規(guī)范不是在限制你而是在替你提前解決問(wèn)題。diagram-design 這個(gè)項(xiàng)目做下來(lái)我最深的一個(gè)體會(huì)是圖表設(shè)計(jì)的門(mén)檻從來(lái)不在工具也不在審美而在你是否愿意在動(dòng)筆之前把結(jié)構(gòu)想清楚。只要信息結(jié)構(gòu)是對(duì)的哪怕圖形樸素讀者也能讀懂信息結(jié)構(gòu)不對(duì)再漂亮的設(shè)計(jì)也只是在給混亂化妝。如果你也想開(kāi)始我的建議很簡(jiǎn)單找一張自己近期畫(huà)過(guò)的、看了頭疼的圖用本文的步驟重新做一次信息分級(jí)然后把它放到三分之一的尺寸下看看——你自己會(huì)感受到差距。