設計體系 | 如何建立業(yè)務特色的設計體系
編輯導語:通用性和業(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è)務團隊的痛點:
- 滿足業(yè)務快速發(fā)展和迭代
- 快速響應不同用戶的不同需求
- 減少大量重復性頁面的設計與開發(fā),提高效率
- 幫助業(yè)務做出更多的亮點和創(chuàng)新,提升業(yè)務競爭力
- 設計體系能夠在多個團隊并行,并且相互之間不會受影響
其中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é)議。
- 目前還沒評論,等你發(fā)揮!