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