设为首页
收藏本站
开启辅助访问
切换到窄版
用户名
UID
Email
自动登录
找回密码
密码
登录
立即注册
快捷导航
门户
Portal
论坛
BBS
搜索
搜索
本版
文章
帖子
用户
匠说电商
»
论坛
›
国内电商运营
›
京东运营
›
京东物流风格NutUI发布了
返回列表
查看:
817
|
回复:
0
京东物流风格NutUI发布了
[复制链接]
堇陌汐影
堇陌汐影
当前离线
积分
38
248
主题
248
帖子
38
积分
新手上路
新手上路, 积分 38, 距离下一级还需 12 积分
新手上路, 积分 38, 距离下一级还需 12 积分
积分
38
发消息
发表于 2020-8-6 05:27:19
|
显示全部楼层
|
阅读模式
言
京东物流目前在 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 复制代码
详细的使用文档请参考 nutui.jd.com/jdl/#/start
后期规划
四级地址级联组件
图片懒加载(Lazy Load)
手风琴
开源共建
众人拾柴火焰高,在这里我们非常欢迎感兴趣的同学参与到 NutUI 项目的开发,建议通过提 Pull Request 的方式参与,通过 Code Review 之后,我们会合并你的代码。
以上
NutUI 的持续迭代,离不开每一位参与帮助开发的人,开发者每一次对我们的认可,就是对我们最大的鼓励。
组件
,
我们
,
设计
相关帖子
•
云闪萌橙:新手卖家必看拼多多直通车运营技巧
•
无数据不淘宝,如何通过数据化运营挖掘店铺爆款
•
怎样获取亚马逊页面上所有商品主图,批量保存亚马逊整页商品图片 ...
•
如何快速下载亚马逊的产品主图,亚马逊商品图片批量下载 ...
•
拼多多该如何打造爆款?
•
闲鱼发布产品技巧及规则,遵循“一品七点”技巧提升首发权重,让宝贝速上首 ...
•
10天新品迅速起爆,单品访客从0快速突破3000+,实操案例分享 ...
•
企辰:拼多多运营的几个核心步骤
•
企立方集团:拼多多运营前期要怎么做
•
如何保存淘宝天猫买家秀图片,淘宝怎么收集保存评论晒图 ...
回复
使用道具
举报
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
手机版
|
小黑屋
|
匠说电商
快速回复
返回顶部
返回列表