UI標準化的目的

統(tǒng)一Android端、IOS端、小程序端、鴻蒙端的視覺效果，減少開發(fā)人員和設(shè)計人員在UI效果上的工作量，提高開發(fā)效率，降低公司成本。

痛點示例1：

項目中很多頁面都存在設(shè)置背景的需求，在組件化之前，通常都是開發(fā)根據(jù)設(shè)計稿來直接將色值寫到代碼里(示例1)，或者好一點的會使用colors引用色值(示例2)，需要設(shè)置帶圓角的背景時就會自己創(chuàng)建一個drawable作為背景(示例3)，開發(fā)完成后設(shè)計師進行UI驗收時就會提出問題，比如顏色淺了，圓角偏大了，即便開發(fā)是嚴格按照設(shè)計稿開發(fā)的，也會出現(xiàn)實際視覺效果不符合預(yù)期的情況，導(dǎo)致設(shè)計師和開發(fā)在UI修改上耗費大量時間和精力

痛點示例2：

Android端、IOS端、小程序端的同一頁面同一功能使用的色值不同，比如分割線的顏色；同一端不同頁面使用的分割線的色值不同。這種視覺上的問題解決起來無聊且耗時。

具體方案：

一、統(tǒng)一認知，即統(tǒng)一大家對于設(shè)計中不同內(nèi)容的定義，方便溝通

1：基礎(chǔ)要素：統(tǒng)一大家在UI設(shè)計中關(guān)于基礎(chǔ)要素的認知，在這里我們認為圓角、色值、文字大小、尺寸大小等為最基礎(chǔ)的UI組成要素。
2：基礎(chǔ)組件：只通過基礎(chǔ)要素就能形成的內(nèi)容我們定義為基礎(chǔ)組件，比如通過drawable創(chuàng)建的標準的圓角背景
3：基礎(chǔ)控件：通過基礎(chǔ)要素和基礎(chǔ)組件，再結(jié)合系統(tǒng)控件，我們就可以組成出標準的控件了，比如價格控件(PriceView)、大字號控件(BigTextView)、選中控件(RadioView)等
4：標準組件：通過以上基礎(chǔ)的要素、組件、控件相結(jié)合，我們就可以設(shè)計出標準的組件了，比如橫向通欄商品卡片、瀑布流式商品卡片，然后在全局范圍內(nèi)所有的商品卡片都使用這兩種，禁止私自創(chuàng)建和改造
5：標準模板：比如通過商品卡片自定義一個標準的商品瀑布流，用于整個APP內(nèi)的商品推薦列表

二、統(tǒng)一協(xié)作語言

以統(tǒng)一認知為基礎(chǔ)，形成一種協(xié)作語言，用于設(shè)計和技術(shù)的映射關(guān)系，實現(xiàn)設(shè)計稿和技術(shù)代碼的統(tǒng)一。這里通俗的解釋就是統(tǒng)一基礎(chǔ)元素命名規(guī)則，并將設(shè)計師在設(shè)計稿上的標注規(guī)則和開發(fā)人員在代碼上的命名規(guī)則相統(tǒng)一，這個過程需要設(shè)計師和開發(fā)人員共同參與深度合作，確保 命名 的可理解性，要根據(jù)業(yè)務(wù)的復(fù)雜度及開發(fā)實現(xiàn)的最優(yōu)方式進行命名，我們采用不帶任何業(yè)務(wù)屬性的命名方式，使各業(yè)務(wù)調(diào)用更靈活。

1：基礎(chǔ)色示例：

cwhite1 —— #FFFFFF
cblack1 —— #FCFCFC

2：基礎(chǔ)色透明度示例：

cblack1_alpha10  —— 10% —— 1A 
cblack1_alpha50 —— 50% —— 80

3：動態(tài)色示例：
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(結(jié)束色值 ) —— 135°(角度)

4：設(shè)計稿命名方式和開發(fā)命名方式映射
設(shè)計稿： tv/15/text_1
開發(fā)的布局文件：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/tv_15_text_1”/>

5：行高映射，需要在自定義TextView中實現(xiàn)
7(字號) —— 9(行高)
8(字號) —— 10(行高)

6：大字號，需要在自定義TextView中實現(xiàn)
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：各種其他全局性控件，比如選擇框、標簽(失效、優(yōu)惠券、自營等)，這里不再一一描述，可以根據(jù)具體需要具體開發(fā)

三、開發(fā)組件的步驟

1：設(shè)計組件的規(guī)范標準和設(shè)計稿
2：開發(fā)組件，建立標準接口
3：Demo開發(fā)，列舉各個組件類型的形態(tài)展示在demo中
4：和設(shè)計同學整體走查Demo效果和微調(diào)
5：開發(fā)同學寫使用文檔
6：各個業(yè)務(wù)頁面找不同形態(tài)的組件進行替換，替換完自測，并列舉在wiki中
7：設(shè)計同學根據(jù)列舉的wiki中的已替換的組件，進行整體的業(yè)務(wù)頁面的走查
8：測試同學回歸走查