6

京东物流风格 NutUI 发布了

 3 years ago
source link: https://zhuanlan.zhihu.com/p/166637703
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

京东物流风格 NutUI 发布了

京东物流目前在 M 端的业务越来越多,如公众号、移动官网。这对 M 端的 UI 框架要求就越高,组件丰富、接入友好,稳定性高,拓展性及性能上都有较高的要求。自研的 pandora-mobile 目前看不符合现有需求,相较而言 NutUI 更适合物流侧的业务研发需求,经内部讨论决定协同物流侧用户体验部联合 NutUI 团队打造出物流视觉规范的 M 端 UI 框架。

JDC & 京东物流技术发展部经历了为期一个多月的紧密合作开发迭代,NutUI-JDL 终于和大家见面了。作为继 2019 年 1 月 15 日 NutUI 2.0 正式发布以来的第二次大版本发布,NutUI-JDL 仍坚守着【基于京东风格】同时在产品的功能、体验、易用性和灵活性等各个方面进行了全面提升。

需要注意的是,NutUI-JDL 版本是 NutUI 中的一个生态,目前我们两个生态(NutUI、NutUI-JDL)会同时更新维护,发现问题我们还是保持第一时间迭代修复,请大家放心使用。

NutUI-JDL 的目标是让移动端的开发更加容易,基础组件交给我们让开发人员更加专注于业务,提升研发效率。

设计语言升级

呼声最高的设计资源对外开放,并且引入优质的相关技术沉淀文章

  • 随着京东物流移动端业务的拓展,设计师不仅仅需要完成业务需求,也需要思考设计的价值。设计师也不应该陷入重复的设计中,消耗设计时间,降低工作效率,所以推行组件化的设计模式迫在眉睫。
  • NutUI-JDL 京东物流版是一套基于移动端的组件库,减少冗余组件,从实际项目入手,梳理出最通用的 30+ 基础组件,覆盖多场景,体积小巧、设计精美,提供了全新的设计以及交互体验,提高界面模块化的通用程度。
  • 新版组件库从 设计语言基础组件 两大模块,重新定义了布局、颜色、图标、字体、间距和通用组件规范,提升了 UI 展示及交互方式,建立了新的设计标准,为推动物流侧移动端产品的体验优化和迭代带来了高效路径。

更小的体积

在 NutUI v2.2.6 之前,因底层的 WebPack 配置老旧、版本较低、设计不足 这大大增加了造成构建出的 npm 包大小达到了 17.4 MB, 2020Q2 通过我们不断打磨 @nutui/cli 接入后,将 npm 包大小减少到了 7.58 MB,大幅提升了性能及可配置项。同样我们在 NutUI-JDL 版本中也统一此插件。

  • Field 输入框(将原来 Input、TextBox 融为一体,灵活配置)
  • ImagePreview 图片预览(支持滑动左右切换)
  • Steps 步骤条(丰富多样的步骤条)
  • Card 卡片(全新的卡片组件)
  • Scroll 下拉刷新上拉加载(单独抽离,降低耦合性)

组件重构升级 30+

  • Toast
  • ActionSheet
  • Dialog
  • Skeleton
  • Popup
  • NoticeBar
  • Badge
  • TabBar
  • SideNavBar
  • NavBar
  • Avator
  • LeftSlip
  • Switch
  • Stepper
  • Calendar
  • Picker
  • Uploader

本次版本 NutUI-JDL 与 NutUI 2.x 属于不同生态,一个是基于 JD APP 视觉规范、另一个是 JDL APP 视觉规范,对应的 npm 包分别是 @nutui/nutui@nutui/nutui-jdl 我们建议您为了尽可能简化升级,直接采用以下命令进行安装使用:

npm install @nutui/nutui-jdl -S

详细的使用文档请参考 https://nutui.jd.com/jdl/#/start

  • 四级地址级联组件
  • 图片懒加载(Lazy Load)

众人拾柴火焰高,在这里我们非常欢迎感兴趣的同学参与到 NutUI 项目的开发,建议通过提 Pull Request 的方式参与,通过 Code Review 之后,我们会合并你的代码。

NutUI 的持续迭代,离不开每一位参与帮助开发的人,开发者每一次对我们的认可,就是对我们最大的鼓励。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK