言
京東物流目前在 M 端的業(yè)務(wù)越來越多，如公眾號、移動官網(wǎng)。這對 M 端的 UI 框架要求就越高，組件豐富、接入友好，穩(wěn)定性高，拓展性及性能上都有較高的要求。自研的 pandora-mobile 目前看不符合現(xiàn)有需求，相較而言 NutUI 更適合物流側(cè)的業(yè)務(wù)研發(fā)需求，經(jīng)內(nèi)部討論決定協(xié)同物流側(cè)用戶體驗(yàn)部聯(lián)合 NutUI 團(tuán)隊(duì)打造出物流視覺規(guī)范的 M 端 UI 框架。
JDC & JDL 團(tuán)隊(duì)經(jīng)歷了為期一個多月的緊密合作開發(fā)迭代，NutUI-JDL 終于和大家見面了。作為繼 2019 年 1 月 15 日 NutUI 2.0 正式發(fā)布以來的第二次大版本發(fā)布，NutUI-JDL 仍堅(jiān)守著【基于京東風(fēng)格】同時在產(chǎn)品的功能、體驗(yàn)、易用性和靈活性等各個方面進(jìn)行了全面提升。
需要注意的是，NutUI-JDL 版本是 NutUI 中的一個生態(tài)，目前我們兩個生態(tài)（NutUI、NutUI-JDL）會同時更新維護(hù)，發(fā)現(xiàn)問題我們還是保持第一時間迭代修復(fù)，請大家放心使用。
目標(biāo)
NutUI-JDL 的目標(biāo)是讓移動端的開發(fā)更加容易，基礎(chǔ)組件交給我們讓開發(fā)人員更加專注于業(yè)務(wù)，提升研發(fā)效率。
特點(diǎn)
- 物流風(fēng)格
- 體驗(yàn)極致
- 標(biāo)準(zhǔn)規(guī)范
- 擴(kuò)展性強(qiáng)
設(shè)計(jì)語言升級
呼聲最高的設(shè)計(jì)資源對外開放，并且引入優(yōu)質(zhì)的相關(guān)技術(shù)沉淀文章
-
隨著京東物流移動端業(yè)務(wù)的拓展，設(shè)計(jì)師不僅僅需要完成業(yè)務(wù)需求，也需要思考設(shè)計(jì)的價值。設(shè)計(jì)師也不應(yīng)該陷入重復(fù)的設(shè)計(jì)中，消耗設(shè)計(jì)時間，降低工作效率，所以推行組件化的設(shè)計(jì)模式迫在眉睫。
-
NutUI-JDL 京東物流版是一套基于移動端的組件庫，減少冗余組件，從實(shí)際項(xiàng)目入手，梳理出最通用的 30+ 基礎(chǔ)組件，覆蓋多場景，體積小巧、設(shè)計(jì)精美，提供了全新的設(shè)計(jì)以及交互體驗(yàn)，提高界面模塊化的通用程度。
-
新版組件庫從 設(shè)計(jì)語言 和 基礎(chǔ)組件 兩大模塊，重新定義了布局、顏色、圖標(biāo)、字體、間距和通用組件規(guī)范，提升了 UI 展示及交互方式，建立了新的設(shè)計(jì)標(biāo)準(zhǔn)，為推動物流側(cè)移動端產(chǎn)品的體驗(yàn)優(yōu)化和迭代帶來了高效路徑。
更小的體積
在 NutUI v2.2.6 之前，因底層的 WebPack 配置老舊、版本較低、設(shè)計(jì)不足 這大大增加了造成構(gòu)建出的 npm 包大小達(dá)到了 17.4 MB， 2020Q2 通過我們不斷打磨 @nutui/cli 接入后，將 npm 包大小減少到了 7.58 MB，大幅提升了性能及可配置項(xiàng)。同樣我們在 NutUI-JDL 版本中也統(tǒng)一此插件。
新組件
- Field 輸入框（將原來 Input、TextBox 融為一體，靈活配置）
- ImagePreview 圖片預(yù)覽（支持滑動左右切換）
- Steps 步驟條（豐富多樣的步驟條）
- Card 卡片（全新的卡片組件）
- Scroll 下拉刷新上拉加載（單獨(dú)抽離，降低耦合性）
組件重構(gòu)升級 30+
- Menu
- Toast
- ActionSheet
- Dialog
- Cell
- Skeleton
- Popup
- Rate
- NoticeBar
- Tag
- Badge
- TabBar
- SideNavBar
- NavBar
- Tabs
- Avator
- LeftSlip
- Switch
- Stepper
- Calendar
- Picker
- Uploader
如何使用
本次版本 NutUI-JDL 與 NutUI 2.x 屬于不同生態(tài)，一個是基于 JD App 視覺規(guī)范、另一個是 JDL APP 視覺規(guī)范，對應(yīng)的 npm 包分別是 @nutui/nutui 和 @nutui/nutui-jdl我們建議您為了盡可能簡化升級，直接采用以下命令進(jìn)行安裝使用：
npm install @nutui/nutui-jdl -S復(fù)制代碼
詳細(xì)的使用文檔請參考 nutui.jd.com/jdl/#/start
后期規(guī)劃
- 四級地址級聯(lián)組件
- 圖片懶加載（Lazy Load）
- 手風(fēng)琴
開源共建
眾人拾柴火焰高，在這里我們非常歡迎感興趣的同學(xué)參與到 NutUI 項(xiàng)目的開發(fā)，建議通過提 Pull Request 的方式參與，通過 Code Review 之后，我們會合并你的代碼。
以上
NutUI 的持續(xù)迭代，離不開每一位參與幫助開發(fā)的人，開發(fā)者每一次對我們的認(rèn)可，就是對我們最大的鼓勵。
