4月11日訊息，滴滴今日宣佈開源一款基於金融場景的Vuejs元件庫——Mand Mobile。該工具是基於Vuejs 2.0開發的移動端元件庫，它遵循統一的視覺設計規範，由包括基礎、表單、操作反饋和業務在內的四類元件組成。Mand Mobile致力於提升金融相關產品的使用者體驗，提高設計和研發效率，讓複雜的場景變得簡單。

由於金融產品種類繁多，功能相對來說較複雜，設計及開發成本較高。從各種表單的填寫，驗證碼/密碼輸入，到圖表展示，再到數字鍵盤和收銀臺等，這些功能使用頻率較高，對於視覺一致性和相容性都有著更高的要求。

在這一背景下，滴滴出行戰略事業群前端團隊嘗試在專案的設計和開發過程中積累了部分高頻使用的元件，逐漸梳理出統一的視覺和開發規範，以期能幫助團隊快速地迭代出產品。經過一年時間的積累，元件庫已應用於四大業務板塊共10餘款產品中，並在業務的考驗中逐漸成熟。

專案特點

• 豐富的元件

Mand Mobile提供了30+的實用元件，能夠滿足移動端頁面開發中的大部分需求。其中的業務類元件還針對金融領域，提取了包括圖表、數字鍵盤等，從而更好地滿足相關產品的開發需要。

• 統一的視覺規範

視覺設計既要兼顧可用性，又要具備資訊傳達的直觀度和介面展現的美觀度。為了達成這一目標，Mand Mobile的視覺設計規範劃分為功能型元件規範和非功能性視覺規範兩部分。功能型元件包括但不限於浮層，提示，彈窗，表單等，強調平臺化的統一複用和對接研發的高效率實現。非功能性視覺規範會定義主輔顏色體系，場景按鈕等。

Mand Mobile 的視覺規範由滴滴戰略事業群設計師設計並維護，保證了應用的專案內部、專案之間都能保持高度的視覺一致性。簡潔大氣的設計風格，在保證專案整體的美觀與格調的同時，也讓其有能力適應更廣泛的應用場景。

• 詳細的文件和示例

我們為每個元件編寫了詳細的說明文件，從元件的引入方法，到屬性Props，事件Events，公共方法Methods等都有詳細的介紹。為了更直觀的介紹元件使用方法以及效果，我們針對每個元件都提供了多個可以即時操作的demo，從而讓使用者能更直觀地瞭解元件的各項功能。

Chart Demo

Chart API

• 嚴格控制的Bundle體積

在保證功能完善、強大的同時，Mand Mobile 還在Bundle體積上表現出色。Mand Mobile可匯出es，umd兩種格式包，其中es打包大小僅為139kb(gzip 34kb)，umd格式最終大小僅為135kb(gzip 33kb)，從而為使用者在控制專案體積上提供有力的幫助。

除此之外，Mand Mobile還支援tree shaking以及支援按需載入，對於僅需使用部分元件的專案來說，這能進一步減小專案的體積。具體的配置方法可參考快速上手中的引用部分。

• 靈活轉換的樣式主題



儘管Mand Mobile 的設計風格簡約優雅，足以適應大部分專案的視覺要求，但您仍可為其定製專屬的樣式主題。Mand Mobile內部樣式基於Stylus開發，可通過全域性和元件的樣式變數對主題樣式進行調整。


專案反饋

該專案開源負責人表示，Mand Mobile 剛剛起步不久，目前仍存在一些不夠完善的地方。在繼續完善現有元件的同時，我們還會繼續積累更多的實用元件，另外也會嘗試將視覺和邏輯抽離，從而來滿足更多更廣泛的使用需求。

目前該專案已經在開源平臺GitHub上線，感興趣的工程師可以去感受這款開源組建的強大功能，也可以在頁面提交寶貴建議。

相關連結