1. 從一張草圖到一套系統(tǒng)diagram-design 到底在解決什么問題第一次聽到 “diagram-design” 這個詞很多人會下意識覺得它只是“畫圖”的另一種說法。但真正在項(xiàng)目里被圖表折磨過的人都知道畫一張圖不難難的是讓圖成體系、可維護(hù)、能復(fù)用。diagram-design 要處理的正是從“隨手畫一張”到“設(shè)計(jì)一套圖表語言”之間的那段鴻溝。我在過去幾年里參與過不少需要大量圖示的項(xiàng)目從系統(tǒng)架構(gòu)說明、業(yè)務(wù)流程梳理到給非技術(shù)同事講清楚一個數(shù)據(jù)流轉(zhuǎn)邏輯。早期我的做法很原始打開繪圖工具拖幾個框連幾條線導(dǎo)出 PNG貼進(jìn)文檔。結(jié)果就是每次需求一變圖就得重畫同一個系統(tǒng)在不同文檔里長得完全不一樣新人接手時光看懂那些風(fēng)格各異的圖就要花掉半天。diagram-design 這個方向本質(zhì)上是在回答一個問題能不能像設(shè)計(jì)一套 UI 組件庫那樣去設(shè)計(jì)一套圖表規(guī)范它適合的人其實(shí)比想象中多。做技術(shù)文檔的、寫方案的產(chǎn)品經(jīng)理、需要對外匯報的運(yùn)營、帶學(xué)生做項(xiàng)目的老師甚至只是想把復(fù)雜事情講清楚的自媒體作者都會遇到“圖怎么畫才專業(yè)”的問題。這篇文章不會只講某個工具怎么點(diǎn)按鈕而是把 diagram-design 拆成幾個層次為什么要先設(shè)計(jì)再畫、核心的視覺規(guī)則有哪些、怎么落地成一套可復(fù)用的模板、以及實(shí)操中那些沒人告訴你但一定會踩的坑。讀完你至少能做到不再每次從零開始畫圖而是有一套自己的“圖表設(shè)計(jì)系統(tǒng)”。2. 先想清楚再動手diagram-design 的整體設(shè)計(jì)思路2.1 為什么“直接開畫”是最貴的做法很多人畫圖的第一反應(yīng)是打開工具就拖框這跟寫代碼不設(shè)計(jì)接口直接堆函數(shù)是一個毛病。單張圖看起來沒問題但一旦圖的數(shù)量超過五張問題就集中爆發(fā)顏色不統(tǒng)一、字號忽大忽小、箭頭樣式五花八門、同一個概念在不同圖里用了不同的圖形表示。這些不一致會直接消耗讀者的認(rèn)知成本——他們本來應(yīng)該關(guān)注內(nèi)容結(jié)果先被形式干擾了。diagram-design 的核心思路是把圖表當(dāng)成一種設(shè)計(jì)產(chǎn)物而不是臨時草稿。這意味著在畫第一張圖之前先定義好一套規(guī)則用哪些顏色、哪些形狀代表哪類元素、連線怎么區(qū)分強(qiáng)弱關(guān)系、文字用什么層級。這套規(guī)則一旦定下來后面所有的圖都從這套規(guī)則里“長”出來而不是各畫各的。我自己的經(jīng)驗(yàn)是前期花兩三個小時定規(guī)則后面能省下幾十個小時的重畫和返工時間。這筆賬非常劃算。而且規(guī)則本身不需要多復(fù)雜五到八條就夠用關(guān)鍵是穩(wěn)定執(zhí)行。2.2 圖表設(shè)計(jì)系統(tǒng)的四個層次把 diagram-design 拆開看它其實(shí)包含四個由淺入深的層次理解這個結(jié)構(gòu)能幫你判斷自己該從哪一層入手。層次關(guān)注點(diǎn)典型產(chǎn)出適合誰視覺層顏色、字體、線條、間距配色方案、字號規(guī)范所有人語義層形狀與含義的對應(yīng)關(guān)系圖形語義表需要長期畫圖的人結(jié)構(gòu)層圖的布局邏輯、信息層級布局模板做系統(tǒng)/流程說明的人系統(tǒng)層多圖之間的統(tǒng)一與復(fù)用圖表組件庫團(tuán)隊(duì)協(xié)作場景大部分人卡在視覺層覺得“好看就行”。但真正讓圖表專業(yè)起來的是語義層和結(jié)構(gòu)層。舉個例子如果你規(guī)定“圓角矩形服務(wù)直角矩形數(shù)據(jù)存儲菱形判斷節(jié)點(diǎn)”那么讀者看你的圖時不用看文字就能大致猜出每個框的角色。這就是語義層帶來的效率。2.3 選型背后的取舍工具重要但不是最重要關(guān)于用什么工具我的態(tài)度一直很明確工具是最后一步不是第一步。市面上能畫圖的工具太多了從在線協(xié)作類到本地專業(yè)類各有各的適用場景。但如果你沒有先想清楚規(guī)則換什么工具都救不了。選工具時我會看三個維度一是是否支持樣式復(fù)用比如定義一次顏色全局引用二是是否方便版本管理圖能存成文本格式最好三是協(xié)作成本別人能不能方便地改。對于需要頻繁迭代的項(xiàng)目我傾向于用“代碼化”的方式描述圖因?yàn)槲谋究梢赃M(jìn)版本控制diff 起來一目了然對于一次性的匯報圖可視化拖拽工具效率更高。這里有個常見誤區(qū)有人覺得“代碼畫圖”很高級就硬要用代碼畫所有圖。其實(shí)沒必要。一張簡單的三欄對比圖拖拽五分鐘搞定用代碼寫反而半小時。選型的標(biāo)準(zhǔn)是“這張圖的復(fù)用頻率和迭代頻率”頻率高就用可維護(hù)的方式頻率低就怎么快怎么來。3. 核心細(xì)節(jié)拆解讓圖表專業(yè)起來的幾個關(guān)鍵規(guī)則3.1 顏色不是越多越好三色原則夠用新手畫圖最容易犯的錯就是顏色太多。一張圖里出現(xiàn)七八種顏色看起來熱鬧實(shí)際上讀者根本記不住哪個顏色代表什么。我的建議是主色不超過三種再加中性色灰、黑、白打底。具體怎么分配主色用來區(qū)分類別比如“前端/后端/數(shù)據(jù)”三類各一個顏色中性色用來畫容器、背景、輔助線如果需要強(qiáng)調(diào)某個重點(diǎn)用一個強(qiáng)調(diào)色但整張圖里強(qiáng)調(diào)色出現(xiàn)的面積不要超過 10%。這個比例是有講究的——超過 10%強(qiáng)調(diào)就不叫強(qiáng)調(diào)了讀者的注意力會被分散。提示選顏色時優(yōu)先考慮色盲友好。紅綠搭配是最常見的坑大約每十二個人里就有一個存在某種程度的色覺差異。用藍(lán)橙、藍(lán)黃這類對比安全得多。3.2 形狀要有語義不能隨手拖形狀的語義化是 diagram-design 里最容易被忽略、但收益最高的部分。我見過太多圖同樣是“數(shù)據(jù)庫”有的畫成圓柱有的畫成方塊有的畫成圓角矩形。讀者每次都要重新理解。建立一張自己的“圖形語義表”比如圓角矩形服務(wù)、模塊、組件直角矩形數(shù)據(jù)實(shí)體、配置項(xiàng)圓柱數(shù)據(jù)存儲菱形判斷、分支平行四邊形輸入輸出虛線框外部系統(tǒng)或邊界這張表不用照搬關(guān)鍵是你自己團(tuán)隊(duì)內(nèi)部統(tǒng)一。一旦統(tǒng)一圖與圖之間就有了“共同語言”讀者看第二張圖時幾乎零成本。3.3 連線是信息不是裝飾連線在圖表里承擔(dān)著傳遞關(guān)系的作用但很多人畫連線很隨意該用實(shí)線的地方用虛線箭頭方向含糊交叉線一大堆。我的處理原則是實(shí)線表示強(qiáng)關(guān)系、主流程、直接調(diào)用虛線表示弱關(guān)系、異步、可選路徑箭頭只在有明確方向時使用雙向關(guān)系用無箭頭直線或雙向箭頭交叉能避免就避免實(shí)在避免不了用“跳線”符號還有一個細(xì)節(jié)連線的粗細(xì)也能承載信息。主流程用粗線輔助關(guān)系用細(xì)線讀者一眼就能看出主干在哪。這個技巧在復(fù)雜系統(tǒng)圖里特別好用。3.4 文字層級決定可讀性圖里的文字不是隨便放的。我一般分三級標(biāo)題級圖的名稱最大字號、節(jié)點(diǎn)級框里的文字中等字號、注釋級補(bǔ)充說明最小字號常用灰色。三級之間字號差距要明顯至少差 2-4 個字號單位否則層級出不來。另外節(jié)點(diǎn)里的文字要短。一個框里塞三行字讀者會本能地跳過。能用一個詞說清楚的絕不用一句話。實(shí)在需要解釋放到圖外的注釋里或者用編號對應(yīng)下方的說明列表。4. 實(shí)操落地從零搭一套可復(fù)用的圖表模板4.1 第一步定義你的設(shè)計(jì)令牌設(shè)計(jì)令牌這個詞借自 UI 設(shè)計(jì)領(lǐng)域指的是把顏色、字號、間距這些基礎(chǔ)值抽出來集中定義。在圖表設(shè)計(jì)里我建議至少定義這幾組顏色 primary: #2B6CB0 主類別一 secondary: #DD6B20 主類別二 tertiary: #38A169 主類別三 neutral-dark: #2D3748 文字 neutral-mid: #718096 輔助文字 neutral-light: #E2E8F0 邊框、背景 字號 title: 20px node: 14px note: 11px 間距 node-padding: 12px node-gap: 24px這些值定下來之后所有圖都從這里取。如果你用的是支持樣式的工具直接建全局樣式如果是代碼化工具就定義成變量。好處是改一處全局生效。4.2 第二步建立圖形語義表并做成模板把前面說的形狀語義固定下來然后在工具里做成“模板”或“組件”。比如在支持組件的工具里把“服務(wù)”做成一個組件改一次顏色所有用到的地方同步更新。這一步是從“畫圖”升級到“設(shè)計(jì)系統(tǒng)”的關(guān)鍵。我自己的做法是建一個“圖表起始文件”里面預(yù)置好所有形狀、顏色、字號每次畫新圖直接從這個文件復(fù)制。這樣連“重新設(shè)置樣式”的時間都省了。4.3 第三步設(shè)計(jì)三到五個布局骨架布局是最耗時的部分。與其每次從空白畫布開始不如準(zhǔn)備幾個常用骨架線性流程從左到右或從上到下適合步驟說明中心輻射一個核心節(jié)點(diǎn)向外發(fā)散適合能力地圖、影響范圍分層結(jié)構(gòu)上下分層適合架構(gòu)圖、組織關(guān)系對比雙欄左右對照適合方案對比循環(huán)閉環(huán)首尾相連適合迭代流程每個骨架里節(jié)點(diǎn)的位置、間距、連線走向都預(yù)先排好你只需要往里填內(nèi)容。這能把你畫圖的時間壓縮一半以上。4.4 第四步用真實(shí)內(nèi)容跑一遍并迭代模板搭好后別急著宣布完成。拿一個真實(shí)的、稍微復(fù)雜的場景跑一遍看看哪里別扭。我第一版模板跑真實(shí)內(nèi)容時發(fā)現(xiàn)“注釋級”字號太小投影時根本看不清于是從 10px 調(diào)到 12px。這種問題只有真實(shí)使用才會暴露。迭代兩三輪之后這套模板就基本穩(wěn)定了。之后每次畫圖你都是在“填空”而不是“創(chuàng)作”。這才是 diagram-design 真正的價值——把創(chuàng)造力留給內(nèi)容把形式交給系統(tǒng)。5. 常見問題與排查技巧實(shí)錄5.1 圖太擠或太空怎么調(diào)這是最高頻的問題。判斷標(biāo)準(zhǔn)很簡單節(jié)點(diǎn)之間的留白至少等于節(jié)點(diǎn)內(nèi)邊距的兩倍。如果框里文字離邊框 12px那框與框之間至少留 24px。太擠會讓讀者喘不過氣太空則顯得內(nèi)容單薄。如果內(nèi)容確實(shí)多寧可拆成兩張圖也不要硬塞進(jìn)一張。一張圖講一個核心信息這是鐵律。我見過太多“什么都想說”的圖最后什么都沒說清楚。5.2 連線交叉太多怎么辦交叉是復(fù)雜圖的頑疾。三個處理順序第一調(diào)整節(jié)點(diǎn)位置很多時候換個順序交叉就沒了第二分層把關(guān)系分成上下兩層畫層內(nèi)連線層間用少量線連接第三抽象把一組密集交互的節(jié)點(diǎn)合并成一個“子系統(tǒng)”框細(xì)節(jié)放到另一張圖里展開。注意不要為了減少交叉而扭曲邏輯。圖的目的是講清楚關(guān)系不是畫得好看。邏輯優(yōu)先美觀其次。5.3 不同人畫的圖風(fēng)格不一致這是團(tuán)隊(duì)協(xié)作的典型問題。解決辦法不是“要求大家統(tǒng)一”而是把統(tǒng)一變成默認(rèn)。具體做法把模板文件放在共享位置規(guī)定“所有圖必須從模板開始”把樣式做成組件改樣式只能改組件不能單獨(dú)改某個框。制度加工具雙管齊下。5.4 導(dǎo)出后模糊或變形導(dǎo)出問題通常出在格式選擇上。需要放大的場景用矢量格式如 SVG需要嵌入文檔的用高分辨率位圖至少 2 倍圖。另外注意導(dǎo)出時的畫布邊界有時候圖看起來正常導(dǎo)出后邊緣被裁掉是因?yàn)楫嫴紱]框好。導(dǎo)出前先“適應(yīng)內(nèi)容”一下能避免大部分問題。問題現(xiàn)象可能原因處理方式導(dǎo)出模糊位圖分辨率不足改用矢量或提高導(dǎo)出倍率邊緣被裁畫布邊界未適配導(dǎo)出前執(zhí)行適應(yīng)內(nèi)容顏色偏差色彩模式不一致統(tǒng)一使用同一色彩模式字體丟失目標(biāo)環(huán)境無該字體導(dǎo)出前轉(zhuǎn)曲或換通用字體5.5 獨(dú)家避坑心得說幾個我踩過的坑。第一別在最后一刻才畫圖。圖是思考工具不是匯報裝飾。邊想邊畫圖會幫你發(fā)現(xiàn)邏輯漏洞。第二別追求一張圖講完所有事。圖的價值在于聚焦拆圖不丟人。第三保存源文件。我早期只存導(dǎo)出圖后來想改一個字都得重畫血的教訓(xùn)。第四給圖起名字。不是“圖1”“圖2”而是“用戶注冊流程”“訂單狀態(tài)流轉(zhuǎn)”這樣半年后你還知道每張圖是干嘛的。6. 把圖表當(dāng)成長期資產(chǎn)來經(jīng)營做 diagram-design 這件事最大的轉(zhuǎn)變不是技術(shù)上的而是心態(tài)上的。以前我把圖當(dāng)成“用完就扔”的消耗品現(xiàn)在我把它當(dāng)成可積累的資產(chǎn)。一套好的圖表系統(tǒng)會隨著項(xiàng)目推進(jìn)越來越值錢新圖從舊圖里長出來風(fēng)格統(tǒng)一維護(hù)成本極低。我個人的體會是圖表設(shè)計(jì)系統(tǒng)不需要一開始就完美。先定三條規(guī)則畫五張圖然后回頭看看哪里別扭改一改再畫五張。迭代三四輪一套適合你自己的系統(tǒng)就成型了。它可能不漂亮但一定好用。而好用才是圖表設(shè)計(jì)的終極目標(biāo)。