共计 1592 个字符,预计需要花费 4 分钟才能阅读完成。
前言
京东物流目前在 M 端的业务越来越多,如公众号、挪动官网。这对 M 端的 UI 框架要求就越高,组件丰盛、接入敌对,稳定性高,拓展性及性能上都有较高的要求。自研的 pandora-mobile 目前看不合乎现有需要,相较而言 NutUI 更适宜物流侧的业务研发需要,经外部探讨决定协同物流侧用户体验部联结 NutUI 团队打造出物流视觉标准的 M 端 UI 框架。
JDC & JDL 团队经验了为期一个多月的严密合作开发迭代,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+
- 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 属于不同生态,一个是基于 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 的继续迭代,离不开每一位参加帮忙开发的人,开发者每一次对咱们的认可,就是对咱们最大的激励。