編輯導語：通用性和業(yè)務定制化在建設設計體系的過程似乎一直是一個矛盾。我們理想中的設計體系，是可以根據業(yè)務的發(fā)展，互利共贏的可持續(xù)設計體系。本文表達了作者對于設計體系的相關思考，推薦對相似業(yè)務感興趣的設計師們閱讀。

提到設計體系，你會想到什么？組件？方法論？還是頁面模版？

在 Alla Kholmatova 撰寫的《 Design System 》一書中，作者對設計體系是這樣定義的：

“設計體系”是指服務于數(shù)字化產品設計的一系列具有內在關聯(lián)性的、組織有序的設計模式與實踐方法。

“模式”指代任何可復用的界面組成要素，包括按鈕、文本框、圖標、配色、字體，以及可復用的功能流程與交互行為等等；

“實踐”則是關于如何在設計團隊當中創(chuàng)建、提煉、使用和共享這些模式。

一、優(yōu)秀的設計體系是什么樣的？

目前，在設計體系方面，國內外已有許多團隊都探索出了自己的風格，綜合看，國外的設計體系經過了長時間的發(fā)展和沉淀，整體成熟度和完善度要高于國內。比如我們來看一下 IBM 的 Carbon Design System 。

Carbon Design 主要是從原則、組件、模式、共享資產、數(shù)據可視化五個方面來組成了一整套設計體系，按照《 Design System 》的定義，我們可以將原則、組件、模式歸類為“模式”；而將共享資產和數(shù)據可視化歸類為“實踐”。

在原則部分， Carbon Design 規(guī)定了基礎的色彩、動效、 icon 、文案、插畫等規(guī)范，這些規(guī)則雖然不是具體的組件，但是可以左右整體設計體系的基調，相當于為整套體系打了一個堅實的地基，而其中的動效部分容易被很多人忽略，但是確實能體現(xiàn)整體的細節(jié)感和精致感。

組件部分大家應該都比較熟悉了，通常組件構成了頁面最小功能顆粒度的元素，配合交互規(guī)范，形成一套細而全的可復用組件資產。

模式部分算是 Carbon Design 的一個核心亮點，每一個“模式”都有總覽、理論出處、使用方法、案例推導等等，而不是簡單的對樣式進行定義，可以看出 IBM 在 B 端領域的多年深耕，已經總結出一套兼具理論和實際的資產庫，非常嚴謹和科學。

共享資產只有員工才能使用，因此并不能給大家展示具體內容，但是可以猜測這一塊應該是 IBM 不同業(yè)務的共享資源池，并且這塊資源池有特定的人進行維護和審核，保證共享資產的迭代與更新。

可視化圖表。作為一個單獨的領域， Carbon Design 對齊進行了單獨的整合與枚舉。

當然，除了 IBM 的 Carbon Design ，還有很多優(yōu)秀的設計體系，比如螞蟻的 Ant Design ， Atlassian 的 Atlassian Design 、微軟的 Microsoft Design 、谷歌的 Material Design 、 SAP的Fiori Design等，我們這里就不一一列舉了。

二、如何有效的進行設計資產的整理

在化學世界中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。

2013 年前端工程師 Brad Frost 在《 Atomic Design 》一文中提出了原子設計理論，并將此理論運用在界面設計中，據說他是從化學中得到的啟發(fā)，原子（ Atoms ）結合在一起，形成分子（ Molecules ），進一步結合形成的生物體（ Organisms ），根據他的理論，設計體系主要包含 5 個層面：原子、分子、組織、模板、頁面。

去年，團隊內部的 Pixel 設計體系已經積累了許多基礎組件和通用規(guī)則，因此在定義如何使用這套設計體系的時候，我們嘗試先將目前手上所有的設計資產進行重組和歸類，以方便其他設計師或者開發(fā)人員理解。

我們發(fā)現(xiàn)Brad Frost這一套原子設計理論，對于設計系統(tǒng)本身的物料分類比較有幫助，于是就嘗試按照下面的思路將設計物料進行分類：

原子：構成設計體系的最基礎元素。

如：色卡、字號、 icon 、圓角、間距等基礎規(guī)則。

分子：構成頁面的基礎組件。

如：按鈕、彈窗、搜索框、表單、彈窗等。

組織：由基礎組件構成的區(qū)塊。

如：列表操作區(qū)塊、列表展示區(qū)塊、表單區(qū)塊、數(shù)據篩選區(qū)塊、詳情展示區(qū)塊。

模板：由區(qū)塊構成的頁面模版。

如：詳情頁、列表頁、表單頁、異常頁。

頁面：帶業(yè)務邏輯的場景案例。

如：資源管理場景、消息通知場景、權限管理場景。

這樣我們可以將所有設計資產，按照顆粒度從小到大進行有效分類。設計師可以輕松的用搭積木的方式去做設計。

同時前端工程師也可以按照這套資產規(guī)范去將所有的資產在線化，在減少重復性開發(fā)的同時，更加保證了整個團隊的設計風格和交互動作的統(tǒng)一，避免了因為不同設計師和工程師的“個人習慣”問題而導致的差異。

三、建立屬于業(yè)務特色的設計體系

在上面一步中，我們將所有設計的物料進行了統(tǒng)一的歸類和整理，我們曾經覺得有了這些物料，加上通用的規(guī)則說明，設計師就可以科學的使用這套設計體系進行協(xié)作了。

但在實際推行一段時間后，我們依然發(fā)現(xiàn)一些問題：

如果一個新手設計師嚴格按照物料去使用上述資產，會養(yǎng)成從資產庫中找案例套用的習慣，當然這樣做在大部分日常業(yè)務中并沒有問題，但是一旦碰到業(yè)務特殊場景，或者某些創(chuàng)新功能需求，設計師就會陷入到“我們的設計體系中沒有這個案例”的慣性思維中去。

同時，由于原子-分子-組織-頁面這種層級結構，過分依賴于理性的“搭建”思維，而失去了作為設計師“感性”優(yōu)勢，容易造成所有頁面千篇一律，沒有亮點。

Corinna 在 2018 年發(fā)表的“為什么我們的模式庫不再使用原子設計”一文中，也提到了原子設計在落地時的局限性，他提到，過度的依賴層層遞進的關系，會導致整個系統(tǒng)會變的極其復雜而難以維護，一旦開始使用，后續(xù)的迭代和重構成本會非常高。

因此我們開始問自己，我們花精力去做設計體系，初衷是為了解決什么問題？

思考了一下，其實本質上還是解決業(yè)務團隊的痛點：

1. 滿足業(yè)務快速發(fā)展和迭代
2. 快速響應不同用戶的不同需求
3. 減少大量重復性頁面的設計與開發(fā)，提高效率
4. 幫助業(yè)務做出更多的亮點和創(chuàng)新，提升業(yè)務競爭力
5. 設計體系能夠在多個團隊并行，并且相互之間不會受影響

其中1-3這幾個痛點，我們目前的設計體系已經能滿足了，但要解決 4 和 5 ，還需要去優(yōu)化原有的設計系統(tǒng)，使其更加適配業(yè)務屬性。

如果把我們的設計體系比作一個飯館，那我們現(xiàn)在已經具備了做菜的原材料以及原材料的使用方法，也做出了幾道主打的家常菜，我們后面要做的事，就是如何利用現(xiàn)有材料，根據不同客人的口味去研發(fā)新的菜譜。

為了適配不同產品和業(yè)務，我們目前的 Pixel 設計體系主要在一套基礎組件的體系下，分為了 PaaS 和 SaaS 兩大產品領域，而在兩大產品領域內，又根據業(yè)務的特性、用戶、產品形態(tài)細分了不同的業(yè)務域，保證大家可以在一套基礎體系規(guī)范下，可以切換不同的主題，保留自己的業(yè)務特色。

那如何幫助業(yè)務做出更多的亮點和創(chuàng)新，提升業(yè)務競爭力呢？

在監(jiān)控運維業(yè)務域，根據業(yè)務平臺的業(yè)務屬性，我們將這塊業(yè)務整體分為了“監(jiān)”“管”“控”三大方向，每個方向其業(yè)務目標、用戶均有差異，通過調研和分析，我們嘗試為每一個方向定義了一個關鍵詞。

• 監(jiān)控平臺，其目標是為了時刻監(jiān)控業(yè)務的運行情況，關鍵詞為【可視】；
• 應用運維平臺，其核心目標是靈活處理大量的變更操作，關鍵詞為【效率】；
• 安全工程平臺，核心是為了保證業(yè)務以及人員操作的安全穩(wěn)定，關鍵詞為【安全】。

接著，我們圍繞“可視”，將原有的一些傳統(tǒng)“列表-詳情”層層下探的頁面，優(yōu)化成了幾種可視化場景，分別對應不同流程的監(jiān)控、編排以及運維場景，將底層的業(yè)務邏輯、鏈路架構或者工作流進行可視化拓撲展示。

最后，我們發(fā)現(xiàn)這些“新菜譜”雖然各不相同，面向的業(yè)務場景也有很大區(qū)別，但是在設計上是可以提煉出共同之處的。

于是我們定義了編排的“原子組件”，并在此基礎上明確了不同的狀態(tài)與樣式，以及明確哪些樣式是支持自定義的，哪些樣式是需要遵守規(guī)范的，通過對業(yè)務場景的拆分，我們又得到了下面的這個“編排場景庫”，基于這個場景庫，后面碰到相似場景時，設計師將不再糾結需要從固定菜譜中去套用，而是更從設計師的視角，去考慮如何基于這個庫去創(chuàng)造更多的“菜譜”。

類似的，我們還得到了拓撲場景庫、高級操作場景庫等，基本都是基于業(yè)務特色進行的提煉——總結——拆分。

那如何將這些場景與之前的設計體系耦合呢？

我們嘗試了另一種分類方式，用“通用——業(yè)務”和“案例——規(guī)則”兩條坐標軸劃分出了四象限，并將業(yè)務中總結的經驗通過規(guī)則化、案例化、文檔化的形式落到這四個象限中。這樣就得到了一套兼具通用性和業(yè)務特色的設計體系。

在這套具備業(yè)務屬性的設計體系中，不僅僅局限于“設計物料”和“設計規(guī)則”，更增加了諸如“協(xié)作流程”“業(yè)務模型”等具有業(yè)務特色的規(guī)則或者物料，我們希望用這四個象限的拆分，使得新手設計師可以全方位的了解業(yè)務設計體系，在保證設計統(tǒng)一性的同時也能基于業(yè)務進行二次創(chuàng)新，從而保證設計系統(tǒng)的不斷迭代和創(chuàng)新。

四、總結

以上，是我在實際探索設計體系建設的一點思考，在建設設計體系的過程中，通用性和業(yè)務定制化似乎一直是一個矛盾。

我們理想中的設計體系，既不是一套只考慮通用性的模版，也不是一套千人千面的個性化皮膚，而是可以根據業(yè)務的發(fā)展，互利共贏的可持續(xù)設計體系。而在這過程中，勢必還會有更多的坎坷等著我們去面對，歡迎有更多相似經驗的設計師與我們溝通。

作者：黑桃；公眾號：Alibaba Cloud TxD

本文由 @Alibaba Cloud TxD 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pixabay，基于CC0協(xié)議。