NutUI&京東科技前端、UI設計師經過2個多季度的緊密合作開發迭代，NutUI-JDT作為正式京東科技風格的NutUI終於和大家見面了，此次開創了兩側通過主題定製的方式實現對不同風格元件庫的完美融合，而且在元件的使用體驗、易用性、靈活性、降低維護成本上有了非常大的提升。
背景
隨著業務的不斷髮展、應用場景的不斷擴充，京東科技（簡稱：科技）在移動端同一專案需要同時支援 H5 端、小程式端的場景也越來越多，科技側自研的 FindMobile 需要分開維護多端容易造成功能上線時間不同步、資源成本重複等問題，如何能更好的用一套程式碼適配多端、達到統一維護上線的課題已經需要重點注意。通過對集團內眾多元件庫的調研，NutUI 支援多端（H5和小程式）的特性很適合科技側業務研發的需求，經過內部調研研決定聯合 NutUI 團隊共同打造出京東科技視覺的元件體系 - NutUI-JDT。
目標
本著一套程式碼適配多端、統一維護、同時釋出上線的目的讓移動端多端場景開發更簡單，通過對元件庫的使用讓研發從繁雜重複的基礎工作中脫離出來，能更專注於業務邏輯優化、效能提升，提高研發交付效率、降低開發成本。同時通過京東科技和京東商城兩側更多場景的元件應用與打磨，逐步將元件庫建設的更加完美。
如何融合
科技側自研 FindMobile 與 NutUI 是兩個獨立的元件庫，在元件視覺風格、元件型別、元件 API 屬性的定義都有很大的不同，經過多次討論溝通，最終決定採用共同開發主題定製的方案以達到兩側深度融合、統一維護迭代的目的，以此共識方案為基調兩側 UI 設計和前端開發進行了任務拆解、分工合作，即分別從擴充元件/元件屬性、主題定製兩條路線出發，最終實現完成科技視覺主題開發完成驗收上線。
此次科技視覺主題深度定製功能的成功上線也為後續集團內更多的視覺體系接入 NutUI 做了示範先例，併為保證更快速、更完美的適配及釋出上線打下了基礎。
擴充差異元件/功能融合
通過對兩側元件逐個甄別篩選，我們排除兩側共有且功能屬性相同元件後，我們發現了一部分科技側高頻使用但 NutUI 側尚未使收錄的元件，此外還發現了雖然 NutUI 已有相同元件但需擴充一些 API 介面屬性後才能達到支援現有科技側元件的程度，此外兩側功能屬性相同的元件在 UI 樣式風格上還是有較大的區別，所以我們將融合分為了三大部分—— 1 甄別科技側需要的元件（NutUI沒有的） 、2 甄別開發需要擴充 API 介面屬性的元件、3 全量(70+)元件 UI 樣式差異梳理完成科技風格主題。
1、甄別出 5 個元件（表單、空狀態、指示器、宮格、級聯選擇器）需要增加進入 NutUI 元件庫體系；
2、甄別出了 8 個元件需要在 NutUI 原有元件基礎上擴充 API 介面屬性；
- 按鈕：增加 size 屬性；
- 單元格：分組新增描述、title 支援插槽、增加 size 屬性；
- 對話方塊：新增樣式風格屬性 theme；
- 開關：支援自定義圖示；
- 吐司：增加標題屬性、自定義位置；
- 環形進度條：支援漸變色、兩行文字樣式；
- 選項卡切換：增加 size 屬性、右側增加滾動陰影、滾動互動；
- 輸入框 ：右側支援 is-link；
3、全量(70+)元件 UI 樣式差異梳理：將融合後的總計 70+ 個元件各項UI樣式差異點進行梳理甄別並逐個研發推進調整主題定製為京東科技主題。
主題定製
通過討論最終決定通過主題定製的方式在同一網站可切換不同風格，這樣既保證了融合的統一性又相容風格的獨立性，同時也為後續相容更多風格的元件庫樹立成功案例。
1、確定自定義變數範圍，主題變數數量由原來 300+ 提升至 700+；
2、自定義變數開發，完成新梳理的變數開發任務；
3、科技視覺主題完成全量元件適配；
科技視覺風格sketch元件庫外掛
科技視覺風格 sketch 元件外掛內已將全部元件封裝為控制元件（symbol）方便快速多場景調取複用；同時外掛內頁封裝定義好了全量存量文字樣式、圖層樣式、顏色樣式、方便對文字、圖形等進行直接樣式覆蓋，保證統一UI規範輸出；
最新外掛包括元件 39 個、控制元件（symbol） 500+ 個、文字樣式 170+ 個、圖層樣式 90+ 個、顏色樣式30+ 個；
Sketch 外掛如何使用
老司機請忽略此段內容哈~
安裝完成後採用呼叫控制元件（symbol）的方式置入到實際專案檔案中，通過編輯覆蓋層內容（無需解組控制元件）即可使控制元件顯示所需內容，當元件庫有更新時也可一鍵升級專案元件到最新，解決了老專案檔案頁面眾多且不能快速替換為最新UI樣式的問題。
1、sketch軟體內通過設定“首選項>元件庫>新增元件庫”將外掛完成安裝；
2、實際專案使用時在選單選擇“置入”選擇對應元件；
3、在操作皮膚針對控制元件內容進行修改，或對文字、圖形等進行直接樣式覆蓋或相對自由拉伸尺寸；
4、更新元件：元件庫迭代更新時在原元件庫所在儲存資料夾下刪舊存新（檔名需保持一致）後續即可呼叫置入最新元件，sketch 開啟專案檔案(或舊專案檔案)如點選軟體右上角“通知”有“元件庫有更新可用”點選確認後專案檔案即可全量更新到最新元件；
技術看點
For 開發者
一直以來，NutUI 都是以京東紅（JD APP）風格為主，本次釋出衍生出新的主題生態-科技藍。開發者可以根據自身的業務訴求選擇不同的 UI 風格。
新主題官網
新增京東科技主題，結合科技眾多的應用場景，快來嘗試一下吧。
- 主題切換非常簡單，1 秒即可
- 提高科技團隊的視覺互動體驗
- 建立通⽤的細節設計標準
- 建⽴設計與開發對接的基礎標準
- 提⾼產研輸出對接的效率，降低輸出工作量
差異性
相比之前，我們在開發層面，我們在原始碼內部 style 資料夾下，分別生成了 variables.scss 、variables-jdt.scss 等多個主題檔案，每個主題的全域性的 variables.scss 檔案，內部按標準的規則存放存放通用樣式變數和每個元件的樣式變數。本次主題變數數量由原來 300+ 提升至 700+，強化每個元件的顆粒度定製能力。
如何使用
對於開發者使用方式，我們保留了原有的方式，開發者無限安裝額外外掛包，只需修改 vite.config 或者 taro/config 中修改 variables-jdt.scss 主題包名稱即可。使用方式：https://nutui.jd.com/jdt/#/guide/theme
後續規劃
1、更多元件應用納入科技視覺 sketch 外掛，跟進主題變數
2、NutUI 統一 icon 圖示庫
共建里程碑
從 2021 年 11 月開始我們完成了 NutUI 與 Find 的差異（近70項）梳理，缺失高頻元件的開發（5個），元件級UI定製的開發（抽取700餘項樣式變數），及科技版 UI 的開發和上線。
開源
眾人拾柴火焰高，在這裡我們非常歡迎感興趣的同學參與到 NutUI 專案的開發，建議通過提 Pull Request 的方式參與，NutUI 的持續迭代，離不開每一位參與幫助開發的人，開發者每一次對我們的認可，就是對我們最大的鼓勵。