FENGFAN

RDesign 设计组件库｜智慧园区平台 Web 端设计

2023 年 4 月

在2023年第一季度，我负责 Rdesign Web设计系统 Figma 设计组件库的搭建，Rdesign 是为润信数据旗下自研产品提供的一套统一Web界面规范，应用范围包括但不限于联物云Rlink（物联网平台）、物管+Rwork（工单巡检系统）等。通过这套设计系统，保证产品设计、交互体验、开发的一致性，提升设计师工作效率。 Rdesign Web 设计系统在 Element UI 设计系统为基础上，修改了部分组件的设计，以满足润信自研产品的需求。

为什么我们可以做？

经过数次对不同产品的 UX/UI 优化后，润信旗下多个 Web端产品 UI 设计已趋于统一，形成了一致的设计规则和沉淀了统一的组件、文字颜色、布局样式。

有 ElementUI 设计组件库作为基础，无需从0开始。

为什么我们需要做？

在设计过程中，UI设计师们存在跨团队、跨产品的工作，且没有组件库可以使用，导致个别组件样式未能达成100%一致。

随着集团旗下各园区的发展和智慧园区的打造，针对智慧园区产品需求在不断增加。经过观察，新的需求基本上能通过沉淀下来的各类 UI 组件、样式和页面布局进行设计。我们希望通过设计组件库来提升 UI 设计稿的输出效率。

实践展示

组件库上线后，UI 设计师的工作得到了质的飞跃，他们不再需要核对作图是否符合规范，组件库就是基于润信 Web 产品设计规范而制定。更重要的是，组件库使得原来大量的绘制操作变成了高效的拖拉拽、开关和选择等简易操作。

大量的表单和列表存在在我们的润信智慧平台产品中，基本每一次新的需求、产品功能和业务修改都涉及到表单和列表UI。
如下方案例，演示了UI 设计师将产品经理提供的列表原型演变成 UI 设计稿的高效过程。

思考

组件库是一个强大的提效工具，对于设计师和开发来说有了统一的标准，输出的效率也会大大提高。对于团队来说能很好的提升产品的品牌感和体验，尤其在Figma强大特性的帮助下，将发挥更大的作用。
然而，设计系统（组件库和规则）并非终点，而是一个个的新起点。在未来，我们将继续总结归纳平台各产品的互通点、设定符合新旧业务的交互设计规则，不断优化和完善组件的细节，将组件库的特性发挥到最大。