移动端UI一致性解决方案( 七 ) _UI

搭建全平台组件库
目前，市面上耳熟能详的组件库包括阿里的Antd Desigin、Fusion Design以及美团的Roo Design等，基本都是服务于Web开发的组件库，通过这些组件库可以快速搭建一些中后台系统。
为什么没有知名的Native开源组件库呢？因为每个应用的主题、风格以及交互体验都是不同的，而这些不同恰恰是传达品牌主张和设计理念的灵魂，因此必须结合业务，针对Android/iOS/MRN三端进行组件库开发。通过搭建全平台代码组件库，可以保证同一个UI组件在各端表现一致，进行UI升级时降低改错或遗漏的风险，除此之外，还能降低测试压力，提高需求的吞吐率。
4.2.3 示例应用
我们针对Android/iOS/MRN三端代码开发了示例工程，通过示例工程，不仅可以帮助UI同学完成组件验收，还能帮助开发同学快速查阅可以应用的所有组件，了解其使用方式以及进行代码调试。

文章插图
组件库demo示例
4.3 官网门户建设
官网相当于项目的门面，一个好的门面才能吸引更多的用户，才能更好地对项目进行推广。官网作为设计师与开发同学沟通的媒介，需要两者共同维护。通过官网可以帮助团队内设计师沉淀设计风格，建立统一的UI设计规范，帮助RD同学进行组件文档管理与查阅。
4.3.1 官网功能
当前的官网主要由四部分组成，分别是设计语言、组件库、插画库以及资源下载，分别服务于UI和RD同学。

文章插图
外卖平台化官网导航栏
设计语言
UI一致性项目中采取了“原子理论”的构成原理，即从最小的元素开始定义，进而将这些元素按照规则进行组装，拼接成组件，最后通过这些组件拼接成最终的页面，这是一个由点到面的过程。设计语言章节主要服务于UI/UE同学，该章节通过视觉、设计模式、动效等三个子章节使得读者能够快速了解项目的设计规范，从而快速上手。
组件库
组件库是设计模式中各种元素的具体实现，在这个页面描述了组件的使用方式。
插画库
插画库中则介绍了插画的使用场景，插画的绘制规范以及插画案例展示。
资源下载
提供积木工具链产品下载功能。

文章插图
外卖平台化官网
4.3.2 方案设计
由于官网以纯粹的图文展示为主，且迭代频率较快，因而选择了当下较为普遍的文档-网站生成系统，即只需按照一定规范将书写的Markdown文档放至相应目录，前端自动解析后生成导航，并且支持多语种、图片、文件、视频等素材。这种方式极大地缩短了官网的开发周期，即便是没有前端经验的同学也能快速上手。
为了方便UI同学对官网文档的修改，我们基于文档网站生成系统搭建了在线编辑平台。通过该平台，相关人员可以直接做到在线编辑、发布，节约了UI同学与RD同学的沟通成本以及发布成本。填充期间，使用者可以实时预览编辑的内容，修改后只需点击保存即可立即更新到网站中。
官网支持平台化功能，不同业务方可以创建属于自己的文档站点，一个好的文档站点对于设计组的方案推广、外部接入都大有裨益。

文章插图
外卖平台化官网录入后台
4.4 工具链的闭环
当我们信心满满的把UI一致性解决方案推广到日常开发中时，除了听到可以提升效率的褒奖外，开发同学对项目的吐槽声也常常传入我们的耳边， “怎么才能知道设计稿中的哪个组件已经开发完成了？” ， “查询这个组件的使用方法好麻烦，每次都要去官网检索” ， “规范颜色、图标的名称是什么？怎么才能引用到？”
我们无法限制别人的选择，所以只能让这套体系变得更好用，如果不去优化整个流程，将其串联起来形成闭环，后面整个项目可能都会慢慢崩塌，所以我们对项目进行了重新复盘，经过大家集思广益，终于找到了能将工具链体系打通的解决方案：设计稿作为衔接RD与UI的纽带，可以把官网与代码仓库打通。