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

Iconfont不仅具有矢量性、可自由变化大小的特点，而且支持任意改变颜色。从项目角度来看，由于无需针对不同手机分辨率内置多张图片，可以一定程度减小包体积，而且方便UI同学对图标进行统一管理，为无用icon和相似icon检测做基础。

文章插图
使用iconfont替换项目中的图片
归档图片文件
当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一致性的抓手。