設計系統 | 數碼產品的生態系統
提升用戶體驗的一致性
--
設計系統 (Design System) 作為一個整合的設計元素系統，近年來在設計界受到廣泛的關注。在做設計系統時，我們是否僅僅順應潮流，還是真正理解它的核心意義和目標？
作為對設計系統略知一二的設計師，我希望在這個系列的文章中分享我的理解、反思和看法，並探討一些鮮為人談的觀點。如果您有任何想法，歡迎留言交流。
首先，讓我們從基本概念入手 😊
UI Kit 與前端開發框架的區別
設計系統將零碎的 UI 元素整合，並將它們轉化為可重用的組件 (component)。設計師和工程師會分別使用 UI Kit 和前端開發框架來加快工作流程，但它們與設計系統有何分別？
UI Kit
在 Dribbble 和各類設計資源平台中，我們常常能看到與組件系統相似的 UI Kit。UI Kit 為基本組件提供設計，有助迅速構建頁面。儘管視覺風格獨具特色，如採用充滿陰影的玻璃和陶瓷風格，但由於缺乏設計原則和對組件的詳細說明，這些概念在技術和互動方面通常不切實際，因此其實用性有限。
前端開發框架 (front-end framework)
在此之前，Bootstrap 這類前端開發框架頗受歡迎。它不僅提供了預製組件，還使用 Sass 儲存顏色代碼、圓角弧度和間距等變數，也被稱為 design tokens，是設計系統化的起點。此外，它的 12 列佈局亦已成為當今的標準。可是，它缺乏設計基礎，且其文檔對於非工程師來說難以理解，因此只能作為工程師的便捷工具。
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) 設計問題之外，還要考慮手機版網頁與手機 app 的設計的一致性。常見的通病是將網頁和 app 視為完全無關的平台去設計。儘管 web、iOS 和 Android 有平台特定 (platform-specific) 的設計原則，例如基本組件外觀不同，app 有更精簡和線性 (linear) 的資訊架構 (information architecture)，但許多僅供顯示 (display-only) 的組件其實是通用的。在某些情況下，我們甚至可以將手機 app 當成手機版網頁來設計，只需在平台特定的組件和流程式做些小調整。當然，我們最終還需要考慮各個平台的定位和使用場景，但與其問「甚麼需要一樣」，倒不如問「為甚麼要不同」可能是一個更合適和直接的問題。
以外賣平台 foodpanda 的「團購」功能為例：
用戶可以透過他人分享的 foodpanda 團購連結，然後在 app 或網頁中加入該團購訂單。Foodpanda 並未因為平台差異而犧牲功能的一致性，反而致力在兩平台上實現類似的用戶體驗。雖然介面仍有細微差別，例如網頁版和 app 的導覽列，以及「三文魚腩手卷」組件的外觀，但主要內容的佈局極為相似。因此， app 用戶在使用網頁版時會感到非常熟悉，從此多了一種下單方式。同時，新用戶在尚未安裝 app 之前，可以先在門檻較低的網頁版上體驗服務，進而轉化成 app 的長期用戶。
跨產品的一致性
隨着公司規模擴張，往往伴隨更多產品線的出現。以 Google 為例，它旗下擁有 Gmail、Docs、Sheets、Google Search、Android 等眾多產品。即使是規模較小的公司，同樣可能擁有多個產品，如電商平台、網站、活動頁面、電郵通訊，以及社交媒體專頁等。雖然每條產品線在經營策略、功能和營運都各自獨立，但在產品間保持一定程度（毋須完全）的一致性，不僅有助用戶更快熟悉功能，同時可強化品牌形象。
設計系統如何兼顧多個平台和產品？
視乎產品性質，設計系統可能只有一個，更常見的是「子母式」的設計系統。
以 Spotify 的設計系統 Encore 為例，他們有一個基礎 (Foundation) 的設計系統，統一了 Spotify 旗下產品的品牌視覺和關鍵的風格樣式，即 design token。其中組件分為 web 和 mobile app 版本，而主要的產品會有次級的本地設計系統 (Local Design System)，包含該產品特有的設計元素，但這些元素不會用在其他產品上。如果你的產品也有類似的情況，可以參考一下他們的做法。
這也表明，品牌規模愈大，設計系統愈發龐大，團隊之間的緊密合作變得更重要。利用適合的技術，使營運設計系統更有效率，有助拉近各平台或產品之間的差距。
提高成本效益
很多公司現今需要應對多個平台和產品線。分別開發會耗費大量資源，且容易出現不一致。透過設計系統，除了統一元素，更實際的好處是提高開發的成本效益。組件在設計稿和程式碼中重複使用，從而加快設計和開發過程，節省資金，更明顯的好處是減少了溝通成本。
溝通不暢和專案管理效率低下通常源於文檔缺失。相較之下，設計系統從設計原則、品牌價值、設計元素到內容文案，尤其是組件和模組的用法，都提供詳盡的規範和記錄。這使設計系統成為唯一的事實依據 (single source of truth)，避免設計師創作出不一致的設計，減少理解上的歧異，並有助於團隊成員間達成共識。無論是行銷團隊的社交貼文、商務團隊的簡報，抑或是產品經理的提案和線框稿 (wireframe)，各個團隊都能依照設計系統製作出符合規範、品牌價值和視覺要求的作品，減輕設計團隊的負擔。因此，公司應將視計系統視為公司資產和團隊間的橋樑，而非單純是設計師個人主張的東西。
重點整理
- 設計系統不只有 UI 整合，而且是數碼產品的生態系統。
- 保持原子設計、各瀏覽平台和產品的一致性。
- 多層面的一致性造就「子母式」的設計系統。
- 設計系統減少開發時間、金錢成本和溝通成本。
如果需要參考大品牌的設計系統，可以到「設計師道具箱」看看我整理的清單。
你會覺得文章太長太難懂嗎？務必留言告知。要是想讀個精簡版，歡迎跟隨設計雜學的 IG，我會不定期分享設計新聞、寫寫筆記。
再次感謝您讀到最後。要是覺得文章不錯，請為我拍拍手 👏
