開發也能構建UI組件設計規範

如下內容由Mockplus團隊翻譯整理，僅供學習交流，摹客設計系統是國內獨家設計規範製做平臺。

經過本文，你將學習到 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 切記：平衡和協做就是一切。這不是一項單一的工做，而是設計師和開發人員共同進行的持續旅程。

原文做者：Jonathan Saring

原文連接：blog.bitsrc.io/building-a-…

學習工具，但不受限於某種工具。用摹客，建規範，如今試用，爲你的團隊定製設計規範。