什麼是設計系統(Design System)?

Kort Chang
Seekrtech-dev
Published in
Jun 13, 2024

--

前言

設計系統這個詞在不同的環境與理解中可能有不同的意義,可能會包含 Grid System、Icon System、Design Token、Component Library、UiKit 等等,但總體來說設計系統想做的事情是搭建一個平台,讓除了設計師以外的角色可以把自己想要傳達的事情,給所有會接觸到這個設計的人,可以有更多考量的依據。

以時刻科技的角度,他需要可以達到以下幾個好處:

1. 幫助釐清與優化團隊的設計流程

為了提高開發產品的效率與對設計知識的探索,一些設計師會採用某些系統性設計的方法,在設計上傳承已知的設計知識,減少重複決定的次數。

而設計系統就作為這種設計方法的實作延伸,在這個設計方法中,也會有很多屬於他的優點跟缺點,而透過實踐這個系統的過程,我們可以辯論其中的細節到底符不符合我們團隊、產品,透過這樣不斷優化團隊的設計流程,進而在有限的時間上打造在設計角度上好的產品。

常見的實踐手法:

  • 設計原則
  • Do / Don’t
  • Design Token
  • Component
  • Pattern
  • Version Control

2. 透明化設計與實作品質

除了設計師對於設計知識的追求以外,實作者在面對效率與規模化的需求下,也會傾向尋找統一、系統性的解法,為了產生這個解法,便需要設計師與實作者的合作,因此也產生了對應的設計方法(例如 Atmoic Design)。

比較不好的方向是,實作者不透過設計師自行歸納整理,因為會傾向於最終成果反而取決於個別實作者的審美取捨,讓雕琢細節成為效率較差的選項。

對於實作者來說:我們可以嘗試把較為常見實作者需要知道的資訊,提早溝通(例如:設計師對於設計前瞻性的想像),讓雙方都可以提前知道對方的想法,提早實作其中(或不過度實作)。

對於設計師來說:關於規範系統的途徑,實作者也可以透過這個平台表達自己的想法,讓雙方都可以認同或理解這些途徑。

因此為了達到這個目的,我們就需要一個兩方都聽得懂的溝通工具讓雙方可以用一樣的語言互相交流,把自己的立場及想法都可以透過這個語言工具提供出來,讓雙方可以同時獲得好處。而不是增加隔閡與不理解。

常見的實踐手法:

  • Design Token
  • UIKit
  • Component
  • Pattern

現況

時刻科技雖然在設計系統上並沒有一個全職的團隊,但我們也努力的在產品開發的過程中,盡量推進設計系統的應用程度。

  • 時刻的第一版最基礎設計系統大概是從 2020 第一次嘗試,當時針對了 Forest 整理部分的 Design Token (顏色、字體、形狀、陰影等等),且整理了 App 內的大量 Dialog 成 Dialog System。
  • WaterDo 2 承接著 Forest 的經驗,在設計一開始也規劃的更完整的 Design Token,讓後續對於顏色的調整更方便。
  • 並且也在打造後續產品,進入實際設計階段後,透過完整規劃了整個設計系統的架構,讓設計可以更有一致性、並幫未來預留修改的彈性。

雖然推進的速度並不是很快,但我們相信設計系統始終是產品設計流程的實現,而在推動設計系統的過程中,我們也有更多對於產品設計流程的討論,我認為這個就是要做設計系統的核心,作為參與讓這個討論可以發生的角色,我覺得是很幸運的。

未來我們會想在元件(Component)層級架構、功能規格(Feature Spec)的規範,發生更多的討論,讓團隊的合作可以更順暢,進而使我們可以更有效率地打造體驗優質的產品給更多用戶。

--

--

Kort Chang
Seekrtech-dev

Android App Engineer, Design Engineer @Seekrtech