資訊專欄INFORMATION COLUMN
摘要：是由滴滴出行戰(zhàn)略事業(yè)群前端團(tuán)隊(duì)基于開(kāi)發(fā)的移動(dòng)端組件庫(kù)。為了達(dá)成這一目標(biāo)，的視覺(jué)設(shè)計(jì)規(guī)范劃分為功能型組件規(guī)范和非功能性視覺(jué)規(guī)范兩部分。內(nèi)部樣式基于開(kāi)發(fā)，可通過(guò)全局和組件的樣式變量對(duì)主題樣式進(jìn)行調(diào)整。
Mand Mobile 是由滴滴出行戰(zhàn)略事業(yè)群前端團(tuán)隊(duì)基于Vuejs 2.0開(kāi)發(fā)的移動(dòng)端組件庫(kù)。它遵循統(tǒng)一的視覺(jué)設(shè)計(jì)規(guī)范，由包括基礎(chǔ)、表單、操作反饋和業(yè)務(wù)在內(nèi)的四類組件組成。Mand Mobile致力于提升金融相關(guān)產(chǎn)品的用戶體驗(yàn)，提高設(shè)計(jì)和研發(fā)效率，讓復(fù)雜的場(chǎng)景變得簡(jiǎn)單。
項(xiàng)目背景金融類產(chǎn)品種類繁多，功能相對(duì)來(lái)說(shuō)較復(fù)雜，設(shè)計(jì)及開(kāi)發(fā)成本較高。從各種表單的填寫(xiě)，驗(yàn)證碼/密碼輸入，到圖表展示，再到數(shù)字鍵盤(pán)和收銀臺(tái)。這些功能往往使用頻率較高，對(duì)于視覺(jué)一致性和兼容性都有著更高的要求。
在這個(gè)背景下，我們嘗試在項(xiàng)目的設(shè)計(jì)和開(kāi)發(fā)過(guò)程中積累了部分高頻使用的組件，逐漸梳理出統(tǒng)一的視覺(jué)和開(kāi)發(fā)規(guī)范，以期望能夠幫助團(tuán)隊(duì)快速地迭代出產(chǎn)品。經(jīng)過(guò)一年時(shí)間的積累，組件庫(kù)已應(yīng)用于四大業(yè)務(wù)板塊共10余款產(chǎn)品中，并在業(yè)務(wù)的考驗(yàn)中不斷成熟。
掃碼體驗(yàn) 項(xiàng)目特點(diǎn)豐富的組件
Mand Mobile提供了30+的實(shí)用組件，能夠滿足移動(dòng)端頁(yè)面開(kāi)發(fā)中的大部分需求。其中的業(yè)務(wù)類組件還針對(duì)金融領(lǐng)域，提取了包括圖表、數(shù)字鍵盤(pán)等，從而更好地滿足相關(guān)產(chǎn)品的開(kāi)發(fā)需要。
統(tǒng)一的視覺(jué)規(guī)范
視覺(jué)設(shè)計(jì)既要兼顧可用性，又要具備信息傳達(dá)的直觀度和界面展現(xiàn)的美觀度。為了達(dá)成這一目標(biāo)，Mand Mobile 的視覺(jué)設(shè)計(jì)規(guī)范劃分為功能型組件規(guī)范和非功能性視覺(jué)規(guī)范兩部分。功能型組件包括但不限于浮層，提示，彈窗，表單等，強(qiáng)調(diào)平臺(tái)化的統(tǒng)一復(fù)用和對(duì)接研發(fā)的高效率實(shí)現(xiàn)。非功能性視覺(jué)規(guī)范會(huì)定義主輔顏色體系，場(chǎng)景按鈕等。
Mand Mobile 的視覺(jué)規(guī)范由滴滴戰(zhàn)略事業(yè)群設(shè)計(jì)師設(shè)計(jì)并維護(hù)，保證了應(yīng)用的項(xiàng)目?jī)?nèi)部、項(xiàng)目之間都能保持高度的視覺(jué)一致性。簡(jiǎn)潔大氣的設(shè)計(jì)風(fēng)格，在保證項(xiàng)目整體的美觀與格調(diào)的同時(shí)，也讓其有能力適應(yīng)更廣泛的應(yīng)用場(chǎng)景。
詳細(xì)的文檔和示例
我們?yōu)槊總€(gè)組件編寫(xiě)了詳細(xì)的說(shuō)明文檔，從組件的引入方法，到屬性Props，事件Events，公共方法Methods等都有詳細(xì)的介紹。為了更直觀的介紹組件使用方法以及效果，我們針對(duì)每個(gè)組件都提供了多個(gè)可以即時(shí)操作的demo，從而讓用戶能更直觀地了解組件的各項(xiàng)功能。
嚴(yán)格控制的Bundle體積
在保證功能完善、強(qiáng)大的同時(shí)，Mand Mobile 還在Bundle體積上表現(xiàn)出色。Mand Mobile可導(dǎo)出es，umd兩種格式包，其中es打包大小僅為139kb(gzip 34kb)，umd格式最終大小僅為135kb(gzip 33kb)，從而為使用者在控制項(xiàng)目體積上提供有力的幫助。
除此之外，Mand Mobile還支持tree shaking以及支持按需加載，對(duì)于僅需使用部分組件的項(xiàng)目來(lái)說(shuō)，這能進(jìn)一步減小項(xiàng)目的體積。具體的配置方法可參考快速上手中的引用部分。
靈活轉(zhuǎn)換的樣式主題
盡管Mand Mobile 的設(shè)計(jì)風(fēng)格簡(jiǎn)約優(yōu)雅，足以適應(yīng)大部分項(xiàng)目的視覺(jué)要求，但您仍可為其定制專屬的樣式主題。Mand Mobile內(nèi)部樣式基于Stylus開(kāi)發(fā)，可通過(guò)全局和組件的樣式變量對(duì)主題樣式進(jìn)行調(diào)整。
Mand Mobile 剛剛起步不久，目前仍存在一些不夠完善的地方。在繼續(xù)完善現(xiàn)有組件的同時(shí)，我們還會(huì)繼續(xù)積累更多的實(shí)用組件，另外也會(huì)嘗試將視覺(jué)和邏輯抽離，從而來(lái)滿足更多更廣泛的使用需求。
我們衷心地期望 Mand Mobile 的出現(xiàn)能夠?qū)δ墓ぷ饔兴鶐椭?。與此同時(shí)，我們也期望得到您的支持、反饋和參與，為讓金融場(chǎng)景開(kāi)發(fā)更簡(jiǎn)單的目標(biāo)而共同努力。您遇到的任何問(wèn)題，可隨時(shí)在GitHub提交。
相關(guān)鏈接Home: https://didi.github.io/mand-mobile
Github: https://github.com/didi/mand-mobile
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94374.html
摘要：?jiǎn)卧獪y(cè)試一個(gè)合格的庫(kù)應(yīng)該包含完整的單元測(cè)試。是的支持版，和是一樣的，它能夠直接運(yùn)行為后綴的單元測(cè)試文件。在目錄下加入然后執(zhí)行即可看到單元測(cè)試結(jié)果。 這篇文章主要是講述如何使用 TypeScript 編寫(xiě)一個(gè)完善，包含測(cè)試、文檔、持續(xù)集成的庫(kù)，涵蓋了編寫(xiě)整個(gè)庫(kù)所需要的技術(shù)和工具，主要涵蓋： 項(xiàng)目目錄骨架 TypeScript 配置 使用 jest 單元測(cè)試 使用 vuepress 編寫(xiě)...
摘要：圖片壓縮網(wǎng)址介紹是一款圖片壓縮工具，壓縮率能達(dá)到以上，圖片在壓縮之前和之后幾乎看不出差別。在設(shè)計(jì)師人群中比較流行，現(xiàn)在介紹給廣大的程序員。 1.圖片壓縮網(wǎng)址：https://tinypng.com/ 介紹： Tinypng 是一款 PNG 圖片壓縮工具，壓縮率能達(dá)到 50% 以上，圖片在壓縮之前和之后幾乎看不出差別。Tinypng 在設(shè)計(jì)師人群中比較流行，現(xiàn)在介紹給廣大的程序員。 據(jù)...
摘要：高顏值好用易擴(kuò)展的微信小程序庫(kù)，有贊。一套高質(zhì)量的微信小程序組件庫(kù)。用和搭建的一個(gè)通用管理后臺(tái)基于實(shí)現(xiàn)的后臺(tái)管理系統(tǒng)模板一個(gè)后臺(tái)管理系統(tǒng)模板是一套組件化框架，支持定制主題，主要服務(wù)于前臺(tái)及中后臺(tái)產(chǎn)品?；诤笈_(tái)管理系統(tǒng)。 快來(lái)Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...
摘要：高顏值好用易擴(kuò)展的微信小程序庫(kù)，有贊。一套高質(zhì)量的微信小程序組件庫(kù)。用和搭建的一個(gè)通用管理后臺(tái)基于實(shí)現(xiàn)的后臺(tái)管理系統(tǒng)模板一個(gè)后臺(tái)管理系統(tǒng)模板是一套組件化框架，支持定制主題，主要服務(wù)于前臺(tái)及中后臺(tái)產(chǎn)品?；诤笈_(tái)管理系統(tǒng)。 快來(lái)Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...
閱讀 2669·2021-11-15 11:38
閱讀 2981·2021-11-02 14:44
閱讀 3936·2021-09-26 10:13
閱讀 3171·2021-08-13 15:02
閱讀 856·2019-08-30 15:56
閱讀 1631·2019-08-30 15:53
閱讀 2407·2019-08-30 13:01
閱讀 3295·2019-08-29 12:57
