關于設計系統,你了解多少?

0 評論 2352 瀏覽 10 收藏 11 分鐘

編輯導讀:一套優秀的設計系統有利于幫助產品在各個平臺保持一致的設計語言和風格,給用戶一致的產品體驗。本文將從設計系統是什么、為什么要搭建設計系統和怎么搭建設計系統三個方面對設計系統展開分析說明,與大家分享。

隨著互聯網高速的發展,許多公司為了加速開發流程,較具規模的公司往往有多數個產品,在使用公司的不同產品時,會發現視覺、交互、動效,整體用戶體驗上是來自不同的公司,而有些公司的不同產品你使用起來卻是非常和諧,像是同一個團隊在做不同產品一樣,使用起來體驗也一致(比如說Intuit , Google, GE , Salesforce )。

當中的差異性是因為有統一的一套設計系統(Design System),如何去定義設計系統?設計系統可以是一個資源庫,里面有設計風格規范、重復使用的界面設計元素(UI element)、重復使用的交互設計元素、大的設計方向,甚至是動畫設計元素或是檔案工具管理等。

設計系統不僅僅只是界面設計的規范而已,更是團隊的工作方式和團隊所注重的核心價值。下面主要為大家分享設計系統的優勢、案例、以及做設計系統時所需考慮的因素。

01 為什么需要設計系統?

設計系統(Design System)可以幫助不同產品有較好的用戶體驗以及設計風格,不僅讓公司對品牌核心價值有幫助,整體體驗在用戶的心理預期承受范圍內,不同產品體驗上是同一個團隊做出來的,而不是從沒有Design System團隊研發出來的。

設計系統不應僅僅是用戶界面組件的集合以及一些設計理論。它應該演示如何在實際產品中應用設計模式,并規范其他團隊如何擴展使用模式。

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

回顧當前的設計流程

  1. 低效。設計團隊資源不透明,重復設計相同的元素,增加設計投入成本(人力及時間)。
  2. 不符合一致性原則。不符合一致性的界面元素,造成不佳的用戶體驗:由于快節奏的開發過程,導致在設計時沒有考量規?;?,或者沒有時間QA就將產品推入市場。不一致的元素會讓用戶產生困惑,花更多時間上手,可能因此放棄使用產品。
  3. 對設計產出沒有信心。由于沒有規范,對自己產出的設計是否符合產品設計方向持懷疑態度。

02 設計系統是什么?

設計系統并不是一個新觀念,2013年Brad Forst提出的原子設計。谷歌Material Design在2014年大放異彩,2016年Airbnb開始進行創建設計系統。陸陸續續,許多知名公司包含Salesforce,Atlasssian,Shopify,Apple對外公布產品的設計系統,讓大眾認識設計系統的概要及推廣設計的可擴展性。

Set of shared and integrated patterns and principles that define the overall design of a product”.

— Karri Saarinen, Principle Designer at Airbnb.

用實體物品來形容的話,可以把它比作樂高。每個元件都是可以組合的,會有N+種可能。就像是樂高中心管控每個元件、組合,每次更新版本自動規?;略O計。

案例:

1. GE’s Predix Design System

使用原子設計理論Atomic Design為基礎,從基本的按鈕,文字輸入等開始,在頁面設計時,會包含按鈕和文字等的原子而成為分子,以此類推。

上圖:?原子設計是一種網頁設計方法,出自于Brad Frost在2013年時發表的文章

( Atoms原子-Molecules分子-Organisms組織-Templates模板-Pages頁面 )

2. Google Material Design

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

上圖:?Google Material Design

03 為什么要做設計系統?

  1. 市場/平臺逐趨成熟。用戶對產品的要求更高,需要設計系統提升產品品質。
  2. 提升產品一致性。不但是在單一產品之內,包含在不同平臺及硬件的轉換(iOS, Andriod, PC, Web, iPad, or TV, etc),都能建立產品的連貫性。
  3. 提高研發效率。成員可以隨時下載更新組件,減少設計與開發反覆確認的過程。
  4. 擴張產品團隊。產品模塊化,增加延展性。

設計系統需要考慮的重要因素

(1)時間和資源:設計系統是個不斷在維護迭代的過程,很多時候設計系統更是一個“設計系統團隊去做的”,沒有那么多資源的團隊必須考慮花下來的時間成本,更需要leader和資源的支持,讓所有設計師都有自信去打磨一套完美的設計系統。

(2)責任:設計系統需要人去負責監督和審核的,不同產品有不同的功能和設計,哪些需要加入設計系統,哪些元素是提供基本方向而不會過于牽制產品設計的,產品有新的功能也需要不斷的去更新設計系統。

(3)溝通:設計系統需要與每個團隊上的設計師去做溝通,整合現有的不協調,更需要跟不同項目的設計師溝通確認大家都同意將新的東西加入規范。再來是跟開發者的溝通,沒人喜歡在問題出來之前設計系統就已經預設了解決方案,設計系統團隊需要不斷的重復去溝通設計系統是用來幫大家節省時間。

(4)使用性:設計系統不只是界面設計資源庫而已,更需要包含品牌想要表達的價值,來決定設計系統里的風格和用戶體驗。如何要去使用設計系統,要給設計師比較多的空間對不同產品去做克制化嗎還是較為嚴謹?要如何使用設計系統幫助大家工作,需要包含每個東西的代碼?或是設計師的規范去如何使用等?;蚴切枰_設計系統嗎?有沒有外部的其他公司需要使用設計系統等。

04 設計系統是持續更新的系統,定義產品的基石,組成成員可能包含如下

05 如何著手去做設計系統?

1. 種子期

心中有設計系統的概念。

2. 搜集

搜集現有產品UI 元素。

方法:截圖,把產品所有的頁面、單一組件截圖,目的是找出用戶體驗不同的元件。

3. 分類

尋找相同的界面元素,將現有UI 元素分類。

4. 發想

搜集現有設計,發想所有可能性。

競品或者業內不錯的產品,搜集元素;

內部探索,搜集過往設計,集中探索優化,發散重構。

5. 定義

收斂定義設計系統基本架構。提煉設計,重新定義架構。

競品或者業內不錯的產品,搜集元素;

內部探索,搜集過往設計,集中探索優化,發散重構。

6. 開發&合作

和前端工程師一起定義設計系統,反覆溝通的過程是為了確保Design System使用的更長遠、易維系。

結尾

恭喜你看完這篇冗長的文章,希望能幫助到大家認識設計系統Design System,了解設計系統的使用時機、優點,及設計過程。

每一個公司都是獨特的,不只是產品,還有團隊跟環境,設計系統必須綜合考量所有的因素。設計系統不僅幫助用戶有好的用戶體驗,對于內部設計師和開發者省時省力。歡迎大家一起來討論,希望這篇文章對你有幫助!

參考資料

  1. https://medium.com/ge-design/ges-predix-design-system-8236d47b0891
  2. https://www.ibm.com/design/language/
  3. https://material.io/guidelines/#introduction-goals
  4. https://www.youtube.com/watch?v=z5XxgxBz3Fo&t=1s

 

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

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

給作者打賞,鼓勵TA抓緊創作!
1人打賞
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!