文/ 大文娱事业群 优酷 - 罄天、阿里淘系 F(x) Team - 苏川

Minion 是优酷前端团队自研的智能物料生成平台，平台结合 imgcook 、lowcode 等技术打造了一条新的物料开发链路，结合自身业务，适配优酷研发生态，区分研发/非研发双视角，生成可搭建可迭代的物料。

Minion 接入了设计稿生成代码平台 imgcook 提供的 Sketch 插件图层解析能力、布局生成 Open API ，自动根据设计稿产出 UI 部分低代码 schema 片段，用于在 lowcode 平台进行后续开发和发布， 平台中提供了研发/非研发双视角让设计师和前端都可以使用。

在Minion平台，设计同学可基于imgcook的智能识别，集团的低代码能力独立研发、上线业务组件，做到整个过程前端的 0 投入。同时，通过与营销搭建平台其他模块的整合，生成独立的通用玩法模板，做到业务的开箱即用。目前，整套方案已覆盖优酷 FY21 春节、双十一、大剧热综等场景。在 OTT 大屏模板生产上，通过引入智能化的能力提升了客户端模板的生成效率，在保证低端设备用户体验的基础上，将原有依赖客户端发版的部分业务周期缩短为天级、甚至小时级。同时，通过在大屏桌面引入活动能力，进一步缩短了原有营销场景的业务转化链路，提升了业务的转化效率。

使用情况

• 时间：2020.5 -至今
• 使用对象：设计师、前端开发、TV端客户端研发
• 使用场景：多数为小屏 UI 卡片类模板和大屏客户端模板代码生成，以及少数的小屏复杂业务组件代码生成
• 场景提效：设计模式前端 0 投入，研发模式提效 40%

使用场景

智能物料生成平台 Minion 提供了设计/研发双模式以适应不同场景与用户身份，同时与投放系统相整合做关键场景的流量精细化与用户召回。?

• 设计模式：在优酷站内外场景，设计同学无需前端干预的情况下基于 imgcook 提供的能力从设计稿产出多端、多状态组件并发布上线，覆盖常见内容运营场景。在大屏 OTT 场景，提供产出通用模板的能力，并与客户端 CloudView SDK 整合，提升大屏终端应用、模块迭代效率。
• 研发模式：以 UI 精细化来减少营销场“转场”的流量折损，提升目标转化；构建 UIBuilder，将 low-code 与 pro-code 结合，提供与研发链路整合的能力

Minion 平台的产物目前分为两种，一种是用于营销场搭建的组件物料，比起产出页面更适合 C 端的场景，和 procode 开发出的物料一样可升级迭代，业务方在使用时完全无感。另一种是统一规范的数据，通过与投放系统的整合做到分人群的精细化投放。?

以下是一些产物示例：UI 卡片类模板（小屏），客户端模板（OTT），复杂业务组件（偏少）

• UI卡片类模板（小屏）：

• 小屏复杂业务组件

• 大屏客户端模板（OTT）

落地效果

• 优酷小屏研发场景，设计同学可借助Minion平台独立研发、上线组件，同时通过沉淀搭建平台通用营销玩法模板方式，做到业务开箱即用。目前基于此方案生产的线上模块，已覆盖优酷 FY21 双十一、寒假、春节等大型战役。
• 优酷 OTT 客户端模板生成场景，通过模板的智能生成、手动校准、一键发布即可完成业务迭代，无需等待长周期的客户端发版，原有部分业务迭代周期从周级缩短为天级

技术方案

小屏营销场景整体链路

Minion 平台通过 imgcook 提供的 Sketch、Photoshop 插件获取模块元数据，然后在 Minion 平台进行视觉还原。通过与low-code 模式相结合，将模块元数据转化为组件层级树，并提供可视化实时调整与预览能力。Minion 平台除提供属性调整和变量绑定能力外，还提供了基础原子逻辑注入功能，如常见的跳转、收藏、预约等。通过视觉调整、逻辑调整后即可获取完整的模块数据。在模块的输出形式上，目前提供两种模式，即出码模式和数据模式。

出码模式通过转码插件将模块数据转化为源代码，然后完成自动建仓、代码推送、发布、注入搭建系统等后续链路，一系列流程完成后在搭建系统中即可使用该模块来搭建页面并完成线上投放。数据模式下，通过统一多端数据格式，投放系统结合，提供多端解析器（如小屏/OTT）等诸多手段实现端、场景的差异化投放，达到关键场景的流量精细化。

OTT 客户端模块研发链路

Minion 平台除应用在前端场景，也在逐步向 OTT 客户端场景延伸，客户端应用链路主要是通过 imgcook 来完成模板生产。?

状态映射上，将 Minion 的多画板能力与客户端焦点态和非焦点态进行关联，单画板的属性调整即对应于客户端指定视图的属性调整。?

布局方式上，通过 low-code 语义化客户端布局模式（该模式适用 OTT 层级不多的场景），保证在模板尺寸变化下视图的自适应能力。?

模板预览与投放上，结合优酷大屏阿丽塔真机平台，实现OTT大屏实时预览能力，并与下游投放系统打通，实现从模板生产到模板投放的完整链路建设。?

OTT 客户端模块研发链路图

目前 OTT 客户端模板研发链路正在逐步完善。在进一步提升 D2C 在大屏识别准确度的基础上，通过整合下游系统、完善大屏模板生产链路来提升模板生成效率与用户体验，进一步实现大屏客户端模板在更多场景的渗透。

研发步骤

Minion平台组件生产流程

第 1 步：新建组件

在 Minion 平台新建一个组件，如果是开发就进入开发模式，否则进入设计模式。?

第 2 步：使用 imgcook Sketch 插件导出图层解析后的 JSON Schema

从 imgcook Sketch 插件 导入数据，选择设计稿尺寸并解析，如果组件需要多状态，添加多个画板即可。?

第 3 步：配置、预览、发布

解析后可设置搭建配置变量并预览、发布、并开始搭建系统后置流程。?

接入的 imgcook 能力

1、Sketch 插件解析能力

imgcook首页 下载 imgcook Sketch 插件安装，使用 Sketch 插件导出图层解析后的 JSON Schema。

2、布局生成能力

Minion 是一个智能物料生成平台，借助 imgcook 提供的布局生成接口能力将 Skecth 导出的数据转化为低代码规范 Schema 片段，然后设计器再进行深加工。

3、自定义 DSL 生成多端代码的能力

因为需要在 Phone、PC、Pad、OTT 及 MiniApp 多端投放，除了使用 imgcook 官方提供的 DSL，我们还根据 imgcook DSL 的开发指南 自定义了几个 DSL，支持生成多端代码。

• 优酷 OTT 侧 Rax 开发规范
• Rax 好莱坞新协议规范

可借鉴的亮点

• 设计规则：和设计师合作，遵循 imgcook 设计稿规范并提供部分常见私有打标规范与平台解析能力。
• 数据记忆能力：设计稿改动并重新识别后，平台侧已有部分调整能提供记忆能力，防止数据丢失。
• 常见行为内置：提供内容运营场景常见用户行为，如收藏、预约、跳转等能力。
• 提供设计研发双模式：对应无代码和源码两种生产方式，在设计视角中屏蔽多余的配置干扰，为非研发同学提供简洁易用的操作环境。
• 提供画板能力：对应多种状态下的 UI 视图，使一个模块还原出所有状态。
• 数据与出码两种模式：支持 Phone（H5/Rax）、PC、Pad、OTT 及 MiniApp 各端组件生产。

接入团队

优酷团队

• 前端：琰玉、罄天、芙乐、鸿薇、康康等
• 设计师：佳妮、张芮、慕琰