NutUI&京东科技前端，UI设计师经过两个多季度的密切合作和开发迭代，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、确定需要加入NutUI组件库体系的5个组件（表单、空状态、指示器、网格、级联选择器）；2、在NutUIInterface属性原有组件的基础上，确定需要扩展API的8个组件；按钮：添加大小属性；cell：为分组添加描述，title支持slot，添加size属性；对话框：添加样式属性主题；开关：支持自定义图标；toast：添加title属性，自定义位置；圆形进度条：支持渐变色，两行文字样式；tab切换：增加size属性，右侧增加滚动阴影，滚动交互；输入框：支持右边的is-link；3、全量（70+）组件UI风格差异整理：对整合后共计70+组件的UI风格差异进行梳理筛选，并逐一开发调整主题，定制为京东科技主题.主题定制经过讨论，最终决定通过主题定制可以在同一个网站上切换不同的样式，既保证了集成的统一性又保证了兼容样式的独立性，也为后续的组件库树立了一个成功的案例兼容更多款式。1、确定自定义变量的范围，将主题变量的数量从原来的300+增加到700+；2、开发自定义变量，完成新变量开发任务；3、完成科技视觉主题的全组件适配；科技视觉风格sketch组件库插件科技视觉风格Sketch组件插件将所有组件封装为符号，方便快速多场景检索和复用；同时，插件内页封装定义了全库存的文字样式、图层样式、颜色样式，方便直接对文字、图形等进行样式覆盖，保证统一的UI规范输出；最新插件包含39个组件、500+控件（符号）、170+文本样式、90+图层样式、30+颜色样式；点击体验资源插件Sketch插件如何使用老驱动，请无视此段~安装完成后，使用调用控件（symbol）的方式放入实际工程文件中，并您可以通过编辑叠加层的内容（无需解组控件）来使用控件显示所需的内容。组件库更新时，你也可以一键将项目组件升级到最新，解决了旧项目文件页面较多，无法快速更换为最新UI风格的问题。1、在sketch软件中，通过设置“Preferences>ComponentLibrary>AddComponentLibrary”完成插件的安装；2、在实际工程中使用时，在菜单中选择“插入”，选择相应的元件；3、修改操作面板控件内容，或直接样式覆盖文字、图形等或相对自由拉伸大小；4、更新元器件：当元器件库迭代更新时，在原元器件库所在的storage文件夹中删旧存新（文件名必须一致），后续调用插入最新的元器件，并在草图中打开项目文件（或旧项目文件）。如果您点击软件右上角的“通知”，您将看到“组件库中有可用更新”。长期以来，NutUI一直沿用京东APP风格，本次发布衍生出全新的主题生态——科技蓝。开发者可以根据自己的业务需求选择不同的UI风格。新主题官网新增京东科技主题，结合科技诸多应用场景，快来试用吧。主题切换非常简单，1秒提升技术团队视觉交互体验。建立共同的详细设计标准。建立设计开发对接的基础标准。提高产学研输出对接效率，减少输出工作量较以往的差异，我们在开发层，我们在源码里面的style文件夹下生成了variables.scss、variables-jdt.scss等多个主题文件，内部存放了每个主题的全局variables.scss文件根据标准规则保存通用样式变量和每个组件样式变量。此次主题变量的数量从300+增加到700+，强化了各组件的细化定制能力。如何使用对于开发者，我们保留原有的方法。开发者可以安装无限制的附加插件包，只需修改vite.config或修改taro/config中的variable-jdt.scss主题包名即可。使用方法：https://nutui.jd.com/jdt/#/guide/theme后续规划1.科技可视化速写插件中包含更多组件应用，主题变量跟进。2.NutUI统一图标图标库2021年共建里程碑2019年11月至今，我们完成了NutUI与Find差异的整理（近70项）、缺失高频组件的开发（5）、开发组件级UI自定义（提取700多个样式变量），以及UI的技术版本。开发和启动。开源是大家挑柴的好方法。在此我们欢迎有兴趣的同学参与到NutUI项目的开发中来。建议通过提交PullRequest参与。NutUI的不断迭代，离不开每一位参与助力发展的人。读者对我们的每一次认可，都是对我们最大的鼓励。
