設計系統(Design System)分享

Wei-Hsun Chen
UXeastmeetswest
Published in
6 min readMar 5, 2018

較具規模的公司往往有多數個產品,有時候你使用者使用公司的不同產品時,會發現視覺、使用方式和整個體驗感覺像是來自不同的公司,比較類似的案例就像是ADP或是Cisco(當然Cisco常常是因為併購不同的公司所導致),而有些公司的不同產品你使用起來卻是非常和諧,像是同一個團隊在做不同產品一樣,使用起來體驗也一致(像是Intuit, Google, GE, Salesforce)。

當中的差異性是因為有和諧的一套設計系統(Design System),如何去定義設計系統?小編認為設計系統可以想像是一個資源庫,裡面有設計風格規範、重複使用的介面設計元素(UI element)、重複使用的互動設計元素(像是檔案管理)、大方向的設計方向,甚至是動畫設計元素或是檔案工具管理等等。設計系統不僅僅只是介面設計的規範而已,更是團隊的工作方式和團隊所注重的核心價值

小編這篇主要分享設計系統的優勢、案例、以及做設計系統時所需考慮的因素。

為何需要設計系統?

設計系統(Design System)可以幫助不同產品有和諧的使用者體驗以及風格,不僅讓公司對闡述品牌的核心價值有幫助,使用者也可以預期他們怎麼去使用產品,不同產品像是從同一個團隊做出來的,而不是從沒有和諧的不同團隊所開發出來。

再來,有統一的架構和規範去幫助設計團隊使用重複性質高的元素,譬如像是檔案管理,如何去上傳、刪除、複製等等,使用設計系統不僅讓不同產品有相同的使用體驗,項目上的設計師更可以節省時間重新設計這些使用流程,讓設計師可以專注在不同產品重點特別的功能上做設計。對於開發者來說,這些元素代碼也可以拿來重複利用。

以下為幾個比較知名的範例:

  1. GE’s Predix Design System

以下這篇非常棒的文章分享了GE如何去做他們的設計系統

A design system should not simply be a collection of user interface components along with some design theory.

他們使用原子設計理論Atomic Design為基礎,從基本的按鈕,文字輸入等等開始,到像是登入頁面設計時,就會包含按鈕和文字等等的原子而成為分子,以此類推。我們四神湯的Shandy有更深入分享原子設計理論的文章:

2. Google Material Design

Google的設計系統深入規範每個設計元素的使用方式,譬如說在使用Scrollable Tab時的不同tab所包括的資訊架構不能不一樣等等,Material Design更說明了他們的設計思維,譬如說他們使用真正的紙張作為隱喻,在不同的設計元素或是動畫上都可以看到使用真正紙張作為陰影等等。

3. IBM’s Carbon Design System

IBM的設計系統則非常清楚的規範哪些元素如何使用、何時使用,設計師可以直接下載檔案來重複使用,開發者也可以直接使用前端代碼。

4. Salesforce’s Lightning Design System

以下Salesfore UX團隊分享了他們的為何要有設計系統以及如何去使用

以上只是其中幾個比較有名的設計系統,可以大略得隻每個設計系統在使用性上不盡相同,有些比較有彈性的可以去做更改,設計系統只提供非常基礎的大略方向,而有些則比較嚴謹的規範使用方式,自由度較低。

設計系統小撇步

Medium上已經有許多好文章來分享如何做一個設計系統,譬如以下:

很多時候會使用原子設計理論為基礎來開始,一開使不同產品的不一致性之外,更需要了解不同項目的設計流程,有時候將工具和工作流程統一也是很重要的。

小編不另外著墨另外小編以經驗分享幾個為做設計系統需要考慮的重要因素:

  1. 時間和金錢:設計系統是個不斷在進行的流程,很多時候設計系統更是一個“設計系統團隊去做的”,沒有那麼多資源的團隊必須考慮花下來的時間成本,更需要專案經理和資源的支持,讓所有設計師都有自信去貢獻設計系統
  2. 責任:設計系統需要人去負責監督和審核的,不同產品有同的功能和設計出來,哪些需要進去設計系統,哪些元素是提供基本方向而不會過於牽制產品設計的,產品有新的功能也需要不斷的去更新設計系統。
  3. 溝通:設計系統需要與每個團隊上的設計師去做溝通,整合現有的不協調,更需要跟不同項目的設計師溝通確認大家都同意將新的東西加入規範。再來是跟開發者的溝通,沒人喜歡在問題出來之前設計系統就已經預設了解決方案,設計系統團隊需要不斷的重複去溝通設計系統是用來幫大家節省時間,讓大家可以更快樂的生活低!
  4. 使用性:設計系統不只是介面設計資源庫而已,更需要包含品牌想要表達的價值,來決定設計系統裡的風格和使用體驗等等。如何要去使用設計系統,要給設計師比較多的空間對不同產品去做客製化嗎還是較為嚴謹?要如何使用設計系統幫助大家工作,需要包含每個東西的代碼?或是給設計師的檔案去如何使用等等。或是需要公開設計系統嗎?有沒有外部的其他公司需要使用設計系統,像是合作的公司等等。

設計系統不僅幫助客戶有和諧的設計體驗,對於內部更是長遠下來對於設計師和開發者省時省力。小編也在這塊上做努力當中,如果有新的心得和更新會再分享給大家!歡迎大家一起來討論!

--

--

Wei-Hsun Chen
UXeastmeetswest

Product Designer @DocuSign. ex-Meta/Shure. Taiwan originate. Passionate about music, innovation and social issues.