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

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

Design system是個比較龐大的話題，今天主要會圍繞以下內(nèi)容深入介紹Design System，我接下來也會持續(xù)更新其他關(guān)于Design System的話題：

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

一、為什么我們需要設(shè)計系統(tǒng)？

隨著電子創(chuàng)新的發(fā)展，人們對產(chǎn)品或服務(wù)的要求越來越高。他們期望即使在同一個公司開發(fā)的不同的平臺上的不同的產(chǎn)品中都能有流暢的體驗。用戶的這種變化，使得越來越多互聯(lián)網(wǎng)公司開始意識到設(shè)計的重要性。

公司開始擴張內(nèi)部的設(shè)計團隊，優(yōu)化設(shè)計流程和工具。然而，設(shè)計團隊規(guī)模的擴大一定能帶來好的用戶體驗嗎？答案是不一定。

對設(shè)計的重視和投資，也會帶來許多挑戰(zhàn)。比如，如何保證用戶體驗的流暢性和一致性？如何管理設(shè)計債務(wù)和技術(shù)債務(wù)？如何能幫助公司擴大規(guī)模等等。

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

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

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

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

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

Adobe的設(shè)計系統(tǒng)Spectrum

二、什么是設(shè)計系統(tǒng)

設(shè)計系統(tǒng)是一系列可重用的組件和它們的使用指導文檔，使用這些組件能夠快速地開發(fā)不同平臺的產(chǎn)品。在制作這些組件的過程中會考慮到公司的設(shè)計理論和Branding(顏色，文案，字體等等)，所以它們也通常包括在設(shè)計系統(tǒng)里。設(shè)計系統(tǒng)為公司的各種產(chǎn)品提供了基石(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的區(qū)別

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

四、我們對Design System的誤解

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

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

以下三點是比較常見的對設(shè)計系統(tǒng)的偏見：

1）Design System限制了設(shè)計師的創(chuàng)造力

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

Design System的存在可以減少很多不必要的工作，比如調(diào)整間距，對其元素等等。設(shè)計師有更多的時間來關(guān)注更全局的設(shè)計策略。

2）Design System只關(guān)乎設(shè)計，可由設(shè)計師獨立完成

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

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

3）Design System是一勞永逸的

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

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

五、Design System的重要性

1）提高設(shè)計開發(fā)效率

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

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

2）確保設(shè)計一致性，為用戶提供連貫一致的用戶體驗

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

3）設(shè)計系統(tǒng)促進了公司內(nèi)部的合作和交流

一個成功的設(shè)計系統(tǒng)是需要跨功能團隊參與，例如設(shè)計師，開發(fā)團隊，市場和品牌，文案，Accessibility專家。只有這樣才能確保Design System能解決產(chǎn)品設(shè)計和開發(fā)中所遇到的問題。

設(shè)計系統(tǒng)因此促進了公司內(nèi)部不同職位的合作和交流，這種文化的建立也會幫助公司更有效地推出新的產(chǎn)品或服務(wù)。

六、什么時候開始創(chuàng)建設(shè)計系統(tǒng)？

設(shè)計系統(tǒng)很有價值，但是這不代表所有的公司都需要一個Design System。設(shè)計系統(tǒng)的出現(xiàn)是為了讓設(shè)計能夠擴大規(guī)模，為了提供一種設(shè)計標準來供不同的設(shè)計師參考。

如果所在的公司出現(xiàn)了下面的兩個特征，那就說明我們可以開始提出設(shè)計系統(tǒng)了：

1. 公司有不同的產(chǎn)品，且都需要長期的開發(fā)和迭代
2. 越來越的設(shè)計師加入公司

但如果你的公司沒有長期需要開發(fā)的產(chǎn)品，或者你是公司唯一的設(shè)計師，這個階段Pattern libraby和Style guide 應該是足夠的。

七、設(shè)計系統(tǒng)項目中可能會面臨的挑戰(zhàn)

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

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

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

2）Design System需要支持者

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

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

一些公司發(fā)布的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

感謝大家的閱讀，下一篇將會講講如何開始一個設(shè)計系統(tǒng)的項目。

有關(guān)于任何Design System的問題，歡迎大家留言給我。

作者：靜H，微信公眾號：靜閱筆記

本文由 @靜H 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。