合作作者 Hesivell 帶來(lái)的讀書(shū)筆記，關(guān)于我們?cè)?jīng)介紹過(guò)的《Design Systems》一書(shū)，并配有涂鴉筆記風(fēng)格的手繪插圖，強(qiáng)烈推薦。

這個(gè)體系像是滲透在產(chǎn)品中的一種語(yǔ)言，讓產(chǎn)品人員、設(shè)計(jì)師、程序員用同一種語(yǔ)言交流，提升協(xié)作效率；又像是一個(gè)自動(dòng)化智能化的工具，讓整個(gè)團(tuán)隊(duì)進(jìn)行自循環(huán)，盡量減少人工維護(hù)。

類比起來(lái)，有點(diǎn)像是阿里的中臺(tái)。無(wú)論如何也是很前沿的一個(gè)方向。

一、什么是 design system

Design Systems 這本書(shū)的主線，講的是一個(gè)叫做「設(shè)計(jì)體系」（ design system ）的工具。顧名思義，就是把整個(gè)產(chǎn)品「體系化」。

對(duì)于產(chǎn)品中比較成熟的那些模塊（比如社區(qū)的 feed 卡片格式），統(tǒng)一進(jìn)行組件化，設(shè)計(jì)層面和開(kāi)發(fā)層面統(tǒng)一命名共享資源，應(yīng)用到業(yè)務(wù)線的后續(xù)迭代。這部分成熟模塊就可以在產(chǎn)品中自循環(huán)，無(wú)需設(shè)計(jì)師后續(xù)維護(hù)了。

而設(shè)計(jì)師的人工精力被解放出來(lái)，主要用于新功能的開(kāi)發(fā)，新腦洞的爆炸，和產(chǎn)品方向的探索。

二、有規(guī)律的產(chǎn)品

其實(shí)我覺(jué)得每一款產(chǎn)品都有自己的規(guī)律。

當(dāng)你從系統(tǒng)層面俯視一個(gè)產(chǎn)品，就像站在高樓頂上俯視建筑結(jié)構(gòu)一樣。

這時(shí)候可以看到在地面上看不到的一些規(guī)律。

如果產(chǎn)品中每個(gè)模塊的信息量、動(dòng)效、顏色、輕重、語(yǔ)調(diào)，都在一開(kāi)始被賦予了使用場(chǎng)景和理由，后面只要從中選取或者做必要的補(bǔ)充，就會(huì)在秩序和效率上有很大提升。

三、原來(lái)產(chǎn)品的「氣質(zhì)」也是可以用系統(tǒng)化的方法去打造的

如果任意提取一個(gè)頁(yè)面，去掉LOGO和其它產(chǎn)品信息，那么你能認(rèn)出這是個(gè)什么產(chǎn)品么？

產(chǎn)品應(yīng)該有一個(gè)清晰的「人設(shè)」才能給用戶留下深刻的印象，要么風(fēng)格鮮明，要么平易近人，總之設(shè)計(jì)要做得極致一些，才不會(huì)淹沒(méi)在競(jìng)品群里。

不過(guò)看了這本書(shū)我才知道，產(chǎn)品的氣質(zhì)這種抽象不可觸摸的東西，也是可以通過(guò)系統(tǒng)化理性的方式來(lái)打造的。

一種方法是自上而下定義品牌關(guān)鍵詞，再融入具體樣式；另一種方法是自下而上，梳理產(chǎn)品現(xiàn)有的與品牌關(guān)聯(lián)的元素，比如配色、圖標(biāo)、版式，找出那些明顯和品牌定位脫節(jié)的樣式，梳理，精確化品牌調(diào)性。兩種方法當(dāng)然也可以結(jié)合，雙向打通。

四、萬(wàn)變不離其宗

Patterns evolve，behaviors remain

有人說(shuō)在設(shè)計(jì)之初就要定義好產(chǎn)品的基本組件樣式，但也有人擔(dān)心說(shuō)一開(kāi)始限制太多會(huì)影響后續(xù)的迭代發(fā)展，或者產(chǎn)品迭代了之后樣式也會(huì)有比較大的改動(dòng)，反而會(huì)增加不必要的工作量。這也是我之前一直覺(jué)得矛盾的地方。

這本書(shū)中的觀點(diǎn)是，盡管隨著時(shí)間的推移，基本組件的樣式、組合方式、交互模式都會(huì)有所變化，但它們想要支持或者促進(jìn)的「用戶行為」是不變的。就比如無(wú)論用手機(jī)拍照，還是相機(jī)，都是為了支持拍照的行為。

所以在最初應(yīng)該列出產(chǎn)品中核心的用戶行為，并基于它們來(lái)對(duì)樣式進(jìn)行定義和分組，就會(huì)有主線可循。

另外：一個(gè)用戶行為可以對(duì)應(yīng)多個(gè)解決方案和樣式。

五、幾種不同的變體可以歸為統(tǒng)一樣式

類似的樣式變體可以歸為同一種樣式，方便管理。

例如 book item，有用在發(fā)現(xiàn)頁(yè)的，也有用在推薦位的。這時(shí)候它們的組成成分可能會(huì)有些不同。相同的部分，就是 book item 通用的基本組成元素，例如標(biāo)題；不同的部分，就是切合使用場(chǎng)景的元素，例如推薦位的推薦語(yǔ)，或發(fā)現(xiàn)頁(yè)的標(biāo)簽。

六、命名、共享和活用

1. 為什么要給組件命名？

主要是為了集體共享、方便識(shí)別和運(yùn)用。比如在 Sketch 里，命名一個(gè)設(shè)計(jì)模塊叫「視頻 card-評(píng)論」，那么對(duì)應(yīng)的開(kāi)發(fā)代碼庫(kù)里，這段代碼也要叫「視頻 card-評(píng)論」，這樣就保證設(shè)計(jì)師和程序員之間用一樣的語(yǔ)言溝通，消滅代溝。

就像語(yǔ)言一樣，其中的詞匯，需要流傳和使用，才能不斷強(qiáng)化；但如果詞匯本身比較艱深晦澀那就不容易流傳開(kāi)來(lái)。因此命名簡(jiǎn)單明確，才能保證之后的使用方便。

2. 那么為什么要共享？

還是比作語(yǔ)言，普魯士語(yǔ)和我大清朝的滿文消失了就是因?yàn)橹浪鼈兊娜颂倭恕Ｍ恚绻麍F(tuán)隊(duì)里大多數(shù)人都不知道設(shè)計(jì)體系的用法，那么設(shè)計(jì)體系還有什么意義呢？

所以要讓設(shè)計(jì)體系成為日常工具活用起來(lái)，提升效率，共享是最關(guān)鍵的。

七、關(guān)于這個(gè)讀書(shū)筆記系列

隨著閱讀進(jìn)度的深入，我發(fā)現(xiàn)我對(duì) design system 的理解也越來(lái)越不一樣。

本書(shū)分為兩個(gè)部分，特別是讀到兩部分過(guò)渡的時(shí)候，感觸非常深。

前面我還停留在淺層次或者相對(duì)泛的「產(chǎn)品要系統(tǒng)化」這種概念，然而確實(shí)，回顧這過(guò)程中記下來(lái)的每個(gè)點(diǎn)，比如產(chǎn)品要明確氣質(zhì)，比如拆分模塊要以行為目的為導(dǎo)向，比如設(shè)計(jì)體系的重點(diǎn)不在構(gòu)建而在使用……每一次，我都會(huì)用這些新的觀點(diǎn)審視我之前的思路，或者反思哪里是不足，哪里需要修補(bǔ)；每一次，對(duì)于我來(lái)說(shuō)都像恍然大悟，都是一個(gè)新的小起點(diǎn)。

八、就是今天

產(chǎn)品設(shè)計(jì)成體系之后，設(shè)計(jì)師會(huì)不會(huì)失業(yè)？

△ 圖源：Salmorejo Studio 獻(xiàn)給宇宙 / 以及茫然未可知而又充滿了機(jī)遇的未來(lái) / 以及貓控主頁(yè)君 C7210

最后整理這一系列筆記的時(shí)候，在最初的介紹部分，我想到 design system 有點(diǎn)類似阿里的中臺(tái)。而傳說(shuō)中，中臺(tái)就是「一個(gè)可能會(huì)讓設(shè)計(jì)師失業(yè)的系統(tǒng)」，因?yàn)榇蟛糠值脑O(shè)計(jì)流程到后面都可以集成化、模塊化、自動(dòng)產(chǎn)出。

那么，哪些設(shè)計(jì)師會(huì)隨著設(shè)計(jì)的自動(dòng)化趨勢(shì)而失業(yè)呢？哪些又完全不會(huì)？我想這應(yīng)該是我們所有設(shè)計(jì)師應(yīng)該一直持續(xù)思考的問(wèn)題。

我相信，這是一個(gè)開(kāi)放式結(jié)局。

歡迎關(guān)注作者微信公眾號(hào)：「Beforweb」

「學(xué)習(xí)組件化設(shè)計(jì)，你還需要這些」

• 《這篇8000字長(zhǎng)文，能幫你學(xué)會(huì)組件化設(shè)計(jì)與開(kāi)發(fā)的思維方式》
• 《為什么我們都應(yīng)該學(xué)會(huì)組件化設(shè)計(jì)思維？》
• 《如何培養(yǎng)組件化設(shè)計(jì)思維？來(lái)看阿里設(shè)計(jì)師的經(jīng)驗(yàn)總結(jié)！》
• 《進(jìn)階必讀！可能是最全面的組件化開(kāi)發(fā)與設(shè)計(jì)指南》
• 《化整為零！關(guān)于組件化設(shè)計(jì)升級(jí)的一些思考》

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

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