本文首發自「慕課網」，想了解更多IT乾貨內容，程式設計師圈內熱聞，歡迎關注！
作者| 慕課網精英講師 Rosen
UI 是什麼？
先來說下 UI，這倆字母是 User Interface 的縮寫，一般翻譯成「用戶界面」。UI 最主要的功能就是建立用戶和系統後台之間的聯繫，系統後台通過 UI 把數據轉換成可視化的內容展示給用戶，同時用戶也要通過 UI 把操作指令（包括數據）傳給系統後台。
對 UI 不太熟悉的同學一聽到這個概念，可能會覺得它的作用就是怎麼把一個產品做的漂亮，所以 UI 設計師經常被人叫成美工。而事實上 UI 應該是負責「交互」和「視覺」這兩方面的工作，這兩部分內容構成了產品的用戶體驗。
用戶體驗里最重要的應該是這個產品好不好用，也就是「交互」這部分，這其中包括產品功能是否完善，產品流程是否設計的合理，使用是否方便，操作是否流暢等。在一些大公司里，為了保證產品好用，還會專門設置互動設計師這個職位，專門做交互部分的設計工作。
「視覺」在用戶體驗中也很重要，但它一定要建立在好用的基礎上。如果一個用戶在使用產品的功能上出現問題，這個用戶很可能就流失了。但如果產品用起來沒問題，只是界面不那麼漂亮，一般也就是被吐槽一下，不會造成功能缺失所導致的那麼嚴重的後果。在我看來，一個系統的交互舒適程度要比美觀更重要。
UI 的貢獻者
在一個項目的開發周期中，UI 的形成需要多個角色進行配合。產品經理、UI 設計師、前端開發人員都是用戶界面重要的貢獻者，甚至後端開發人員在做數據處理時也都需要考慮到 UI 的影響。下面大概說下這幾個貢獻者的各自分工：
產品經理，項目的主導者。主要考慮的是系統里功能性的部分。產品經理需要了解一個系統面向的用戶群體，以及這個群體的特點和使用習慣，然後設計出滿足用戶需求的產品。在這個階段產品經理會產出產品的原型，包括功能設計和大致的功能分布。產品的設計決定了產品的實用性。
UI
設計師，用戶體驗的設計者。當產品經理確定產品功能後，UI 設計師就該進場了。設計師會和產品溝通，依照產品模型再做交互和視覺上的優化，最後依照設計結果產出 UI 設計圖。UI 設計圖是 UI
設計師的最終產出結果，但這個工作更重要的是在設計上，不僅僅是畫設計圖。所以，千萬別再把人家叫美工了，因為叫錯被打了也就忍著吧。
前端開發人員，從 UI 設計圖到實際產品的實現者。前端開發人員最主要的工作是把產品和 UI 確定的最終設計稿變成可以運行的程序。前端開發人員是一個施工方的角色，但可以從代碼的角度對產品經理和 UI
設計師提出有價值的意見。並且在施工中，好的前端開發人員也會注意到用戶體驗，比如優化加載速度，按鈕點擊範圍，列表滾動的順滑程度等。
UI 框架
前面介紹了 UI 的情況，從現在開始，就要進入我們這個課程的主題–UI 框架。我們這個課程主要講頁面切圖部分內容，也就是 HTML 和 CSS 的部分。
當我們在做切圖時，最常見的是把設計圖用 HTML 和 CSS 逐個還原出來。這個過程中我們會發現寫了很多冗餘的代碼。比如 Button，每個頁面用到的地方都要寫上一堆 Button 的樣式，慢慢的為了加快開發，就開始大量複製粘貼，最後就導致整個代碼里有幾十個很類似的 Button 樣式。
頁面中其實有很多像 Button 這種會用到很多次的組件，這時候我們會想到把這些具有共性的東西抽離出來，變成通用的組件。這樣再寫頁面的時候，只要引入這些通用的組件，就不用在頁面里重複寫這些內容了。經過不斷的提煉，就形成了 UI 庫或 UI 框架。
使用框架的好處也是顯而易見的：
- 標準化。UI 設計師應該有統一的設計標準的，當我們製作出一套前端框架的時候，就可以把設計標準轉化成開發標準。如果設計師那邊出的設計圖並沒有什麼標準，比如同樣功能同樣位置的按鈕，有的用 50px 高度，有的用 55px 高度，這時候前端同學就有義務去和 UI 設計師溝通下，把設計標準確定下來，保證同類組件有統一的尺寸和樣式。
- 提高開發效率。使用了 UI 框架以後，所有通用的組件的開發量就省下來了，開發人員只需要做每個頁面里那些沒有共性部分的開發。
- 方便擴展。在使用了通用的框架後，我們具有共性的內容都集中在了一起。所以當我們要對產品做樣式改造或擴展的時候，只需要對框架進行升級就可以了。不會像原始的那種開發方式中，哪怕改個按鈕顏色，也要去每個頁面里都改一遍。
- 提高頁面加載速度。這個優點其實是被動的，當抽離出 UI 組件後，就會少了很多冗餘代碼，這樣總體文件體積會變小。同時抽離出來的通用組件通過做緩存，加載速度還會進一步提高。但說這個優點是被動的，是因為這並不是我們做 UI 框架的初衷，通常不會為了提高加載速度而做一個 UI 框架。
現有移動端 UI 框架
現在市場上已經有很多的 UI 框架，也有很多是免費的，我們可以直接拿來用。下面介紹幾個移動端常見的 UI 框架：
- Bootstrap，強大的 UI 框架。它同時支持 PC 端和移動端，還可以做到自適應；組件非常全面；穩定性好，不容易出問題；還提供了基於 jQuery 的 JS 組件庫（據說5.x版本後會剔除對jQuery的依賴）。它的缺點就是體積太過龐大，太過大而全。
- WeUI，微信官方出品的。這個框架設計比較簡潔美觀，提供了移動端一些基礎的組件，體積很小，沒有提供 JS 組件。我比較喜歡這個設計，這個課程里一些樣式也是參考了這個框架。
- VUX-UI，基於 VUE 的 UI 庫。它實際是在 WeUI 的基礎上做了一些改造，並使用 VUE 實現了一些 JS 組件庫。
- Ant Design Mobile，基於 React 的移動端 UI 框架。它和 VUX-UI 的定位是一樣的，只不過是基於 React。另外這個UI 框架的設計是單獨開發的，沒有基於 WeUI。
- Frozen UI（騰訊）、Mint UI（餓了麼）、Cube UI（滴滴）。這些都是各個大公司內部的 UI 框架，做的成熟了，就做了開源提供給外部的開發者使用。
前面介紹的是一些比較常用的，實際還有很多其他設計的不錯的 UI 框架，這裡就不細緻介紹了。在挑選 UI 框架的時候一定要先看文檔，看是否符合自己的需求。再就是儘量用一些大眾的框架，可以減少踩坑的機率。
小結
這篇文章帶大家了解了 UI 的概念，製作 UI 的參與者，UI 框架的作用以及一些常用的 UI 框架。希望大家看完能對 UI 和 UI框架相關的內容有個比較具體的印象。最後強調下，不要把 UI 設計師叫成美工！
歡迎關注「慕課網」，發現更多IT圈優質內容，分享乾貨知識，幫助你成為更好的程式設計師！