中国银行软件中心(西安)  杜敏琪 吴书迪 陈玟慧

  近年来，业务线上化成为各行各业数字化转型的关键。与此同时，随着5G时代的到来，越来越多的开发场景不断涌现，如自动驾驶、车联网、可穿戴智能设备等，这些终端领域的爆发带来大量的前端产品开发需求。在此背景下，如何不断改善用户体验、提升研发效率、保证产品视觉形象的一致性，成为企业数字化转型的重中之重。然而，传统的前端研发工艺并不能很好地支撑产品快速、优质地迭代，一定程度上成为了企业加速扩张的绊脚石。中国银行在前端研发工艺提升方面不断沉淀积累、总结凝练，结合原子设计理论和设计令牌(Design Token)的视觉参数理念，探索出了适合金融业使用的前端设计研发协同工艺——D2C(Design to Code)研发工艺。

  一、传统前端应用设计研发工艺的弊端

  1. 设计研发不协同：开发对U I图进行“临摹”，难以精准还原

  在传统前端开发过程中，组件和页面的样式通常是以“硬编码”的方式实现。一方面，“硬编码”方式对于颜色的变化、字体的大小等设计元素无法做到及时响应，需要将图纸“翻译”成代码，因此视觉设计师在验收开发内容时，往往会发现前端开发结果与原设计图之间存在着或多或少的差距;另一方面，“硬编码”方式的弊端在设计变更时更加明显，上游设计需求的微小变化就会引发下游开发测试变更范围的“雪崩”，例如，在需求中仅修改一个字体大小，由于字体大小的数值通过“硬编码”的方式散落在UI图和代码中的各个角落，因此后续的设计、开发、测试的工作量都将剧增。

  2. 设计规范落地难：产品对设计和开发缺乏硬约束，后者具有较大的“创作”自由度

  在企业的产品或产品矩阵扩大到一定规模后，为了进一步提升用户体验，往往需要针对产品界面设计制定标准规范。然而在传统前端研发工艺下，设计规范只能停留在纸面上，更多起到参考的作用，无法真正地产生约束，用户体验无法保障。

  3. 品牌形象不统一：前端应用设计各自为政，企业品牌视觉形象不能统一

  一方面，对于大部分的金融企业而言，由于业务的需要，企业级前端应用通常来说会存在多个，对于这些应用来说，能够凸显企业特色并统一应用风格并非易事;另一方面，在同一企业新的前端应用研发过程中，相同的业务功能和组件不停地被复写，浪费了许多人力和财力。

  中国银行对集团内所有前端应用的品牌视觉形象都有着具体的设计规范(如图1所示)，然而在新应用研发过程中，传统研发模式“临摹”和“硬编码”的方式无法保障设计规范的落地，一定程度上会对企业品牌视觉形象造成破坏。

  二、中国银行对D2C研发工艺的探索

  D2C研发工艺以Design Token为理念，通过企业级UI组件库(Ocean UI)和风格配置平台(CoDesign)实现。该工艺在一定程度上打破设计人员与研发人员之间的沟通壁垒，提升研发效率和用户体验，解决用户体验的一致性问题，帮助企业大幅缩短设计研发周期，实现快速响应金融市场的变化，助力金融业务高速迭代和品牌扩张。

  1. D2C研发工艺的核心原理

  (1)设计令牌

  令牌(Token)在日常开发工程中用于服务器和用户身份的验证，而在设计体系中，可以理解为封装的视觉样式参数。Design Token通过规定样式参数，使用一套设计人员、开发人员都认可和理解的命名规则标准，将前端开发的样式参数定义成统一的名称。在该设计体系中，每一个Design Token都是一个最底层的原子“样式”，使用它来代替每一个具体的编码值(颜色的16进制色号、元素大小的像素)，由此实现从本质上控制组件、样式属性以及编码之间的对应关系，统一设计人员与开发人员之间的沟通语言。

  某种程度上Token就是一个人的“岗位名称”(如图2所示)，设计参数的值则是“姓名”。UI图或代码对参数的引用可以理解为“企业组织架构”，只需知道“岗位名称”即可，“姓名”则无关紧要。当人员发生变化时，只需替换“岗位名称”和“姓名”的对应关系即可，“企业组织架构”无需变更。

  (2)D2C研发工艺原理

  基于Design Token设计方法，D2C研发工艺的原理可以概括为将UI组件的基础元素抽象化，总结成一套标准化的设计令牌，使设计人员和开发人员之间使用同一种组件描述语言同步和共享工作(如图3所示)。

  一方面，设计层对企业的风格要求进行统一标准制定，以保障同一个企业的前端应用能够凸显专属企业的特点;另一方面，开发层对设计图进行高标准还原和实现，并通过设计令牌进行共同写作，提高代码的可拓展性。设计层与开发层之间的协作如图4所示。

  具体来说，页面中的UI组件都是由颜色、大小、布局位置等信息进行描述的，并且存在大量的相同信息，D2C将所有信息具化为若干Token，也就是说，每一个Token就是一个对颜色或大小等属性的描述，并且设计人员可以对Token进行增删改查的操作，最终设计人员可以得到一个全量的Token资源表(如JSON格式的配置文件)。

  在拥有了资源表以后，设计人员就可以进行下一步的UI组件设计了。在设计时，可以直接选择组件的属性与某一Token绑定。所有组件样式相关的属性都与Token资源表中的特定部分进行关联，以便于设计人员快速查找。Token与组件的属性绑定后，改动便会同步到所有使用了同一Token的组件中，起到统一风格的作用。

  2. D2C研发工艺的实现

  D2C研发工艺由企业级UI组件库、风格配置平台组成。

  (1)UI组件库

  企业级前端设计规范基于现有产品情况，博采众长，制定了页面元素的样式设计规范。为了规范页面设计、提升开发效率，D2C团队开发了一套完全符合企业级前端设计规范的组件库，帮助开发者快速搭建满足企业级设计规范的页面。在企业级UI组件库开发过程中，支持将组件的样式属性与任意一个Token进行绑定。建立了绑定关系以后，一旦该Token的值发生变化，组件的样式可以自动联动发生变化，无需额外人工干预。

  以按钮组件为例(如图5所示)，在组件设计中，按钮的圆角、背景色、字体颜色、高度、边框在规范中都可以根据业务需要进行个性化调整，在组件开发中，它们也都被定义为可以修改的参数，这些参数不仅可以是具体的样式属性值，而且可以是像“brand-1”“text-0”这样具有一定设计含义的Token，每一个Token就代表了一种样式属性，这种方式不仅为组件加入了设计语义，而且为组件间自动共享设计要素提供了可能。

  (2)风格配置平台

  风格配置平台主要提供Web端设计系统，设计人员可通过平台可视化地配置全局样式、组件样式等属性，并生成、发布和共享对应的配置文件。

  如前所述，设计和研发人员之间通过Token进行协作，具体到工程实施环节，Token体现为一套配置文件(如JSON、XML等格式，根据终端类型确定),包含一个全量的资源表和一套组件的配置表。对于没有编码基础的设计人员，手动编写Token配置文件无疑是一项挑战，而风格配置平台则解决了这一问题，为设计人员提供了一个便捷的风格定义工具和资源共享的平台。

  风格配置平台结合图形化拖拽引擎，即可实现拖拽生成页面布局、配置更新页面风格的功能，达到设计稿与页面1：1精准还原的效果，同时生成的页面代码具备一定的可拓展性和可维护性(如图6所示)。

  风格配置平台主要包含配置工具和主题管理两个模块。配置工具模块为设计师提供了在线编辑资源表和组件配置的功能，并且可以实时预览效果，实现“所见即所得”。完成编辑后，设计师可以在平台下载相关配置文件，并发送给开发人员集成到代码工程中。此外，平台可与代码配置库联动，在平台中完成设计并配置代码库(如Git)地址后，可自动提交Token配置文件，并触发代码工程自动构建组包，整个过程中无需设计师手动下载、发送，也无需开发人员介入，真正实现了设计风格的“提交即部署”。这一特点在发生设计变更的时候体现得尤为突出，极大地简化了设计研发作业流程。在主题管理模块中，设计师可以将完成的设计风格保存为自定义的主题。最为重要的是，设计风格可以被上架至主题商店。主题商店中包含了多种多样的主题配置，其来源均为企业各个前端应用(如图7所示)。设计师既可以将自己的作品“开源”，形成企业级设计资产，也可以从主题商店选择合适的主题直接继承使用(也可继承后再次创作)。例如，手机银行通常在银行中是体量最大的前端产品，其内部各模块的页面设计要求风格统一，但很可能由不同研发团队负责。主题商店开放共享、兼容并包的特点完美解决了上述矛盾。只要所有参与研发的团队均从主题商店中继承手机银行主题，即可以在协同开发的同时保证其中各模块风格的一致性。

  3. D2C研发工艺的优势

  D2C研发工艺以Design Token设计方法为“道”，以企业级UI组件和风格配置平台为“术”，从根本上颠覆了前端产品的研发模式，实现了设计研发一体化，具体体现在三方面：

  (1)提升研发质效

  横向来看，D2C研发工艺引入了Design Token这一通用语言，一方面减少了同一产品跨团队设计研发的协同障碍;另一方面主题商店的存在打破了不同产品间设计资源共享的壁垒，有利于企业级设计资产的沉淀积累，形成了“主题定制—发布共享—继承创作”的良性循环。

  纵向来看，D2C研发工艺在页面主题方面连通了“设计—开发—测试—发布”的前端产品作业流水线。与近几年火热的“DevOps”呼应，这条流水线可称之为“DesOps”，即Design和Operations。

  “设计—开发”：引入D2C研发工艺后，设计变更“提交即生效”，无需开发介入，效率得到了质的飞跃(如图8所示)。

  “开发—测试”：页面基础要素的主题由Token确定，而非开发“临摹”，使得对设计稿的还原度大大提升，从而让测试人员从繁琐的字体、颜色等细节中解放出来，聚焦功能的正确性。

  “设计—发布”：D2C研发工艺为页面主题的动态发布打下了基础。节日、生日等特色主题可通过动态下发Token配置文件实现“一键换肤”,省去了开发、测试环节，提升了产品运营效率。

  (2)改善用户体验

  D2C研发工艺本身并不直接解决用户体验问题，但它可以使企业的标准化设计规范更好落地，从而间接保障了用户体验。D2C研发工艺对用户体验的守护主要体现在三个方面：

  一是安全性。通过D2C研发工艺打造的产品具有统一的品牌视觉语言，有助于传递企业品牌信任，给用户带来安全感。

  二是创造性。Token对页面风格、样式既有约束，也提供了创作的自由度。使用D2C研发工艺，可以轻松实现设计主题的环境驱动。例如，页面的色调可根据系统配色、用户偏好，甚至是天气来自动适配(如图9所示)。

  三是无障碍。随着前端应用的深入普及，产品的无障碍设计越发重要，工业和信息化部印发了《互联网应用适老化及无障碍改造专项行动方案》进行推动。采用D2C研发工艺可以帮助无障碍设计迅速、有效落地。

  (3)助力企业数字化转型

  D2C研发工艺具有“协同共进”“求同存异”“开放共享”的特点，这些特点完美契合了当前环境下企业数字化转型所需要的条件，从而达到为企业降本增效的目的。

  从“降本”的角度来看，研发效率的提升、设计资产的积累无疑为企业节约了人力成本和时间成本，使得产品能够专注于功能性的需求，企业能够更敏捷地响应市场变化。企业规模的扩张离不开品牌形象的塑造，从“增效”的角度来看，D2C研发工艺使得企业中的所有产品均使用同一套设计语言，可形成统一的视觉风格，使用户对企业品牌形成连续和统一的认知，因此，D2C研发工艺增强的不只是研发效率，还有企业的品牌效应。

  如今，随着金融业务的不断发展，多终端领域爆发的大量需求使得前端研发的方向变得更加丰富和复杂，在适老化、无障碍、国际化、多终端适配等“以人为本”的政策驱动下，D2C研发工艺逐渐凸显出它独有的优势。有理由相信，未来，D2C研发工艺将充分赋能金融前端领域，不断提升智慧金融能力，拓展服务场景，金融业的前端应用也将与时俱进，更好地服务于用户。