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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 它的可重用性促進了UI和UX的一致，因為組件可以在任何被使用的地方創(chuàng)建一致的體驗。
• 因為較大的組件由較小的組件組成，因此可以利用原子設(shè)計概念實現(xiàn)更好的一致性，從而減少意外的和分離的體驗。
• 組件在設(shè)計和開發(fā)之間提供更好的協(xié)作，允許設(shè)計語言隨著時間變化而發(fā)展。在理想情況下，你在Sketch上看到的是使用React構(gòu)建的內(nèi)容。
• 從設(shè)計方面來看，如字體，排版，主色調(diào)和副色調(diào)仍然可以指定為組件設(shè)計規(guī)范的一部分。

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

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

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

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

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

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

四、共享組件庫

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

Pinterest使用格式塔（Gestalt），一個React UI組件庫。它“強化了Pinterest的設(shè)計語言。通過執(zhí)行一系列基本的UI組件來簡化設(shè)計人員和開發(fā)人員之間的溝通……”

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

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

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

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

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

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

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

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

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

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

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

六、平衡一致性和靈活性

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

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

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

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

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

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

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

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

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

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

總結(jié)

• 保持UI和UX的一致性可以引導(dǎo)用戶成功與您的產(chǎn)品進行交互。
• 設(shè)計系統(tǒng)是UI / UX不斷發(fā)展的主體?；诮M件的設(shè)計系統(tǒng)具有視覺和功能一致性。
• Uber，Airbnb，Pinterest，Netflix和其他優(yōu)秀團隊使用基于組件的設(shè)計系統(tǒng)來創(chuàng)建和發(fā)展他們的視覺語言。
• 要構(gòu)建組件設(shè)計系統(tǒng)，您可以創(chuàng)建庫，使用Bit并利用不同的工具和方法來逐步擴展它。
• 通過為變量留出空間，使用有用的工具和鼓勵協(xié)作文化來平衡一致性和靈活性是很重要的。
• 切記：平衡和協(xié)作就是一切。這不是一項單一的工作，而是設(shè)計師和開發(fā)人員共同進行的持續(xù)旅程。

作者：Jonathan Saring

https://blog.bitsrc.io/building-a-consistent-ui-design-system-4481fb37470f

譯者：Tzw_n，公眾號「小阿田的設(shè)計筆記」

本文由 @Tzw_n 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議