在數(shù)字設(shè)計(jì)領(lǐng)域工作的人一定聽(tīng)說(shuō)過(guò)“設(shè)計(jì)系統(tǒng)”這個(gè)詞;不過(guò)，你可能不確定這是什么意思。
在本文中，我們將準(zhǔn)確地定義什么是設(shè)計(jì)系統(tǒng)、使用設(shè)計(jì)系統(tǒng)的原因、如何創(chuàng)建設(shè)計(jì)系統(tǒng)。

什么是設(shè)計(jì)系統(tǒng)?

設(shè)計(jì)系統(tǒng)是設(shè)計(jì)人員和開(kāi)發(fā)人員共同創(chuàng)建、參考和開(kāi)發(fā)的系統(tǒng)。它是一系列規(guī)則和一個(gè)符號(hào)庫(kù)組成——字體、圖標(biāo)、顏色、形狀、網(wǎng)格、動(dòng)畫、音調(diào)或更多——這些符號(hào)具有不同的含義，由它們的功能和層次關(guān)聯(lián)決定。
它本質(zhì)上是一個(gè)由元素組成的生命體，這些元素隨著產(chǎn)品復(fù)雜度增加而增加。這些元素被轉(zhuǎn)換為可用于開(kāi)發(fā)的組件，這些組件可以在活動(dòng)環(huán)境中立即使用。

誰(shuí)定義了設(shè)計(jì)系統(tǒng)?

設(shè)計(jì)人員和開(kāi)發(fā)人員緊密合作，以建立設(shè)計(jì)系統(tǒng)的規(guī)則。設(shè)計(jì)師定義視覺(jué)傳達(dá)的所有方面——用戶界面、品牌和用戶體驗(yàn)——同時(shí)與開(kāi)發(fā)人員一起將這些屬性轉(zhuǎn)換為編碼的組件，通過(guò)不斷地迭代它們，直到它們以自包含的方式在技術(shù)上和風(fēng)格上表現(xiàn)出來(lái)。

為什么要有設(shè)計(jì)系統(tǒng)?

雖然設(shè)計(jì)系統(tǒng)是任何可伸縮的數(shù)字產(chǎn)品的基本要求，但其核心是適用于任何設(shè)計(jì)工作的原則。最重要的方面是設(shè)置一組規(guī)則，當(dāng)重復(fù)一遍又一遍時(shí)，將始終返回相同的原則。
建立一個(gè)系統(tǒng)的目的是擁有一個(gè)經(jīng)過(guò)測(cè)試的組件庫(kù)，這些組件可以被一致地重復(fù)使用，并期望每次都在所有產(chǎn)品維度上執(zhí)行——樣式、品牌、行為、功能和交付。設(shè)計(jì)系統(tǒng)最大的優(yōu)點(diǎn)是能夠高效地進(jìn)行原型設(shè)計(jì)，并在開(kāi)發(fā)高質(zhì)量產(chǎn)品的過(guò)程中對(duì)設(shè)計(jì)和代碼進(jìn)行共生迭代。
如何開(kāi)發(fā)設(shè)計(jì)系統(tǒng)?
網(wǎng)頁(yè)設(shè)計(jì)師如何要?jiǎng)?chuàng)建一個(gè)設(shè)計(jì)系統(tǒng)，大致需要實(shí)現(xiàn)如下三個(gè)步驟：
第一，建立一個(gè)清晰的產(chǎn)品愿景。
你需要對(duì)你正在開(kāi)發(fā)的產(chǎn)品有一個(gè)清晰的概念。以下是一些需要考慮的基本問(wèn)題:
它是做什么的?你的產(chǎn)品的用途是什么?產(chǎn)品需要什么樣的功能來(lái)執(zhí)行?是給誰(shuí)的?這個(gè)產(chǎn)品的受眾是誰(shuí)?用戶是否有任何可能影響產(chǎn)品接收方式的怪癖?用戶為什么要使用這個(gè)產(chǎn)品?是什么讓它獨(dú)一無(wú)二?
用戶是否熟悉同類產(chǎn)品?該產(chǎn)品是響應(yīng)一個(gè)確定的需求還是創(chuàng)建一個(gè)新的需求?它是否解決了可訪問(wèn)性?這個(gè)產(chǎn)品是網(wǎng)站嗎?一個(gè)web應(yīng)用程序?一個(gè)應(yīng)用程序嗎?它應(yīng)該提供相同的跨平臺(tái)體驗(yàn)，還是專注于特定環(huán)境中的特定微體驗(yàn)?
設(shè)計(jì)系統(tǒng)的目的是通過(guò)處理已知的關(guān)注點(diǎn)以及在概念階段識(shí)別新的關(guān)注點(diǎn)來(lái)減少開(kāi)發(fā)中的復(fù)雜性。在過(guò)程的早期定義產(chǎn)品映射是很重要的，因?yàn)樗鼘⒂兄谧R(shí)別在原型階段可以避免的潛在停頓。
第二，制定你的創(chuàng)建計(jì)劃。
你需要評(píng)估最好的方法。如果你正在開(kāi)發(fā)一個(gè)新產(chǎn)品，你可能會(huì)從一個(gè)MVP(最小可行產(chǎn)品)開(kāi)始，你的注意力將會(huì)放在驗(yàn)證功能和學(xué)習(xí)用戶的反饋上。在這些情況下，使用現(xiàn)有平臺(tái)上的UI套件是有意義的，比如谷歌的Material UI或Apple的UI kit。
如果你已經(jīng)經(jīng)過(guò)了MVP階段，或者從頭開(kāi)始創(chuàng)建了一個(gè)完整的設(shè)計(jì)系統(tǒng)，你的產(chǎn)品映射——應(yīng)該包括關(guān)鍵方面，比如信息架構(gòu)、站點(diǎn)地圖和用戶旅程——將會(huì)告訴你哪些基本功能需要首先解決。
例如，如果你的產(chǎn)品是一個(gè)電子商務(wù)應(yīng)用程序，你需要在整個(gè)用戶旅程中有什么元素來(lái)執(zhí)行購(gòu)買——從主頁(yè)到產(chǎn)品頁(yè)面，結(jié)帳和訂單確認(rèn)?是垂直導(dǎo)航還是水平導(dǎo)航?cta是什么樣子的:它們的圖標(biāo)是純文本的，背景是彩色的嗎?你考慮的圖像比例是什么:縱向、方形、橫向?
通過(guò)分層功能處理每個(gè)元素的屬性，您將能夠?yàn)闈u進(jìn)的UI版本打下堅(jiān)實(shí)的基礎(chǔ)，從而構(gòu)建一致可靠的系統(tǒng)。
第三，選擇合適的工具。
開(kāi)發(fā)一個(gè)產(chǎn)品應(yīng)該始終是一個(gè)包容的過(guò)程，這取決于所有相關(guān)方:設(shè)計(jì)師、開(kāi)發(fā)人員、產(chǎn)品所有者、客戶和用戶。這些人一起創(chuàng)造了一個(gè)生態(tài)系統(tǒng)，一個(gè)試驗(yàn)場(chǎng)，在最終產(chǎn)品交付的整個(gè)過(guò)程中塑造設(shè)計(jì)系統(tǒng)。
由于進(jìn)度需要共享，有時(shí)需要實(shí)時(shí)工作，因此選擇最適合您的工作流的工具是很重要的。值得慶幸的是，當(dāng)涉及到設(shè)計(jì)和原型工具時(shí)，我們有太多工作可以選擇。
通過(guò)如上三步驟，設(shè)計(jì)師就可以創(chuàng)建一個(gè)可使用的設(shè)計(jì)系統(tǒng)，該設(shè)計(jì)系統(tǒng)將會(huì)極大提高重復(fù)的設(shè)計(jì)工作，以及降低設(shè)計(jì)師的工作強(qiáng)度。