{{userData.name}}已认证

文章

关注

粉丝

￥{{role.user_data.money}}

您已完成今天任务的

京东科技风格 NutUI 发布了！

UI
4月6日
编辑

JDTDA

以下文章来源于京东零售技术，作者金融科技群徐建平

一 项目背景 随着业务的不断发展、应用场景的不断扩充，京东科技（简称：科技）在移动端同一项目需要同时支持 H5 端、小程序端的场景也越来越多，科技侧自研的 FindMobile 需要分开维护，多端容易造成功能上线时间不同步、资源成本重复等问题，如何能更好的用一套代码适配多端、达到统一维护上线的课题已经需要重点注意。通过对集团内众多组件库的调研，NutUI 支持多端（H5和小程序）的特性很适合科技侧业务研发的需求，经过内部调研决定联合 NutUI 团队共同打造出京东科技视觉的组件体系：NutUI-JDT。
二 项目目标 本着一套代码适配多端、统一维护、同时发布上线的目的让移动端多端场景开发更简单，通过对组件库的使用，让研发从繁杂重复的基础工作中脱离出来，能更专注于业务逻辑优化、性能提升，提高研发交付效率、降低开发成本。同时通过京东科技和京东商城两侧更多场景的组件应用与打磨，逐步将组件库建设地更加完美。

三 组件库如何融合？ 科技侧自研 FindMobile 与 NutUI 是两个独立的组件库，在视觉风格、组件类型、组件 API 属性的定义都有很大的不同。经过多次讨论沟通，最终决定采用共同开发主题定制的方案以达到两侧深度融合、统一维护迭代的目的。以此共识方案为基调，两侧 UI 设计和前端开发进行了任务拆解、分工合作，即分别从扩充组件/组件属性、主题定制两条路线出发，最终实现完成科技视觉主题开发完成，并验收上线。此次科技视觉主题深度定制功能的成功上线，也为后续集团内更多的视觉体系接入 NutUI 做了示范先例，并为保证更快速、更完美的适配及发布上线打下了基础。

1、扩充差异组件/功能融合通过对两侧组件逐个甄别筛选，排除两侧共有且功能属性相同组件后，我们梳理了出了急需要解决的问题：部分科技侧高频使用但 NutUI 侧尚未收录的组件；虽然 NutUI 已有相同组件，但需扩充一些 API 接口属性，才能达到支持现有科技侧组件的程度；两侧功能属性相同的组件在 UI 样式风格上还是有较大的区别。最终，我们将融合分为了三大部分—— 甄别科技侧需要的组件（NutUI没有的) ; 甄别开发需要扩充 API 接口属性的组件; 全量组件 UI 样式差异梳理，并完成科技风格主题设计。(1) 甄别需要增加进入 NutUI 组件库体系:5个（表单、空状态、指示器、宫格、级联选择器）；

(2) 甄别出需要在 NutUI 原有组件基础上扩充 API 接口属性：8个；

按钮：增加 size 属性；
单元格：分组新增描述、title 支持插槽、增加 size 属性；
对话框：新增样式风格属性 theme；
开关：支持自定义图标；
吐司：增加标题属性、自定义位置；
环形进度条：支持渐变色、两行文本样式；

选项卡切换：增加 size 属性、右侧增加滚动阴影、滚动交互；
输入框：右侧支持 is-link；

(3) 全量组件 UI 样式差异梳理：将融合后组件各项UI样式差异点进行梳理甄别，并逐个研发推进调整主题定制为京东科技主题，累计70+。

2、主题定制最终，我们决定通过主题定制的方式在同一网站切换不同风格，保证了融合的统一性，并兼容了风格的独立性，成为首个兼容更多风格组件库的成功案例。我们的成果：(1) 确定自定义变量范围，主题变量的数量由原来 300+ 提升至 700+；(2) 自定义变量开发，完成新梳理的变量开发任务；(3) 科技视觉主题完成全量组件适配；
四 组件库展示 科技视觉风格 sketch 组件插件内已将全部组件封装为控件（symbol），方便快速多场景调取复用；同时插件内页封装定义好了全量存量文字样式、图层样式、颜色样式，方便对文字、图形等进行直接样式覆盖，保证统一UI规范输出；
最新插件包括：组件 39 个、控件（symbol） 500+ 个、文字样式 170+ 个、图层样式 90+ 个、颜色样式30+ 个；（文字尾部有资源插件下载方式~）

五 使用方式 以下内容，老司机请忽略～安装完成后采用调用控件（symbol）的方式置入到实际项目文件中，通过编辑覆盖层内容（无需解组控件）即可使控件显示所需内容，当组件库有更新时，也可一键升级项目组件到最新，解决了老项目文件页面众多且不能快速替换为最新UI样式的问题。

1、sketch软件内通过设置 “ 首选项 > 组件库 > 添加组件库 ” 将插件完成安装；2、实际项目使用时在菜单选择 “ 置入 ” 选择对应组件；3、在操作面板针对控件内容进行修改，或对文字、图形等进行直接样式覆盖或相对自由拉伸尺寸；4、更新组件：组件库迭代更新时，在原组件库所在存储文件夹下删旧存新（文件名需保持一致）后续即可调用置入最新组件，sketch 打开项目文件（或旧项目文件）如点击软件右上角 “ 通知 ” ，有 “ 组件库有更新可用 ” 时，点击 “ 确认 ” 后项目文件即可全量更新到最新组件；
六 规划与总结 未来，我们还将不断对组件库进行升级，将更多组件应用纳入科技视觉 sketch 插件，跟进主题变量；NutUI 统一 icon 图标库等。自 2021 年 11 月开始，我们完成了 NutUI 与 Find 的差异梳理（近70项）、缺失高频组件的开发（5个、组件级UI定制的开发（抽取700余项样式变量）、及科技版 UI 的开发和上线。