关于移动端开发:移动端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一致性套件由积木工具链、代码组件库、定制化设计云合作平台以及文档化阐明（官网）四局部组成。 积木工具链：通过建设蕴含雷同设计元素的对立物料市场，PM通过Axure插件拾取物料市场中的组件产出原型稿；UI/UE通过Sketch插件落地物料市场中的设计规范，产出符合要求的设计稿。将来，心愿通过高保真原型输入，能够给中后盾我的项目、非依赖体验我的项目提供更好的服务体验，赋予产品同学间接向技术侧输入原型稿的能力。代码组件库（Android、iOS、MRN）：设计稿中的组件与RD代码仓库中组件一一对应。文档化阐明：官网详细描述了代码组件库的集成形式、组件的应用办法，升高开发上手难度，只须要了解接口和职责即可进行业务开发。定制化设计云合作平台：与美团外部的印迹团队（云合作平台）合作开发，在RD的设计稿中标注了哪些是代码组件库中已有的元素，防止反复开发，同时关联了官网中该组件的应用阐明，是代码组件库与官网的纽带。 2.2 接入指南设计师逐渐将设计语言积淀为设计规范（包含组件、色彩、字体、图片等）上传至官网供整个设计团队查阅，同时将其量化并内置于积木Sketch插件中；开发同学则将其代码化，针对Android/iOS/MRN三端进行组件库开发。设计师应用积木Sketch插件绘制设计稿，能够保障设计元素均从既定的设计标准中获取，产出合乎业务设计规范的设计稿，而代码组件库中也有对应的实现。绘制实现的设计稿上传至印迹云合作平台，交付开发同学进行设计稿还原。开发同学拿到设计稿后，就能够晓得本次需要哪些组件已内置于代码组件库中，并能够点击设计稿中的链接，间接查看组件的应用阐明。 2.3 计划落地尽管UI一致性在落地上会减少开发同学不少的工作量，推动一致性建设也是一个艰巨的工作，因为老本较高，且无奈量化评估收益，很多团队最终未达到预期成果，但一旦无效运作起来后，团队将取得丰富的回报。UI一致性的建设须要设计者对现有状态有足够的意识，对业务有充沛了解，以及优良的设计能力，同时还要一直地进行实际和优化。为了保障一致性我的项目的胜利落地，防止“大功告成”，咱们制订了一系列的推动措施： 我的项目小组不能脱离日常需要开发工作。这样能够保障设计师所积淀的设计元素始终来自于最新的业务场景，同时我的项目产出能够疾速利用到最新的版本中得以验证。优先选择受视觉因素影响较大、投入产出比高的模块场景进行革新，化繁为简，确定最小验证闭环 （MVP，Minimum Viable Product），在实践中一直优化，进而跑通整个流程。我的项目推动由UI同学按版本提出需要，挪动端排期并落地施行，由UI对立验收。建设阶段性指标，并实现最近三期工作的具体布局，定期复盘实现状况，保障我的项目的继续推动。2.4 一致性成绩通过一段时间的UI一致性建设，在资源一致性方面，外卖App团队曾经实现了近百个Iconfont的替换工作，无效减小了安装包的体积。在组件代码库建设方面，实现组件替换三十多处，中等业务需要均匀节约3pd人力；在工具链方面，依据UI/UE提供的数据，对于强依赖设计资源的需要，在应用积木Sketch插件后，提效可能达到30%以上，对于UI资源依赖不强的流程需要，均匀提效能够达到50%以上。 3. 设计体系建设细化来看，UI一致性整体计划次要分为两个局部，一个是设计体系建设，另一个则是工具链建设。设计体系建设是根底，次要是设计师积淀设计格调，建设对立的UI设计标准的工作，而工具链建设则是撑持，是开发人员通过开发一系列的工具将开发过程闭环，实现设计体系落地。 3.1 外卖DPLDPL（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 ...