@C7210?：關(guān)于 Design System，個(gè)人以為仍難以進(jìn)行最精準(zhǔn)的概念定義，包括產(chǎn)品類型、階段、規(guī)模，團(tuán)隊(duì)構(gòu)成、文化，甚至連同整個(gè)公司/組織在產(chǎn)品側(cè)的策略也可以包含進(jìn)來(lái)，都會(huì)對(duì)所謂「設(shè)計(jì)體系」的存在目的與方式產(chǎn)生決定性的影響。

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

一、像做產(chǎn)品一樣

何為「像做產(chǎn)品一樣」？這里特指《用戶體驗(yàn)要素》這本書(shū)所定義的最為經(jīng)典的產(chǎn)品設(shè)計(jì)思維模型，即是將「設(shè)計(jì)」流程分為五個(gè)層面，從最為本質(zhì)和抽象的核心出發(fā)依次向上梳理至 User Interface 表現(xiàn)層面，大致包括：

• 目標(biāo)層：定義多方面目標(biāo)，所謂「多方面」即是指公司業(yè)務(wù)目標(biāo)、產(chǎn)品設(shè)計(jì)目標(biāo)及用戶目標(biāo)；圍繞「產(chǎn)品」這一「實(shí)體」，對(duì)各方面的痛點(diǎn)、訴求進(jìn)行辨識(shí)與整合。
• 范圍層：基于目標(biāo)定義，界定產(chǎn)品信息/功能范圍，判別最為必要與核心的要素/有利于目標(biāo)實(shí)現(xiàn)的要素/概念相關(guān)但與當(dāng)前目標(biāo)實(shí)現(xiàn)無(wú)關(guān)的要素。
• 結(jié)構(gòu)層：在明確界定的信息/功能范圍當(dāng)中，梳理信息/功能架構(gòu)，定義流程。
• 框架層：將信息架構(gòu)與功能流程具像化，即通過(guò)相對(duì)低保真的形式對(duì)界面流程關(guān)系及界面信息層級(jí)進(jìn)行組織呈現(xiàn)。
• 表現(xiàn)層：細(xì)化界面表現(xiàn)形式，結(jié)合品牌特質(zhì)與情感化要素對(duì)界面進(jìn)行高保真呈現(xiàn)。

△ 圖片來(lái)自crowdfavorite.com

無(wú)論工作還是生活中，諸多事務(wù)都會(huì)體現(xiàn)著類似的邏輯框架，即依次明確為什么要做（Why）、做什么（What）、如何做（How）。以我們?cè)诋a(chǎn)品設(shè)計(jì)工作中最為硬核的「思維框架」來(lái)打造產(chǎn)品設(shè)計(jì)工作中最為硬核的「工具框架」，這事兒自然而然，符合邏輯。

二、Design System的前期規(guī)劃

前期規(guī)劃主要遵循五層思維模型的前三個(gè)層面，即對(duì)「目標(biāo)」、「范圍」、「結(jié)構(gòu)」進(jìn)行定義。需要再次說(shuō)明，相關(guān)經(jīng)驗(yàn)僅與特定產(chǎn)品/團(tuán)隊(duì)狀況相關(guān)，思路供參考。

1. Design System的目標(biāo)

Design System，顧名思義，是體系化的工作，需要短期內(nèi)集約重要/大量的資源進(jìn)行構(gòu)建，并保持長(zhǎng)期的維護(hù)/進(jìn)化工作。對(duì)于這種量級(jí)的事項(xiàng)，必須顧全多方面的目標(biāo)，在前期充分達(dá)成共識(shí)，才能盡可能爭(zhēng)取資源，并形成長(zhǎng)期合力。目標(biāo)所涉及的對(duì)象或可包括：

設(shè)計(jì)師

設(shè)計(jì)師是 Design System 最直接的「用戶」，能否解決設(shè)計(jì)師工作中的實(shí)際痛點(diǎn)，這也是 Design System 最為關(guān)鍵的價(jià)值之一。目標(biāo)或可包括幫助現(xiàn)有設(shè)計(jì)師規(guī)范工作流程，使工具、方法、產(chǎn)出更加標(biāo)準(zhǔn)化，提高執(zhí)行效率，進(jìn)而提升設(shè)計(jì)思考的工作比例等等；此外對(duì)于新進(jìn)設(shè)計(jì)師快速進(jìn)入標(biāo)準(zhǔn)化工作狀態(tài)的作用也要考慮到。

設(shè)計(jì)團(tuán)隊(duì)

在解決直接「用戶」的痛點(diǎn)的同時(shí)，Design System 更要在設(shè)計(jì)團(tuán)隊(duì)層面進(jìn)行賦能，例如提升設(shè)計(jì)團(tuán)隊(duì)在公司內(nèi)/外的專業(yè)度與影響力等等。

產(chǎn)品

Design System 所解決的問(wèn)題最終將體現(xiàn)在實(shí)際產(chǎn)品的體驗(yàn)當(dāng)中，譬如提升產(chǎn)品/產(chǎn)品家族在交互、視覺(jué)表現(xiàn)、品牌識(shí)別等層面的一致性，提升產(chǎn)品體驗(yàn)與公司品牌形象等等；無(wú)法上升到產(chǎn)品/業(yè)務(wù)層面的解決方案都只是空中樓閣。

2. Design System的范圍

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

• 產(chǎn)品：針對(duì)單一產(chǎn)品，還是需要橫跨整個(gè)產(chǎn)品家族；僅針對(duì)線上產(chǎn)品，還是需要包含線下服務(wù)鏈當(dāng)中的每一個(gè)用戶/客戶觸點(diǎn)。
• 面向人員：僅面向設(shè)計(jì)師（交互/視覺(jué)/創(chuàng)意/物料/空間/全鏈路），還是需要涵蓋產(chǎn)品經(jīng)理、工程師等上下游相關(guān)職能。

3. Design System的結(jié)構(gòu)

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

基礎(chǔ)要素

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

設(shè)計(jì)模式

• 組件（Component）
• 模塊（Module）
• 動(dòng)效/動(dòng)畫（Transition/Animation）
• ...

設(shè)計(jì)規(guī)范

• 全局
• 價(jià)值主張
• 設(shè)計(jì)原則
• 品牌規(guī)范
• ...

元素

• 功能定義
• 類型/狀態(tài)
• 應(yīng)用原則
• 應(yīng)用示例
• ...

同時(shí)對(duì)于更為廣義的「設(shè)計(jì)工作標(biāo)準(zhǔn)化」而言，或可進(jìn)一步包括流程與方法規(guī)范、工具規(guī)范、素材與產(chǎn)出形式規(guī)范等等。

此外，對(duì)于「基礎(chǔ)要素」和「設(shè)計(jì)模式」這兩部分來(lái)說(shuō)，采用層級(jí)更為復(fù)雜、同時(shí)也更具靈活性和工程性的「Atomic Design」作為架構(gòu)設(shè)計(jì)思路也是非常推薦的。你可以將以上的架構(gòu)示例理解為抽象層面的邏輯梳理，而非針對(duì)最終的產(chǎn)出形式而嚴(yán)格區(qū)分。

圖片素材作者：Paul Olek1

「3篇好文帶你了解設(shè)計(jì)體系」

• 《超詳細(xì)的「Design Systems」讀書(shū)筆記》
• 《大型的視覺(jué)設(shè)計(jì)系統(tǒng)都是怎么設(shè)計(jì)出來(lái)的？》
• 《大公司如何做設(shè)計(jì)系統(tǒng)？24 個(gè) Sketch 組件庫(kù)源文件合集下載》

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com