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

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

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

設(shè)計(jì)系統(tǒng)用一套連貫組織、相互關(guān)聯(lián)的模式和共享實(shí)踐以達(dá)到數(shù)字產(chǎn)品的目的。簡(jiǎn)單的說(shuō)就是一系列可重用的組件和它們的使用指導(dǎo)文檔，在制作這些組件的過(guò)程中會(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ì)問(wèn)題，我們經(jīng)常會(huì)說(shuō)解決整個(gè)方案我們要運(yùn)用什么樣的設(shè)計(jì)模式。

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

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

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

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

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

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

設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師來(lái)說(shuō)并不陌生，日常工作中也經(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)品、開(kāi)發(fā)、運(yùn)營(yíng)、測(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)一性指日可待，沒(méi)想到這個(gè)規(guī)范就成了我自己的規(guī)范，僅僅是我在自嗨。

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

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

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

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

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

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

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

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

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

8-減少設(shè)計(jì)出錯(cuò)率

……

整體可以歸納為

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

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

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

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

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

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

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

for Designer:

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

for Developer:

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

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

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

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

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

減少、優(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)沒(méi)有應(yīng)用起來(lái)的情況呢？

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

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

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

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

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

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

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

設(shè)計(jì)規(guī)范是需要迭代的，而不是我只要制作出來(lái)就放那了，就像女生買衣服，去年的衣服已經(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ì)師覺(jué)得統(tǒng)一了規(guī)范，那我的創(chuàng)造性從哪發(fā)揮，界面都長(zhǎng)的差不多。在設(shè)計(jì)中，設(shè)計(jì)目的是解決商業(yè)或用戶的問(wèn)題，并不僅僅是為了有創(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ò)誤的，是需要來(lái)自不同角色支持和參與的，這里包括前端、品牌、動(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)部使用的開(kāi)發(fā)以及同事，一種是對(duì)用戶的，應(yīng)該定期收集用戶以及同事的反饋，確保及時(shí)更新迭代。

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

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

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

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

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

3-設(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ī)范的目的/意義，那該怎么去著手呢？

• 對(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)來(lái)了，規(guī)范也就能更好的運(yùn)營(yíng)，當(dāng)時(shí)我就是一個(gè)人定了規(guī)范，只是單純把規(guī)范發(fā)給其他設(shè)計(jì)人員，他們沒(méi)有參與，自然不會(huì)使用規(guī)范，對(duì)里面的設(shè)計(jì)元素沒(méi)有加深理解。

主導(dǎo)人

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

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

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

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

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

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

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

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

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

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

建立規(guī)范

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

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

·具體過(guò)程

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

·元素是工具庫(kù)的必要部分

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

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

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

協(xié)作

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

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

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

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

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

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

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

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

思考點(diǎn)：

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

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

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

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