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

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

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

設(shè)計模式

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

設(shè)計語言

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

設(shè)計原則

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

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

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

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

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

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

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

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

1-建立統(tǒng)一的設(shè)計文化體系

2-保證多團(tuán)隊成員共同參與的項目視覺一致性

3-提升品牌調(diào)性

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

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

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

7-在用戶層方面，對某產(chǎn)品的體驗一致性得到落實

8-減少設(shè)計出錯率

……

整體可以歸納為

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

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

3-建立設(shè)計文化體系，建立品牌感

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

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

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

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

for Designer:

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

for Developer:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

~~希望我每天都有新衣服穿，做夢中～

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

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

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

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

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

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

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

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

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

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

1-提高設(shè)計開發(fā)效率，最顯而易見的好處就是，組件庫的可復(fù)用性。

比如像表格、彈窗、顏色等。一些基礎(chǔ)的組件只需要做一次。

2-確保設(shè)計一致性，為用戶提供連貫一致的用戶體驗，設(shè)計的一致性讓用戶能縮短的學(xué)習(xí)使用產(chǎn)品的周期，讓他們能夠預(yù)見他們的操作所帶來的改變。

網(wǎng)站統(tǒng)一的視覺規(guī)范、交互體驗，會讓用戶產(chǎn)生一種掌控感。

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

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

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

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

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

主導(dǎo)人

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

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

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

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

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

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

設(shè)計規(guī)范的節(jié)點

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

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

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

建立規(guī)范

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

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

·具體過程

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

·元素是工具庫的必要部分

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

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

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

協(xié)作

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

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

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

一般情況下，公司有不同的產(chǎn)品線，且都需要長期的開發(fā)與迭代。

公司中，越來越多的設(shè)計師加入，設(shè)計風(fēng)格需要統(tǒng)一。

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

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

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

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)