編輯導(dǎo)讀：在當(dāng)今的環(huán)境中設(shè)計(jì)系統(tǒng)之所以受到眾多企業(yè)的青睞，一方面是設(shè)計(jì)系統(tǒng)解決了員工協(xié)作困難的難題，另一方面則是離不開“開發(fā)語(yǔ)言和協(xié)作模式”的發(fā)展的。本文梳理了設(shè)計(jì)系統(tǒng)的前世今生，希望對(duì)你有幫助。

一、設(shè)計(jì)系統(tǒng)的前世

在講述設(shè)計(jì)系統(tǒng)的前世，我先給大家講一個(gè)故事。

1.1 巴別塔的故事

巴別塔可能有些人不是很熟悉，我簡(jiǎn)單介紹一下，巴別塔是《圣經(jīng)·舊約·創(chuàng)世記》第11章中的一則故事，當(dāng)時(shí)人類想要建造一座可以通天的塔，但是上帝看見了人類的驕傲，為了阻止這個(gè)計(jì)劃，上帝把人類的語(yǔ)言打亂，人類因?yàn)椴荒芙涣髟诮ㄔ爝^(guò)程中狀況百出，最后建造巴別塔的計(jì)劃就不了了之了。

語(yǔ)言統(tǒng)一前：在早期階段因人類語(yǔ)言溝通的高效，在搭建塔的底座的時(shí)候是規(guī)矩的、堅(jiān)固的、統(tǒng)一的。

語(yǔ)言混亂后：在后期因?yàn)檎Z(yǔ)言溝通不順利，在搭建塔的頂部的時(shí)候是混亂的、荒廢的、沒有秩序的。

從巴比塔的例子中我們可以看到自從人類的語(yǔ)言被打亂之后，整個(gè)后半部分都朝著混亂的方向發(fā)展，就算單獨(dú)看其中一個(gè)部分保持著之前的基本要求，但是因?yàn)楸舜酥g不能聽懂對(duì)方的語(yǔ)言，后期是不可能在之前的基礎(chǔ)上進(jìn)行搭建，更可怕的是后期的搭建沒有什么修復(fù)的可能性。

巴別塔就好比我們開發(fā)的產(chǎn)品，反觀我們的產(chǎn)品在產(chǎn)品初期因?yàn)轶w量較小的原因很多開發(fā)任務(wù)和組件都可以掌控，但是隨著體量不斷變大，業(yè)務(wù)量不斷地增加，研發(fā)人員在產(chǎn)品迭代困難重重，如果在錯(cuò)誤的產(chǎn)品上進(jìn)行迭代，那很有可能最終導(dǎo)致整個(gè)產(chǎn)品線的死亡。

巴比塔就像我們的設(shè)計(jì)系統(tǒng)，在設(shè)計(jì)領(lǐng)域我們也一直在尋找更統(tǒng)一的生產(chǎn)和協(xié)作語(yǔ)言，來(lái)消除我們?cè)趨f(xié)作中面臨溝通中的信息損耗。

1.2 設(shè)計(jì)系統(tǒng)概念的萌芽

最開始的設(shè)計(jì)系統(tǒng)的概念出現(xiàn)在1919年，比如在1919-1933年的包豪斯運(yùn)動(dòng)（The Bauhaus Movement）時(shí)期，由路易斯沙利文所提出的“形式追隨功能”（Form Follows Function）理論，提倡設(shè)計(jì)師們應(yīng)該組件與模塊的概念運(yùn)用在了工業(yè)與建筑設(shè)計(jì)當(dāng)中。

受到其思想的影響，在福特的時(shí)代，汽車領(lǐng)域中的“流水線”思維就將生產(chǎn)流程模塊化進(jìn)而提升生產(chǎn)效率，形成大批量的工業(yè)化時(shí)代，形成了強(qiáng)勢(shì)的美國(guó)汽車工業(yè)。

回顧設(shè)計(jì)本身，從模塊化的印刷系統(tǒng)開始，一路走到了在大型城市中通過(guò)簡(jiǎn)單的規(guī)則建立龐大的識(shí)別系統(tǒng)，比如飛機(jī)場(chǎng)的指示牌、引導(dǎo)牌這種可以提高工作效率的工具。

這種組件和模塊的概念，一直影響數(shù)字行業(yè)中的UI設(shè)計(jì)師，從最開始的視覺語(yǔ)言進(jìn)化到了現(xiàn)在的設(shè)計(jì)系統(tǒng)。至于在互聯(lián)網(wǎng)領(lǐng)域中是怎么形成的，咱們就來(lái)看看設(shè)計(jì)系統(tǒng)的今生——設(shè)計(jì)系統(tǒng)在互聯(lián)網(wǎng)中的進(jìn)化。

二、設(shè)計(jì)系統(tǒng)的今生

在當(dāng)今的環(huán)境中設(shè)計(jì)系統(tǒng)之所以受到眾多企業(yè)的青睞，一方面是設(shè)計(jì)系統(tǒng)解決了員工協(xié)作困難的難題，另一方面則是離不開“開發(fā)語(yǔ)言和協(xié)作模式”的發(fā)展的。接下來(lái)就讓我們看看“開發(fā)語(yǔ)言和協(xié)作模式”是怎么發(fā)展，催化設(shè)計(jì)系統(tǒng)的產(chǎn)生的。

2.1 “開發(fā)語(yǔ)言”進(jìn)化為“設(shè)計(jì)系統(tǒng)”

通過(guò)“巴別塔”的比喻，設(shè)計(jì)系統(tǒng)之所以會(huì)出現(xiàn)就是為了讓人類更好地協(xié)同我們的語(yǔ)言，就像是解決我們“巴比塔”語(yǔ)言不同的問(wèn)題。

起初的視覺系統(tǒng)并不是現(xiàn)在大家看到的樣子，設(shè)計(jì)系統(tǒng)就好比人類的語(yǔ)言，也是不斷進(jìn)化、完善才形成現(xiàn)在的影響力的。那互聯(lián)網(wǎng)設(shè)計(jì)系統(tǒng)是如何興起的呢？那時(shí)間還得追溯到1990年。

在1990年代（90年代中期），越來(lái)越多的人使用互聯(lián)網(wǎng)和個(gè)人電腦，隨著互聯(lián)網(wǎng)web（網(wǎng)頁(yè)）的發(fā)展，人們已經(jīng)不滿足枯燥信息傳單的網(wǎng)頁(yè)，在上網(wǎng)過(guò)程中追求更高質(zhì)量的用戶體驗(yàn)。

當(dāng)時(shí)的web網(wǎng)頁(yè)多是由HTML 技術(shù)實(shí)現(xiàn)出來(lái)的，在1994年發(fā)布了關(guān)于CSS技術(shù)的第一個(gè)提案——為開發(fā)人員提供了一套小部件和模式的工具包（基于網(wǎng)頁(yè)解決方案的前端工具包，供設(shè)計(jì)師和開發(fā)人員使用），去提升用戶體驗(yàn)。但是即使使用了CSS技術(shù)，在Web網(wǎng)頁(yè)上還必須是整個(gè)頁(yè)面構(gòu)建的，在實(shí)現(xiàn)上設(shè)計(jì)還是有局限的。

直到2002年JavaScrpit技術(shù)的出現(xiàn)與應(yīng)用，允許開發(fā)人員構(gòu)建組件而不是整個(gè)頁(yè)面構(gòu)建，大大地提高了網(wǎng)頁(yè)布局的靈活性，整個(gè)網(wǎng)頁(yè)的布局變得更方便、更快捷，也大大提高了網(wǎng)頁(yè)的美觀度和用戶體驗(yàn)。正是因?yàn)殚_發(fā)語(yǔ)言的升級(jí)，也推動(dòng)了萬(wàn)維網(wǎng)聯(lián)盟（W3C）的等組織的成立。

2.2 協(xié)作模式升級(jí)為“敏捷開發(fā)”

單單地開發(fā)語(yǔ)言的升級(jí)，要解決日趨龐大且復(fù)雜的產(chǎn)品需求是遠(yuǎn)遠(yuǎn)不夠的，比如許多像阿里巴巴、字節(jié)跳動(dòng)、滴滴打車這種要解決國(guó)際化和多平臺(tái)產(chǎn)品需求的企業(yè)來(lái)說(shuō)，不僅要開發(fā)出適應(yīng)多平臺(tái)的開發(fā)語(yǔ)言，還要優(yōu)化設(shè)計(jì)師和開發(fā)人員之間的協(xié)作模式。

2.2.1 瀑布開發(fā)協(xié)作模式

起初傳統(tǒng)的軟件開發(fā)是建立在“瀑布協(xié)作模式”之上的，從需求的產(chǎn)品到產(chǎn)品開發(fā)再到產(chǎn)品維護(hù)，每個(gè)階段設(shè)計(jì)師和開發(fā)成員都有要完成的工作任務(wù)，就像是福特時(shí)代生產(chǎn)流程模塊化的水流線一樣。

此協(xié)作模式雖然提高了開發(fā)效率，但是也有其弊端，因?yàn)槭橇魉€的協(xié)作模式，一旦流程中出現(xiàn)問(wèn)題，就要進(jìn)行“返回操作”，就要返回到上一段進(jìn)行修改，比如90年代的微軟開發(fā)系統(tǒng)就是如此，想要糾正產(chǎn)品中的問(wèn)題，流水線的步驟就要從頭走一遍，把系統(tǒng)刻入到光盤之中，再通過(guò)電腦讀寫升級(jí)系統(tǒng)，從需求到任務(wù)分發(fā)最長(zhǎng)可能要一年多的時(shí)間，久而久之不免兩者之間還會(huì)產(chǎn)生難于逾越的溝通協(xié)作問(wèn)題。

2.2.2 敏捷開發(fā)協(xié)作模式

正是因?yàn)椤捌俨紖f(xié)作模式”這種問(wèn)題的出現(xiàn)，使改善設(shè)計(jì)師和開發(fā)者之間的協(xié)作開發(fā)模式——“敏捷開發(fā)協(xié)作模式“應(yīng)運(yùn)而生。

敏捷開發(fā)的宗旨是提高團(tuán)隊(duì)成員的協(xié)作效率，消除設(shè)計(jì)師和開發(fā)成員之間的溝通障礙，讓設(shè)計(jì)師和開發(fā)成員有更多的時(shí)間去做自己領(lǐng)域的事情，即使是出現(xiàn)了問(wèn)題在各自領(lǐng)域進(jìn)行修改，比如現(xiàn)如今的蘋果系統(tǒng)的升級(jí)只需要通過(guò)云端進(jìn)行系統(tǒng)的升級(jí)。

三、 互聯(lián)網(wǎng)中設(shè)計(jì)系統(tǒng)概念

我們把目光聚焦在互聯(lián)網(wǎng)中設(shè)計(jì)系統(tǒng)概念，我總結(jié)為如下三點(diǎn)比較重要的知識(shí)點(diǎn)。

3.1 幫助解決互聯(lián)網(wǎng)工作中的問(wèn)題

前面我講的“設(shè)計(jì)系統(tǒng)解決了員工協(xié)作困難的難題”，那到底是哪些難題呢？我歸納如下：

重復(fù)工作效率低：當(dāng)我們?cè)诮又貜?fù)性工作需求時(shí)候，我們需要翻找之前的設(shè)計(jì)稿將之前的結(jié)構(gòu)融入到新的設(shè)計(jì)稿中，這對(duì)設(shè)計(jì)師來(lái)說(shuō)工作量不亞于重新做一次設(shè)計(jì)稿了。

用戶體驗(yàn)不一致：這樣很多相似但又完全一樣的功能就走到了生產(chǎn)環(huán)節(jié)又會(huì)導(dǎo)致第二個(gè)問(wèn)題出現(xiàn)，用戶體驗(yàn)不一致。比如在一些產(chǎn)品中一個(gè)粉色主題色，查閱設(shè)計(jì)稿的時(shí)候，會(huì)發(fā)現(xiàn)很多個(gè)不同的粉色值出現(xiàn)在產(chǎn)品中。

產(chǎn)品難以迭代：當(dāng)模糊不清的規(guī)范和組件大量地出現(xiàn)在線上開發(fā)環(huán)境中，產(chǎn)品的迭代就受到了很大的阻力。也就是說(shuō)我們的產(chǎn)品進(jìn)行了多次的升級(jí)，錯(cuò)誤的代碼交叉依賴，為我們的迭代造成了巨大障礙。

總結(jié)一句話設(shè)計(jì)系統(tǒng)的應(yīng)用是為了在設(shè)計(jì)我們的產(chǎn)品時(shí)消除信息損耗。一方面減少我們出錯(cuò)的機(jī)會(huì)，另一方面提高開發(fā)效率，讓這些信息擁有更多的靈活性和擴(kuò)展性。

3.2 互聯(lián)網(wǎng)設(shè)計(jì)系統(tǒng)的概念定義

在Alla Kholmatova撰寫的《Design System》一書中，有一段是對(duì)設(shè)計(jì)體系的描述：“設(shè)計(jì)體系”是指服務(wù)于數(shù)字化產(chǎn)品設(shè)計(jì)的一系列具有內(nèi)在關(guān)聯(lián)性的、組織有序的設(shè)計(jì)模式與實(shí)踐方法。這句話中有三個(gè)關(guān)鍵詞是定義設(shè)計(jì)系統(tǒng)的。

數(shù)字化產(chǎn)品：指信息、計(jì)算機(jī)軟件、視聽娛樂(lè)產(chǎn)品等可數(shù)字化表示并可用計(jì)算機(jī)網(wǎng)絡(luò)傳輸?shù)漠a(chǎn)品，比如網(wǎng)頁(yè)、APP、車載產(chǎn)品等。

模式：指產(chǎn)品界面中可復(fù)用的組成要素，包括按鈕、文本框、圖標(biāo)、配色、字體，以及功能流程與交互行為等。

實(shí)踐：指關(guān)于如何在團(tuán)隊(duì)當(dāng)中創(chuàng)建、提煉、使用和共享研究出來(lái)的設(shè)計(jì)規(guī)則。

簡(jiǎn)單地來(lái)說(shuō)，設(shè)計(jì)系統(tǒng)用一套連貫組織、相互關(guān)聯(lián)的模式和共享實(shí)踐以達(dá)到數(shù)字產(chǎn)品的目的。在數(shù)字行業(yè)互聯(lián)網(wǎng)領(lǐng)域中，設(shè)計(jì)系統(tǒng)就是一系列可用的組件以及他們的使用指南的組合。

3.3 設(shè)計(jì)體系&設(shè)計(jì)系統(tǒng)的區(qū)別

國(guó)外的“Design System”在中國(guó)的互聯(lián)網(wǎng)中有兩種稱呼分別是設(shè)計(jì)系統(tǒng)和設(shè)計(jì)體系。起初我也被這兩種叫法搞糊涂了，我查閱了國(guó)外的資料，現(xiàn)在就說(shuō)說(shuō)設(shè)計(jì)體系&設(shè)計(jì)系統(tǒng)的區(qū)別。

體系概念：英文為structure，泛指一定范圍內(nèi)或同類的事物按照一定的秩序和內(nèi)部聯(lián)系組合而成的整體，是不同系統(tǒng)組成的系統(tǒng)。

系統(tǒng)概念：英文為system，形容若干部分相互聯(lián)系、相互作用，形成的具有某些功能的整體。

因?yàn)檫@個(gè)概念是從國(guó)外傳到國(guó)內(nèi)的，前端開發(fā)則翻譯為“體系”，而國(guó)外的設(shè)計(jì)師翻譯為“系統(tǒng)”這兩種叫法本質(zhì)上的意義是沒有區(qū)別的，只是職位不同叫法不同而已。具體地落實(shí)到表現(xiàn)層上的產(chǎn)物就是前端開發(fā)人員維護(hù)的開發(fā)組件庫(kù)和設(shè)計(jì)師維護(hù)的設(shè)計(jì)組件庫(kù)。

不管是設(shè)計(jì)師稱為的系統(tǒng)，還是前端開發(fā)稱之為的體系，最為重要的是要理解“Design System”的概念不單單是一堆UI組件，更不是UI設(shè)計(jì)或者前端開發(fā)單獨(dú)完成的事情，而是應(yīng)該理解為“是一種思維，設(shè)計(jì)師與前端開發(fā)溝通的一種語(yǔ)言，正是因?yàn)橛羞@種語(yǔ)言的聯(lián)系才能促成優(yōu)秀產(chǎn)品的誕生。

#專欄作家#

斜杠7濕兄，公眾號(hào)：斜杠7濕兄，人人都是產(chǎn)品經(jīng)理專欄作家。星光不問(wèn)趕路人，時(shí)光不負(fù)有心人，勵(lì)志做一個(gè)知識(shí)的分享者。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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