更多設(shè)計(jì)價(jià)值相關(guān)干貨：

寫在前面

這是中文互聯(lián)網(wǎng)第一篇推導(dǎo) Design System ROI 公式的文章，也是目前整個(gè)互聯(lián)網(wǎng)關(guān)于 Design System ROI 公式推導(dǎo)最詳細(xì)的文章。

這個(gè)公式是在設(shè)計(jì)系統(tǒng)建立后，通過(guò)詳細(xì)的公式去推導(dǎo)不同周期下 Design System 能給企業(yè)帶來(lái)多少 ROI。

計(jì)算周期細(xì)分為幾個(gè)階段，如前期、中期、成熟期，或者按年按年遞增計(jì)算，進(jìn)行滾動(dòng)式跟蹤。比如 1 年、2 年、3 年、5 年的 ROI 分別是多少。如果你需要明確 Design System 為企業(yè)降本增效的，如果你需要向上級(jí)/公司匯報(bào) Design System 的設(shè)計(jì)成效時(shí)，你可能需要這個(gè)公式。

公式中的所有計(jì)算期（M）應(yīng)使用相同的月值。

1. 不同階段的 ROI 表現(xiàn)差異

在設(shè)計(jì)系統(tǒng)的早期（需求調(diào)研、組件搭建）由于投入大，收益尚未充分顯性化，尤其是第一年 ROI 值通常會(huì)較低甚至為負(fù)，這是正常現(xiàn)象。

隨著設(shè)計(jì)系統(tǒng)的成熟、規(guī)模效益（SE）和一致性價(jià)值（UV）漸漸提升，這時(shí)候看 ROI 才會(huì)更顯著。

總公式

Design System ROI = [(TE + QE + SE + SCE) - (IC + MC)] / (IC + MC) × 100%

公式含義：設(shè)計(jì)系統(tǒng) ROI = (收益合計(jì) - 成本合計(jì)) / (成本合計(jì)) × 100%

即衡量“設(shè)計(jì)系統(tǒng)”在給出投入的前提下，帶來(lái)多少百分比（%）的回報(bào)收益。

該公式稍作變形即可計(jì)算 “設(shè)計(jì)系統(tǒng)給企業(yè)節(jié)省的資金” = (TE + QE + SE + SCE) - (IC + MC)

一、收益部分

1. 時(shí)間效率效益 (TE, Time Efficiency)

1. TE = (Td × Rd × Dhd + Th × Rh × Dhh) × M
2. Td (Time cost of Designer): 設(shè)計(jì)師平均時(shí)薪（元/小時(shí)）
3. Rd (Rate of Design saving): 設(shè)計(jì)時(shí)間節(jié)省比例（如 0.3）
4. Dhd (Design working Hours): 設(shè)計(jì)師每月涉及界面設(shè)計(jì)的工時(shí)（小時(shí)）
5. Th (Time cost of Developer): 開發(fā)人員平均時(shí)薪（元/小時(shí)）
6. Rh (Rate of Development saving): 開發(fā)時(shí)間節(jié)省比例（如 0.4）
7. Dhh (Development working Hours): 開發(fā)人員每月涉及界面開發(fā)的工時(shí)（小時(shí)）
8. M (Months): 計(jì)算周期（月）

思考邏輯 ：通過(guò)“設(shè)計(jì)師+開發(fā)人員” 在 UI 設(shè)計(jì)與界面開發(fā)上所節(jié)省的時(shí)間（工時(shí) × 節(jié)省比例）折算成直接人力成本收益，再結(jié)合計(jì)算周期 (M 月) 進(jìn)行累積。

2. 質(zhì)量效益 (QE, Quality Efficiency)

QE = [(Bb - Ba) × Fp × Cd + (Ib - Ia) × Fp × Ci + UV] × M

1. Bb (Bug density Baseline): 使用設(shè)計(jì)系統(tǒng)前的基準(zhǔn) Bug 密度（自定統(tǒng)計(jì)周期。Bug 數(shù)/功能點(diǎn)）
2. Ba (Bug density Actual): 使用設(shè)計(jì)系統(tǒng)后的實(shí)際 Bug 密度（和 Bb 同周期。Bug 數(shù)/功能點(diǎn)）
3. Ib (Inconsistency Baseline): 使用設(shè)計(jì)系統(tǒng)前的不一致處數(shù)量（自定統(tǒng)計(jì)周期。處/功能點(diǎn)）
4. Ia (Inconsistency Actual): 使用設(shè)計(jì)系統(tǒng)后的不一致處數(shù)量（和 Ib 同周期。處/功能點(diǎn)）
5. Fp (Function Points): 月均功能點(diǎn)數(shù)
6. Cd (Cost per Debug): 每個(gè) Bug 平均修復(fù)成本（元）（見下方 2.1 公式）
7. Ci (Cost per Inconsistency): 每處不一致的平均修復(fù)成本（元）（見下方 2.2 公式）
8. UV (Uniformity Value): 一致性價(jià)值（見下方 2.3 公式）
9. M (Months): 計(jì)算周期（月）

思考邏輯 ：通過(guò)減少 Bugs 和界面不一致帶來(lái)的修復(fù)成本節(jié)省，并疊加“系統(tǒng)一致性”給團(tuán)隊(duì)帶來(lái)的額外綜合價(jià)值 (UV)，從而得到整體質(zhì)量層面的收益。

① 每個(gè) Bug 平均修復(fù)成本（元）Cd (Cost per Debug)

Cd = Σ(Hd × Ch) / Nb

1. Hd (Debug Hours)：調(diào)試與修復(fù) Bug 的總工時(shí)（自定統(tǒng)計(jì)周期）
2. Ch (Cost Hour)：人力平均時(shí)薪（元/小時(shí)）
3. Nb (Number of Bugs fixed): 某段周期（和 Hb 同周期）內(nèi)修復(fù)的 Bug 總數(shù)

思考邏輯 ：公式用于計(jì)算‘平均單個(gè) Bug 修復(fù)所需的資金投入’，其核心思路是：先將統(tǒng)計(jì)周期內(nèi)所有 Bug 的排查、調(diào)試、修復(fù)等耗時(shí)進(jìn)行加總并乘以平均時(shí)薪，得到「總修復(fù)成本」，然后再除以該周期內(nèi)實(shí)際修復(fù)的 Bug 總數(shù)，即可得到「每個(gè) Bug 的平均修復(fù)成本 (Cd) 」。在設(shè)計(jì)系場(chǎng)景下，我們需要這個(gè)均值來(lái)衡量‘如果設(shè)計(jì)系統(tǒng)讓 Bug 減少了 (例如從 Bb 降到 Ba)，那么就相當(dāng)于節(jié)省了 (Bb - Ba) × Cd 的修復(fù)費(fèi)用。也就是降本增效的“降本”。

② 每處不一致的平均修復(fù)成本（元）Ci (Cost per Inconsistency)

Ci = [ (Hd × Md) + (Hh × Mh) ] / Ni

1. Hd (Hours - designer): 設(shè)計(jì)師用于修復(fù)界面不一致所花費(fèi)的總工時(shí)（自定統(tǒng)計(jì)周期，小時(shí)）
2. Md (Manhour cost - designer): 設(shè)計(jì)師平均時(shí)薪（元/小時(shí)）
3. Hh (Hours - developer): 開發(fā)人員用于修復(fù)界面不一致所花費(fèi)的總工時(shí)（和 Hd 同周期，小時(shí)）
4. Mh (Manhour cost - developer): 開發(fā)人員平均時(shí)薪（元/小時(shí)）
5. Ni (Number of Inconsistencies):周期內(nèi)實(shí)際修復(fù)的不一致總數(shù)（和 Hd 同周期）

思考邏輯 ：先分別統(tǒng)計(jì)設(shè)計(jì)師、開發(fā)人員在修復(fù)不一致時(shí)的總工時(shí)，并乘以各自的時(shí)薪，得到“修復(fù)不一致的總成本”；再將這一總成本除以當(dāng)期修復(fù)的不一致總數(shù)，便可得出“平均每處不一致的修復(fù)成本 (Ci)”

③ 一致性價(jià)值 (UV, Uniformity Value)

UV = (RV + CV + QV) × BU

1. RV (Rework Value): 返工價(jià)值（見下方 2.2.1 公式）
2. CV (Communication Value): 溝通價(jià)值（見下方 2.2.2 公式）
3. QV (Quality Assurance Value): 驗(yàn)收價(jià)值（見下方 2.2.3 公式）
4. BU (Brand Uniformity Coefficient): 品牌一致性系數(shù)（推薦在 1.0 ~ 1.5 之間）

思考邏輯 ：一致性價(jià)值從“減少返工、減少溝通成本、減少驗(yàn)收成本”三個(gè)方面綜合體現(xiàn)。如果品牌一致性（BU）非常重要，最終會(huì)放大（或微調(diào)）整體收益。

1）返工價(jià)值 (RV, Rework Value)

RV = ((Rd × Td) + (Rh × Th)) × Rn_nonDefect × M

1. Rd (Rework hours saved by Designer): 設(shè)計(jì)師返工節(jié)省工時(shí)（自定義統(tǒng)計(jì)周期，小時(shí)）
2. Td (Time cost of Designer): 設(shè)計(jì)師時(shí)薪（元/小時(shí)）
3. Rh (Rework hours saved by Developer): 開發(fā)返工節(jié)省工時(shí)（和 Rd 同周期小時(shí)）
4. Th (Time cost of Developer): 開發(fā)時(shí)薪（元/小時(shí)）
5. Rn_nonDefect (Rework Numbers - non-defect): 月均“非缺陷/不一致”類返工需求數(shù)量（次）
6. M (Months): 計(jì)算周期（月）

思考邏輯 ：

1. 為避免和在 QE 中已經(jīng)計(jì)算的“Bug / 不一致修復(fù)的成本節(jié)省”發(fā)生重復(fù)，這里僅統(tǒng)計(jì)“因需求變更、業(yè)務(wù)策略調(diào)整、審美變動(dòng)等非缺陷原因”帶來(lái)的返工次數(shù) (Rn_nonDefect)。
2. 從而將“缺陷、不一致帶來(lái)的修復(fù)”排除在本公式之外，避免和 Cd、Ci 重復(fù)。

2）溝通價(jià)值 (CV, Communication Value)

CV = [(Dm × Td) + (Hm × Th)] × Cm × M

1. Dm (Designer meeting hours saved): 設(shè)計(jì)師節(jié)省會(huì)議時(shí)長(zhǎng)（自定義周期，小時(shí)）
2. Td (Time cost of Designer): 設(shè)計(jì)師時(shí)薪（元/小時(shí)）
3. Hm (Developer meeting hours saved): 開發(fā)節(jié)省會(huì)議時(shí)長(zhǎng)（和 Dm 同周期，小時(shí)）
4. Th (Time cost of Developer): 開發(fā)時(shí)薪（元/小時(shí)）
5. Cm (Communication meetings reduced): 月均溝通次數(shù)減少量（和 Dm 同周期，次）
6. M (Months): 計(jì)算周期（月）

思考邏輯 ：標(biāo)準(zhǔn)化設(shè)計(jì)語(yǔ)言后，可減少反復(fù)對(duì)齊需求、風(fēng)格的會(huì)議數(shù)量，并節(jié)省每次會(huì)議中設(shè)計(jì)師與開發(fā)人員的溝通時(shí)長(zhǎng)，從而創(chuàng)造人力效率收益。

③ 驗(yàn)收價(jià)值 (QV, Quality Assurance Value)

QV = (Qd × Td × Pn) × M

1. Qd (QA time saved per Design): 單個(gè)頁(yè)面驗(yàn)收節(jié)省時(shí)間（小時(shí)）
2. Td (Time cost of Designer): 設(shè)計(jì)師時(shí)薪（元/小時(shí)）
3. Pn (Page Numbers): 月均驗(yàn)收頁(yè)面數(shù)量（個(gè)）
4. M (Months): 計(jì)算周期（月）

思考邏輯 ：規(guī)范化的設(shè)計(jì)系統(tǒng)，有助于減少設(shè)計(jì)驗(yàn)收環(huán)節(jié)中的返工；這里直接以“單個(gè)頁(yè)面節(jié)省的時(shí)間 × 驗(yàn)收頁(yè)面數(shù)量”衡量整體節(jié)省。

3. 規(guī)模效益 (SE, Scale Efficiency)

SE = (Td_comp × Cdev) × Rr × Pn

1. Td_comp (Time duration per Component): 單個(gè)組件平均開發(fā)時(shí)長(zhǎng)（小時(shí)）
2. - Cdev (Cost per Developer hour): 開發(fā)人員平均時(shí)薪（元/小時(shí)）
3. Rr (Reuse Rate): 組件復(fù)用率（自定義統(tǒng)計(jì)周期，使用次數(shù)）
4. Pn (Project Numbers): 使用設(shè)計(jì)系統(tǒng)的項(xiàng)目數(shù)量（和 Rr 同周期，個(gè)）

思考邏輯 ：

1. 當(dāng)組件被復(fù)用時(shí)，相當(dāng)于節(jié)省了“重復(fù)開發(fā)”的成本；通過(guò) Rr (復(fù)用率) × Pn (項(xiàng)目數(shù)量) 可以量化整體復(fù)用價(jià)值；
2. 若團(tuán)隊(duì)有更準(zhǔn)確的統(tǒng)計(jì)方法，也可替換為“組件池整體成本 + 復(fù)用分?jǐn)偂钡姆绞健ｊP(guān)鍵是確?！敖M件的成本”可被合理估算，從而計(jì)算規(guī)模化帶來(lái)的收益。

4. 狀態(tài)復(fù)雜度效益 (SCE, State Complexity Efficiency)

SCE = (Sd × Rd × Sa × M) + (Hd × Rh × Sa × M)

1. Sd (State design cost): 設(shè)計(jì)師平均時(shí)薪（元/小時(shí)）
2. Rd (Rate of state Design saving): 設(shè)計(jì)狀態(tài)頁(yè)面節(jié)省時(shí)間比例（如 0.5）
3. Hd (State development cost): 開發(fā)人員平均時(shí)薪（元/小時(shí)）
4. Rh (Rate of state development saving): 開發(fā)狀態(tài)頁(yè)面節(jié)省時(shí)間比例（如 0.6）
5. Sa (State Amount saved): 狀態(tài)頁(yè)面數(shù)量節(jié)省量（頁(yè)面數(shù) × 狀態(tài)數(shù)）
6. M (Months): 計(jì)算周期（月）

思考邏輯 ：當(dāng)一個(gè)頁(yè)面或組件處于不同狀態(tài)（hover、active、loading 等），設(shè)計(jì)系統(tǒng)可提供更標(biāo)準(zhǔn)、更一致的處理方式，減少設(shè)計(jì)師和開發(fā)在此部分的重復(fù)工作量。

二、成本部分

1. 初始成本 (IC, Initial Cost)

IC = Dc + Cc + Tc

1. Dc (Design specification Cost): 設(shè)計(jì)規(guī)范制定成本
2. Cc (Core Component Cost): 核心組件開發(fā)成本
3. Tc (Technical document Cost): 技術(shù)文檔建設(shè)成本

思考邏輯 ：前期一定會(huì)投入一些制定設(shè)計(jì)規(guī)范、開發(fā)核心組件和編寫文檔的成本，合計(jì)構(gòu)成了初始成本。

① 設(shè)計(jì)規(guī)范制定成本 (Dc, Design specification Cost)

Dc = Dcd + Dct

Dcd (Design specification Cost for designers)= Dhdd × Cdd × Nd

1. Dhdd (Design hours - designer): 每名設(shè)計(jì)師在制定設(shè)計(jì)規(guī)范上耗費(fèi)的工時(shí)（小時(shí)）
2. Cdd (Cost per hour - designer): 設(shè)計(jì)師小時(shí)單價(jià)（元/小時(shí)）
3. Nd (Number of designers): 參與設(shè)計(jì)規(guī)范制定的設(shè)計(jì)師數(shù)量

Dct (Design specification Cost for developers)= Dhdt × Cdt × Nt

1. Dhdt (Design hours - developer): 每名開發(fā)人員在協(xié)助設(shè)計(jì)規(guī)范上耗費(fèi)的工時(shí)（小時(shí)）
2. Cdt (Cost per hour - developer): 開發(fā)人員小時(shí)單價(jià)（元/小時(shí)）
3. Nt (Number of developers): 參與規(guī)范制定的開發(fā)人員數(shù)量

思考邏輯 ：為了將設(shè)計(jì)語(yǔ)言或規(guī)范固化出來(lái)，設(shè)計(jì)師和開發(fā)人員分別投入一定的協(xié)作工時(shí)，最終合計(jì)形成“設(shè)計(jì)規(guī)范制定成本”。

② 核心組件開發(fā)成本 (Cc, Core Component Cost)

Cc = Ccd + Cct

Ccd (Core Component Cost for designers)= Chdd × Cdd × Nd

1. Chdd (Core hours - designer): 每名設(shè)計(jì)師在核心組件界面定義、視覺(jué)規(guī)范等方面耗費(fèi)的工時(shí)（小時(shí)）
2. Cdd (Cost per hour - designer): 設(shè)計(jì)師小時(shí)單價(jià)（元/小時(shí)）
3. Nd (Number of designers): 參與核心組件建設(shè)的設(shè)計(jì)師數(shù)量

Cct (Core Component Cost for developers)= Chdt × Cdt × Nt

1. Chdt (Core hours - developer): 每名開發(fā)人員在核心組件編碼、測(cè)試等方面耗費(fèi)的工時(shí)（小時(shí)）
2. Cdt (Cost per hour - developer): 開發(fā)人員小時(shí)單價(jià)（元/小時(shí)）
3. Nt (Number of developers): 參與核心組件開發(fā)的開發(fā)人員數(shù)量

思考邏輯 ：設(shè)計(jì)系統(tǒng)要有通用可復(fù)用的核心組件，這部分建設(shè)需要投入設(shè)計(jì)和開發(fā)雙方：從視覺(jué)、交互到實(shí)際代碼實(shí)現(xiàn)；此處統(tǒng)計(jì)其人力成本累加。

③ 技術(shù)文檔建設(shè)成本 (Tc, Technical document Cost)

Tc = Tcd + Tct

Tcd (Technical document Cost for designers)= Thdd × Cdd × Nd

1. Thdd (Tech doc hours - designer): 每名設(shè)計(jì)師在撰寫/維護(hù)設(shè)計(jì)指導(dǎo)文檔耗費(fèi)的工時(shí)（小時(shí)）
2. Cdd (Cost per hour - designer): 設(shè)計(jì)師小時(shí)單價(jià)（元/小時(shí)）
3. Nd (Number of designers): 參與技術(shù)文檔編制的設(shè)計(jì)師數(shù)量

Tct (Technical document Cost for developers)= Thdt × Cdt × Nt

1. Thdt (Tech doc hours - developer): 每名開發(fā)人員在撰寫/維護(hù)技術(shù)指南、示例代碼耗費(fèi)的工時(shí)（小時(shí)）
2. Cdt (Cost per hour - developer): 開發(fā)人員小時(shí)單價(jià)（元/小時(shí)）
3. Nt (Number of developers): 參與技術(shù)文檔編制的開發(fā)人員數(shù)量

思考邏輯 ：除規(guī)范和組件外，還需進(jìn)一步撰寫文檔指南，多方協(xié)同以保證設(shè)計(jì)系統(tǒng)易于使用和維護(hù)。

2. 維護(hù)成本 (MC, Maintenance Cost)

MC = (Mrd + Rct) × M

Mrd (Maintenance & Response Cost Designer) = Mhd × Cmd × Nd

1. Mhd (Maintenance hours designer): 設(shè)計(jì)師維護(hù)及響應(yīng)支持月工時(shí)（小時(shí)/月）
2. Cmd (Cost designer maintenance): 設(shè)計(jì)師小時(shí)單價(jià)（元/小時(shí)）
3. Nd (Number of designers): 設(shè)計(jì)師數(shù)量（人）

Rct (Response Cost Technical) = Rht × Crt × Nt

1. Rht (Response hours technical): 開發(fā)人員響應(yīng)支持月工時(shí)（小時(shí)/月）
2. Crt (Cost developer response): 開發(fā)人員小時(shí)單價(jià)（元/小時(shí)）
3. Nt (Number of technical): 支持響應(yīng)的開發(fā)人員數(shù)量（人）

M (Months): 計(jì)算周期（月）

思考邏輯 ：設(shè)計(jì)系統(tǒng)在正式投入使用后，仍需要持續(xù)投入一定的人力來(lái)維護(hù)、更新和答疑。

寫在最后

你并不需要手動(dòng)計(jì)算公式，你只需要在每個(gè)計(jì)算項(xiàng)后面填上需要統(tǒng)計(jì)的對(duì)應(yīng)的數(shù)值，然后把它扔給 AI 去計(jì)算就好。然后告訴他，分別幫你計(jì)算 1 年、2 年、3 年…的 ROI 分別是多少。