双十一前的一把火 —— NutUI 大促组件火热发布

要须心地收汗马,孔孟行世目杲杲。这篇文章主要讲述双十一前的一把火 —— NutUI 大促组件火热发布相关的知识,希望能为你提供帮助。
源码抢先看: https://github.com/jdf2e/nutui-cat
NutUI-Cat 首页:https://nutui.jd.com/cat/#/
组件预览:

双十一前的一把火 —— NutUI 大促组件火热发布

文章图片

NutUI-Cat 背景
大促业务活动的开发时间相对其他项目来说,是更加紧迫的,上线时间不容推迟。所以我们需要确保在短段时间内高质量交付页面,并保证页面的稳定运行。在这个背景下,通过团队在历年大促活动中积累的开发经验,基于大促活动的业务特点和统一的视觉设计规范,我们梳理并抽离高频率组件,以减少设计和研发的重复劳动,让复杂的场景变得简单,提升大促活动的用户体验和业务的交付效率。
NutUI-Cat 的设计思路
我们的目标是打造一款能够用于大促活动场景下的业务组件库,我们的组件库必须满足下述要求:
  • 支持当下主流技术栈
  • 学习成本低,可快速上手
  • 拓展性强
前端技术发展很快,近几年出现了很多前端技术栈,但是主流技术栈,还是以 React、Vue、Angular 为主。考虑到要满足上述的要求,且要与目前 NutUI 技术栈有机结合,我们选用 Vue 框架进行开发。而大促业务场景需要兼容更多的低版本机型,所以采用 Vue 2.0,后续根据业务、兼容性的需求会升级至 Vue 3。
【双十一前的一把火 —— NutUI 大促组件火热发布】部分业务组件 NutUI-Cat 是基于基础组件库 NutUI 进行二次开发,达到可以直接引用无需二次开发的目的,例如 buttoncountdownnoticebar 等组件。
NutUI-Cat 按照组件功能划分为 12 个模块,目前有 35 个组件。
双十一前的一把火 —— NutUI 大促组件火热发布

文章图片

NutUI-Cat 特点
1. 充足的组件
NutUI-Cat 提供了 35 的组件,覆盖绝大部分大促场景。
双十一前的一把火 —— NutUI 大促组件火热发布

文章图片

2. 统一的视觉规范
NutUI-Cat 遵循 「京东零售-营销大促活动」 原子视觉设计规范,不仅提高了开发效率,还节省了设计师重复工作的时间。保证了活动内部、活动之间都能保持高度的视觉一致性。
双十一前的一把火 —— NutUI 大促组件火热发布

文章图片

3. 详细的文档和示例
我们为每个组件编写了详细的说明文档,从组件的引入方法,组件支持的 API 等都有详细的介绍。为了更直观的介绍组件使用方法以及效果,我们针对每个组件都提供了多个可以即时操作的 demo,从而让用户能更直观地了解组件的各项功能。
4. 灵活的 CSS 后处理器
NutUI-Cat 中的样式默认使用 px 作为单位,用户可以根据自己的习惯进行适配。
5. 扩展性强
支持按需引入和 TypeScript,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
NutUI-Cat 优势
1. 效率提升
降低设计成本、开发成本和沟通成本,在「2021 京东超市中秋节主会场」:对比往年平均节省 2 天/人,效率提升 50%。
2. 复用性广泛
涵盖商品、会场、优惠券等通用组件,和弧形轮播、三级联动等个性化强的组件。
3. 接入智能算法
除了提供组件以外,我们还搭建了一个专门开发大促营销活动脚手架,脚手架是通过 Codmi(统一开发者工具) 定制的, Codmi 是京东零售开发的一套前端开发与构建工具,满足不同的开发场景,拥有灵活的自定义插件开发能力,方便支持定制化需求。
大促营销活动脚手架接入智能框架、智能楼层算法,不用设置用户定投,算法自动分析页面& 用户数据,识别每一位用户的个人点击偏好,动态调整楼层排序,实现页面千人千面展示,达到会场数据和页面效率双提升。
4. 持续优化
使用上有任何问题,可在 Issues 上进行提问,NutUI 团队不断跟进大家提出的问题和反馈,后续我们也会对组件进行持续优化迭代。
应用案例
Cat 组件已应用于「2021 618星店长」、「2021 618产业带」、「2021 京东超市中秋节主会场」等,平均组件覆盖率达到 60%。
双十一前的一把火 —— NutUI 大促组件火热发布

文章图片

未来展望
NutUI-Cat 刚刚起步不久,目前仍存在一些不够完善的地方,接下来主要会根据下面几个方向进行优化:
1. 扩充组件
除了参考原子组件视觉稿,还会从大促模块数据洞察报告、未来趋势等方面进行分析,对点击率、转化率高的组件进行新增和迭代。
2. Vue3 升级
全面升级至 Vue 3,引入下一代前端构建工具 Vite,体验如巧克力一般丝滑打包速度。
3. React 版本
NutUI-Cat 后续会增加 React 版组件库,支持多种技术栈。
我们衷心地期望 NutUI-Cat 的出现能够对您的工作有所帮助。与此同时,我们也期望得到您的支持、反馈和参与,为让大促活动场景开发更简单的目标而共同努力。您遇到的任何问题,可随时在 GitHub 上提交。
来点个 Star ?? 支持我们一下吧

    推荐阅读