如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

通過本文，你將學(xué)習(xí)到 Uber ，Pinterest ，Shopify 和 Airbnb 等知名網(wǎng)站如何利用組件構(gòu)建統(tǒng)一的UI / UX 設(shè)計(jì)規(guī)范 。

Airbnb通過react-sketchapp將設(shè)計(jì)與開發(fā)之間的組件協(xié)作提升到了一個(gè)新的水平

在產(chǎn)品中創(chuàng)建和保持UI和UX的一致性，可以帶給用戶直觀的導(dǎo)航體驗(yàn)，并引導(dǎo)他們成功地與應(yīng)用的不同部分進(jìn)行交互，而不會(huì)產(chǎn)生混淆。

在產(chǎn)品的各個(gè)部分和應(yīng)用之間保持用戶界面的一致性，可以創(chuàng)造更有價(jià)值的東西——品牌。將用戶體驗(yàn)和用戶界面品牌化的關(guān)鍵是讓用戶在與新產(chǎn)品互動(dòng)時(shí)也能感到“賓至如歸”，從而提高他們對(duì)新產(chǎn)品的的忠誠(chéng)度和滿意度。

那么，如何才能構(gòu)建有效的UI組件設(shè)計(jì)規(guī)范呢？以下有幾個(gè)方面需要引起注意。

1、保持視覺和功能一致性

功能一致性使你的產(chǎn)品更具可預(yù)測(cè)性。用戶能夠預(yù)測(cè)元素的行為方式，這樣即使在第一次訪問的頁(yè)面/屏幕上與之交互，他們也能感覺到安全和舒適。

視覺一致性包括UI的顏色，字體，大小，位置和其他視覺方面，它能幫助用戶識(shí)別UI元素并歸類。例如，某種字體顏色可以策略性地用于幫助用戶明白他們按下特定按鈕時(shí)會(huì)得到什么。

鑒于目前的行業(yè)情況， UI組件還可以作為用戶體驗(yàn)組件 ，將功能和視覺一致性結(jié)合起來。

基于組件的設(shè)計(jì)規(guī)范可以使應(yīng)用程序具有視覺和功能上的一致性，這有助于用戶感到賓至如歸，并能夠輕松地得到指導(dǎo)以完成與產(chǎn)品的所需交互。

2、為什么需要組件設(shè)計(jì)規(guī)范？

組件是用于UI設(shè)計(jì)和開發(fā)的一種很好的辦法，使用較少的可重用的組件，更好地實(shí)現(xiàn)一致性。

Uber ， Pinterest ， Airbnb ， Walmart ，Atlasssian等公司都通過基于組件的設(shè)計(jì)規(guī)范實(shí)現(xiàn)UI的一致性。

Airbnb的設(shè)計(jì)工作室在構(gòu)建他們的設(shè)計(jì)規(guī)范時(shí)堅(jiān)持了這種理念：“ 我們的設(shè)計(jì)應(yīng)該是統(tǒng)一的平臺(tái)，通過定義明確和可重用的組件來提率”。

以下是使用組件設(shè)計(jì)規(guī)范的一些優(yōu)勢(shì)：

1. 它的可重用性促進(jìn)了UI和UX的一致，因?yàn)榻M件可以在任何被使用的地方創(chuàng)建一致的體驗(yàn)。

2. 因?yàn)檩^大的組件由較小的組件組成，因此可以利用原子設(shè)計(jì)概念實(shí)現(xiàn)更好的一致性，從而減少意外的和分離的體驗(yàn)。

3. 組件在設(shè)計(jì)和開發(fā)之間提供更好的協(xié)作，允許設(shè)計(jì)語(yǔ)言隨著時(shí)間變化而發(fā)展。在理想情況下，你在Sketch上看到的是使用React構(gòu)建的內(nèi)容。

4. 從設(shè)計(jì)方面來看，如字體，排版，主色調(diào)和副色調(diào)仍然可以指定為組件設(shè)計(jì)規(guī)范的一部分。

3、建立一致的設(shè)計(jì)系統(tǒng)

目前來看，設(shè)計(jì)規(guī)范確實(shí)有很多優(yōu)勢(shì)。但是，如何才能真正地創(chuàng)建基于組件的設(shè)計(jì)規(guī)范，使設(shè)計(jì)人員和開發(fā)人員可以利用該規(guī)范進(jìn)行協(xié)作？

在創(chuàng)建基于組件的設(shè)計(jì)規(guī)范前，你必須了解它是什么。UI設(shè)計(jì)規(guī)范不僅僅是一個(gè)組件庫(kù)，也不僅僅只是組件的顏色，它包括很多方面。對(duì)于構(gòu)成整個(gè)產(chǎn)品體驗(yàn)的基本部分而言，它是一個(gè)不斷增長(zhǎng)且不斷演變的真實(shí)來源。

因此，在制作第一個(gè)組件設(shè)計(jì)規(guī)范之前，你必須設(shè)置樣式指南和設(shè)計(jì)語(yǔ)言來控制這些組件。

然后，將這些組件的設(shè)計(jì)原理轉(zhuǎn)化為代碼來實(shí)現(xiàn)，一步步從較小的原子再到較大的組成部分。

最理想做法的是將所有組件都應(yīng)該放在一個(gè)設(shè)計(jì)人員和開發(fā)人員都可以訪問的位置。通過這種方式，設(shè)計(jì)人員可以監(jiān)控隨著時(shí)間的推移而發(fā)展的設(shè)計(jì)語(yǔ)言，而開發(fā)人員也可以選擇并使用正確的組件。

4、共享組件庫(kù)

Shopify使用Polaris設(shè)計(jì)系統(tǒng)，該設(shè)計(jì)系統(tǒng)包含一個(gè)內(nèi)部反應(yīng)組件庫(kù)，旨在為使用Shopify的商家創(chuàng)建更一致的體驗(yàn)。Airbnb使用共享組件庫(kù)為其生產(chǎn)率帶來了巨大飛躍。

Pinterest使用格式塔（Gestalt），一個(gè)React UI組件庫(kù)。它“強(qiáng)化了Pinterest的設(shè)計(jì)語(yǔ)言。通過執(zhí)行一系列基本的UI組件來簡(jiǎn)化設(shè)計(jì)人員和開發(fā)人員之間的溝通......“

通過以上的實(shí)例不難看出，共享組件庫(kù)是實(shí)現(xiàn)UI一致性的有效的工具。 在我看來，這種一致性不應(yīng)該被強(qiáng)制執(zhí)行，而是自然地實(shí)現(xiàn)。

組件庫(kù)基本上是一種在團(tuán)隊(duì)構(gòu)建應(yīng)用程序時(shí)執(zhí)行一系列UI組件的方法。但是，開發(fā)人員不僅局限于庫(kù)的視覺語(yǔ)言，還局限于庫(kù)的持續(xù)開發(fā)。

當(dāng)特定應(yīng)用程序的特定部分需要某個(gè)組件時(shí)，它可能需要一些調(diào)整和修改。設(shè)計(jì)師和開發(fā)人員應(yīng)該在靈活性和一致性之間找到適當(dāng)?shù)钠胶恻c(diǎn)。

共享庫(kù)經(jīng)常會(huì)打破這種平衡并減慢開發(fā)速度，這反過來又會(huì)影響開發(fā)團(tuán)隊(duì)對(duì)庫(kù)本身的采用。在任何需要單個(gè)組件的地方強(qiáng)制使用一個(gè)龐大的庫(kù)也是沒有意義的（關(guān)于這個(gè)問題我們不要陷入爭(zhēng)論不休的辯論了）。

要想實(shí)現(xiàn)設(shè)計(jì)人員與開發(fā)人員之間的協(xié)作，還必須為組件維護(hù)一個(gè)實(shí)時(shí)文檔站點(diǎn)，并以某種方式使其可供設(shè)計(jì)人員和開發(fā)人員編輯（Airbnb的react-sketchapp和Figma等工具可以提供幫助）。

這里有23個(gè)常用的React UI庫(kù)，點(diǎn)擊即可使用。如果你實(shí)現(xiàn)了自己的庫(kù)，請(qǐng)記住為開發(fā)人員留下足夠的設(shè)計(jì)空間，從而保持兩者之間的平衡。

5、Bit -作為構(gòu)建塊的組件

Bit是構(gòu)建組件庫(kù)的新趨勢(shì)。

通過使用Bit，你可以組織來自云上不同項(xiàng)目的組件，而無(wú)需重構(gòu)這些項(xiàng)目或現(xiàn)有庫(kù)。

每個(gè)組件都可以正在進(jìn)行的任何項(xiàng)目中發(fā)現(xiàn)，使用或開發(fā)，同時(shí)可以輕松地跨代碼庫(kù)進(jìn)行同步更改。

每個(gè)組件都會(huì)顯示一個(gè)實(shí)時(shí)UI操作系統(tǒng) ，自動(dòng)解析文檔，測(cè)試結(jié)果（Bit運(yùn)行組件單元測(cè)試等），以便所有組件都可以被設(shè)計(jì)和開發(fā)團(tuán)隊(duì)發(fā)現(xiàn)。

Bit的工作流可讓你在UI一致性和設(shè)計(jì)規(guī)則之間找到一個(gè)更快，更動(dòng)態(tài)的工作流。它也是開源的，所以可以隨意查看。

6、平衡一致性和靈活性

丘吉爾曾經(jīng)說過“改善就是改變，完美就是經(jīng)常改變”。如果我們過于嚴(yán)格地執(zhí)行一致性，這將會(huì)影響創(chuàng)新。

在我們建立新事物的過程中，我們必須對(duì)規(guī)則進(jìn)行適當(dāng)?shù)恼{(diào)整，預(yù)留出一些空間給變量，但不能因?yàn)檎{(diào)整讓事物陷入混亂。

或許這個(gè)說法聽起來沒有什么特別之處，但正確的理念，方法和工具可以幫助你實(shí)現(xiàn)UI一致性和創(chuàng)新之間的平衡。以下是一些保持平衡有效的建議。

從設(shè)計(jì)的角度來看，并非每種風(fēng)格都應(yīng)該重新定義和預(yù)先定義。

例如，某個(gè)組件（導(dǎo)航欄，項(xiàng)目等）可能與應(yīng)用程序的其余部分相比具有相對(duì)大小或邊距。在不同的情況下，這些變量可能會(huì)發(fā)生變化，因此可以預(yù)留一些空間出來。

優(yōu)步和其他團(tuán)隊(duì)使用的另一種有用的方法是將基本/全局/基礎(chǔ)組件與“輔助”組件分開 。

例如， Uber使用具有超過22種不同顏色和22種值的主要和次要組件，總共484種獨(dú)特色調(diào)。 創(chuàng)建了70多種獨(dú)特模式 - 每個(gè)有Uber服務(wù)的國(guó)家都有一種獨(dú)特模式。

設(shè)計(jì)人員與開發(fā)人員的協(xié)作是找到這種平衡的關(guān)鍵。一些團(tuán)隊(duì)（如沃爾瑪實(shí)驗(yàn)室 ）致力于提高UI組件本身的可重用性，從而縮小與開發(fā)人員端的差距。

正確的工具和工作流程對(duì)UI也有很大的幫助，像Bit和Storybook這樣的工具就可以幫助促進(jìn)這種平衡。

在別無(wú)選擇的情況下，打破一致性、模式 、視覺和文字是一種很好的方式，可以給用戶一種熟悉的感覺并減少混亂。 一致的模式 ，可識(shí)別的視覺效果和一致的語(yǔ)氣可以使用戶感覺安全，直觀地與你的產(chǎn)品互動(dòng)。

總結(jié)

l 保持UI和UX的一致性可以引導(dǎo)用戶成功與您的產(chǎn)品進(jìn)行交互。

l 設(shè)計(jì)系統(tǒng)是UI / UX不斷發(fā)展的主體。基于組件的設(shè)計(jì)系統(tǒng)具有視覺和功能一致性。

l Uber，Airbnb，Pinterest，Netflix和其他優(yōu)秀團(tuán)隊(duì)使用基于組件的設(shè)計(jì)系統(tǒng)來創(chuàng)建和發(fā)展他們的視覺語(yǔ)言。

l 要構(gòu)建組件設(shè)計(jì)系統(tǒng)，您可以創(chuàng)建庫(kù)，使用Bit并利用不同的工具和方法來逐步擴(kuò)展它。

l 通過為變量留出空間，使用有用的工具和鼓勵(lì)協(xié)作文化來平衡一致性和靈活性是很重要的。

l 切記：平衡和協(xié)作就是一切。這不是一項(xiàng)單一的工作，而是設(shè)計(jì)師和開發(fā)人員共同進(jìn)行的持續(xù)旅程。