中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

一、優秀的設計體系是什么樣的？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

組織：由基礎組件構成的區塊。

如：列表操作區塊、列表展示區塊、表單區塊、數據篩選區塊、詳情展示區塊。

模板：由區塊構成的頁面模版。

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

頁面：帶業務邏輯的場景案例。

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

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

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

三、建立屬于業務特色的設計體系

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

但在實際推行一段時間后，我們依然發現一些問題：

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

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

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

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

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

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

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

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

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

那如何幫助業務做出更多的亮點和創新，提升業務競爭力呢？

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

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

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

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

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

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

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

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

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

四、總結

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

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

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

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

題圖來自 Pixabay，基于CC0協議。