合作作者 Hesivell 帶來的讀書筆記，關(guān)于我們曾經(jīng)介紹過的《Design Systems》一書，并配有涂鴉筆記風(fēng)格的手繪插圖，強烈推薦。

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

類比起來，有點像是阿里的中臺。無論如何也是很前沿的一個方向。

一、什么是 design system

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

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

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

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

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

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

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

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

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

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

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

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

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

四、萬變不離其宗

Patterns evolve，behaviors remain

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

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

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

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

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

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

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

六、命名、共享和活用

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

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

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

2. 那么為什么要共享？

還是比作語言，普魯士語和我大清朝的滿文消失了就是因為知道它們的人太少了。同理，如果團隊里大多數(shù)人都不知道設(shè)計體系的用法，那么設(shè)計體系還有什么意義呢？

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

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

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

本書分為兩個部分，特別是讀到兩部分過渡的時候，感觸非常深。

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

八、就是今天

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

△ 圖源：Salmorejo Studio 獻給宇宙 / 以及茫然未可知而又充滿了機遇的未來 / 以及貓控主頁君 C7210

最后整理這一系列筆記的時候，在最初的介紹部分，我想到 design system 有點類似阿里的中臺。而傳說中，中臺就是「一個可能會讓設(shè)計師失業(yè)的系統(tǒng)」，因為大部分的設(shè)計流程到后面都可以集成化、模塊化、自動產(chǎn)出。

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

我相信，這是一個開放式結(jié)局。

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

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

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

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

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

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