本文作者將結(jié)合自身經(jīng)驗(yàn)與大家分享：對(duì)Design System進(jìn)行前期規(guī)劃，enjoy~

關(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

話說(shuō)回來(lái)，無(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)；思路供參考。

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ì)象或可包括：

（1）設(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)的作用也要考慮到。

（2）設(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è)度與影響力等等。

（3）產(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ù)層面的解決方案都只是空中樓閣。

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)職能。

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

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

（1）基礎(chǔ)要素

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

（2）設(shè)計(jì)模式

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

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

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

（4）元素

• 功能定義
• 類型/狀態(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ū)分。

到此為止就是今天想要聊的全部，關(guān)于如何通過(guò)產(chǎn)品設(shè)計(jì)思路對(duì)Design System進(jìn)行前期規(guī)劃；而接下來(lái)更為細(xì)化的規(guī)劃/執(zhí)行方式，包括工具方法等等，我或會(huì)根據(jù)實(shí)際工作中的推進(jìn)狀況再做進(jìn)一步的介紹和分享。

原文作者：Marcin Treder

原文地址：https://heydesigner.com/blog/minimum-viable-design-system/

譯者：C7210（微信公眾號(hào)：Beforweb（ID：beforweb）），交互設(shè)計(jì)師、UX設(shè)計(jì)熱愛(ài)者、VR探索者、譯者、貓奴、吉他手、鼓手，現(xiàn)就職于騰訊上海，

譯文地址：http://beforweb.com/node/969

題圖來(lái)自 Pexels，基于 CC0 協(xié)議