通過本文，你將學習到 Uber ，
Pinterest ，Shopify 和 Airbnb 等知名網站如何利用組件構建統一的UI / UX 設計規範 。
Airbnb通過react-sketchapp將設計與開發之間的組件協作提升到了一個新的水平。
在產品中創建和保持UI和UX的一致性，可以帶給用戶直觀的導航體驗，並引導他們成功地與應用程序的不同部分進行交互，而不會產生混淆。
在產品的各個部分和應用之間保持用戶界面的一致性，可以創造更有價值的東西— 品牌。將用戶體驗和用戶界面品牌化的關鍵是讓用戶在與新產品互動時也能感到“賓至如歸”，從而提高他們對新產品的的忠誠度和滿意度。
那麼，如何才能構建有效的UI組件設計規範呢？以下有幾個方面需要引起注意。
保持視覺和功能一致性
功能一致性使你的產品更具可預測性。用戶能夠預測元素的行為方式，這樣即使在第一次訪問的頁面/屏幕上與之交互，他們也能感覺到安全和舒適。
視覺一致性包括UI的顏色，字體，大小，位置和其他視覺方面，它能幫助用戶識別UI元素並歸類。例如，某種字體顏色可以策略性地用於幫助用戶明白他們按下特定按鈕時會得到什麼。
鑑於目前的行業情況， UI組件還可以作為用戶體驗組件 ，將功能和視覺一致性結合起來。
基於組件的設計規範可以使應用程序具有視覺和功能上的一致性，這有助於用戶感到賓至如歸，並能夠輕鬆地得到指導以完成與產品的所需交互。
為什麼需要組件設計規範？
組件是用於UI設計和開發的一種很好的辦法，使用較少的可重用的組件，更好地實現一致性。
Uber ， Pinterest ， Airbnb ， Walmart ，Atlasssian等公司都通過基於組件的設計規範實現UI的一致性。
Airbnb的設計工作室在構建他們的設計規範時堅持了這種理念：“ 我們的設計應該是統一的平臺，通過定義明確和可重用的組件來提高效率”。
以下是使用組件設計規範的一些關鍵優勢。
1. 它的可重用性促進了UI和UX的一致，因為組件可以在任何被使用的地方創建一致的體驗。
2. 因為較大的組件由較小的組件組成，因此可以利用原子設計概念實現更好的一致性，從而減少意外的和分離的體驗。
3. 組件在設計和開發之間提供更好的協作，允許設計語言隨著時間變化而發展。在理想情況下，你在Sketch上看到的是使用React構建的內容。
4. 從設計方面來看，如字體，排版，主色調和副色調仍然可以指定為組件設計規範的一部分。
建立一致的設計系統
目前來看，設計規範確實有很多優勢。但是，如何才能真正地創建基於組件的設計規範，使設計人員和開發人員可以利用該規範進行協作？
在創建基於組件的設計規範前，你必須瞭解它是什麼。UI設計規範不僅僅是一個組件庫，也不僅僅只是組件的顏色，它包括很多方面。對於構成整個產品體驗的基本部分而言，它是一個不斷增長且不斷演變的真實來源。
因此，在製作第一個組件設計規範之前，你必須設置樣式指南和設計語言來控制這些組件。
然後，將這些組件的設計原理轉化為代碼來實現，一步步從較小的原子再到較大的組成部分。
最理想做法的是將所有組件都應該放在一個設計人員和開發人員都可以訪問的位置。通過這種方式，設計人員可以監控隨著時間的推移而發展的設計語言，而開發人員也可以選擇並使用正確的組件。
共享組件庫
Shopify使用Polaris設計系統，該設計系統包含一個內部反應組件庫，旨在為使用Shopify的商家創建更一致的體驗。Airbnb使用共享組件庫為其生產率帶來了巨大飛躍。
Pinterest使用格式塔（Gestalt），一個React UI組件庫。它“強化了Pinterest的設計語言。通過執行一系列基本的UI組件來簡化設計人員和開發人員之間的溝通......“
通過以上的實例不難看出，共享組件庫是實現UI一致性的有效的工具。 在我看來，這種一致性不應該被強制執行，而是自然地實現。
組件庫基本上是一種在團隊構建應用程序時執行一系列UI組件的方法。但是，開發人員不僅侷限於庫的視覺語言，還侷限於庫的持續開發。
當特定應用程序的特定部分需要某個組件時，它可能需要一些調整和修改。設計師和開發人員應該在靈活性和一致性之間找到適當的平衡點。
共享庫經常會打破這種平衡並減慢開發速度，這反過來又會影響開發團隊對庫本身的採用。在任何需要單個組件的地方強制使用一個龐大的庫也是沒有意義的（關於這個問題我們不要陷入爭論不休的辯論了）。
要想實現設計人員與開發人員之間的協作，還必須為組件維護一個實時文檔站點，並以某種方式使其可供設計人員和開發人員編輯（Airbnb的react-sketchapp和Figma等工具可以提供幫助）。
這裡有23個常用的React UI庫，點擊即可使用。如果你實現了自己的庫，請記住為開發人員留下足夠的設計空間，從而保持兩者之間的平衡。
Bit -作為構建塊的組件
Bit是構建組件庫的新趨勢。
通過使用Bit，你可以組織來自雲上不同項目的組件，而無需重構這些項目或現有庫。
每個組件都可以正在進行的任何項目中發現，使用或開發，同時可以輕鬆地跨代碼庫進行同步更改。
每個組件都會顯示一個實時UI操作系統 ，自動解析文檔，測試結果（Bit運行組件單元測試等），以便所有組件都可以被設計和開發團隊發現。
Bit的工作流可讓你在UI一致性和設計規則之間找到一個更快，更動態的工作流。它也是開源的，所以可以隨意查看。
平衡一致性和靈活性
丘吉爾曾經說過“改善就是改變，完美就是經常改變”。如果我們過於嚴格地執行一致性，這將會影響創新。
在我們建立新事物的過程中，我們必須對規則進行適當的調整，預留出一些空間給變量，但不能因為調整讓事物陷入混亂。
或許這個說法聽起來沒有什麼特別之處，但正確的理念，方法和工具可以幫助你實現UI一致性和創新之間的平衡。以下是一些保持平衡有效的建議。
從設計的角度來看，並非每種風格都應該重新定義和預先定義。
例如，某個組件（導航欄，項目等）可能與應用程序的其餘部分相比具有相對大小或邊距。在不同的情況下，這些變量可能會發生變化，因此可以預留一些空間出來。
優步和其他團隊使用的另一種有用的方法是將基本/全局/基礎組件與“輔助”組件分開 。
例如， Uber使用具有超過22種不同顏色和22種值的主要和次要組件，總共484種獨特色調。 創建了70多種獨特模式 - 每個有Uber服務的國家都有一種獨特模式。
設計人員與開發人員的協作是找到這種平衡的關鍵。一些團隊（如沃爾瑪實驗室 ）致力於提高UI組件本身的可重用性，從而縮小與開發人員端的差距。
正確的工具和工作流程對UI也有很大的幫助，像Bit和Storybook這樣的工具就可以幫助促進這種平衡。
在別無選擇的情況下，打破一致性、模式 、視覺和文字是一種很好的方式，可以給用戶一種熟悉的感覺並減少混亂。 一致的模式 ，可識別的視覺效果和一致的語氣可以使用戶感覺安全，直觀地與你的產品互動。
扼要重述
l 保持UI和UX的一致性可以引導用戶成功與您的產品進行交互。
l 設計系統是UI / UX不斷髮展的主體。基於組件的設計系統具有視覺和功能一致性。
l Uber，Airbnb，Pinterest，Netflix和其他優秀團隊使用基於組件的設計系統來創建和發展他們的視覺語言。
l 要構建組件設計系統，您可以創建庫，使用Bit並利用不同的工具和方法來逐步擴展它。
l 通過為變量留出空間，使用有用的工具和鼓勵協作文化來平衡一致性和靈活性是很重要的。
l 切記 ：平衡和協作就是一切。這不是一項單一的工作，而是設計師和開發人員共同進行的持續旅程。
情人節送禮啦，贈送Mockplus專業版！領取專業版通道：https://ds.mockplus.cn/summer=trista（見者有份，你來就送）
閱讀更多 Mockplus摹客 的文章
