前言

維持設計系統的良好運轉，離不開科學的度量評估，目前業內比較普遍做法是以問卷形式做定性評估，它涵蓋的評估范圍較廣泛，但結果會因樣本量的多少而波動，且僅適合周期性評估。

但在設計系統中，組件庫的維護升級僅依靠上述的評估方法，還欠缺敏捷性，且評估結果不夠聚焦。我們需要一種實時的定量監測能力，輔助快速定位問題，明辨迭代訴求，減少維護成本，提升組件庫的易用性。本文將針對B端設計系統Light Design的組件庫，講一講如何通過定量指標，解決個中問題。

下面將從4個方面來具體介紹：

明，明確想要挖掘組件庫的哪些問題，將其按維度分類。

擇，根據設立的維度擇取合適的觀測指標。

探，探究這些指標具體反應了什么現狀和風險。

解，針對發現的風險，進行分析和解決。

明

首先，我們需要明確希望定量評估幫助解決哪些問題，從參與組件庫的角色來入手把問題維度進行分類：

角色一是維護方，負責生產和迭代組件。對于這一方，希望宏觀的知道目前組件庫的體量，判斷是需要精簡還是擴充；以及還需要判斷迭代周期是否合理，那么就對應以下2個維度：

1.構成規模-即組件庫由多少組件構成。

2.維護效率-即組件庫迭代的快慢。

角色二是引用方，也就是各個業務平臺的設計師、研發同學。他們會在日常的需求消化中，引用組件完成功能迭代。我們希望通過這些引用的行為觀測組件庫的覆蓋能力，提前預知不易用的風險組件，盡早升級。于是就有了以下2個維度：

1.引用規模-即有多少平臺用到了組件庫。

2.易用性-即組件是否在各業務場景都方便引用。

擇

有了維度分類后，接下來就需要在眾多組件庫的觀測數據中，選取合適的數據成為觀測指標。

下面是我們根據評估維度選擇的觀測指標：

構成規模

1.組件個數-基礎、業務、圖表等多組件庫分別計數。

2.組件庫覆蓋率-各組件庫中被引用組件對于全集的占比。

維護效率

1.組件庫迭代進度-迭代性質可分為問題修復、特性和實驗性功能增優。

引用規模

1.引用平臺數-有多少平臺引用了組件庫。

2.組件庫版本引用占比-各平臺引用的是哪個版本的組件庫（組件庫每升級一次，即為一個新版本）。

3.各平臺組件庫引用覆蓋-我們提供了基礎、業務、圖表3個大組件庫，從這個數據可以獲知各個業務平臺都引用了前述的哪些組件庫，以及各引用了多少組件。

易用性

1.組件引用次數-組件被各業務方引用了多少次。

2.組件改寫次數-此處為非正常改寫，業務的研發強行破壞了組件的既有樣式，業內通常稱其為"Hack"。

通過上面的分析，我們就得到了一個較為完整的觀測指標框架，下面我們來探討下如何利用他們實際去發現和解決問題。

探&解

確定以上觀測指標，我們搭建了監測平臺，日常監控組件庫的數據表現，產出數據報告。下面就用實際的例子來講講如何利用這些定量的觀測指標，發現并解決組件庫的易用性和維護上的一系列問題。

易用性相關

問題1：如何定位到不好用的組件？是否值得升級？又如何進行優化呢？

解：這里需要依靠2個數據指標來判斷，分別是組件的引用次數和改寫次數。簡單解釋就是高頻引用同時又頻繁改寫的組件嚴重影響了業務方的引用效率，這些組件自然是不好用的，需要重點解決。

我們以表單組件為例，來看下具體的工作流。

1.定位出高頻引用且高頻改寫的組件：首先定位到"表單"組件出現在引用數Top5內，且改寫數是非常頻繁的。

2.還原具體改寫場景并分類歸因：針對"表單"組件，拉取了改寫的css代碼，逐一分析都改寫了哪些樣式。從中提煉出共性的改寫場景，進行分類歸因。于是可以把表單組件的改寫問題分為4大類，分別是行間距問題、標簽寬度問題、橫向表單缺失問題、附屬表單樣式規范問題。

3.針對不同原因導出解決手段進行組件升級：最后，根據上述問題，逐一進行設計和研發升級。升級后的表單組件再被業務方引用時，免去了改寫的成本，平均單次引用可節省約1h的研發耗時。

問題2：上面解決了單個組件的易用性問題，但無法從全局判斷組件庫整體的易用性表現，那應該如何解決呢。

解：把所有組件的引用次數加和，得到總體數值，并結合時間維度，觀察組件庫整體改寫數與引用數各自的變化趨勢。用線形圖來描述的話，隨著時間推移，引用越多，改寫越少，兩條線呈開口狀，那就表示組件庫處于越來越健康的狀態。反之則需要警惕了。同時我們搭建了一套評分體系，基于引用/改寫數值，通過歸一化和加權等一系列計算，by月/季度給組件庫易用性打分，也能精準的知道組件庫易用性的表現，如果分值是下降的，就要具體去定位哪些組件出了問題，再根據上述的方法相應地進行升級。

日常維護相關

問題1：業務方反饋的升級訴求經常扎堆，怎么去快速判斷升級的優先級呢，提高維護效率呢？

解：為了能提高組件庫的維護效率，及時滿足各業務方的訴求，會從易用性、引用規模、升級成本這三方面來綜合判斷升級的優先級。

首先，將業務側提出升級訴求的組件按業務上線時間由近到遠排序。這就有了一個基礎的優先級。

然后，從中挑選有嚴重bug的組件(易用性差)、多平臺高頻引用的組件(引用規模大），往前調整優先級。

最后，評估它們的升級成本，如果成本小，迅速能迭代，那就按順序解決。如果其中有大規模升級的組件，不一定能敏捷支持，那就需要與業務側商量，先提供臨時替代方案，再專項升級組件。

問題2：日常維護組件庫，如何保持組件庫的活力？

解：組件庫若長期未更新，說明對業務升級訴求的支持效率不高。此外若存在一些低頻使用甚至冗余的組件，則會在組件庫升級時帶來很大的負擔。所以需要時刻保持組件庫的精煉和活力。我們從兩方面來評估，第一、固定周期內的迭代頻次，這體現了應對業務方訴求的響應速度和自驅升級的主動性；第二、低頻引用的組件個數，首先我們會定期清理引用數為0的組件，并分析低頻組件不常被引用的原因，相應做精簡、合并，控制低頻引用組件個數，有利于我們將更多的精力聚焦在重點組件的維護升級上。

結語

上述給大家簡單地介紹了設計系統相關的定量指標及其使用案例，那么除了以上這些，其實我們還有很多可擴展的空間，如目前的數據維度都是針對系統"維護方"和"引用方"的，還缺少"平臺體驗者"，也就是真正用戶對設計系統的視覺/操作體驗指標，如何通過定量的手段收集這些指標數據，與定性數據相輔相成讓組件庫的評估更為精準，將是我們接下來需要探索的課題。

百度MEUX團隊

2024校園招聘提前批次

全面開啟

更多精彩作品展示，請關注「百度MEUX」小紅書賬號869010907

感謝閱讀，以上內容均由百度MEUX團隊原創設計，以及百度MEUX版權所有，轉載請注明出處，違者必究，謝謝您的合作。申請轉載授權后臺回復【轉載】。也歡迎加入MEUX,交互/視覺/用研，可投簡歷至meux-talent@baidu.com  (注明信息獲取來源如：UI中國）

關于我們：
MEUX,百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業產品等。MEUX以「簡單極致」為設計理念，創造極致用戶體驗的同時賦能商業，推動設計行業的價值和影響力，讓生活因設計而更美好。

Powered by Froala Editor