OKee Mobile 组件库的超能力

前端 @ 北京字节跳动科技有限公司

OKee Mobile 开源站点地址:okee.oceanengine.com/mobile/vue/…

GitHub :github.com/oceanengine…

前言

什么是 OKee?“OK”这个词的背后是 “All Correct” ,这正是要实现的目标——坚持做正确的事,并把事情做得更好,同时足够简单,容易记忆。

OKee Design 的口号是 “Make More OKee,让一切变得更好”,成就极致的商业体验,始终坚持追求极致,多元兼容,开放共赢的理念。

而今天,我要向大家介绍的就是 OKeeDesign 生态首个开源的移动端组件库 OKee Mobile

欢迎大家使用和提出建议。

有人会问,市面上都有这么多移动组件库了,为什么还要再写一个移动组件库呢?下面容我细细道来。

当我们接到一个业务需求,并定下技术栈后,我们就会从众多的组件库中选择一个为我们服务。很多时候,在调研了众多的组件库后,我们依然举棋不定,因为没有一个组件库能够匹配自己的业务需求。如果勉强选择了一个不合适的“他”,会让我们在接下来的开发中产生大量的无用功,比如覆盖样式,或是引入第二个组件库。

为何会产生这样的问题呢?

因为不同的业务,甚至不同的项目都有独特的交互风格及 UI 样式。而组件库都是从业务中衍生的,如果组件库的定位与你的业务不切合,那总会有各种各样的问题。

而这次的主角 OKee Mobile 的定位是,不仅能服务于 ToC 业务,还覆盖了常见 ToB 的场景,并深耕于数据展示场景。组件库基于一套完整的设计概念,将组件拆解成一个个 design token,让你能够优雅地配置自己的产品。

现阶段,OKee Mobile 提供了 36 个组件,已覆盖大量业务,并在持续演进!

下面简单聊聊,它有什么不同?

换肤体验

  1. 我们提取了一套完整的全局 less 变量控制组件的整体风格。包括颜色、圆角、字体、动画等属性。截取部分样式展示如下:
@primary-color: @blue;
@primary-color-1: ~`colorPalette('@{primary-color}', 7) `; 
@primary-color-2: ~`colorPalette('@{primary-color}', 6) `; 
@primary-color-3: ~`colorPalette('@{primary-color}', 5) `;
@primary-color-4: ~`colorPalette('@{primary-color}', 3) `; 
@primary-color-5: ~`colorPalette('@{primary-color}', 1) `; 

@z-index-1: 1;
@z-index-2: 3;
@z-index-3: 5;
@z-index-4: 7;
@z-index-5: 10;

@border-radius-1: 2px;
@border-radius-2: 4px;
@border-radius-3: 8px;
@border-radius-4: 12px;
@border-radius-5: 16px;

@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
复制代码
  1. 提取了单个组件的设计元素,扩展了单个组件的定制能力。以下展示按钮的设计元素:

Lark20210721-155533.gif

一、编译时换肤

为了降低设计师与开发的沟通成本,减少因而产生的对组件的二次开发。

我们正在开发一套主题配置平台,让设计师有能力自行配置组件库主题,并在开发阶段前,导出一套符合产品风格的组件库皮肤。此平台后续会开放出来!

而这个配置平台的核心功能,已经在文档中内置了。

在配置界面中调整对应的色值,例如调整 Primary 的颜色,在右边即可实时预览展示效果。

色值变更后,使用到此色值的组件即会调整。

最后,点击“导出”,把配置好的变量导出为 var.json,并在项目的 less-loader 中覆盖,即可完成主题配置。

const vars = require('./config/theme/var.json');

module.exports = {
  rules: [
    {
      test: /.less$/,
      use: [
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
            modifyVars: vars,
          },
        },
      ],
    },
  ],
};
复制代码

二、运行时换肤

我们使用的是 less 变量转 css 变量的策略实现的在线换肤。

也就是说,在开发时,我们不需要手写 css 变量,只需在文件打包时,提供一个配置文件,标明哪些 less 变量是需要编译成 css 变量。我们的编译插件就会自动收集依赖于它们的 less 变量,全部替换成对应的 css 变量。具体过程如下,

  • 在 less 编译阶段,将标记的 less 变量声明成 css 变量,挂在 :root 伪类下。
  • 将使用到这些变量的属性值转换成对应的 css 变量。
  • 在换肤时,更改 :root 下的 css 变量值,就能实现在运行时修改全局风格,及组件特定风格。

值得注意的是,需要限制 css 变量的数量,否则会对页面性能有明显的影响。

核心能力

上面所说的换肤体验,能够给业务提供优秀的适配性。

而仅仅有适配能力是远远不够的,我们还需要有完备的基础组件,并基于业务场景对组件进行一定程度地扩展,增强组件的交互能力,对组件进行不断地打磨,最终提升产品的使用体验。

下面简短介绍一个组件,它是数据类产品的支柱组件,却常在移动端被忽略,它就是 Table。

说到这里,大家往往会提起移动屏幕太小,原本想用 Table 展示的数据只能转换成其他形式来展示。我承认,在 ToC 场景下,展示信息是可以聚合在诸如列表之类的轻型组件上的。

但在 ToB 场景下,真实的需求往往就是展示许多聚合性不那么强的数据,而且列数很多。那 Table 无疑是有它的舞台的,问题的关键变成了交互是不是足够好。

下面,看一看 OKee Mobile 的 Table 展示

Lark20210721-160204.gif

总结

OKee Design 体系涵盖所有主流技术栈下的 PC 及移动组件库、图表库、图标库、插画库,主题配置平台,后续惊喜不断,敬请期待!

想聊的点已经和大家聊完了,接下来贴上组件库的 GitHub 链接,欢迎大家参与开源,无论是共建还是提问题,都可以在 issue 中联系我们,感谢阅读。

同时也欢迎大家留言,我们会针对大家的问题,撰写后续的文章。

文章分类
前端