▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)
轉(zhuǎn)自：Alibaba Cloud TxD
編輯：張夢(mèng)如
共 4010 字 22 圖 預(yù)計(jì)閱讀 11 分鐘
提到設(shè)計(jì)體系，你會(huì)想到什么？
在 Alla Kholmatova 撰寫的《 Design System 》一書中，作者對(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)建、提煉、使用和共享這些模式。01. 優(yōu)秀的設(shè)計(jì)體系是什么樣的？
目前，在設(shè)計(jì)體系方面，國(guó)內(nèi)外已有許多團(tuán)隊(duì)都探索出了自己的風(fēng)格，綜合看，國(guó)外的設(shè)計(jì)體系經(jīng)過了長(zhǎng)時(shí)間的發(fā)展和沉淀，整體成熟度和完善度要高于國(guó)內(nèi)。比如我們來看一下 IBM 的 Carbon Design System 。Carbon Design 主要是從原則、組件、模式、共享資產(chǎn)、數(shù)據(jù)可視化五個(gè)方面來組成了一整套設(shè)計(jì)體系，按照《 Design System 》的定義，我們可以將原則、組件、模式歸類為“模式”；而將共享資產(chǎn)和數(shù)據(jù)可視化歸類為“實(shí)踐”。在原則部分， Carbon Design 規(guī)定了基礎(chǔ)的色彩、動(dòng)效、 icon 、文案、插畫等規(guī)范，這些規(guī)則雖然不是具體的組件，但是可以左右整體設(shè)計(jì)體系的基調(diào)，相當(dāng)于為整套體系打了一個(gè)堅(jiān)實(shí)的地基，而其中的動(dòng)效部分容易被很多人忽略，但是確實(shí)能體現(xiàn)整體的細(xì)節(jié)感和精致感。組件部分大家應(yīng)該都比較熟悉了，通常組件構(gòu)成了頁面最小功能顆粒度的元素，配合交互規(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)庫，非常嚴(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等，我們這里就不一一列舉了。
02. 如何有效的進(jìn)行設(shè)計(jì)資產(chǎn)的整理
在化學(xué)世界中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成了宇宙萬物。2013 年前端工程師 Brad Frost 在《 Atomic Design 》一文中提出了原子設(shè)計(jì)理論，并將此理論運(yùn)用在界面設(shè)計(jì)中，據(jù)說他是從化學(xué)中得到的啟發(fā)，原子（ Atoms ）結(jié)合在一起，形成分子（ Molecules ），進(jìn)一步結(jié)合形成的生物體（ Organisms ），根據(jù)他的理論，設(shè)計(jì)體系主要包含 5 個(gè)層面：原子、分子、組織、模板、頁面。去年，團(tuán)隊(duì)內(nèi)部的 Pixel 設(shè)計(jì)體系已經(jīng)積累了許多基礎(chǔ)組件和通用規(guī)則，因此在定義如何使用這套設(shè)計(jì)體系的時(shí)候，我們嘗試先將目前手上所有的設(shè)計(jì)資產(chǎn)進(jìn)行重組和歸類，以方便其他設(shè)計(jì)師或者開發(fā)人員理解。我們發(fā)現(xiàn)Brad Frost這一套原子設(shè)計(jì)理論，對(duì)于設(shè)計(jì)系統(tǒng)本身的物料分類比較有幫助，于是就嘗試按照下面的思路將設(shè)計(jì)物料進(jìn)行分類：原子：構(gòu)成設(shè)計(jì)體系的最基礎(chǔ)元素如：色卡、字號(hào)、 icon 、圓角、間距等基礎(chǔ)規(guī)則。組織：由基礎(chǔ)組件構(gòu)成的區(qū)塊如：列表操作區(qū)塊、列表展示區(qū)塊、表單區(qū)塊、數(shù)據(jù)篩選區(qū)塊、詳情展示區(qū)塊。頁面：帶業(yè)務(wù)邏輯的場(chǎng)景案例如：資源管理場(chǎng)景、消息通知場(chǎng)景、權(quán)限管理場(chǎng)景。這樣我們可以將所有設(shè)計(jì)資產(chǎn)，按照顆粒度從小到大進(jìn)行有效分類。設(shè)計(jì)師可以輕松的用搭積木的方式去做設(shè)計(jì)。同時(shí)前端工程師也可以按照這套資產(chǎn)規(guī)范去將所有的資產(chǎn)在線化，在減少重復(fù)性開發(fā)的同時(shí)，更加保證了整個(gè)團(tuán)隊(duì)的設(shè)計(jì)風(fēng)格和交互動(dòng)作的統(tǒng)一，避免了因?yàn)椴煌O(shè)計(jì)師和工程師的“個(gè)人習(xí)慣”問題而導(dǎo)致的差異。03. 建立屬于業(yè)務(wù)特色的設(shè)計(jì)體系
在上面一步中，我們將所有設(shè)計(jì)的物料進(jìn)行了統(tǒng)一的歸類和整理，我們?cè)?jīng)覺得有了這些物料，加上通用的規(guī)則說明，設(shè)計(jì)師就可以科學(xué)的使用這套設(shè)計(jì)體系進(jìn)行協(xié)作了。但在實(shí)際推行一段時(shí)間后，我們依然發(fā)現(xiàn)一些問題：
如果一個(gè)新手設(shè)計(jì)師嚴(yán)格按照物料去使用上述資產(chǎn)，會(huì)養(yǎng)成從資產(chǎn)庫中找案例套用的習(xí)慣，當(dāng)然這樣做在大部分日常業(yè)務(wù)中并沒有問題，但是一旦碰到業(yè)務(wù)特殊場(chǎng)景，或者某些創(chuàng)新功能需求，設(shè)計(jì)師就會(huì)陷入到“我們的設(shè)計(jì)體系中沒有這個(gè)案例”的慣性思維中去，同時(shí)，由于原子-分子-組織-頁面這種層級(jí)結(jié)構(gòu)，過分依賴于理性的“搭建”思維，而失去了作為設(shè)計(jì)師“感性”優(yōu)勢(shì)，容易造成所有頁面千篇一律，沒有亮點(diǎn)。Corinna 在 2018 年發(fā)表的“為什么我們的模式庫不再使用原子設(shè)計(jì)”一文中，也提到了原子設(shè)計(jì)在落地時(shí)的局限性，他提到，過度的依賴層層遞進(jìn)的關(guān)系，會(huì)導(dǎo)致整個(gè)系統(tǒng)會(huì)變的極其復(fù)雜而難以維護(hù)，一旦開始使用，后續(xù)的迭代和重構(gòu)成本會(huì)非常高。因此我們開始問自己，我們花精力去做設(shè)計(jì)體系，初衷是為了解決什么問題？思考了一下，其實(shí)本質(zhì)上還是解決業(yè)務(wù)團(tuán)隊(duì)的痛點(diǎn)：1.滿足業(yè)務(wù)快速發(fā)展和迭代3.減少大量重復(fù)性頁面的設(shè)計(jì)與開發(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)、用戶均有差異，通過調(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ōu)化成了幾種可視化場(chǎng)景，分別對(duì)應(yīng)不同流程的監(jiān)控、編排以及運(yùn)維場(chǎng)景，將底層的業(yè)務(wù)邏輯、鏈路架構(gòu)或者工作流進(jìn)行可視化拓?fù)湔故尽?/span>最后，我們發(fā)現(xiàn)這些“新菜譜”雖然各不相同，面向的業(yè)務(wù)場(chǎng)景也有很大區(qū)別，但是在設(shè)計(jì)上是可以提煉出共同之處的。于是我們定義了編排的“原子組件”，并在此基礎(chǔ)上明確了不同的狀態(tài)與樣式，以及明確哪些樣式是支持自定義的，哪些樣式是需要遵守規(guī)范的，通過對(duì)業(yè)務(wù)場(chǎng)景的拆分，我們又得到了下面的這個(gè)“編排場(chǎng)景庫”，基于這個(gè)場(chǎng)景庫，后面碰到相似場(chǎng)景時(shí)，設(shè)計(jì)師將不再糾結(jié)需要從固定菜譜中去套用，而是更從設(shè)計(jì)師的視角，去考慮如何基于這個(gè)庫去創(chuàng)造更多的“菜譜”。類似的，我們還得到了拓?fù)鋱?chǎng)景庫、高級(jí)操作場(chǎng)景庫等，基本都是基于業(yè)務(wù)特色進(jìn)行的提煉——總結(jié)——拆分。那如何將這些場(chǎng)景與之前的設(shè)計(jì)體系耦合呢？我們嘗試了另一種分類方式，用“通用——業(yè)務(wù)”和“案例——規(guī)則”兩條坐標(biāo)軸劃分出了四象限，并將業(yè)務(wù)中總結(jié)的經(jīng)驗(yàn)通過規(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)新。以上，是我在實(shí)際探索設(shè)計(jì)體系建設(shè)的一點(diǎn)思考，在建設(shè)設(shè)計(jì)體系的過程中，通用性和業(yè)務(wù)定制化似乎一直是一個(gè)矛盾。我們理想中的設(shè)計(jì)體系，既不是一套只考慮通用性的模版，也不是一套千人千面的個(gè)性化皮膚，而是可以根據(jù)業(yè)務(wù)的發(fā)展，互利共贏的可持續(xù)設(shè)計(jì)體系。而在這過程中，勢(shì)必還會(huì)有更多的坎坷等著我們?nèi)ッ鎸?duì)，歡迎有更多相似經(jīng)驗(yàn)的設(shè)計(jì)師與我們溝通。
— The end —
?? 原創(chuàng)文章精選??
如何評(píng)估設(shè)計(jì)質(zhì)量，提升設(shè)計(jì)技能
你常常忽略的 7 個(gè)具有破壞性的體驗(yàn)鴻溝
一篇文章告訴你服務(wù)設(shè)計(jì)到底能做什么？
看 Apple CarPlay 如何提升駕駛安全和駕駛體驗(yàn)
游戲新手指導(dǎo)怎么做？一起看看《對(duì)馬島之魂》如何打造初次對(duì)抗體驗(yàn)
制定 “小目標(biāo)”，了解產(chǎn)品管理中的結(jié)構(gòu)化思維
35+ 的 Windows 系統(tǒng)到底有什么了不起？細(xì)數(shù)系統(tǒng)界面設(shè)計(jì)的演變
導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計(jì) —— Lightship
后疫情時(shí)代，如何通過服務(wù)設(shè)計(jì)恢復(fù)真正的人際互動(dòng)？
?? 我們一起聊設(shè)計(jì) ???♂?
高質(zhì)量，學(xué)設(shè)計(jì)行交流微信群
期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長(zhǎng)
PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）
