如何構建UI元件設計規範？
以下內容由摹客團隊翻譯整理，僅供學習交流，摹客設計系統是國內獨家設計規範製作平臺。
透過本文，你將學習到
Uber
，
，
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
切記
：平衡和協作就是一切。這不是一項單一的工作，而是設計師和開發人員共同進行的持續旅程。
原文作者：Jonathan Saring
原文連結：
https：//
blog。bitsrc。io/building
-a-consistent-ui-design-system-4481fb37470f