設計系統 | 數碼產品的生態系統
提升用戶體驗的一致性
近年設計系統 (Design System) 受到廣泛的關注。在我們跟隨行業標準做設計系統時，我們有否理解它真正的含義和目標呢？
我希望在本文闡述我對設計系統的理解、思考和觀點，並探討一些新穎的觀點。如果您有任何想法，歡迎留言交流。
首先，讓我們從基本概念入手 😊
UI Kit 與前端開發框架的區別
為了加快工作流程，設計系統將用戶介面元素轉換為可重用的組件。雖然 UI Kit 和前端開發框架都是工程師和設計師的工具，但它們不是設計系統的替代品。
UI Kit
UI Kit 提供基本組件的設計，有助快速構建頁面。雖然有許多視覺風格，例如重陰影的玻璃和陶瓷風格，但缺乏設計原則和對組件的詳細說明，而且互動通常不那麼實用。
前端開發框架 (front-end framework)
如 Bootstrap 提供預製組件和設計令牌 (design tokens)。使用 Sass 儲存顏色代碼、圓角弧度和間距等變數，是設計系統化的起點，但同樣地缺乏設計基礎，文檔亦可能對設計師來說難以理解。
雖然 UI Kit 和前端開發框架可以作為設計系統的組成部份，但它們並不等同設計系統本身。
作為數碼產品的生態系統
為了滿足各種電子平台和設備的需求，設計系統的主要任務已由整合 UI 元素，逐漸轉為一個全方位的生態系統。它與傳統的品牌指南 (brand guidelines) 相比，更有效地維護「數碼門面」的一致性，包括 UI、網頁風格、功能流程、互動體驗、文案和公關等。
設計系統還涵蓋了其他範疇，例如設計原則 (design principles)、風格指南 (style guide) 和組件庫 (component/design library)。設計系統也包括一些通常被視為非設計範疇的項目，如語調 (voice and tone)、內容指南和程式碼片段。這使設計系統不僅是數碼產品的綜合標準、指導原則和開發流程，更是一個完整的產品生態系統。
設計系統的構成大致如下：
- 設計原則：設計的基本原則，如一致性、可用性、簡潔程度等。
- 設計基礎（全局樣式）：定義設計中的基本元素，如顏色、排版、圖示和間距等。
- 品牌形象：規範品牌的視覺和語言風格，如 logo、顏色、字體、圖像和語調。
- 組件庫：提供可重用的 UI 組件，如按鈕、表單、列表和導航。
- 內容指南：闡述創意內容的原則，如文案風格、語法、標題和格式等。
- 無障礙守則：確保產品對所有用戶開放。
- 程式碼片段和開發規範：提供開發者可以重用的程式碼和開發規範，以保持一致性。
你亦可以根據產品和團隊的需要自由調整組成部份和各組成的重要性。最重要的是確保系統能夠協助團隊開發一致、高質素的產品。
深化一致性與使用者體驗的藍圖
設計系統因其整合設計元素和提升開發效率的特性，已逐漸成為商業策略和產品路線圖的核心。其主要優點在於「一致性」和「高效」。
原子設計的一致性
一致的 UI 組件有效減輕使用者的認知負擔 (cognitive load)，使他們更容易適應和熟悉網頁的互動和操作方式。比如：
- 主按鈕的樣式保持一致 → 幫助使用者識別主按鈕及其功能；
- 特定類型的流程採用特定的分割排版 → 方便分辨該流程及其他流程
在設計系統中，統一基本組件是相對簡單的，所以我們可以進一步追求模組、頁面，甚至整個流程的一致性。
這種層遞原則源於 Brad Frost 的原子設計方法論 (Atomic Design Methodology)，將介面元素分為五個層次：原子 (atoms)、分子 (molecules)、組織 (organisms)、模板 (templates) 及頁面 (pages)。雖然這樣細分元素可能看起來有點繁瑣，但我們只需要理解小元素可組裝成大元素，隨着元素層級提升，使用者的目標會逐漸從功能轉向流程。
跨平台一致性的重要性
「一致性」不限於組件，還可以從宏觀角度理解，涵蓋所有平台和產品上。
隨着電子設備的多元化，各種螢幕都要為用戶提供優良的使用體驗，因此確保瀏覽平台（如網頁、app、kiosk 和其他電子螢幕）的元素一致變得尤為重要。這樣，無論他們轉換設備或使用 Apple 的「接手」(Handoff) 功能，用戶都能夠熟悉操作、識別品牌，並享受無縫的體驗。
可是，實現這個目標並非易事。除了考慮嚮應式 (responsive) 和自適應 (adaptive) 設計的問題，還需要考慮手機版網頁與手機應用的一致性。常見的問題是將網頁和手機應用視為完全無關的平台去設計。雖然 web、iOS 和 Android 有遵循平台特定 (platform-specific) 設計原則，例如基本組件外觀不同，app 有更簡潔和線性 (linear) 的資訊架構 (information architecture)，但許多僅用於顯示 (display-only) 的組件實際上是通用的。
在某些情況下，我們甚至可以將手機應用視為手機版網頁來設計，只需要微調平台特定的組件。最後，我們要考慮每個平台的定位和使用場景，但與其問「為甚麼需要一樣」，倒不如問「為甚麼要不同」可能更合適和直接的問題。
Foodpanda 平台的一致性
以下的 Foodpanda 案例說明跨平台一致性如何提升使用者體驗並促進業務增長：
外賣平台 Foodpanda 的手機應用和網頁介面和互動都很類似。用戶可在不同平台間無縫切換，也確保了功能的完整性。即使不同平台在介面上有細微的差異，但主要內容佈局和功能仍然非常相似，使用戶在不同平台上獲得相似的體驗。
此外，這種一致性還有助於引導新用戶。新用戶可以先在門檻較低的網頁上嘗試服務，熟悉功能和操作後再成為手機應用的長期用戶。這種方式不僅降低新用戶的學習負擔，也提升轉化率和用戶留存率。Foodpanda 在其所有平台都提供一致、熟悉且易於使用的體驗，這是他們成功的關鍵因素之一。
跨產品的一致性
隨着公司規模擴大，產品線也隨之增加。例如，Google 旗下擁有 Gmail、Docs、Sheets、Google Search、Android 等多款產品。甚至規模較小的公司也可能有多元的產品，例如電商平台、網站、活動頁面、電郵通訊，到社交媒體專頁等。
儘管每個產品在策略、功能和營運上都有其獨特性，但對於用戶來說，保持一致性是有利的。這不僅可以幫助用戶更快地熟悉新產品，同時也能夠強化公司的品牌形象。
設計系統如何兼顧多個平台和產品？
視乎產品性質，設計系統可能只有一個，更常見的是「子母式」的設計系統。
Spotify 的 Encore 設計系統也是一個典範，他們採用一個基礎的設計系統來統一旗下產品的品牌視覺和關鍵的風格樣式，即所謂的 design tokens，包含了色彩、字體、間距等基本設計元素，確保所有產品在視覺上的協調和一致性。
組件庫則根據網頁和手機應用平台進行區分，確保組件在不同平台上的效能和適用性。對於主要的產品，他們會有次級的本地設計系統 (Local Design System)，包含該產品特有的設計元素，而這些元素不會用在其他產品上。
這不僅是一種設計策略，也是一種管理策略。隨著品牌規模的擴大，設計系統也會變得越來越龐大，這就需要團隊之間緊密的合作和協調。此外，適當的技術（例如自動化工具和版本控制系統）也可提高設計系統的營運效率，有助拉近各平台或產品之間的差距。
如果你的產品也面臨類似的挑戰，Spotify 的做法可能會給你一些啟示。
提高成本效益
設計系統在提升成本效益和確保產品一致性方面極具價值。一個好的設計系統讓組件在設計稿和程式碼中被重複使用，這不僅可以加速開發速度，節省資源，也可以降低溝通成本。
另一方面，缺乏完整文檔可齡致溝通不暢和專案管理效率低下，而設計系統提供了從設計原則、品牌價值到設計元素與內容文案的詳盡規範和紀錄。這使設計系統成為一個唯一的事實來源（single source of truth），有助減少歧義，並促進團隊成員間達成共識。
此外，所有團隊，無論是行銷、商務還是產品管理，都可以依照設計系統的規範製作符合品牌價值和視覺要求的文件和作品，從而保證整體的一致性並減輕設計團隊的負擔
因此，公司應認識到設計系統不僅是設計師的工具，更是重要的公司資產和團隊間的橋樑。對設計系統的投資最終將在提升效率、節省成本和提高產品質量上得到回報。
重點整理
- 設計系統不只有 UI 整合，而且是數碼產品的生態系統。
- 保持原子設計、各瀏覽平台和產品的一致性。
- 多層面的一致性造就「子母式」的設計系統。
- 設計系統減少開發時間、金錢成本和溝通成本。
如果需要參考大品牌的設計系統，可以到「設計師道具箱」看看我整理的清單。
你會覺得文章太長太難懂嗎？務必留言告知。要是想讀個精簡版，歡迎跟隨設計雜學的 IG，我會不定期分享設計新聞、寫寫筆記。
再次感謝您讀到最後。要是覺得文章不錯，請為我拍拍手 👏
