UI标准化的目的
统一Android端、IOS端、小程序端、鸿蒙端的视觉效果，减少开发人员和设计人员在UI效果上的工作量，提高开发效率，降低公司成本。
痛点示例1：
项目中很多页面都存在设置背景的需求，在组件化之前，通常都是开发根据设计稿来直接将色值写到代码里(示例1)，或者好一点的会使用colors引用色值(示例2)，需要设置带圆角的背景时就会自己创建一个drawable作为背景(示例3)，开发完成后设计师进行UI验收时就会提出问题，比如颜色浅了，圆角偏大了，即便开发是严格按照设计稿开发的，也会出现实际视觉效果不符合预期的情况，导致设计师和开发在UI修改上耗费大量时间和精力
痛点示例2：
Android端、IOS端、小程序端的同一页面同一功能使用的色值不同，比如分割线的颜色；同一端不同页面使用的分割线的色值不同。这种视觉上的问题解决起来无聊且耗时。
具体方案：
一、统一认知，即统一大家对于设计中不同内容的定义，方便沟通
1：基础要素：统一大家在UI设计中关于基础要素的认知，在这里我们认为圆角、色值、文字大小、尺寸大小等为最基础的UI组成要素。
2：基础组件：只通过基础要素就能形成的内容我们定义为基础组件，比如通过drawable创建的标准的圆角背景
3：基础控件：通过基础要素和基础组件，再结合系统控件，我们就可以组成出标准的控件了，比如价格控件(PriceView)、大字号控件(BigTextView)、选中控件(RadioView)等
4：标准组件：通过以上基础的要素、组件、控件相结合，我们就可以设计出标准的组件了，比如横向通栏商品卡片、瀑布流式商品卡片，然后在全局范围内所有的商品卡片都使用这两种，禁止私自创建和改造
5：标准模板：比如通过商品卡片自定义一个标准的商品瀑布流，用于整个APP内的商品推荐列表
二、统一协作语言
以统一认知为基础，形成一种协作语言，用于设计和技术的映射关系，实现设计稿和技术代码的统一。这里通俗的解释就是统一基础元素命名规则，并将设计师在设计稿上的标注规则和开发人员在代码上的命名规则相统一，这个过程需要设计师和开发人员共同参与深度合作，确保 命名 的可理解性，要根据业务的复杂度及开发实现的最优方式进行命名，我们采用不带任何业务属性的命名方式，使各业务调用更灵活。
1：基础色示例：
cwhite1 —— #FFFFFF
cblack1 —— #FCFCFC
2：基础色透明度示例：
cblack1_alpha10 —— 10% —— 1A
cblack1_alpha50 —— 50% —— 80
3：动态色示例：
A：背景色
bg_1 —— cblack1(浅色模式) —— cblack2(深色模式)
B：文本、iconfont
text_1 —— cblack1(浅色模式) —— cwhite2(深色模式)
C：线框
line_1 —— cblack1(浅色模式) —— cblack2(深色模式)
D：品牌色
brand_1 —— cred1(浅色模式) —— cred2(深色模式)
E：功能色
error —— cred1(浅色模式) —— cred2(深色模式)
F：渐变色
红色135°渐变 —— gradient_red_135 —— cred1(开始色值) —— cvermilion2(结束色值 ) —— 135°(角度)
4：设计稿命名方式和开发命名方式映射
设计稿： tv/15/text_1
开发的布局文件：
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/tv_15_text_1”/>
5：行高映射，需要在自定义TextView中实现
7(字号) —— 9(行高)
8(字号) —— 10(行高)
6：大字号，需要在自定义TextView中实现
11(号字) —— 1(增加字号) ——> 12(号字)
7：全局阴影效果定义
8：自定义按钮：全局按钮效果，宽高、文案上下左右边距、字体大小和颜色等都需要定义
<style name="button_H28" parent="text_base" ns1:ignore="ResourceName">
<item name="android:gravity">center</item>
<item name="android:layout_height">@dimen/dp_28</item>
<item name="android:minHeight">@dimen/dp_28</item>
<item name="android:paddingLeft">@dimen/dp_14</item>
<item name="android:paddingRight">@dimen/dp_14</item>
<item name="android:textSize">@dimen/dp_13</item>
<item name="android:minWidth">@dimen/dp_56</item>
<item name="loadingSize">small</item>
</style>
<style name="button_H28_fill_primary" parent="button_H28" ns1:ignore="ResourceName">
<item name="android:background">@drawable/selector_button_fill_primary</item>
<item name="android:textColor">@color/selector_button_fill_primary</item>
</style>
<TextView
android:id="@+id/tvSearch"
style="@style/button_H28_fill_primary" />
9：各种其他全局性控件，比如选择框、标签(失效、优惠券、自营等)，这里不再一一描述，可以根据具体需要具体开发
三、开发组件的步骤
1：设计组件的规范标准和设计稿
2：开发组件，建立标准接口
3：Demo开发，列举各个组件类型的形态展示在demo中
4：和设计同学整体走查Demo效果和微调
5：开发同学写使用文档
6：各个业务页面找不同形态的组件进行替换，替换完自测，并列举在wiki中
7：设计同学根据列举的wiki中的已替换的组件，进行整体的业务页面的走查
8：测试同学回归走查
