@C7210?：關于 Design System，個人以為仍難以進行最精準的概念定義，包括產品類型、階段、規模，團隊構成、文化，甚至連同整個公司/組織在產品側的策略也可以包含進來，都會對所謂「設計體系」的存在目的與方式產生決定性的影響。

因此我所能聊到的，也僅是當前我在自己所面對的特定工作情境中的狀況；某些方面或許具備普適性，而另外一些方面或許只能提供特定角度的參考。

一、像做產品一樣

何為「像做產品一樣」？這里特指《用戶體驗要素》這本書所定義的最為經典的產品設計思維模型，即是將「設計」流程分為五個層面，從最為本質和抽象的核心出發依次向上梳理至 User Interface 表現層面，大致包括：

• 目標層：定義多方面目標，所謂「多方面」即是指公司業務目標、產品設計目標及用戶目標；圍繞「產品」這一「實體」，對各方面的痛點、訴求進行辨識與整合。
• 范圍層：基于目標定義，界定產品信息/功能范圍，判別最為必要與核心的要素/有利于目標實現的要素/概念相關但與當前目標實現無關的要素。
• 結構層：在明確界定的信息/功能范圍當中，梳理信息/功能架構，定義流程。
• 框架層：將信息架構與功能流程具像化，即通過相對低保真的形式對界面流程關系及界面信息層級進行組織呈現。
• 表現層：細化界面表現形式，結合品牌特質與情感化要素對界面進行高保真呈現。

△ 圖片來自crowdfavorite.com

無論工作還是生活中，諸多事務都會體現著類似的邏輯框架，即依次明確為什么要做（Why）、做什么（What）、如何做（How）。以我們在產品設計工作中最為硬核的「思維框架」來打造產品設計工作中最為硬核的「工具框架」，這事兒自然而然，符合邏輯。

二、Design System的前期規劃

前期規劃主要遵循五層思維模型的前三個層面，即對「目標」、「范圍」、「結構」進行定義。需要再次說明，相關經驗僅與特定產品/團隊狀況相關，思路供參考。

1. Design System的目標

Design System，顧名思義，是體系化的工作，需要短期內集約重要/大量的資源進行構建，并保持長期的維護/進化工作。對于這種量級的事項，必須顧全多方面的目標，在前期充分達成共識，才能盡可能爭取資源，并形成長期合力。目標所涉及的對象或可包括：

設計師

設計師是 Design System 最直接的「用戶」，能否解決設計師工作中的實際痛點，這也是 Design System 最為關鍵的價值之一。目標或可包括幫助現有設計師規范工作流程，使工具、方法、產出更加標準化，提高執行效率，進而提升設計思考的工作比例等等；此外對于新進設計師快速進入標準化工作狀態的作用也要考慮到。

設計團隊

在解決直接「用戶」的痛點的同時，Design System 更要在設計團隊層面進行賦能，例如提升設計團隊在公司內/外的專業度與影響力等等。

產品

Design System 所解決的問題最終將體現在實際產品的體驗當中，譬如提升產品/產品家族在交互、視覺表現、品牌識別等層面的一致性，提升產品體驗與公司品牌形象等等；無法上升到產品/業務層面的解決方案都只是空中樓閣。

2. Design System的范圍

界定 Design System 的作用域，譬如：

• 產品：針對單一產品，還是需要橫跨整個產品家族；僅針對線上產品，還是需要包含線下服務鏈當中的每一個用戶/客戶觸點。
• 面向人員：僅面向設計師（交互/視覺/創意/物料/空間/全鏈路），還是需要涵蓋產品經理、工程師等上下游相關職能。

3. Design System的結構

基于作用域范圍的界定，梳理 Design System 的信息架構。之前的相關文章當中也有過介紹，通常意義上的設計體系大致包括以下最為典型的組成部分：

基礎要素

• 顏色（Color）
• 文字（Typography）
• 樣式（Style）
• 柵格（Grid）
• ...

設計模式

• 組件（Component）
• 模塊（Module）
• 動效/動畫（Transition/Animation）
• ...

設計規范

• 全局
• 價值主張
• 設計原則
• 品牌規范
• ...

元素

• 功能定義
• 類型/狀態
• 應用原則
• 應用示例
• ...

同時對于更為廣義的「設計工作標準化」而言，或可進一步包括流程與方法規范、工具規范、素材與產出形式規范等等。

此外，對于「基礎要素」和「設計模式」這兩部分來說，采用層級更為復雜、同時也更具靈活性和工程性的「Atomic Design」作為架構設計思路也是非常推薦的。你可以將以上的架構示例理解為抽象層面的邏輯梳理，而非針對最終的產出形式而嚴格區分。

圖片素材作者：Paul Olek1

「3篇好文帶你了解設計體系」

• 《超詳細的「Design Systems」讀書筆記》
• 《大型的視覺設計系統都是怎么設計出來的？》
• 《大公司如何做設計系統？24 個 Sketch 組件庫源文件合集下載》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com