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

提到設(shè)計(jì)體系，你會(huì)想到什么？組件？方法論？還是頁(yè)面模版？

在 Alla Kholmatova 撰寫(xiě)的《 Design System 》一書(shū)中，作者對(duì)設(shè)計(jì)體系是這樣定義的：

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

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

“實(shí)踐”則是關(guān)于如何在設(shè)計(jì)團(tuán)隊(duì)當(dāng)中創(chuàng)建、提煉、使用和共享這些模式。

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

目前，在設(shè)計(jì)體系方面，國(guó)內(nèi)外已有許多團(tuán)隊(duì)都探索出了自己的風(fēng)格，綜合看，國(guó)外的設(shè)計(jì)體系經(jīng)過(guò)了長(zhǎng)時(shí)間的發(fā)展和沉淀，整體成熟度和完善度要高于國(guó)內(nèi)。比如我們來(lái)看一下 IBM 的 Carbon Design System 。

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

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

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

模式部分算是 Carbon Design 的一個(gè)核心亮點(diǎn)，每一個(gè)“模式”都有總覽、理論出處、使用方法、案例推導(dǎo)等等，而不是簡(jiǎn)單的對(duì)樣式進(jìn)行定義，可以看出 IBM 在 B 端領(lǐng)域的多年深耕，已經(jīng)總結(jié)出一套兼具理論和實(shí)際的資產(chǎn)庫(kù)，非常嚴(yán)謹(jǐn)和科學(xué)。

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

可視化圖表。作為一個(gè)單獨(dú)的領(lǐng)域， Carbon Design 對(duì)齊進(jìn)行了單獨(dú)的整合與枚舉。

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

二、如何有效的進(jìn)行設(shè)計(jì)資產(chǎn)的整理

在化學(xué)世界中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成了宇宙萬(wàn)物。

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

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

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

原子：構(gòu)成設(shè)計(jì)體系的最基礎(chǔ)元素。

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

分子：構(gòu)成頁(yè)面的基礎(chǔ)組件。

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

組織：由基礎(chǔ)組件構(gòu)成的區(qū)塊。

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

模板：由區(qū)塊構(gòu)成的頁(yè)面模版。

如：詳情頁(yè)、列表頁(yè)、表單頁(yè)、異常頁(yè)。

頁(yè)面：帶業(yè)務(wù)邏輯的場(chǎng)景案例。

如：資源管理場(chǎng)景、消息通知場(chǎng)景、權(quán)限管理場(chǎng)景。

這樣我們可以將所有設(shè)計(jì)資產(chǎn)，按照顆粒度從小到大進(jìn)行有效分類(lèi)。設(shè)計(jì)師可以輕松的用搭積木的方式去做設(shè)計(jì)。

同時(shí)前端工程師也可以按照這套資產(chǎn)規(guī)范去將所有的資產(chǎn)在線化，在減少重復(fù)性開(kāi)發(fā)的同時(shí)，更加保證了整個(gè)團(tuán)隊(duì)的設(shè)計(jì)風(fēng)格和交互動(dòng)作的統(tǒng)一，避免了因?yàn)椴煌O(shè)計(jì)師和工程師的“個(gè)人習(xí)慣”問(wèn)題而導(dǎo)致的差異。

三、建立屬于業(yè)務(wù)特色的設(shè)計(jì)體系

在上面一步中，我們將所有設(shè)計(jì)的物料進(jìn)行了統(tǒng)一的歸類(lèi)和整理，我們?cè)?jīng)覺(jué)得有了這些物料，加上通用的規(guī)則說(shuō)明，設(shè)計(jì)師就可以科學(xué)的使用這套設(shè)計(jì)體系進(jìn)行協(xié)作了。

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

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

同時(shí)，由于原子-分子-組織-頁(yè)面這種層級(jí)結(jié)構(gòu)，過(guò)分依賴(lài)于理性的“搭建”思維，而失去了作為設(shè)計(jì)師“感性”優(yōu)勢(shì)，容易造成所有頁(yè)面千篇一律，沒(méi)有亮點(diǎn)。

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

因此我們開(kāi)始問(wèn)自己，我們花精力去做設(shè)計(jì)體系，初衷是為了解決什么問(wèn)題？

思考了一下，其實(shí)本質(zhì)上還是解決業(yè)務(wù)團(tuán)隊(duì)的痛點(diǎn)：

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

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

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

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

那如何幫助業(yè)務(wù)做出更多的亮點(diǎn)和創(chuàng)新，提升業(yè)務(wù)競(jìng)爭(zhēng)力呢？

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

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

接著，我們圍繞“可視”，將原有的一些傳統(tǒng)“列表-詳情”層層下探的頁(yè)面，優(yōu)化成了幾種可視化場(chǎng)景，分別對(duì)應(yīng)不同流程的監(jiān)控、編排以及運(yùn)維場(chǎng)景，將底層的業(yè)務(wù)邏輯、鏈路架構(gòu)或者工作流進(jìn)行可視化拓?fù)湔故尽?/p>

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

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

類(lèi)似的，我們還得到了拓?fù)鋱?chǎng)景庫(kù)、高級(jí)操作場(chǎng)景庫(kù)等，基本都是基于業(yè)務(wù)特色進(jìn)行的提煉——總結(jié)——拆分。

那如何將這些場(chǎng)景與之前的設(shè)計(jì)體系耦合呢？

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

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

四、總結(jié)

以上，是我在實(shí)際探索設(shè)計(jì)體系建設(shè)的一點(diǎn)思考，在建設(shè)設(shè)計(jì)體系的過(guò)程中，通用性和業(yè)務(wù)定制化似乎一直是一個(gè)矛盾。

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

作者：黑桃；公眾號(hào)：Alibaba Cloud TxD

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

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