来源：Alibaba F2E公众号
作者：景庄
6 个月前，在 D2 前端技术论上我们向社区分享了《盒马中后台跨端方案》，详细介绍了我们在基于盒马实体零售数字化业务场景中，面向盒马营运数字化系统构建的跨端设计系统——ReX Design For OS。6 个月来，在开发资源极度紧张的状态下，我们持续建设和打磨，今天我们很高兴的告诉大家我们已经将项目的主要代码开源到了 Github，并发布了 beta 版本。
在盒马，不同于传统的中后台场景，场的载体更加多样化，除了典型的办公室场景，还包括门店，仓库，配送站，以及移动中的卡车与电瓶车。在各类作业场景下，不同的作业人员可以借助多样化的作业设备执行作业任务，例如在门店经营作业中，小二可以通过 PC 查看经营报表，使用手机获取消息，使用平板电脑管理餐饮档口，使用扫码枪进行拣货作业，并且各项作业任务通常还会联动各类的打印设备，IOT 设备等等。
围绕这样的业务场景，传统的多端多套设计体系会导致多端分裂的用户体验，另一方面，也会导致高昂的研发成本。基于这样的事实，我们重新思考，并构建了一套多端统一的设计体系，在开发侧通过一套代码，多端可用的方式来支持多端业务研发，让开发者获得多端一致的开发体验，从而有效的提高多端场景的交付效能和用户体验。
面向多端设计，而不是单一设备
传统的中后台场景大多面向 PC 单一场景设计，即使有移动端诉求，也都是单独出一套移动端的设计规范，少有从多端视角来思考统一的设计体系。在盒马的营运场景中，移动设备和手势交互设备已成为员工作业过程中不可或缺的设备。因此，当我们思考中后台设计时，我们就需要站在更高的视角去看跨设备的设计体系 —— 面向多端设计，而不是单一的设备。
在考虑了盒马作业环境特殊性的基础上，我们认为面向多端设计，就需要考虑作业环境和作业类型的差异，实际的用户体验受到作业场景下的环境因素的制约。我们将这些环境因素归结为四大类，分别是人为因素、机器因素、任务因素、现场环境因素。并核心抽取了其中的操作态、屏幕尺寸、交互形态、信息密度、光线环境作为我们构建多端设计系统核心考虑的因素。
有了基本的设计思路后，我们考虑将这种设计思路以公式化的方式与 UI 系统的实现过程进行连接。通过拆解环境因子与设计因子之间的关联，我们可以通过建立基于一定数学规则的配置化系统，来实现面向差异化设备的 UI 规则的自动输出能力。配置化系统产出的设计规则包则可以被前端 UI 组件直接消费，从而实现面向端的 UI 差异化能力。
建立在设计侧统一多端的设计规则的基础上，我们建立了基于环境因子（Environment Token）的设计因子（Design Token）推导系统。
下图：基于基本环境变量的设计规则配置系统
详细内容可以参考：https://alibaba.github.io/rex-design/design
一套代码，多端可用
在开发侧，我们重新起航，实现了一套服务盒马新零售场景基本多端需求的跨端组件体系，提供一套代码，多端适配，多端可用。Rexd 的组件体系不再单一的面向单一设备能力进行实现，而是默认面向多种交互场景，提供统一的设备能力（Viewport, Pointers, Keyboard, Sensors, Network Speed）插拔，从而提供与设备匹配的组件层能力。对于组件使用者而言，不再需要区分 PC 页面开发，还是 Mobile 页面开发，提供一致的 API 理解和编码习惯，从而建立统一的开发心智，降低移动端的介入门槛。除此之外，在工程侧，我们还为多端应用的开发提供相应的应用开发工具的支持。
图：Rexd 组件在不同 Web Viewport 中的演示
详细内容可以参考：https://alibaba.github.io/rex-design/docs/
轻量的主题化逻辑
Rexd 主张只进行框架层的全局配置，从而为多端场景提供更加轻量级和低成本的主题配置方案。我们将整个视觉系统拆分为 色彩（colors）、字号（fontSizes）、sizes（通用尺寸）、space（间距）、边框（borders）、圆角（radii）、阴影（shadows）、海拔（zIndices）等子系统，围绕子系统构建 Design Tokens 体系，并将 Design Token 深度融合到基础样式层方案中，使得基础 Design Token 发生变化的时候整个 UI 系统能够进行整体的变化，从而实现整个系统的主题化过程。
Rexd 的主题化结构
// Rexd 的主题化结构
const theme = {
// 系统色板
colors: { primary, secondary, gray, red, green, yellow },
// 系统字号
fontSizes: { note, body, subtitle, title, subheader, header },
// 系统尺寸
sizes: {
s1,
// ... sx
},
// 系统间距
space: { s, m, l, xl, xxl },
// 系统边框
borders: { none, solid, dashed },
// 系统圆角
radii: { s, m, l },
// 系统阴影
shadows: { low, median, high },
// 系统海拔
zIndices: {},
};Rexd 主题的消费方式
<AppProvider theme={theme}>
<Box color="primary.50" border="solid" borderColor="line.border">hello wrold</Box>
</AppProvider>灵活的多端样式方案
在 Rexd 中，我们设计了一套全新的多端样式方案，用来为组件层提供更加灵活的可变样式能力。传统样式方案大多编写复杂，并且难以有效兼顾样式隔离，动态表达，响应式表达，和 Design Token 传值。基于此，我们选择了 CSS in JS 的方案来提供样式层的隔离性和动态性，并引入 Style Props 和 CSS Variable 的方式来为基础组件层提供更加简单有效的可变样式能力和 Design Token 消费方式。通过这套方案，使得我们可以在 React 中获得一种更加简洁和低成本的样式编写体验。
Style Props 的简单的写法
<Box color="brand.normal" border="solid" borderColor="line.border">
hello world
</Box>Style Props 的响应式写法
<Flex wrap="wrap">
<FlexItem span={{ s: 12, m: 6, l: 4 }}>responsive</FlexItem>
<FlexItem>item</FlexItem>
<FlexItem>item</FlexItem>
</Flex>完整的 Style Props 可以参考：https://alibaba.github.io/rex-design/docs/box
易用的动态表单方案
表单页面在中后台场景，尤其是盒马的营运中后台场景一直是一个占据重要角色，并且需求复杂的页面类型。集团现有主要的表单方案要么实现简单性能较差，要么实现复杂，使用成本高。结合盒马的业务现状，考虑到表单场景的多样化需求，我们建立了一个基于 mobx 的表单方案，提供更简单的上手体验，提供按需渲染能力，轻松应对大表单场景，概念少，学习成本低，尤其在动态表单场景，提供更加轻量级和易于学习和理解的的关联表达能力。
const model2 = new FormModel({ prov: '浙江', cities: ['杭州', '绍兴'] });
function BasicEffect() {
const prov = model2.getField('prov');
const cities = model2.getField('cities');
return (
<Observer>
{() => (
<Form model={model2}>
<FormItem
component="singleSelect"
label="省份(单选)"
field={prov}
componentProps={{ dataSource: ALL_CITIES.map((item) => item.prov) }}
/>
<FormItem
component="multiSelect"
label="城市(多选)"
field={cities}
componentProps={{
dataSource: ALL_CITIES.find((item) => item.prov === prov.value).cities,
}}
/>
<Form.Effect
watch={prov}
effect={() => {
cities.value = [];
}}
/>
<ValuePreview />
</Form>
)}
</Observer>
);
}还会有更多
上面介绍的内容只是 Rexd 众多特性中的一小部分，目前我们正在持续打磨 Rexd 产品，一方面服务于盒马的营运场景，另一方面我们会持续推动 Rexd 在 Github 上的社区化运作。这些特性还包括：
- 为移动设备特别优化的响应式能力和自适应交互
- 默认支持深色模式（Dark Mode），并支持多色模式嵌套使用
- 基于代码转换实现的小程序兼容方案（基于 Remax 实现）
- 灵活便捷的全新弹层方案（https://alibaba.github.io/rex-design/docs/overlay/）
- 性能极为强劲的表格方案（https://alibaba.github.io/rex-design/docs/pro-table/）
- 核心组件的可访问性支持
- 更加现代化的布局能力支持（Grid Layout）
- 更加友好的手势操作支持
期待
我们的目标是面向社区将 Rexd 打造为更加灵活可用的多端设计体系，在设计侧建立更加灵活可用的设计规则配置能力和配套的设计工具，在技术侧提供更加可用健壮的基础组件体系，为有多端开发需求的中后台业务场景提供低成本的移动化能力。通过将项目开源到 Github，我们也希望更多的得到社区的反馈，帮助我们建设更加灵活，易用，移动端友好的能力。
最后感谢 Rexd 团队的各位同学，他们是 夜沉、飞超、云思、景庄，以及设计师同学 区刀、肖菡、吴姗、吴慧等等。
