設(shè)計系統(tǒng)搭建全流程:認(rèn)識設(shè)計系統(tǒng)
設(shè)計系統(tǒng)這個詞,是近些年的一個熱門話題,在初期的討論關(guān)注點主要聚焦在是否有必要搭建?能否創(chuàng)造商業(yè)價值?畢竟這里面存在巨大的工作量,到現(xiàn)在被大多數(shù)公司和團(tuán)隊所接受,并且把一套完整的設(shè)計系統(tǒng)作為品牌宣傳的重點,或是直接把設(shè)計系統(tǒng)作為商業(yè)變現(xiàn)的一種手段??雌饋砗孟翊蠹叶家呀?jīng)接受了設(shè)計系統(tǒng)是必要的這一事實,但在實際工作中,筆者接觸到的很多設(shè)計系統(tǒng)還是存在著這樣或者那樣的問題:
有的是為了規(guī)范而規(guī)范,一味的追求大而全,一眼看起來,哇,好多好細(xì)??!但是在使用的時候就犯了難,兩個控件都可以,比如:Switch 和 tab button 都可以表示開關(guān),那么用哪個呢?或者兩個顏色樣式比較相近,用哪個都合適,這時就會發(fā)現(xiàn),使用者因為無法確定使用哪個組件,陷入到無限糾結(jié)中,盡管用了設(shè)計系統(tǒng),但是不僅沒有提高效率,反而隱隱有種越來越慢的趨勢?;蛘咭驗椴煌慕M件用起來大差不差,那就隨便用,反而造成了不統(tǒng)一的情況出現(xiàn)。
有的是設(shè)計系統(tǒng)不具有很好的拓展性,或者說當(dāng)初在搭建設(shè)計系統(tǒng)的時候沒有考慮全面,造成組件具有太多的限制而不能滿足一些業(yè)務(wù)的需求,組件不適用的情況出現(xiàn),或是設(shè)計師設(shè)計被設(shè)計系統(tǒng)所束縛的情況出現(xiàn)。那么設(shè)計師就會拋棄設(shè)計系統(tǒng),讓設(shè)計系統(tǒng)形同虛設(shè),無法發(fā)揮作用。
不管是上述哪種問題的出現(xiàn),都指向了一個事實:設(shè)計系統(tǒng)不好用。所以怎么搭建設(shè)計系統(tǒng),并且可以讓設(shè)計系統(tǒng)好用又易用,真正達(dá)到提高效率的目的。是需要把握一個"度"的。筆者想要通過這個設(shè)計系統(tǒng)搭建全流程的專題,和各位探討怎么搭建一個"好"的設(shè)計系統(tǒng)。
接下來我們開始進(jìn)入本專題第一篇的內(nèi)容:認(rèn)識設(shè)計系統(tǒng)。
一、設(shè)計系統(tǒng)提出的背景
當(dāng)今社會,社會發(fā)展越來越快,我們每天不停的在汲取著各種信息,這就要求提供給用戶的產(chǎn)品可以跟上用戶的腳步,能夠?qū)π枨罂焖夙憫?yīng),直達(dá)用戶。
對于公司來講,當(dāng)公司發(fā)展到一定的階段:
- 公司有不同的產(chǎn)品,且都需要長期的開發(fā)和迭代;
- 業(yè)務(wù)需求變動頻繁,需要設(shè)計和研發(fā)快速響應(yīng);
- 越來越多的設(shè)計師加入公司。
當(dāng)設(shè)計團(tuán)隊越來越大,大家分工越來越細(xì),想法越來越多,就會發(fā)現(xiàn),為了保證設(shè)計統(tǒng)一性,通過簡單的復(fù)制粘貼 guide 的方式,已經(jīng)無法滿足團(tuán)隊的發(fā)展了,經(jīng)常出現(xiàn)組件不能滿足使用的情況,或者是組件相似但不知道怎么選擇等問題。
并且因為沒有統(tǒng)一的流程,會發(fā)現(xiàn)不同的業(yè)務(wù)對于同一功能交互邏輯的不統(tǒng)一現(xiàn)象,比如:搜索是很多業(yè)務(wù)都會使用的功能,因為沒有統(tǒng)一定義,有的業(yè)務(wù)會采用即時搜索模式,有的業(yè)務(wù)必須點擊搜索以后才可以進(jìn)行搜索,并且這些問題,前期很難發(fā)現(xiàn),只有到了中后期走查的時候才會發(fā)現(xiàn)。只能在后期針對每一個差異點進(jìn)行統(tǒng)一,全流程重新梳理一遍,費時費力。
那么怎么做才可以避免這種情況的發(fā)生呢?答案就是構(gòu)建設(shè)計系統(tǒng)。
二、設(shè)計系統(tǒng)是什么
簡單來講,設(shè)計系統(tǒng)就是一套行為規(guī)范,它包含了:設(shè)計理念、邏輯、設(shè)計指南、組件、圖標(biāo)、動效、音效、代碼等多種內(nèi)容,對于一個團(tuán)隊來講,這更像是一個團(tuán)隊共享資源庫,包羅萬象,幫助公司各種產(chǎn)品的構(gòu)建提供基準(zhǔn)。
通過建立設(shè)計系統(tǒng),讓設(shè)計模塊化、規(guī)模化,繼而進(jìn)一步強(qiáng)化系統(tǒng)的統(tǒng)一性,同時為設(shè)計師在做設(shè)計時提供一個很好的指導(dǎo)方向,讓團(tuán)隊內(nèi)不同成員的設(shè)計在風(fēng)格上保持一致,提升設(shè)計團(tuán)隊的專業(yè)度。同時保證公司產(chǎn)品的統(tǒng)一性。通過產(chǎn)品讓用戶形成對公司的品牌印象,達(dá)到宣傳公司的目的。
三、設(shè)計系統(tǒng)理論依據(jù)
1. 原子設(shè)計理論
由于設(shè)計系統(tǒng)是一套規(guī)則統(tǒng)一,架構(gòu)嚴(yán)謹(jǐn)?shù)囊?guī)范,所以需要一個理論基礎(chǔ)作為搭建的依據(jù),而這就是我們今天要說的原子設(shè)計理論了,在網(wǎng)上有很多的關(guān)于原子設(shè)計理論的描述,在這里我就不再進(jìn)行贅述了:
這里我簡單概括一下原子設(shè)計理論就像化學(xué)元素組合一樣:原子構(gòu)成分子、分子構(gòu)成組織,組織構(gòu)成模版、模版構(gòu)成頁面。換句話說,該理論的重點就是通過最小的元素不停的進(jìn)行組合,構(gòu)成一些我們常用的組件、布局,滿足設(shè)計師或是開發(fā)快速搭建界面的需求。而不需要每次都從最小的元素進(jìn)行設(shè)計,最終的目的是為了提高設(shè)計的效率。
四、設(shè)計系統(tǒng)的價值
1. 設(shè)計規(guī)范化
由于公司的發(fā)展壯大,團(tuán)隊人員也會越來越多,那么每個設(shè)計師必然無法涉及到所有的業(yè)務(wù)線,設(shè)計師都專注于自己負(fù)責(zé)的業(yè)務(wù)模塊,比如,有人負(fù)責(zé)系統(tǒng)設(shè)置,有人負(fù)責(zé)賬號體系,有人負(fù)責(zé)商業(yè)化業(yè)務(wù)……這很容易導(dǎo)致不同的業(yè)務(wù)有不同的設(shè)計語言,盡管單個業(yè)務(wù)看起來沒有什么問題,但是對于一個系統(tǒng)來講,不同的業(yè)務(wù)之間差異巨大,就顯得很不專業(yè)了。
所以通過設(shè)計系統(tǒng)的搭建,一方面使用統(tǒng)一的設(shè)計語言對每個設(shè)計師進(jìn)行設(shè)計約束,通過使用統(tǒng)一的樣式和組件庫,讓每個人的設(shè)計變得統(tǒng)一,極大的提升了團(tuán)隊的專業(yè)性。
同時由于搭建了統(tǒng)一的樣式組件庫,設(shè)計師和開發(fā)可以快速調(diào)用需要的組件或是代碼,而不用進(jìn)行重復(fù)設(shè)計。對于設(shè)計變更來講,只需要進(jìn)行樣式組件庫的更新,團(tuán)隊設(shè)計師就可以及時的進(jìn)行同步更新,而不需要每個人都進(jìn)行設(shè)計變更,極大的提升了設(shè)計效率。
2. 保障設(shè)計統(tǒng)一性,提供好的用戶體驗
因為設(shè)計系統(tǒng)建立了樣式組件庫、圖標(biāo)庫等一系列規(guī)范,一致可復(fù)用的標(biāo)準(zhǔn)規(guī)范讓設(shè)計變得更加統(tǒng)一,也更加的容易理解,同時因為規(guī)范的建立,不會再出現(xiàn)同一個搜索,兩套不同的邏輯這種情況,增強(qiáng)了設(shè)計的可預(yù)測性,用戶不用為了不一致的交互邏輯而增加學(xué)習(xí)成本。也可以讓相關(guān)人員更加的專注于為用戶提供更好的用戶體驗。而非視覺樣式的調(diào)整。
3. 讓設(shè)計得以傳承
設(shè)計是需要延續(xù)的,對于一個團(tuán)隊來講,人員變動也是難免的,所以經(jīng)常會出現(xiàn)業(yè)務(wù)模塊交接等情況,那么有一套完善的設(shè)計系統(tǒng),可以讓新接手的同學(xué)快速的了解我們的設(shè)計理念,設(shè)計語言,幫助新同學(xué)盡快的融入到團(tuán)隊中。同時也可以減少因為某一個人的離開,而導(dǎo)致的整個團(tuán)隊工作的無法開展。
4. 提高設(shè)計開發(fā)效率,快速迭代
通過設(shè)計系統(tǒng)的搭建,同時有了設(shè)計資源庫和開發(fā)資源庫,因為組件的可復(fù)用性,而不需要設(shè)計人員從頭開始設(shè)計界面,開發(fā)人員也不需要從頭開始開發(fā)界面。設(shè)計系統(tǒng)的存在,極大的減少了相關(guān)人員的重復(fù)工作量。尤其在版本迭代或者是樣式迭代中,設(shè)計系統(tǒng)的好處更加的顯而易見。
五、關(guān)于設(shè)計系統(tǒng)的思考
盡管看起來設(shè)計系統(tǒng)有那么多的好處,但是很多團(tuán)隊在推進(jìn)時也遇到了不少的阻力。主要集中在以下這幾個方面:
1. 限制太大,讓設(shè)計師缺乏創(chuàng)造性
這個需要分為兩方面來講,一方面認(rèn)為設(shè)計系統(tǒng)讓設(shè)計師無法發(fā)揮創(chuàng)意,因為每個設(shè)計師,每個業(yè)務(wù)都期望去探索一些新的樣式和交互邏輯,那么開發(fā)那里就充斥著各種不同的代碼。如果使用了設(shè)計系統(tǒng),設(shè)計系統(tǒng)的組件相互關(guān)聯(lián),那么對于視覺樣式迭代或者是需求迭代,可以很容易的進(jìn)行同步,并且保證軟件穩(wěn)定發(fā)版。但是如果每個業(yè)務(wù)代碼都是不同的,那么這件事將會變的異常艱難,任何小的迭代都需要相關(guān)視覺和開發(fā)進(jìn)行修改,由于代碼邏輯的變更,很容易引起一些莫名的 bug,導(dǎo)致快速迭代變得不再可能。對于現(xiàn)在的商業(yè)環(huán)境來講,得不償失。請記?。涸O(shè)計的最終目的是為了解決問題,而不是藝術(shù)創(chuàng)作。所以設(shè)計系統(tǒng)可以快速的解決問題。
另一方面,對于某一些特定業(yè)務(wù)期望有一些特定的布局或者交互邏輯,我們可以進(jìn)行評估,形成新的設(shè)計資產(chǎn),通過反哺設(shè)計系統(tǒng),生成新的組件模版,或者是優(yōu)化當(dāng)前的組件,讓我們的設(shè)計系統(tǒng)變的越來越好用,越來越易用。不斷的增強(qiáng)設(shè)計系統(tǒng)能力,也有助于形成一套完整的素材庫。
2.設(shè)計系統(tǒng)由設(shè)計師獨立完成
設(shè)計系統(tǒng)不止包含了樣式組件,同時還有動效、音效、代碼等很多內(nèi)容,這是需要不同團(tuán)隊緊密協(xié)作的,比如:產(chǎn)品、交互、開發(fā)、動效設(shè)計師……越多的角色參與其中,那么搭建的設(shè)計系統(tǒng)就越完善,越好用。比如:button,設(shè)計師定義它的樣式和類型:分幾種,各是什么顏色;交互設(shè)計師定義button的交互邏輯:是點擊響應(yīng)還是按壓抬起響應(yīng);動效設(shè)計師定義button得按壓動效;聲效設(shè)計師定義是否需要聲音反饋等,然后開發(fā)根據(jù)形成的文檔進(jìn)行代碼化,那么實現(xiàn)出來的button就包括了完整的樣式、邏輯,動效、聲效。那么使用者直接調(diào)用就可以了,不需要添加任何邏輯,那么未來迭代只需要底層代碼進(jìn)行樣式的更新、動效風(fēng)格的更新、聲效的更新,業(yè)務(wù)開發(fā)不再需要進(jìn)行任何操作,可以極大的節(jié)省迭代時間。
3. 設(shè)計系統(tǒng)是一次性的
設(shè)計系統(tǒng)應(yīng)該是動態(tài)的,變化的,隨著搭建完成,就需要根據(jù)需求或者反饋不斷的進(jìn)行維護(hù),要知道設(shè)計系統(tǒng)的目的是為了讓提高效率,所以設(shè)計系統(tǒng)要不時的進(jìn)行更新,要多與各個業(yè)務(wù)、不同部門,不同角色進(jìn)行溝通,或者對市面上的其他產(chǎn)品進(jìn)行競品分析等,通過不斷的推陳出新,讓設(shè)計系統(tǒng)更好的服務(wù)于產(chǎn)品。同時也更加容易規(guī)?;推放苹?/p>
總結(jié)
設(shè)計系統(tǒng)并不僅僅只是為了品牌宣傳,給別人看,更重要的是為了服務(wù)于產(chǎn)品,提高效率。它更像是一個解決方案,為了解決公司存在的問題,所以要真正的讓設(shè)計系統(tǒng)起于高處,落于實處,才能真正的發(fā)揮出設(shè)計系統(tǒng)的價值。在接下來的章節(jié)中,我將詳細(xì)講解設(shè)計系統(tǒng)的設(shè)計流程。敬請期待。
現(xiàn)在常見的設(shè)計系統(tǒng)
下面的是國內(nèi)外一些優(yōu)秀團(tuán)隊發(fā)布的設(shè)計系統(tǒng),有感興趣的同學(xué)可以看看,會對你了解設(shè)計系統(tǒng)有一定的幫助的。
國外:
- Material Design
- Design - Apple Developer
- Microsoft Design
- Atlassian Design System
- Carbon Design System
- Building a Visual Language
- IBM Design Language
國內(nèi):
- TDesign
- Ant Design - 一套企業(yè)級 UI 設(shè)計語言和 React 組件庫
- Arco Design - 企業(yè)級產(chǎn)品的完整設(shè)計和開發(fā)解決方案
參考資料
- https://www.designbetter.co/design-systems-handbook/introducing-design-systems
作者: 菘藍(lán)C
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)