关于移动端开发:移动端UI一致性解决方案

1. 背景

1.1 行业现状与问题

很多技术同学都晓得，挪动端往往比拟偏重业务开发，这会导致人员规模不断扩大，我的项目复杂度也会持续增长。而为了满足业务的疾速上线，很难去落实对立的设计规范，在开发过程中因为 UI 不足规范导致的问题一直凸显，具体体现在以下 4 个层面：

• 设计层面 ：因为 UI 不足标准化设计规范，在不同 App 及不同开发语言平台上设计格调不对立，用户体验不统一；设计资源与代码均不足对立管理手段，无奈实现积攒积淀，无奈适应新业务的开发需要。
• 开发层面 ：组件代码实现碎片化，存在屡次开发的状况，品质难以保障；各端代码 API 不对立，保护拓展老本较高，变更主题、适配 Dark Mode 等需要难以实现。
• 测试层面 ：反复走查，频繁回归，每次发版均需验证组件品质。
• 产品层面 ：版本迭代效率低，版本需要吞吐量低，不具备业务的疾速拓展能力。

1.2 外卖挪动端 UI 一致性状况

近来年，美团外卖业务开始由发展期走入成熟期，这更要求对细分场景的疾速迭代。目前，外卖平台承载了餐饮、商超、闪购、跑腿、药品等多个业务品类，用户入口则笼罩了美团 App 外卖频道、外卖 App、公众点评外卖频道等多个独立利用。因为后期偏重需要的疾速上线，设计层面不足标准化的标准束缚，UI 设计格调不对立，也存在屡次开发的状况，目前的保护老本较高，在开发过程中逐步暴露出一些问题，次要体现在以下三个层面。

指标一：挪动端 UI 问题统计

在 Ones（美团外部研发需要管理工具）中，单个版本的 UI 适配问题占比超过总 Bug 数的 11.82%，亟待优化；交互适配问题在绝大多数版本中均有呈现，肯定水平上反映了其产生的普遍性。

指标二：需要承接率数据统计

用户侧 UI 需要吞吐率达 18.3%，目前用户侧 UI 需要吞吐率较低，亟待解决。

指标三：需要入版状况统计

目前各版本 UI 同学都会提出肯定数量的视觉优化需要，但理论入版量仅为三分之一左右，未上线的起因均为 RD 开发工夫有余。

从久远角度来看，随着固有业务渗透率的一直饱和，将来一段时间内，美团外卖还有开辟新业务、进入新市场的需要，如国际化 App、闪购 App 等，须要挪动端可能高效地组建新业务 App。在此背景下，挪动端具备疾速调整适应的 UI 展示能力是重中之重。为了达到上述指标，须要 PM/UI/RD 独特保护一套设计规范，在产品上对立格调，在源头上做到对立设计，并在代码中对立进行实现。

1.3 UI 一致性我的项目

基于上述开发工作中的切实痛点，以及将来可预感的挪动端能力需要，迫切需要一套对立的 UI 设计规范，以此积淀设计格调，建设对立的 UI 设计标准。

UI 一致性我的项目自 2019 年 5 月份被提出，是外卖 UI 设计团队与研发团队的共建我的项目，该我的项目是为了改善用户端体验一致性，晋升多技术计划间组件的通用性和复用率，升高整体视觉改版的研发老本。通过抽离成熟的业务场景，建设可提供高质量、可扩大、可对立配置的基于 Android/iOS/MRN 的组件代码库，使之具备反对多业务高层次的代码复用能力，进而进步 UI 业务中台能力，使我的项目放弃高度一致性。

为了帮忙团队晋升产研效率，外卖技术成立了袋鼠 UI 共建项目组，将门户建设、工具链建设以及组件建设对立治理统一规划，并将工具链的品牌确定为“积木”，此前咱们曾经写过两篇文章《积木 Sketch Plugin：设计同学的贴心搭档》、《积木 Sketch 插件进阶开发指南》介绍过积木相干的内容，本文次要介绍 UI 一致性。

UI 一致性是绝大部分研发团队面临的共性问题，大家对落地设计规范，进步 UI 中台能力，晋升产研效率具备强烈的诉求。通过 UI 一致性的建设，不仅能够在品牌上实现体验降级，更能够全面提高产研效率，为业务的疾速迭代提供无力反对和无效保障。对立的品牌符号、品牌特色，有助于加深产品在用户心目中的印象。对立的用户界面和交互模式，能帮忙用户加深对产品的相熟感和信任感。而一个好的设计语言能够在体验上为产品加分，也可能更好的发明一致性体验。

2. UI 一致性整体计划

为了帮忙更多的业务部门定制合乎一致性准则的专属设计格调，外卖技术部在实践中一直总结经验，开发了一套通用的 UI 一致性解决方案。该计划通过 UI 一致性工具链落地我的项目建设，并打造一整套的闭环 UI 开发流程，目前曾经获得了肯定的成绩，以下系具体计划的介绍。

2.1 计划全景

外卖 UI 一致性套件由积木工具链、代码组件库、定制化设计云合作平台以及文档化阐明（官网）四局部组成。

1. 积木工具链 ：通过建设蕴含雷同设计元素的对立物料市场，PM 通过 Axure 插件拾取物料市场中的组件产出原型稿；UI/UE 通过 Sketch 插件落地物料市场中的设计规范，产出符合要求的设计稿。将来，心愿通过高保真原型输入，能够给中后盾我的项目、非依赖体验我的项目提供更好的服务体验，赋予产品同学间接向技术侧输入原型稿的能力。
2. 代码组件库（Android、iOS、MRN）：设计稿中的组件与 RD 代码仓库中组件一一对应。
3. 文档化阐明 ：官网详细描述了代码组件库的集成形式、组件的应用办法，升高开发上手难度，只须要了解接口和职责即可进行业务开发。
4. 定制化设计云合作平台 ：与美团外部的印迹团队（云合作平台）合作开发，在 RD 的设计稿中标注了哪些是代码组件库中已有的元素，防止反复开发，同时关联了官网中该组件的应用阐明，是代码组件库与官网的纽带。

2.2 接入指南

1. 设计师逐渐将设计语言积淀为设计规范（包含组件、色彩、字体、图片等）上传至官网供整个设计团队查阅，同时将其量化并内置于积木 Sketch 插件中；开发同学则将其代码化，针对 Android/iOS/MRN 三端进行组件库开发。
2. 设计师应用积木 Sketch 插件绘制设计稿，能够保障设计元素均从既定的设计标准中获取，产出合乎业务设计规范的设计稿，而代码组件库中也有对应的实现。
3. 绘制实现的设计稿上传至印迹云合作平台，交付开发同学进行设计稿还原。
4. 开发同学拿到设计稿后，就能够晓得本次需要哪些组件已内置于代码组件库中，并能够点击设计稿中的链接，间接查看组件的应用阐明。

2.3 计划落地

尽管 UI 一致性在落地上会减少开发同学不少的工作量，推动一致性建设也是一个艰巨的工作，因为老本较高，且无奈量化评估收益，很多团队最终未达到预期成果，但一旦无效运作起来后，团队将取得丰富的回报。UI 一致性的建设须要设计者对现有状态有足够的意识，对业务有充沛了解，以及优良的设计能力，同时还要一直地进行实际和优化。为了保障一致性我的项目的胜利落地，防止“大功告成”，咱们制订了一系列的推动措施：

1. 我的项目小组不能脱离日常需要开发工作。这样能够保障设计师所积淀的设计元素始终来自于最新的业务场景，同时我的项目产出能够疾速利用到最新的版本中得以验证。
2. 优先选择受视觉因素影响较大、投入产出比高的模块场景进行革新，化繁为简，确定最小验证闭环（MVP，Minimum Viable Product），在实践中一直优化，进而跑通整个流程。
3. 我的项目推动由 UI 同学按版本提出需要，挪动端排期并落地施行，由 UI 对立验收。
4. 建设阶段性指标，并实现最近三期工作的具体布局，定期复盘实现状况，保障我的项目的继续推动。

2.4 一致性成绩

通过一段时间的 UI 一致性建设，在资源一致性方面，外卖 App 团队曾经实现了近百个 Iconfont 的替换工作，无效减小了安装包的体积。在组件代码库建设方面，实现组件替换三十多处，中等业务需要均匀节约 3pd 人力；在工具链方面，依据 UI/UE 提供的数据，对于强依赖设计资源的需要，在应用积木 Sketch 插件后，提效可能达到 30% 以上，对于 UI 资源依赖不强的流程需要，均匀提效能够达到 50% 以上。

3. 设计体系建设

细化来看，UI 一致性整体计划次要分为两个局部，一个是设计体系建设，另一个则是工具链建设。设计体系建设是根底，次要是设计师积淀设计格调，建设对立的 UI 设计标准的工作，而工具链建设则是撑持，是开发人员通过开发一系列的工具将开发过程闭环，实现设计体系落地。

3.1 外卖 DPL

DPL（Design Pattern Library）是一份面向 UED 设计人员的文档化阐明，形容了设计模式库的标准以及利用场景等，外卖 DPL 次要包含组件搭建标准以及资源一致性两局部。DPL 的反面是技术实现，个别体现在 Android/iOS/RN 代码框架中，比方阿里的 FusionDesign 库、腾讯的 QMUI 库等，这些封装好的代码组件面向程序开发人员。在未建设 DPL 模型之前，开发同学拿到设计稿进行视觉还原后，须要批改屡次，能力最终通过设计师的验证，极大影响了开发效率，还升高了需要吞吐率。

而通过 DPL 实现设计 - 开发流程的闭环，UI 同学因为设计规范的标准化，可使出稿效率、走查效率显著晋升，反复组件甚至无需走查；对于 RD 同学来说，组件库中的组件在配置正确的状况下，因为曾经通过了历史版本的测验，适配问题呈现较少，无需反复进行视觉的修改；对于设计团队来说，优良的设计体系具备包容性且充斥生命力，好的设计模式库可能帮忙实现规范化，从而加重界面开发的工作量，进步一致性；而对于设计师来说，建设 DPL 有助于缩小误用、滥用以及有效的翻新。

3.2 组件搭建

在长期的版本迭代中，随着性能的一直减少以及 UI 的继续改版，新旧款式混淆，保护极为艰难。设计师通过将页面走查后果演绎梳理，制订设计规范，从而选取复用性高的组件进行组件库搭建。通过搭建组件库能够进行标准管制，防止控件的随便组合，缩小页面之间的差别；组件库中组件满足业务特色，同时能够应答一直变动的环境，具备云端动静调整能力，能够在标准更新时进行对立调整。

在不影响需要实现以及设计成果的前提下，只有在方案设计中尽可能应用组件，晋升组件设计稿中的覆盖度，才可能真正通过组件库来提效。而除了在新的需要中应用组件，还须要将已有页面内容尽量替换成组件，能力防止页面降级时的反复批改问题，真正进步产研效率。在进行组件库建设时要留神以下几点。

抉择适合粒度

组件的粒度抉择曾是困扰咱们很久的一个问题，尽管有构建设计零碎的外围实践——原子设计实践为领导，即依照“原子、分子、组织、模板、页面”五个层面进行页面设计。这一实践对于从零开发新利用没有任何问题，但进行一致性革新的 App，往往曾经暴露出很多设计问题，曾经存在数百个成熟的线上页面，革新存在十分大的艰难，必须依据具体业务抉择适合粒度。在进行组件制作前，我的项目同学对外卖的近百个页面进行了梳理，对应用到的组件进行了分类，并依据组件的应用频率进行排序，制订了逐渐替换打算。从而防止了组件库做的很全、破费了很多的人力，但理论很多组件都用不上，或者开发的组件过少，笼罩场景有余等问题。

咱们将走查后果与设计师重复交换，发现复用性较高的组件大体能够分为两类：第一类“根底控件”，也就是相似于标签、按钮、开关等具备根底性能的元素，对应原子理论中的原子；第二类“业务组件”，相似于商品卡片等，是由“根底控件”组成（比方商品卡片由“标签控件”与“图片控件”组成），同时“业务组件”还能互相组合，成为更高阶的“简单组件”，相似于原子理论中的分子。“业务组件”的组合又是变幻无穷的，不同款式的业务组件能够组成相似“商家列表”、“菜品列表”等“模板”，而“模板”与“根本控件”组合在一起，就成为了“页面”。

具备拓展性

组件必须具备肯定的可配置属性能力晋升实用场景。可配置属性体现在三个方面：组件反对部分元素展现暗藏，例如商品卡片的题目、阐明、价格可依据接口数据管制展现逻辑；组件反对多种款式，例如商品卡片的左图右文排列、上图下文排列；组件反对业务方配置主题，如调整高亮色、调整对齐形式等。

反对对立治理

组件治理性能对外卖 UI 一致性起着至关重要的作用，这次要体现在两方面：首先是设计格调积淀，目前袋鼠 UI 曾经造成了本人的独特格调，外卖设计团队依据设计规范，对合乎 UI 一致性外卖业务场景的组件一直进行形象及建设，积淀出越来越多的通用业务组件，这些组件须要及时裁减到 Library 中，供团队成员应用；另外一个作用则是放弃团队应用的均为最新组件。因为各种起因，组件的设计元素（色调、字体、圆角等属性）可能会产生变更，须要及时揭示团队成员更新组件，从而放弃所有页面的一致性。

3.3 资源一致性

UI 设计语言与本身业务关联性很强，美团很多业务包含外卖、酒旅、团购等都有一套本人的设计零碎。“通用”意味着无奈满足具备业务特色的需要，不同业务的组件、色调零碎、动效、字体款式等千差万别，其中任意一环的缺失都会导致一致性被毁坏。

设计语言并不是一个形象的概念，大家提到美团就想起美团黄，想到袋鼠，想到菜品卡片列表，想到骑着摩托车衣着印有“美团外卖”衣服的骑手，通过设计语言能够传播品牌主张和设计理念。目前，袋鼠 UI 曾经造成了一套属于本人的独特格调，对于一致性元素解决有了一套本人的规范，对于产品的设计者而言，必须将这种风格化连续，能力使咱们整个我的项目具备高度的一致性，能力放弃“袋鼠特色“，保障吸引力。

3.3.1 图片

建设插画库

插图作为一种视觉语言，是品牌辨认度的要害外围元素，与单纯的文案信息不同，图形化在直观形容固有信息的同时，也在塑造情感背景，使用户更具沉迷感和共情性。插画在晋升产品用户体验的同时实现商业指标，在表白成果及生产效率上有独特的劣势，在谋求效率的互联网产品中被大量地使用。

因为之前产品中的插图未经零碎整合，而插画师的个人风格显著，不同的设计师在图形化的工作协同中，格调很难复现，而单纯由一名设计师去实现整体业务的插画建设工作也存在肯定危险。不同设计师之前画过的元素无奈互通，造成很多元素反复设计、格调不对立，不足系统性地创作和整顿，无奈最大化地晋升生产效率，并且影响产品的品质感。所以插图体系在放弃品牌一致性、晋升工作效率以及躲避危险上尤为重要。

应用 Iconfont

Iconfont 可译为图标字体，顾名思义就是用字体文件取代图片文件来展现图标、非凡字体等元素的一种办法。简略来说，Iconfont 就是把多个图标文件打包为 ttf 字体文件，注册到零碎中，App 能够像应用字体一样应用图标。其原理能够简略了解为通过 ttf 字体文件维护一个 Unicode 码与图形的映射关系。当应用 Iconfont 为我的项目助力的时候，配置多个图标不再须要去下载数个 PNG 文件，仅须要保护一套 ttf 字体文件即可。Iconfont 不仅具备矢量性、可自在变动大小的特点，而且反对任意扭转色彩。从我的项目角度来看，因为无需针对不同手机分辨率内置多张图片，能够肯定水平减小包体积，而且不便 UI 同学对图标进行对立治理，为无用 icon 和类似 icon 检测做根底。

归档图片文件

当 App 倒退到肯定阶段，必然面临着包体积会越来越大，无用图片与类似图片也会越来越多的问题。同时，因为开辟新业务而不断涌现的新场景，又不可避免地新增大量的图片。总结来看，图片文件在一致性我的项目中须要解决两个问题，即存量图片的解决以及新增图片的治理。

对于存量图片，必须判断其合理性，我的项目中存在大量类似图片，这些图片可能仅是 padding 不同，或者色彩尺寸存在渺小差别，能够通过脚本扫描类似图片，依据图片的特色 Hash 判断图片的类似度，类似度高的图片依据 UI 倡议，保留一张即可。那如何避免新增图片“吃一堑; 长一智”呢？通过建设图片治理后盾，将图片按场景分类，规范图片需从组件代码库中选取，新增图片执行 PR 策略，需相干负责人审核，可无效避免类似图片的沉积问题。

3.3.2 动效

动效是指那些那些可能为产品赋予活力的动静界面元素及视觉效果，这些交互成果通常与特定的响应行为相干，甚至包含那些与交互行为没有间接关联的长期状态。精密而失当的动画成果能够传播状态，加强用户对于间接操纵的感知，通过视觉化的形式向用户出现操作后果。

随着外卖业务的一直减少，动效的应用比重在一直减少，重要性日渐凸显，也是加强用户体验与竞品拉开差距的重要因素，因而，对立标准的应用动效尤为重要。通过动效库建设，UI 层面能够承载品牌、传递情感，加深用户对 App 的印象，让用户放松、愉悦；RD 层面同一组件可在多场景间接复用，还升高了研发老本。

3.3.3 色彩

色彩能够起到传递品牌信息、辨别信息的所属关系、表明控件的选中状态以及对内容的信息进行分层级展现等性能。重要的信息须要在页面中被突出展现。零碎级色调体系次要定义了外卖的次要色彩、文字色彩、辅助色彩以及规范渐变色，色彩在肯定期间内不再反对新增。通过将规范色板内置于积木 Sketch 插件中，限度 UI 绘制设计稿时的应用范畴，而 RD 同学仅可通过代码组件库中选取色彩，保障色值的准确性，也便于进行主题定制。

3.3.4 字体

字体是体系化界面设计中最根本的形成之一。用户通过文原本理解内容和实现工作，迷信的字体零碎将大大晋升用户的浏览体验及工作效率。设计师在字体设计过程中须要关注十分多的方面，比方字体 family、字距、行高、段落等等。如何让文字看起来更天然，是设计师团队始终探寻的答案，UI 同学依据文字的层级关系，规定了 Headline、Subtitle、Body、Button 以及 Caption 的文字应用标准，依据设计稿中文字的地位，就可确定文字的具体款式。

4. 工具链建设

要想放弃 UI 一致性，就不能突破规定。外卖 UI 一致性套件由积木工具链、代码组件库、定制化设计云合作平台以及官网四局部组成，通过将这四局部连接起来，造成一个闭环，把整个工作流限度在规范操作以内。

4.1 积木 Sketch 插件

在之前的文章中，咱们曾经对积木插件进行了具体介绍，这里只作简要概述，介绍其在一致性我的项目中施展的作用。从设计阶段色彩的抉择、字体的标准、控件的款式，到 RD 开发阶段代码的对立治理、API 的制订、多端的实现形式都必须恪守一套规定，通过积木 Sketch 插件落地设计规范，能够保障设计元素均从既定设计标准中获取，产出合乎业务设计语言的设计稿，而各平台 UI 代码库中也有对应实现，从而使积木插件成为 UI 一致性的抓手。

4.1.1 插件性能

积木 Sketch 插件通过一段时间的建设，目前已具备 Iconfont、规范色板、组件库、数据填充、文字模板等性能。通过 Iconfont 能够从公司图标库中拉取设计团队上传的 SVG 图标，并间接利用于设计稿；规范色板能够限定设计师的色彩应用范畴，确保设计稿中的色彩均合乎设计规范；组件库中蕴含从外卖业务抽离的根本控件与通用组件，具备可复用和标准化的特点，并与不同开发语言组件库中的代码一一对应；数据填充库能够使设计师采纳实在数据进行填充，使设计稿更贴近线上环境；文字模板中内置了字体款式的应用标准，依据设计稿中文字的地位，点击文字图层即可间接利用。

4.1.2 物料市场

通过 Sketch 治理后盾，设计师能够将配色标准、文字标准、话术、Iconfont、组件库上传至云端并与整个设计团队中成员共享，并可实现设计资产的版本治理。通过将 Sketch Library 存储在后盾物料市场，设计师能够与团队成员共享组件（Symbol），Library 能够实现“一处更改，处处失效”，即便是关联了近程组件库历史的设计稿检测到更新时，也会收到 Sketch 告诉，确保工作中应用的是最新组件。

4.2 代码模型建设

为了满足中小企业的需要，越来越多的开源组件库诞生，但开源代表着“通用”，无奈满足业务特色的需要，于是很多企业也开始做起了本人的组件库。通过建设代码组件库，能帮忙开发同学疾速搭建 App 页面，缩小设计与开发沟通老本，对立体验标准等。

4.2.1 代码库性能

进步我的项目可维护性

因为组件库中的组件职责繁多，升高了零碎的耦合度，开发人员能够很容易地理解该组件提供的能力。组件能够自在替换、组合为高阶组件，在进行组件更新时仅需批改一处。每个我的项目成员保护肯定数量的组件，让团队中每个人都能发挥所长，能够最大化团队的开发效率。

实现文档化

组件接口有对立的标准，升高新人的上手难度，新成员只须要了解接口和职责即可开发组件代码，因为代码的影响范畴仅限于组件外部，对我的项目的危险管制也十分有帮忙。通过对组件对立治理，实现代码的积攒积淀与无效复用，全面晋升了新业务的需要开发效率。

便于单元测试

因为组件职责繁多而清晰，对外仅裸露接口，概念上能够把组件当成一个函数，输出对应着输入，这让自动化测试变得更加简略。

实现无障碍等定制化性能

无障碍性能能够改善残障人士的用户体验，组件库中的组件资源高内聚，齐全由本身管制加载，不与全局或其余组件产生影响。组件的加载、渲染门路清晰可控，对于组件性能定制，实现相似于无障碍等性能较为不便。

4.2.2 方案设计

对立配置文件

前文也提到，外卖业务入口笼罩外卖独立 App、美团外卖频道以及公众点评外卖频道等，外卖组件须要在不同的挪动端上适配宿主 App 的 UI 格调及交互体验，这就须要组件库反对主题配置性能。因为主题波及 Android/iOS/MRN 多端，须要一套通用的主题配置文件。通过了各端开发同学与设计师的多轮探讨，最终确定了蕴含主题色彩、文字外观、组件格调等内容的主题形容文件格式。配置文件通过下发，就能够实现全局替换主题的性能。

{
  // 主题色彩
  "rooBrandColors": {"rooBrandPrimary": "#FFCC33"},
  // 文本外观
  "rooTextAppearance": {
    "rooTextAppearanceHeadline1": {
      "fontFamily": "sans-serif-medium",    // 字体
      "textStyle": "normal",                // 格调（normal/bold/italic）"textSize": 44,                       // 字号
    }
  },
  // 组件格调
  "rooStyle":{
      "rooButtonStyle": {
        "textAppearance": "?attr/rooTextAppearanceButton",
        "backgroundColor": "?attr/rooBrandPrimary",
        "cornerRadius": 0,
      }
  }

搭建全平台组件库

目前，市面上耳熟能详的组件库包含阿里的 Antd Desigin、Fusion Design 以及美团的 Roo Design 等，根本都是服务于 Web 开发的组件库，通过这些组件库能够疾速搭建一些中后盾零碎。为什么没有出名的 Native 开源组件库呢？因为每个利用的主题、格调以及交互体验都是不同的，而这些不同恰好是传播品牌主张和设计理念的灵魂，因而必须联合业务，针对 Android/iOS/MRN 三端进行组件库开发。通过搭建全平台代码组件库，能够保障同一个 UI 组件在各端体现统一，进行 UI 降级时升高改错或脱漏的危险，除此之外，还能升高测试压力，进步需要的吞吐率。

4.2.3 示例利用

咱们针对 Android/iOS/MRN 三端代码开发了示例工程，通过示例工程，不仅能够帮忙 UI 同学实现组件验收，还能帮忙开发同学疾速查阅能够利用的所有组件，理解其应用形式以及进行代码调试。

4.3 官网门户建设

官网相当于我的项目的门面，一个好的门面能力吸引更多的用户，能力更好地对我的项目进行推广。官网作为设计师与开发同学沟通的媒介，须要两者独特保护。通过官网能够帮忙团队内设计师积淀设计格调，建设对立的 UI 设计规范，帮忙 RD 同学进行组件文档治理与查阅。

4.3.1 官网性能

以后的官网次要由四局部组成，别离是设计语言、组件库、插画库以及资源下载，别离服务于 UI 和 RD 同学。

设计语言

UI 一致性我的项目中采取了“原子理论”的形成原理，即从最小的元素开始定义，进而将这些元素依照规定进行组装，拼接成组件，最初通过这些组件拼接成最终的页面，这是一个由点到面的过程。设计语言章节次要服务于 UI/UE 同学，该章节通过视觉、设计模式、动效等三个子章节使得读者可能疾速理解我的项目的设计规范，从而疾速上手。

组件库

组件库是设计模式中各种元素的具体实现，在这个页面形容了组件的应用形式。

插画库

插画库中则介绍了插画的应用场景，插画的绘制标准以及插画案例展现。

资源下载

提供积木工具链产品下载性能。

4.3.2 方案设计

因为官网以纯正的图文展现为主，且迭代频率较快，因此抉择了当下较为广泛的文档 - 网站生成零碎，即只需依照肯定标准将书写的 Markdown 文档放至相应目录，前端主动解析后生成导航，并且反对多语种、图片、文件、视频等素材。这种形式极大地缩短了官网的开发周期，即使是没有前端教训的同学也能疾速上手。

为了不便 UI 同学对官网文档的批改，咱们基于文档网站生成零碎搭建了在线编辑平台。通过该平台，相干人员能够间接做到在线编辑、公布，节约了 UI 同学与 RD 同学的沟通老本以及公布老本。填充期间，使用者能够实时预览编辑的内容，批改后只需点击保留即可立刻更新到网站中。

官网反对平台化性能，不同业务方能够创立属于本人的文档站点，一个好的文档站点对于设计组的计划推广、内部接入都大有裨益。

4.4 工具链的闭环

当咱们信念满满的把 UI 一致性解决方案推广到日常开发中时，除了听到能够晋升效率的贬责外，开发同学对我的项目的吐槽声也经常传入咱们的耳边，“怎么能力晓得设计稿中的哪个组件曾经开发实现了？”，“查问这个组件的应用办法好麻烦，每次都要去官网检索”，“标准色彩、图标的名称是什么？怎么能力援用到？”咱们无奈限度他人的抉择，所以只能让这套体系变得更好用，如果不去优化整个流程，将其串联起来造成闭环，前面整个我的项目可能都会缓缓崩塌，所以咱们对我的项目进行了从新复盘，通过大家集思广益，终于找到了能将工具链体系买通的解决方案：设计稿作为连接 RD 与 UI 的纽带，能够把官网与代码仓库买通。

咱们与美团外部的印迹团队合作开发，而后定制了一个设计云合作平台，在给 RD 的设计稿中标注了哪些是代码组件库中已有的元素，防止了反复开发，同时关联了官网上该组件的应用阐明，RD 同学在开发过程中遇到组件应用问题无需检索，点击即可跳转至应用文档。前期咱们还将色彩、iconfont 以及插画库中图片也进行了关联，真正做到了一致性元素的全笼罩。

退出咱们

UI 一致性我的项目本来只是外卖技术团队晋升 UI/RD 合作效率的一次尝试，当初曾经作为全面晋升产研效率的媒介，承载了越来越多的性能。围绕设计日常工作，提供高效的设计元素获取形式，让工作变得更轻松，是咱们的外围指标。如何推动设计规范落地，并且输入到各个业务零碎灵便应用，是咱们继续追寻的答案。探寻研发和设计更为高效的合作模式，是咱们始终致力的方向。

如你所见，通过 UI 一致性建设能够帮忙设计团队晋升设计效率、积淀设计语言以及缩小走查累赘；让 RD 同学面对新我的项目时能够专一于业务需要，而无需把工夫消耗在组件的编写上；缩小 QA 工作量，保障控件品质无需频繁的回归测试；帮忙 PM 进步版本迭代效率及版本需要吞吐量，提供业务的疾速拓展能力。当然，咱们除了心愿制作一流的产品，也心愿能够让大家在忙碌的工作中得以喘息。咱们会持续以设计语言为依靠，以工具链建设为抓手继续进行 UI 一致性建设，一直进步挪动端 UI 业务中台能力。

如果你也想参加咱们的 UI 一致性我的项目建设，欢送退出咱们！

致谢

• 感激晓飞、彦平、杜瑶、冰冰、云鹏对我的项目的大力支持。
• 感激到家优良设计师淼林、昱翰、徐徐、璟琦、雪美、田园。
• 感激用户平台组参加 UI 一致性建设的开发同学王鹏、腾飞、赵炎、瀚阳等，感激美团印迹开发团队的反对。
• 感激所有参加人的致力与保持，为外卖 DPL 建设贡献力量！

参考文献

• 爱奇艺产品工作流优化：搭建组件库做高 ROI
• 阿里重磅开源中后盾 UI 解决方案 Fusion
• Ant Design 背地的故事
• Google Material Design
• 前端组件化开发计划及其在 React Native 中的使用

招聘信息

美团外卖长期招聘 Android、iOS、FE 高级 / 资深工程师和技术专家，欢送退出外卖 App 小家庭。感兴趣的同学可投递简历至：tech@meituan.com（邮件主题请注明：外卖大前端）。

想浏览更多技术文章，请关注美团技术团队（meituantech）官网微信公众号。在公众号菜单栏回复【2019 年货】、【2018 年货】、【2017 年货】、【算法】等关键词，可查看美团技术团队历年技术文章合集。