設計系統 | 什么是設計系統(Design System)

5 評論 21378 瀏覽 83 收藏 14 分鐘

編輯導讀:設計系統是近年來熱門的話題之一,因為人們對產品流暢性體驗的要求越來越高,促使公司意識到設計的重要性。但是,擴張設計團隊并不能根本解決問題,想要帶來良好的用戶體驗,設計系統是其中重要的一環。本文將圍繞設計系統展開七個方面的分析,希望對你有幫助。

設計系統近幾年來一直是比較熱門的話題,我最近參與到了一個Design System的項目,今天把所學到的經驗和知識分享給大家。

Design system是個比較龐大的話題,今天主要會圍繞以下內容深入介紹Design System,我接下來也會持續更新其他關于Design System的話題:

  1. 為什么我們需要設計系統
  2. 什么是Design System
  3. Design System和Style Guide以及Pattern Library的區別
  4. 我們對Design System的誤解
  5. Design System的重要性
  6. 什么時候開始Design System
  7. 設計系統項目中可能會面臨的挑戰

一、為什么我們需要設計系統?

隨著電子創新的發展,人們對產品或服務的要求越來越高。他們期望即使在同一個公司開發的不同的平臺上的不同的產品中都能有流暢的體驗。用戶的這種變化,使得越來越多互聯網公司開始意識到設計的重要性。

公司開始擴張內部的設計團隊,優化設計流程和工具。然而,設計團隊規模的擴大一定能帶來好的用戶體驗嗎?答案是不一定。

對設計的重視和投資,也會帶來許多挑戰。比如,如何保證用戶體驗的流暢性和一致性?如何管理設計債務和技術債務?如何能幫助公司擴大規模等等。

舉一個我工作中的例子,我上一家公司去年成立了in-house的設計團隊。但是真正開始做設計的時候才發現,一個產品至少有3套不同的設計語言,而我們的加入又帶來新的設計決策。不管對于設計團隊還是開發團隊來說,每一次引入新的設計決策,都會造成相應的設計債務或者技術債務,這些債務都會限制到設計規模的擴大。

Forrester在今年2月發布的一篇名為《Unlocking Design’s Full Business Potential》的研究報告中指出,有3分之一參與調研的設計團隊領導表示他們還在竭力為用戶提供一致的流暢的體驗。

所以無論公司為設計團體投入多大的資源,只有當所有的產品服務能夠為用戶解決問題,為他們帶來連貫一致的體驗,公司的競爭力才會提升。

Design System便是戰略上重要的一環。這也是為什么越來越多的公司開始搭架Design System。Forrester的研究報告中所研究的385企業中有40%的的公司已經推出了它們自己的設計系統,并且被其他的項目團隊所用,有46%的公司正在擴大設計系統使用率的路上。

很多我們熟知的公司也在近幾年推出了他們的Design System,包括像Adobe,Altassian,Salesforce,Airbnb等等。

Adobe的設計系統Spectrum

二、什么是設計系統

設計系統是一系列可重用的組件和它們的使用指導文檔,使用這些組件能夠快速地開發不同平臺的產品。在制作這些組件的過程中會考慮到公司的設計理論和Branding(顏色,文案,字體等等),所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石(building blocks)和指導。

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications

——Design better

三、Design System和Style Guide以及Pattern Library的區別

Style guide和Pattern library其實是設計系統的兩個組成部分,但除了它們,設計系統外還包括了一系列的標準來指導設計。這些標準記錄了設計團隊達成一致的一系列決定,比如我們如何選擇控件,如何在不同的控件中選擇。正是因為這些標準才確保了設計方案不僅僅只解決一個問題,而是能被復用。標準也是為什么用戶能獲得一致的體驗的原因。

四、我們對Design System的誤解

在我目前所參與的Design System的項目中,大部分時間是在跟不同職位的同事”推銷”Design System,為了能得到他們的支持或是說服他們成為第一批使用Design System的項目組。

我的一個感受便是Design System最具挑戰的并不是制作過程,而是得到其他同事和項目以及公司的支持。在”銷售“的過程中,我也發現人們都Design System都有這樣那樣的誤解,導致項目的推動受阻。

以下三點是比較常見的對設計系統的偏見:

1)Design System限制了設計師的創造力

非常意外地,這是很多設計師對Design System的看法。他們覺得Design System會限制他們的發揮,以致于他們不能去探索一些新的樣式和交互方式。我個人覺得作為設計師我們不能僅僅為了有創意而去引入新的樣式或交互方式。我們的設計都應該解決商業或用戶的問題。對于那些產品還不成熟的公司,在組件庫上的創意能帶來的收益微乎其微。這也就是為什么我覺得設計師的創造力應該用在提升整個體驗上。

Design System的存在可以減少很多不必要的工作,比如調整間距,對其元素等等。設計師有更多的時間來關注更全局的設計策略。

2)Design System只關乎設計,可由設計師獨立完成

對Design System的另一個誤解便是以為它僅僅是一些在設計軟件中的可重復使用的components,所以可由設計師獨立完成。

Design System作為公司design language的single source of truth,是需要來自不同角色支持和參與的。包括前端工程師,品牌市場,Accessibility專家和動態設計師等等。

3)Design System是一勞永逸的

很多人認為Design System的價值在于,只要完成就大功告成了。

但其實想要Design System成功,就需要像對待一個產品一樣對待它,需要維護和改進。這可以包括兩個方面,一個是對內部使用design system的項目組和同事,一種是對用戶而言。Design System的項目團隊應該定期收集內部使用Design System的同事以及產品用戶的反饋,確保能把它們的反饋持續地更新到Design System里。

五、Design System的重要性

1)提高設計開發效率

這是Design System最顯而易見的好處之一。因為組件庫的可重用性,設計師和開發都不用從頭設計開發一個組件。

Design System還讓我們能夠更高效地完成原型制作,更快地得到用戶反饋。我還記得幾年前我的日常工作中,很多時候都在做很多重復的工作。有了Design System,任何改動只需要在設計系統中進行,這減少了很多不必要的工作。

2)確保設計一致性,為用戶提供連貫一致的用戶體驗

Design system的兩個組成部分組件庫和標準文檔,都為公司的各種產品提供了單一真相來源(the single source of truth)。所以用戶不會在公司產品中看到不同樣式的按鈕或是不同交互方式的搜索框。設計的一致性讓用戶能縮短的學習使用產品的周期,讓他們能夠預見他們的操作所帶來的改變。

3)設計系統促進了公司內部的合作和交流

一個成功的設計系統是需要跨功能團隊參與,例如設計師,開發團隊,市場和品牌,文案,Accessibility專家。只有這樣才能確保Design System能解決產品設計和開發中所遇到的問題。

設計系統因此促進了公司內部不同職位的合作和交流,這種文化的建立也會幫助公司更有效地推出新的產品或服務。

六、什么時候開始創建設計系統?

設計系統很有價值,但是這不代表所有的公司都需要一個Design System。設計系統的出現是為了讓設計能夠擴大規模,為了提供一種設計標準來供不同的設計師參考。

如果所在的公司出現了下面的兩個特征,那就說明我們可以開始提出設計系統了:

  1. 公司有不同的產品,且都需要長期的開發和迭代
  2. 越來越的設計師加入公司

但如果你的公司沒有長期需要開發的產品,或者你是公司唯一的設計師,這個階段Pattern libraby和Style guide 應該是足夠的。

七、設計系統項目中可能會面臨的挑戰

我相信每個設計師和前端工程師都能看到Design System的價值,但是在實際的項目中,卻會面臨各種各樣的挑戰。

1)Design System是非常繁瑣耗時的項目

只有當設計系被當做一個項目來看待的時,它成功的幾率才會更大。我們需要有策略地去”銷售“它,有roadmap來指導團隊,有相應的計劃來讓更多項目看到它的價值。在Design System成型以后還需要定期收集內部用戶和產品用戶的反饋。這些還僅僅是流程層面的,當設計師開始做組件時,也是非常耗時的工作。為了確保所設計的控件能解決一系列的問題,設計師需要考慮不同的使用場景,確保在設計軟件中制作的控件有延展性,能被其他的設計師所用。

2)Design System需要支持者

很多大公司現在成熟的Design System都是從side projects開始的。因為公司在投入大量資源之前,都想看看Design System能給公司帶來什么。所以Design System項目的初期其實是非常艱難的,因為一方面需要各種資源來啟動項目,另一方面又需要像公司高層證明Design System的價值來獲得更多的資源。

所以項目初期,獲得不同項目和不同職位同事的支持是很重要的。讓他們看到design system的價值,讓他們愿意參與到Design System前期的制作,讓他們成為design system的支持者。只有這樣才能更快地推進Design System,以便被其他項目使用,從而展現它的價值。

一些公司發布的Design System:

Atlassian Design System

Lightning Design System

Spectrum, Adobe’s design system

Microsoft Design

Primer Design System

Shopify Polaris

參考鏈接:

Design system handbook

Forrester Report: Unlocking Design’s Full Business Potential | Adobe XD Ideas

感謝大家的閱讀,下一篇將會講講如何開始一個設計系統的項目。

有關于任何Design System的問題,歡迎大家留言給我。

 

作者:靜H,微信公眾號:靜閱筆記

本文由 @靜H 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 下一篇什么時候出?。?/p>

    來自廣東 回復
  2. 設計系統跟AntDesign之類的有什么不同呢

    來自浙江 回復
    1. 設計語言和設計系統,都是有廣義和狹義,廣義上是差不多的,都包含設計理念、交互規范、設計組件&樣式庫、及對應代碼等。AntDesign是一套廣義的設計語言。狹義上的設計語言以設計理念與視覺規范為主,可以只是一套文檔。而狹義上的設計系統,指設計師/開發構建的具體樣式、組件庫設計文件/代碼——個人理解。

      來自北京 回復
  3. 學習了,有空多交流

    來自浙江 回復
  4. 學習了

    回復