到底什麼是設計系統

到底什麼是設計系統

到底什麼是設計系統,觀點,page_wu,原創文章站酷網,中國設計師互動平台。

前邊寫了一些關於設計系統的文章,很多小伙伴卻一直在問,到底什麼是設計系統。今天這篇文章就來詳細聊一聊,希望大家看完之後,對設計系統有一個全面的認識。

文章分為兩個部分。第一部分是設計系統的發展歷史,順便聊一聊“Why”的問題;第二部分為設計系統的組成,也就是“What”。至於如何建立設計系統,“How”的部分,涉及到的知識較多,後邊會專門寫文章慢慢展開。

發展歷史

20世紀60年代,軟件行業進入爆發式的增長階段,原始的開發模式已經無法滿足大量的開發需求。為了應對這一問題,Douglas McIlroy在1968年的NATO軟件大會上提出組件式開發的解決思路,從而提高工作效率,並產生更加規範的應用軟件。
1977年,建築設計大師Christopher Alexander在他的經典著作《A Pattern Language》中確立了設計模式(design pattern)的概念,同時提供了253個設計模式語言,他指出:


每種設計模式都針對某個在我們的環境當中反復發生的問題進行了描述,並提供了相應的解決方案。


設計模式的提出,是設計行業首次對組件式設計的思考,為設計的標準化和規模化提供了基礎理論。
很快,軟件行業就引進了設計模式,並成為界面設計的法則。 2006年,Jenifer Tidwell在她的著作《Design Interface》中,對界面設計的模式進行了總結。界面設計模式是重複出現的設計元素的集合,它定義了這些元素的行為方式、外觀以及代碼構成。
undefined
2010年,隨著移動互聯網的爆發,各種設備層出不窮,界面設計面臨著跨平台、多尺寸的自適應問題,原始的設計方法已經無法滿足大量的設計需求。
2013年,一個叫做Brad Forst的前端工程師給出了他的解決方案。腦洞大開的Brad從高中化學知識中,提出了“Atomic Design”理論,即一種分層有條理的創建模式庫的方法。原子設計理論融合了軟件開發的組件式思想,設計領域的模式庫和化學界的分子構成,完美的解決了模塊化和規模化的問題。
undefined
很多公司開始運用原子設計的理論搭建自己的模式庫,設計系統也即將問世。
2014年,Google的Material Design橫空出世。它不僅有完整的模式庫,還提出了自己的設計原則,這些原則由基本原理所構成,再搭配上風格指南,形成一套完整的設計語言系統。
undefined
由此,設計系統風靡全球,IBM,Airbnb以及SAP等公司,都按照這個思路搭建自己的設計系統。
2016年,螞蟻金服技術體驗部推出Ant Design,成為國內首個設計系統,從而在國內也掀起一股浪潮。
undefined
到今天為止,設計系統蓬勃發展,有網站專門進行了收集整理,全球已有500多家公司發布了自己的設計系統。
undefined

設計系統

我們從定義開始,看看設計系統都有哪些內容構成。
首先解釋一下“系統”的概念。
在《系統之美》這本書裡,對系統是這樣定義的:

系統是一組互相連接的事物,在一定時間內,以特定的行為模式互相影響,例如人,細胞,分子等。
任何一個系統都包括三種構成部分:要素,連接,功能或目標。

undefined

定義可以看出,不僅僅要關注系統是由哪些部分組成的,還要關注這些部分是如何連接在一起的,它們的關係是什麼樣的。
那什麼是設計系統呢?
根據系統的定義,我們試著總結一下設計系統:
設計系統由設計語言和模式庫構成,在設計原則的指引下,通過統一的協作語言和科學的管理方法組織起來,創建體驗一致的用戶界面。


拆解一下設計系統的三要素:

  • 構成:設計語言和模式庫

  • 連接方式:設計原則、協作語言和管理方法

  • 目標:創建體驗一致的用戶界面
下面逐個分析。

設計語言

語言是我們用來交流的工具,設計語言其實就是產品與用戶交流的工具。它是設計系統的基礎,與品牌識別和情感相關的,包括顏色,文字,佈局,圖標和動效等等。

模式庫

模式庫,也叫做組件庫。它包含了各種模式及其使用方法,代碼構成等。模式庫可以根據原子設計理論來進行分層,如組件,區塊,模板等。

undefined

設計語言和模式庫是設計系統的主要組成部分,目前市面上大多數設計系統都是由這兩部分構成。然而這並不是全部,它們背後是如何連接的才是核心。

設計原則

設計原則在上一篇文章你為什麼需要設計原則?中已經詳細介紹,它為設計決策提供核心價值,為設計提供嚮導,從而明確設計方向,統一設計風格。
設計原則是設計系統的靈魂,Google的Material Design正是在其設計原則的加持下,才顯得獨一無二。

undefined

協作語言

協作語言可以幫助所有人以相同的方式理解設計原則、品牌願景、產品目標及信息架構,並對設計模式的特質及使用方式形成共識的語言標準。

在《建築的永恆之道》中,這樣評價協作語言:

一個群體,像是共享著同一個頭腦,通過遵從相同的模式化語言來協同作業,最終使那些宏偉的建築拔地而起。

所以,團隊中所有人都要使用相同的語言來進行交流。比如,所以的組件命名必須達成一致,這樣在交流的時候,不同崗位之間,如產品經理,前端和後端,都能很好理解彼此的意思。

管理方法

管理方法主要包含三個方面:管理團隊,反饋機制和維護流程。
管理團隊是指由誰來管理設計系統?一些比較大的設計團隊,比如salesforce,會設立團隊來專門負責設計系統。小一點的團隊沒有那麼多人,可能是由比較資深的設計師兼職負責。
無論是專業的團隊還是兼職負責,你必須有一個完善的機制,來維護設計系統。因為一旦停止維護,設計系統就會失去其意義。
反饋機制要解決的問題是:用戶是誰?設計系統是給誰用的?設計師、產品經理還是前端開發人員?他們如何學習設計系統?說明文檔、視頻教程還是定期培訓?他們遇到問題如何反饋?有沒有反饋庫?或者論壇,實時通訊工具?
反饋機制是維持設計系統的必備因素。無論是前期推廣還是後期維護,沒有合理的反饋機制,就無法展開設計系統的應用。
維護流程是指設計系統在應用之後,如何維護更新,如何協同。
如何更改樣式?修改樣式的流程是什麼?誰來提交修改申請?是否進行評審?誰來批准樣式修改?
如何在產品經理,設計師和前端開發之間同步樣式?樣式修改之後如何同步給使用者?前端代碼如何同步?已經應用了該樣式的產品如何同步?
各個工作流之間如何協同?用sketch還是Xd,或者figma?產品經理是不是要單獨維護一個Axure庫?和前端之間如何協同?
維護流程是設計系統良好運轉的基礎,合理的維護流程會提高協作效率。

最後的話

最後,小結一下。
設計系統是在模塊化和設計模式的基礎上發展起來的。
在2010年移動互聯網的爆發,帶來了屏幕尺寸和界面尺寸的爆發式增長。為了解決一致性和效率的問題,由模式庫逐漸發展成為設計系統。
設計系統由設計語言模式庫構成,在設計原則的指引下,通過統一的協作語言和科學的管理方法組織起來,創建體驗一致的用戶界面。
設計語言是設計系統的基礎,與品牌識別和情感相關的,包括顏色,文字,佈局,圖標和動效等等。
模式庫,也叫做組件庫。它包含了各種模式及使用方法,代碼構成等。
設計原則為設計系統提供嚮導,協作語言幫助所有人以相同的方式理解和交流,再通過科學地管理方法,包括團隊,反饋機制和維護流程等,將設計語言和模式庫連接起來,以實現系統的目標。
undefined
以上,是我對設計系統的總結,歡迎評論分享。與你共同進步!

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。