為什麼要建立設計系統?

啊….好複雜啊…

一個產品的背後,來自於一個團隊的努力,而當產品在快速成長的時候,開發的流程便顯得至關重要,如果沒有一個標準化的流程以及系統,整個團隊的效率很可能會面重工的情況、而不論團隊的大或小,每個人對於產品的觀點以及產出的風格都不同,所以當團隊沒有一套系統化的規範時,會使產品的一致性以及用戶體驗產生問題,而普遍的痛點為:

跨裝置或產品時的不ㄧ致的體驗

特別在應用於各裝置、平台、或者是受眾廣泛的產品,如果沒有一套規範或著明確的工作流程,產品的ㄧ致體驗是很難達成的。

缺乏代表性的素材或識別元件造成檔案版本控制問題

由於每個設計師或者團隊都有各自偏好使用的工具以及流程,在面臨交接或者是合作的時候,會難以管理以及整合,造成轉換時更多的時間成本浪費,而若要做版本控制,則嚴格的檔案以及圖層命名規則是不可或缺的。

各團隊間的共識落差

沒有一個明確的規範來源,則每個部門或設計師都照著自己的想法走,最後產品體現的設計語言走向前後矛盾語意不清就是個必然的結果。

缺乏效率的工作流程造成無意義的重複工作

重複性的工作讓團隊效率降低,團隊可能會多花2~3倍的時間在作其實已經做好可以重複利用的元件。

而這些痛點其實都是息息相關且指向同一個原因,沒有規範造成的低效率團隊、語意的破碎化以及雜亂的工作流程。

但設計系統不僅僅是一個風格的規範或者是元件庫,而該是對於產品的一個開發藍圖,每個原則、視覺元件、都該被建檔,並且有文件紀錄,

What is a Design System? (ref : uxpin_why_build_a_design_system ,Marcin Treder , Jerry Cao ,p.9)

建立設計系統

Software is often built by incredibly large teams of people. The challenge to create coherent experiences multiplies exponentially as more people are added to the mix. Over time, no matter how consistent or small a team is, different people will contribute new solutions and styles, causing experiences to diverge.

Building a Visual Language, Karri Saarinen, Principal Designer and creator of Airbnb design system

1.建立屬於自己的元件庫

Photo credit: https://www.uxpower.tools/web/

想要檢視自己的產品專案有無一致性的矛盾,最快速的方法就是開始整理自己所有的素材庫,包含元件、色票、以及字體風格,一字排開時可以很快的知道有無地方不合邏輯。

2.定義自己的設計原則

Photo credit: The design principles behind Salesforce Lightning

在制定一個規範前,先寫出你對於這個規範要闡述的核心理念是什麼,是華麗吸睛功能豐富、還是簡單明確易於使用,定義出一個通用的價值主張才能確保整套規範的一致性,並且利用此原則去反覆驗證之後所產出的任何元件。

3.統一你的視覺設計

從自己產出的介面中找尋自己最根本簡單但不段運用的設計元素(圓角、字型、陰影等…),跟部門成員一起討論哪個元素適合成為設計典範,並且將它文件化、逐步建立起系統的一部分。

A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.

Principal Designer at Airbnb,Karri Saarinen

並不是只要公司有了自己的元件庫後,從裡面抓出素材拼湊就可以說是一個符合規範的產品,一般來說很多人在制定規範時會直接把元件定為規範的最小單位,理論上來說靠著元件的模組化其實就可以增加統一性,但是在實際運用上若以元素作為最小單位其實還是會創造太多可能性,甚至很多使用情境是我們在制定規範時根本沒有想到的,因此,造成產品的不一致性出現,而其實我們可以輔助的將元素組成一個set命名,為這些set加上屬性以及分類、可以與哪些或不可以與哪些元素共存等等…,文件化並且記錄他們的重要層級、讓自訂的彈性增加卻又不會讓人使用時抓不到規範的標準。

設計的規範不該是一個寫的很死的東西,而是可以藉由你所制定的元素去組合並且創造新的規範出來,更像是一個有機且成長的生態系統。

設計系統帶來的回饋好處

總結以上問題,我想若公司不是間一開始就非常看重設計的design-driven company , 在現在軟體新創流行主打MVP的趨勢下,都不會有一個嚴謹的規範,也許在起步階段,嚴謹的視覺規範以及一致性不會是首要該操心的事情,但是在公司規模或者產品用戶成長速度越來越快時,設計師的合作若沒有規範來跟隨或者是極佳的通靈默契,便漸漸的會有很多問題產生,其實也就是欠下了很多設計技術債,待未來還是的得投資時間及人力成本來重構,屆時也許需要花出更大的成本來做整體得re branding 反而會更得不償失

基本的色彩、字體規範

其實系統的建立並不是從一開始就可以制訂出一套詳細的文件(就算創辦人是設計背景的Airbnb , 在建立規範時還特別成立了一個專門制定規範的小組,並且移出公司本部、移地工作花了一段時間才催生出了他們所謂的DLS(Design Language System),但是我想在台灣能夠有這種魄力的公司應該是非常非常少啦,因此在現在萬物皆精實的環境下我們也是可以小步快跑、Lean DLS,一步一步完善它!

你可以從一套最簡單的Color Platt, Text Style,開始建立基本的視覺規範,然後在設計的過程慢慢的把各種元件一起模組化,有了共用元件庫後,在未來的產品開發上也加速設計流程且維持整體形象的一致性,為設計師以及產品創造雙贏的局面。

最近正好讀了 UX Pin 的書《Why Builda Design System ? The Pocket Guide for Product Teams ,Marcin Treder , Jerry Cao》,打算先記錄下來讀後的重點,待下篇會再敘述自己從無到有建立規範的過程,歡迎大家不論有無規範的制定經驗,都可以一起討論、看看從何開始、或者如何制訂出一個彈性易擴充的視覺規範!。

--

--