2020-12-9 資深UI設計者
你覺得設計系統(tǒng)重要嗎？你了解設計系統(tǒng)嗎？讓我們一起來深度解析下設計系統(tǒng)，預計閱讀時間為15分鐘
你覺得設計系統(tǒng)重要嗎？那目前手里的設計系統(tǒng)是在靈活運用？還是落灰、擺設？你對設計系統(tǒng)理解有多深？它在你的設計中有多大的用處？節(jié)省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規(guī)范？那怎么避免設計系統(tǒng)帶來了統(tǒng)一和便利，但同時失去了變化和新鮮感？
設計系統(tǒng)是今年來熱門的話題之一，想要帶來良好的用戶體驗，設計系統(tǒng)就是其中重要的一環(huán)，那它和設計規(guī)范、設計模式、設計語言、設計原則有什么關系？
設計系統(tǒng)用一套連貫組織、相互關聯(lián)的模式和共享實踐以達到數(shù)字產(chǎn)品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔，在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色，文案，字體等等)，所以它們也通常包括在設計系統(tǒng)里。設計系統(tǒng)為公司的各種產(chǎn)品提供了基石和指導。是一種動態(tài)的，是需要維護與改進的。
設計模式是一種經(jīng)常性，可重復使用的解決方案，可用于解決設計問題，我們經(jīng)常會說解決整個方案我們要運用什么樣的設計模式。
設計語言是把設計作為一種“溝通的方式”，用于在特定的場景中進行內(nèi)容與信息的傳遞。設計語言可以理解為由品牌基因+設計規(guī)范+多場景應用三大要素組成的一套設計應用規(guī)范系統(tǒng)。
設計原則可以理解為設計語言中的語法，是構建設計語言系統(tǒng)的起點，用于傳達品牌主張或設計理念，它將指引業(yè)務設計執(zhí)行的方向。
比如Airbnb的設計原則可以簡單歸納為幾點：
設計規(guī)范對于設計師來說并不陌生，日常工作中也經(jīng)常使用。圍繞在某種風格或者大型設計項目下形成可視化、數(shù)據(jù)化的標準，針對相對獨立的體系建立的統(tǒng)一遵守條款。統(tǒng)一的設計規(guī)范不僅有利于設計師提升效率，同樣可以幫助產(chǎn)品、開發(fā)、運營、測試等相關人員對產(chǎn)品的體驗有更好的認知。
我曾經(jīng)加入一個設計團隊，看到平臺風格不統(tǒng)一，當時很自豪很堅定的制定了一套平臺設計規(guī)范，從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系，還有交互方面。當時一心想著有這個規(guī)范寶典在手，平臺統(tǒng)一性指日可待，沒想到這個規(guī)范就成了我自己的規(guī)范，僅僅是我在自嗨。
為什么已經(jīng)建立設計規(guī)范了，還是沒能解決平臺統(tǒng)一的問題？這里延伸出另一個問題，為什么其他設計成員不用？協(xié)作不起來？是它不夠好？我嚴格按照標準來，為什么推不起來？
那要追溯到設計體系的目的是什么？它的意義何在？
1-建立統(tǒng)一的設計文化體系
2-保證多團隊成員共同參與的項目視覺一致性
3-提升品牌調(diào)性
4-節(jié)省與研發(fā)人員的溝通成本
5-將元素組件化，提升設計師和程序員的工作效率
6-可以幫助設計人員有針對性地對視覺元素進行優(yōu)化和迭代。
7-在用戶層方面，對某產(chǎn)品的體驗一致性得到落實
8-減少設計出錯率
……
整體可以歸納為
規(guī)范定義的基礎是圍繞某種風格或者設計文化。對內(nèi)統(tǒng)一，一個品牌的設計風格，是要有別于同類競品的，比如阿里云、騰訊云，他們各自都有自己的品牌調(diào)性。在對外上兩個品牌是做到了對外區(qū)分，一眼可以識別出來。他們有各自規(guī)定的一套設計語言、設計規(guī)范。這樣才能在協(xié)作上達到對內(nèi)統(tǒng)一。我們都不希望在阿里云的網(wǎng)站，各個頁面的設計差異明顯，像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。
多個設計成員協(xié)同一個產(chǎn)品，迭代與更改規(guī)范都能更快的同步?？梢栽囍胂笠幌乱粋€幾十人的設計團隊，如果沒有統(tǒng)一設計規(guī)范，那網(wǎng)站會變成什么樣子。
在UI還原中，設計需要經(jīng)常與前端進行溝通“這里這里這樣做，那里那里這樣做”，對于每一塊的設計，前端都會詢問你，這樣大大增加了溝通的成本，把時間花在了無效的事情上。
設計規(guī)范統(tǒng)一后，減少了無效溝通，可以更專注創(chuàng)新方向，比如：要改變預先設定的一個輔助色，無論是設計還是開發(fā)，修改組件的顏色，全局使用到這個組件的地方都會改動，大大節(jié)省了設計時間。
做品牌的時候需要制定一整套VI規(guī)范手冊，那平臺同樣也需要統(tǒng)一的品牌感。建立統(tǒng)一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統(tǒng)一的元素、視覺風格、交互方式，更加突出該品牌應有的調(diào)性。無論你在聽網(wǎng)易云音樂還是QQ音樂，看到界面都可以立馬識別出這是哪個app。
你能分出哪個是網(wǎng)易云播放界面，哪個是QQ音樂播放界面嗎？
設計經(jīng)常碰到設計完后需要修改一個點，然后就要找出設計稿中所有相同的地方進行修改，這樣很容易漏，統(tǒng)一規(guī)范后只需要修改組件即可。盡可能的避免錯誤的出現(xiàn)。
設計規(guī)范的意義這么強大，對網(wǎng)站及品牌有至關重要的作用，那為什么還會出現(xiàn)沒有應用起來的情況呢？
很多設計師會說：“設計不就應該是變化多端的嗎？就是要表現(xiàn)創(chuàng)新力呀？制定了設計規(guī)范是不是就失去了變化和新鮮感？那設計還有什么意義？開發(fā)都可以做設計的事情了?！?
這里就要看對設計規(guī)范理解的深度—設計規(guī)范是分層次的，平臺規(guī)范歸根結底是為了確保產(chǎn)品的易用性，是為了減少用戶的學習成本
底層基礎元素也可以說是全局樣式，比如色彩規(guī)定、文字大小、icon線/面、botton體系等一些基礎的元素，給用戶一種統(tǒng)一的視覺形象，在跨界面、跨端、跨系統(tǒng)間有熟悉感，從而潛移默化地進行品牌的滲透。
對組合自由度較低的基礎組件做精簡的樣式變化限定，對組合自由度較高的復合組件減少過于局限的限定條件，考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態(tài)，多種可能。
設計規(guī)范是需要迭代的，而不是我只要制作出來就放那了，就像女生買衣服，去年的衣服已經(jīng)配不上今年的我，嘻嘻
~~希望我每天都有新衣服穿，做夢中～
設計體系最大的重要性毋庸置疑就是規(guī)范節(jié)省人力，設計師可以更多的時間去發(fā)揮創(chuàng)造性。
很多設計師覺得統(tǒng)一了規(guī)范，那我的創(chuàng)造性從哪發(fā)揮，界面都長的差不多。在設計中，設計目的是解決商業(yè)或用戶的問題，并不僅僅是為了有創(chuàng)意而引入新的樣式或交互方式。
有了設計體系，統(tǒng)一了整體品牌風格，不用把精力花費在比如調(diào)整間距、對齊元素等瑣碎的事情上，更多的回去關注更全局的設計策略。
它僅僅是設計軟件上可復用的組件，所以可由設計師獨立完成，這種想法是錯誤的，是需要來自不同角色支持和參與的，這里包括前端、品牌、動態(tài)設計、 用戶研究等。
有時候會想只要完成了規(guī)范就大功告成了，其實不然，對待設計規(guī)范就像對待產(chǎn)品一樣，是需要維護和改進的，包括兩個方面：一種是對內(nèi)部使用的開發(fā)以及同事，一種是對用戶的，應該定期收集用戶以及同事的反饋，確保及時更新迭代。
1-提高設計開發(fā)效率，最顯而易見的好處就是，組件庫的可復用性。
比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。
2-確保設計一致性，為用戶提供連貫一致的用戶體驗，設計的一致性讓用戶能縮短的學習使用產(chǎn)品的周期，讓他們能夠預見他們的操作所帶來的改變。
網(wǎng)站統(tǒng)一的視覺規(guī)范、交互體驗，會讓用戶產(chǎn)生一種掌控感。
3-設計系統(tǒng)促進了公司內(nèi)部的合作和交流，一個成功的設計系統(tǒng)是需要跨功能團隊參與，設計系統(tǒng)因此促進了公司內(nèi)部不同職位的合作和交流，這種文化的建立也會幫助公司更有效地推出新的產(chǎn)品或服務。
已經(jīng)了解了規(guī)范的目的/意義，那該怎么去著手呢？
在制定規(guī)范前期，不應該是一個人規(guī)定這個規(guī)范，設計團隊的成員應積極參與，前期先把規(guī)范的基調(diào)定好，人人都參與進來了，規(guī)范也就能更好的運營，當時我就是一個人定了規(guī)范，只是單純把規(guī)范發(fā)給其他設計人員，他們沒有參與，自然不會使用規(guī)范，對里面的設計元素沒有加深理解。
這個主導人建議讓全隊專業(yè)能力最強的人輔助產(chǎn)品戰(zhàn)略分析進行。有全局把控能力，這樣能把紕漏降到。
大家一般說的設計規(guī)范是界面的視覺規(guī)范，從UI的定義，User Interface—用戶界面，用戶與界面之間的交互關系，可以歸納規(guī)范其實可以包含兩大類，一類是視覺規(guī)范，一類是交互規(guī)范。
視覺規(guī)范可以給用戶傳達統(tǒng)一的品牌形象，確保視覺一致性。后期的設計元素須復合規(guī)范的原則。
交互規(guī)范可以減少用戶的學習成本，讓用戶有歸屬感。交互規(guī)范在制定的過程中，需要寫好交互規(guī)則與條件，不然后期維護會混亂。像蓋房子一樣，地基都沒打穩(wěn)的話，整個樓都是偏的。
那在使用規(guī)范時，一定要遵循規(guī)范里的要求進行應用，否則會亂套，不僅起不到統(tǒng)一的品牌風格，反倒會給人一種一團糟、完全不專業(yè)的感覺。體驗好是一個產(chǎn)品的競爭力。
節(jié)點和公司的進度搭邊，看當前的產(chǎn)品是應該先獨立風格還是先統(tǒng)一基礎規(guī)范。
1-固定的設計風格規(guī)范，比如：google的“扁平”，微軟的“磁貼”，可以全局使用，并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區(qū)分。后期再進行拓展。這種比較適規(guī)模比較大的團隊，定好基調(diào)，不會走偏。
2-不斷優(yōu)化的設計規(guī)范，根據(jù)公司的節(jié)奏，有些產(chǎn)品目前比較迫切的是需要界面統(tǒng)一性、交互統(tǒng)一性。基礎做完以后，進而考慮產(chǎn)品固定風格。這種比較適合小團隊協(xié)作?？梢噪S時調(diào)整。
利用粒子構成的原理與三維解構，一個組件被科學的三維解析后由粒子再構成，理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變，高度靈活
建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。
并不是每個時刻都能夠直接使用完整的組件，元素是我們工具庫必不可少的部分，它可以更大的方便你修改組件，再造組件以及特殊的排版，方便拖拉拽。
規(guī)范組件命名，方便查找、方便協(xié)作。
一鍵導出/同步組件到Sketch模板。
標注方面，目前我們團隊使用的是藍湖私有化。
一般情況下，公司有不同的產(chǎn)品線，且都需要長期的開發(fā)與迭代。
公司中，越來越多的設計師加入，設計風格需要統(tǒng)一。
設計體系里面包含了設計語言、設計規(guī)范，需要與前端、品牌、動態(tài)設計、 用戶研究等溝通，還是需要迭代優(yōu)化的，這是非常繁瑣耗時的項目，初期會非常的艱難，當設計師開始做組件時，也是非常耗時的工作，需要考慮不同場景下的使用情況以及設計的延展性，都需要投入大量的設計人力。
藍藍設計( m.sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務