你覺得設(shè)計(jì)系統(tǒng)重要嗎？那目前手里的設(shè)計(jì)系統(tǒng)是在靈活運(yùn)用？還是落灰、擺設(shè)？你對(duì)設(shè)計(jì)系統(tǒng)理解有多深？它在你的設(shè)計(jì)中有多大的用處？節(jié)省時(shí)間、減少出錯(cuò)率、視覺一致性還是僅僅覺得就應(yīng)該有個(gè)規(guī)范？那怎么避免設(shè)計(jì)系統(tǒng)帶來了統(tǒng)一和便利，但同時(shí)失去了變化和新鮮感？

設(shè)計(jì)系統(tǒng)是今年來熱門的話題之一，想要帶來良好的用戶體驗(yàn)，設(shè)計(jì)系統(tǒng)就是其中重要的一環(huán)，那它和設(shè)計(jì)規(guī)范、設(shè)計(jì)模式、設(shè)計(jì)語言、設(shè)計(jì)原則有什么關(guān)系？

設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)用一套連貫組織、相互關(guān)聯(lián)的模式和共享實(shí)踐以達(dá)到數(shù)字產(chǎn)品的目的。簡單的說就是一系列可重用的組件和它們的使用指導(dǎo)文檔，在制作這些組件的過程中會(huì)考慮到公司的設(shè)計(jì)理論和品牌化（顏色，文案，字體等等），所以它們也通常包括在設(shè)計(jì)系統(tǒng)里。設(shè)計(jì)系統(tǒng)為公司的各種產(chǎn)品提供了基石和指導(dǎo)。是一種動(dòng)態(tài)的，是需要維護(hù)與改進(jìn)的。

設(shè)計(jì)模式

設(shè)計(jì)模式是一種經(jīng)常性，可重復(fù)使用的解決方案，可用于解決設(shè)計(jì)問題，我們經(jīng)常會(huì)說解決整個(gè)方案我們要運(yùn)用什么樣的設(shè)計(jì)模式。

設(shè)計(jì)語言

設(shè)計(jì)語言是把設(shè)計(jì)作為一種“溝通的方式”，用于在特定的場(chǎng)景中進(jìn)行內(nèi)容與信息的傳遞。設(shè)計(jì)語言可以理解為由品牌基因+設(shè)計(jì)規(guī)范+多場(chǎng)景應(yīng)用三大要素組成的一套設(shè)計(jì)應(yīng)用規(guī)范系統(tǒng)。

設(shè)計(jì)原則

設(shè)計(jì)原則可以理解為設(shè)計(jì)語言中的語法，是構(gòu)建設(shè)計(jì)語言系統(tǒng)的起點(diǎn)，用于傳達(dá)品牌主張或設(shè)計(jì)理念，它將指引業(yè)務(wù)設(shè)計(jì)執(zhí)行的方向。

比如Airbnb的設(shè)計(jì)原則可以簡單歸納為幾點(diǎn)：

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

設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師來說并不陌生，日常工作中也經(jīng)常使用。圍繞在某種風(fēng)格或者大型設(shè)計(jì)項(xiàng)目下形成可視化、數(shù)據(jù)化的標(biāo)準(zhǔn)，針對(duì)相對(duì)獨(dú)立的體系建立的統(tǒng)一遵守條款。統(tǒng)一的設(shè)計(jì)規(guī)范不僅有利于設(shè)計(jì)師提升效率，同樣可以幫助產(chǎn)品、開發(fā)、運(yùn)營、測(cè)試等相關(guān)人員對(duì)產(chǎn)品的體驗(yàn)有更好的認(rèn)知。

那是不是只要制作一套設(shè)計(jì)系統(tǒng)，在團(tuán)隊(duì)進(jìn)行擴(kuò)散就可以了？那平臺(tái)的統(tǒng)一性就解決了？

我曾經(jīng)加入一個(gè)設(shè)計(jì)團(tuán)隊(duì)，看到平臺(tái)風(fēng)格不統(tǒng)一，當(dāng)時(shí)很自豪很堅(jiān)定的制定了一套平臺(tái)設(shè)計(jì)規(guī)范，從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系，還有交互方面。當(dāng)時(shí)一心想著有這個(gè)規(guī)范寶典在手，平臺(tái)統(tǒng)一性指日可待，沒想到這個(gè)規(guī)范就成了我自己的規(guī)范，僅僅是我在自嗨。

為什么已經(jīng)建立設(shè)計(jì)規(guī)范了，還是沒能解決平臺(tái)統(tǒng)一的問題？這里延伸出另一個(gè)問題，為什么其他設(shè)計(jì)成員不用？協(xié)作不起來？是它不夠好？我嚴(yán)格按照標(biāo)準(zhǔn)來，為什么推不起來？

那要追溯到設(shè)計(jì)體系的目的是什么？它的意義何在？

• 建立統(tǒng)一的設(shè)計(jì)文化體系

• 保證多團(tuán)隊(duì)成員共同參與的項(xiàng)目視覺一致性

• 提升品牌調(diào)性

• 節(jié)省與研發(fā)人員的溝通成本

• 將元素組件化，提升設(shè)計(jì)師和程序員的工作效率

• 可以幫助設(shè)計(jì)人員有針對(duì)性地對(duì)視覺元素進(jìn)行優(yōu)化和迭代。

• 在用戶層方面，對(duì)某產(chǎn)品的體驗(yàn)一致性得到落實(shí)

• 減少設(shè)計(jì)出錯(cuò)率
  ……

整體可以歸納為

• 對(duì)內(nèi)統(tǒng)一，對(duì)外區(qū)分

• 管理與協(xié)作變得方便

• 建立設(shè)計(jì)文化體系，建立品牌感

• 減少、優(yōu)化錯(cuò)誤出現(xiàn)

01/

對(duì)內(nèi)統(tǒng)一，對(duì)外區(qū)分

規(guī)范定義的基礎(chǔ)是圍繞某種風(fēng)格或者設(shè)計(jì)文化。對(duì)內(nèi)統(tǒng)一，一個(gè)品牌的設(shè)計(jì)風(fēng)格，是要有別于同類競品的，比如阿里云、騰訊云，他們各自都有自己的品牌調(diào)性。在對(duì)外上兩個(gè)品牌是做到了對(duì)外區(qū)分，一眼可以識(shí)別出來。他們有各自規(guī)定的一套設(shè)計(jì)語言、設(shè)計(jì)規(guī)范。這樣才能在協(xié)作上達(dá)到對(duì)內(nèi)統(tǒng)一。我們都不希望在阿里云的網(wǎng)站，各個(gè)頁面的設(shè)計(jì)差異明顯，像跳轉(zhuǎn)到其他平臺(tái)。而這些針對(duì)用戶層一致性都是非常重要的體驗(yàn)。

02/

管理與協(xié)作變得方便

對(duì)于設(shè)計(jì)師：

多個(gè)設(shè)計(jì)成員協(xié)同一個(gè)產(chǎn)品，迭代與更改規(guī)范都能更快的同步�？梢栽囍�想象一下一個(gè)幾十人的設(shè)計(jì)團(tuán)隊(duì)，如果沒有統(tǒng)一設(shè)計(jì)規(guī)范，那網(wǎng)站會(huì)變成什么樣子。

對(duì)于開發(fā)者:

在UI還原中，設(shè)計(jì)需要經(jīng)常與前端進(jìn)行溝通“這里這里這樣做，那里那里這樣做”，對(duì)于每一塊的設(shè)計(jì)，前端都會(huì)詢問你，這樣大大增加了溝通的成本，把時(shí)間花在了無效的事情上。

設(shè)計(jì)規(guī)范統(tǒng)一后，減少了無效溝通，可以更專注創(chuàng)新方向，比如：要改變預(yù)先設(shè)定的一個(gè)輔助色，無論是設(shè)計(jì)還是開發(fā)，修改組件的顏色，全局使用到這個(gè)組件的地方都會(huì)改動(dòng)，大大節(jié)省了設(shè)計(jì)時(shí)間。

03/ 

建立設(shè)計(jì)文化體系，突出品牌感

做品牌的時(shí)候需要制定一整套VI規(guī)范手冊(cè)，那平臺(tái)同樣也需要統(tǒng)一的品牌感。建立統(tǒng)一的文化體系可以讓用戶無論處在哪個(gè)頁面都會(huì)有熟悉感、掌握感。統(tǒng)一的元素、視覺風(fēng)格、交互方式，更加突出該品牌應(yīng)有的調(diào)性。無論你在聽網(wǎng)易云音樂還是QQ音樂，看到界面都可以立馬識(shí)別出這是哪個(gè)app。

你能分出哪個(gè)是網(wǎng)易云播放界面，哪個(gè)是QQ音樂播放界面嗎？

04/

減少、優(yōu)化錯(cuò)誤出現(xiàn)

設(shè)計(jì)經(jīng)常碰到設(shè)計(jì)完后需要修改一個(gè)點(diǎn)，然后就要找出設(shè)計(jì)稿中所有相同的地方進(jìn)行修改，這樣很容易漏，統(tǒng)一規(guī)范后只需要修改組件即可。盡可能的避免錯(cuò)誤的出現(xiàn)。

設(shè)計(jì)規(guī)范的意義這么強(qiáng)大，對(duì)網(wǎng)站及品牌有至關(guān)重要的作用，那為什么還會(huì)出現(xiàn)沒有應(yīng)用起來的情況呢？

很多設(shè)計(jì)師會(huì)說：“設(shè)計(jì)不就應(yīng)該是變化多端的嗎？就是要表現(xiàn)創(chuàng)新力呀？制定了設(shè)計(jì)規(guī)范是不是就失去了變化和新鮮感？那設(shè)計(jì)還有什么意義？開發(fā)都可以做設(shè)計(jì)的事情了。”

這里就要看對(duì)設(shè)計(jì)規(guī)范理解的深度—設(shè)計(jì)規(guī)范是分層次的，平臺(tái)規(guī)范歸根結(jié)底是為了確保產(chǎn)品的易用性，是為了減少用戶的學(xué)習(xí)成本

對(duì)無法拆分的底層基礎(chǔ)元素做嚴(yán)格規(guī)定

底層基礎(chǔ)元素也可以說是全局樣式，比如色彩規(guī)定、文字大小、icon線/面、botton體系等一些基礎(chǔ)的元素，給用戶一種統(tǒng)一的視覺形象，在跨界面、跨端、跨系統(tǒng)間有熟悉感，從而潛移默化地進(jìn)行品牌的滲透。

增強(qiáng)界面設(shè)計(jì)的靈活性和可維護(hù)性

對(duì)組合自由度較低的基礎(chǔ)組件做精簡的樣式變化限定，對(duì)組合自由度較高的復(fù)合組件減少過于局限的限定條件，考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態(tài)，多種可能。

設(shè)計(jì)規(guī)范隨著業(yè)務(wù)的發(fā)展或技術(shù)的變革終究是會(huì)過時(shí)的，是需要迭代的。

設(shè)計(jì)規(guī)范是需要迭代的，而不是我只要制作出來就放那了，就像女生買衣服，去年的衣服已經(jīng)配不上今年的我，嘻嘻

~~希望我每天都有新衣服穿，做夢(mèng)中～

對(duì)設(shè)計(jì)體系的誤解

設(shè)計(jì)體系最大的重要性毋庸置疑就是規(guī)范節(jié)省人力，設(shè)計(jì)師可以更多的時(shí)間去發(fā)揮創(chuàng)造性。

誤解1：設(shè)計(jì)系統(tǒng)限制了設(shè)計(jì)師的創(chuàng)造力

很多設(shè)計(jì)師覺得統(tǒng)一了規(guī)范，那我的創(chuàng)造性從哪發(fā)揮，界面都長的差不多。在設(shè)計(jì)中，設(shè)計(jì)目的是解決商業(yè)或用戶的問題，并不僅僅是為了有創(chuàng)意而引入新的樣式或交互方式。

有了設(shè)計(jì)體系，統(tǒng)一了整體品牌風(fēng)格，不用把精力花費(fèi)在比如調(diào)整間距、對(duì)齊元素等瑣碎的事情上，更多的回去關(guān)注更全局的設(shè)計(jì)策略。

誤解2：設(shè)計(jì)系統(tǒng)只關(guān)乎設(shè)計(jì)，可由設(shè)計(jì)師獨(dú)立完成

它僅僅是設(shè)計(jì)軟件上可復(fù)用的組件，所以可由設(shè)計(jì)師獨(dú)立完成，這種想法是錯(cuò)誤的，是需要來自不同角色支持和參與的，這里包括前端、品牌、動(dòng)態(tài)設(shè)計(jì)、 用戶研究等。

誤解3：設(shè)計(jì)系統(tǒng)是一勞永逸的

有時(shí)候會(huì)想只要完成了規(guī)范就大功告成了，其實(shí)不然，對(duì)待設(shè)計(jì)規(guī)范就像對(duì)待產(chǎn)品一樣，是需要維護(hù)和改進(jìn)的，包括兩個(gè)方面：一種是對(duì)內(nèi)部使用的開發(fā)以及同事，一種是對(duì)用戶的，應(yīng)該定期收集用戶以及同事的反饋，確保及時(shí)更新迭代。

誤解4：設(shè)計(jì)系統(tǒng)的重要性

提高設(shè)計(jì)開發(fā)效率，最顯而易見的好處就是，組件庫的可復(fù)用性。比如像表格、彈窗、顏色等。一些基礎(chǔ)的組件只需要做一次。

確保設(shè)計(jì)一致性，為用戶提供連貫一致的用戶體驗(yàn)，設(shè)計(jì)的一致性讓用戶能縮短的學(xué)習(xí)使用產(chǎn)品的周期，讓他們能夠預(yù)見他們的操作所帶來的改變。網(wǎng)站統(tǒng)一的視覺規(guī)范、交互體驗(yàn)，會(huì)讓用戶產(chǎn)生一種掌控感。

設(shè)計(jì)系統(tǒng)促進(jìn)了公司內(nèi)部的合作和交流，一個(gè)成功的設(shè)計(jì)系統(tǒng)是需要跨功能團(tuán)隊(duì)參與，設(shè)計(jì)系統(tǒng)因此促進(jìn)了公司內(nèi)部不同職位的合作和交流，這種文化的建立也會(huì)幫助公司更有效地推出新的產(chǎn)品或服務(wù)。

那我們要如何去執(zhí)行呢？

已經(jīng)了解了規(guī)范的目的/意義，那該怎么去著手呢？

1. 對(duì)于設(shè)計(jì)規(guī)范的意義要同步給設(shè)計(jì)人員，提高認(rèn)知，這是一件提高效率的規(guī)范，規(guī)范必須落地。

在制定規(guī)范前期，不應(yīng)該是一個(gè)人規(guī)定這個(gè)規(guī)范，設(shè)計(jì)團(tuán)隊(duì)的成員應(yīng)積極參與，前期先把規(guī)范的基調(diào)定好，人人都參與進(jìn)來了，規(guī)范也就能更好的運(yùn)營，當(dāng)時(shí)我就是一個(gè)人定了規(guī)范，只是單純把規(guī)范發(fā)給其他設(shè)計(jì)人員，他們沒有參與，自然不會(huì)使用規(guī)范，對(duì)里面的設(shè)計(jì)元素沒有加深理解。

主導(dǎo)人。這個(gè)主導(dǎo)人建議讓全隊(duì)專業(yè)能力最強(qiáng)的人輔助產(chǎn)品戰(zhàn)略分析進(jìn)行。有全局把控能力，這樣能把紕漏降到最低。

2. 應(yīng)用規(guī)范里的界面、交互規(guī)范必須得遵循

大家一般說的設(shè)計(jì)規(guī)范是界面的視覺規(guī)范，從UI的定義，User Interface—用戶界面，用戶與界面之間的交互關(guān)系，可以歸納規(guī)范其實(shí)可以包含兩大類，一類是視覺規(guī)范，一類是交互規(guī)范。

視覺規(guī)范可以給用戶傳達(dá)統(tǒng)一的品牌形象，確保視覺一致性。后期的設(shè)計(jì)元素須復(fù)合規(guī)范的原則。

交互規(guī)范可以減少用戶的學(xué)習(xí)成本，讓用戶有歸屬感。交互規(guī)范在制定的過程中，需要寫好交互規(guī)則與條件，不然后期維護(hù)會(huì)混亂。像蓋房子一樣，地基都沒打穩(wěn)的話，整個(gè)樓都是偏的。

那在使用規(guī)范時(shí)，一定要遵循規(guī)范里的要求進(jìn)行應(yīng)用，否則會(huì)亂套，不僅起不到統(tǒng)一的品牌風(fēng)格，反倒會(huì)給人一種一團(tuán)糟、完全不專業(yè)的感覺。體驗(yàn)好是一個(gè)產(chǎn)品的競爭力。

設(shè)計(jì)規(guī)范的節(jié)點(diǎn)

節(jié)點(diǎn)和公司的進(jìn)度搭邊，看當(dāng)前的產(chǎn)品是應(yīng)該先獨(dú)立風(fēng)格還是先統(tǒng)一基礎(chǔ)規(guī)范。

固定的設(shè)計(jì)風(fēng)格規(guī)范，比如：google的“扁平”，微軟的“磁貼”，可以全局使用，并且時(shí)間保持的相對(duì)長久。這些設(shè)計(jì)風(fēng)格在前期就完成了獨(dú)立與其他風(fēng)格的區(qū)分。后期再進(jìn)行拓展。這種比較適規(guī)模比較大的團(tuán)隊(duì)，定好基調(diào)，不會(huì)走偏。

不斷優(yōu)化的設(shè)計(jì)規(guī)范，根據(jù)公司的節(jié)奏，有些產(chǎn)品目前比較迫切的是需要界面統(tǒng)一性、交互統(tǒng)一性。基礎(chǔ)做完以后，進(jìn)而考慮產(chǎn)品固定風(fēng)格。這種比較適合小團(tuán)隊(duì)協(xié)作�？梢噪S時(shí)調(diào)整。

1. 建立規(guī)范

制作原理—利用粒子構(gòu)成的原理與三維解構(gòu)

利用粒子構(gòu)成的原理與三維解構(gòu)，一個(gè)組件被科學(xué)的三維解析后由粒子再構(gòu)成，理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構(gòu)成元素都可變，高度靈活

2. 具體過程

建立單個(gè)元素——設(shè)立簡單組件——構(gòu)成復(fù)雜組件——形成模板——最后組成頁面。

3. 元素是工具庫的必要部分

并不是每個(gè)時(shí)刻都能夠直接使用完整的組件，元素是我們工具庫必不可少的部分，它可以更大的方便你修改組件，再造組件以及特殊的排版，方便拖拉拽。

4. 組件的命名規(guī)范化

規(guī)范組件命名，方便查找、方便協(xié)作。

協(xié)作

• 一鍵導(dǎo)出/同步最新組件到Sketch模板。

• 標(biāo)注方面，目前我們團(tuán)隊(duì)使用的是藍(lán)湖私有化。

那是不是所有的公司都需要?jiǎng)?chuàng)建設(shè)計(jì)系統(tǒng)？

一般情況下，公司有不同的產(chǎn)品線，且都需要長期的開發(fā)與迭代。公司中，越來越多的設(shè)計(jì)師加入，設(shè)計(jì)風(fēng)格需要統(tǒng)一。

那建立一套設(shè)計(jì)體系會(huì)面臨什么挑戰(zhàn)？

設(shè)計(jì)體系里面包含了設(shè)計(jì)語言、設(shè)計(jì)規(guī)范，需要與前端、品牌、動(dòng)態(tài)設(shè)計(jì)、 用戶研究等溝通，還是需要迭代優(yōu)化的，這是非常繁瑣耗時(shí)的項(xiàng)目，初期會(huì)非常的艱難，當(dāng)設(shè)計(jì)師開始做組件時(shí)，也是非常耗時(shí)的工作，需要考慮不同場(chǎng)景下的使用情況以及設(shè)計(jì)的延展性，都需要投入大量的設(shè)計(jì)人力。

聊了這么多，大家對(duì)設(shè)計(jì)系統(tǒng)有了一定了解，建立好設(shè)計(jì)系統(tǒng)可以事半功倍，以此提升效率才能提升UED價(jià)值。

思考點(diǎn)：

• 對(duì)于設(shè)計(jì)團(tuán)隊(duì)只有一兩個(gè)人的時(shí)候，是否需要建立設(shè)計(jì)系統(tǒng)？

• 你是否愿意把時(shí)間花費(fèi)在前期建立設(shè)計(jì)系統(tǒng)，后期更多時(shí)間用于創(chuàng)造性地東西？

• 建立設(shè)計(jì)系統(tǒng)前很枯燥，你會(huì)怎么堅(jiān)持，怎么讓設(shè)計(jì)體系價(jià)值更大化？

微信公眾號(hào)：會(huì)飛的喵喵