如何使用界面控件DevExtreme自定義基于HTM

如何使用界面控件DevExtreme自定義基于HTML的組件？這里有答案

evExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

本文介紹自定義基于HTML的UI組件的方法。

DevExtreme Complete Subscription官方最新版免費(fèi)下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

組件的API

官方建議使用UI組件的API來自定義它，與CSS類不同，API很少被更改。如果發(fā)生更改，UI組件將用警告填充瀏覽器控制臺，幫助開發(fā)人員修復(fù)代碼。

每個(gè)UI組件都有一個(gè)在UI組件的API參考部分中描述的API，例如開發(fā)人員可以通過相應(yīng)的屬性指定UI組件的寬度。在下面的例子中，這個(gè)屬性是為List UI組件設(shè)置的。

jQuery

JavaScript

$(function() {
$("#listContainer").dxList({
width: 600
});
});

ASP.NET MVC控件

Razor C#

@(Html.DevExtreme().List()
.Width(600)
)

如果頁面包含同一個(gè)UI組件的多個(gè)實(shí)例，開發(fā)人員可以使用defaultOptions(rule) 方法在一個(gè)地方為所有這些組件指定默認(rèn)配置，相同的方法允許開發(fā)者為不同的設(shè)備指定不同的默認(rèn)配置。

此外，UI組件提供了可以用于更深入自定義的模板。

單個(gè)CSS類

由于DevExtreme組件包含標(biāo)準(zhǔn)的HTML元素（<div>, <td>, <tr>等），所以開發(fā)人員可以使用CSS來自定義它們。

文檔中記錄了許多類，但是在大多數(shù)情況下，開發(fā)人員需要檢查HTML標(biāo)記來確定和覆蓋應(yīng)用的CSS類。

可以像往常一樣使用class屬性將類添加到標(biāo)記中的UI組件元素中，如果不可能更改標(biāo)記，則使用UI組件的elementAttr屬性來實(shí)現(xiàn)相同的目的。

注意：CSS內(nèi)部結(jié)構(gòu)可能在不同版本之間更改而不另行通知。考慮到這一點(diǎn)，我們建議在可能的情況下使用它們的API替代CSS來自定義UI組件。因?yàn)槿绻鸄PI發(fā)生了更改，開發(fā)人員將收到通知。

在自定義過程中，建議通過響應(yīng)式設(shè)計(jì)模式查看UI組件頁面再不同設(shè)備上的外觀。

TML（網(wǎng)頁）

Web領(lǐng)域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網(wǎng)，俗稱萬維網(wǎng)（www）。

W3C

W3C（World Wide Web Consortium）叫萬維網(wǎng)聯(lián)盟，是國際最著名的標(biāo)準(zhǔn)化組織，制定了web標(biāo)準(zhǔn)。

WEB標(biāo)準(zhǔn)

一個(gè)網(wǎng)頁包含了html元素 Css JavaScript，Html元素決定了網(wǎng)頁結(jié)構(gòu)，Css進(jìn)行了修飾美化，JavaScript控制了交互行為和動(dòng)態(tài)效果。

web標(biāo)準(zhǔn)包含了下面三個(gè)方面：

結(jié)構(gòu)標(biāo)準(zhǔn)（HTML）：用于對網(wǎng)頁元素進(jìn)行整理和分類。
表現(xiàn)標(biāo)準(zhǔn)（CSS）：用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式。
行為標(biāo)準(zhǔn)（JavaScript）：用于定義網(wǎng)頁的交互和行為。

HTML定義

Html不是一種編程語言，而是描述性的標(biāo)記語言，主要作用是定義內(nèi)容的結(jié)構(gòu)。

2014年10月萬維網(wǎng)聯(lián)盟（W3C）完成了HTML5標(biāo)準(zhǔn)制定，是目前最新的HTM版本。

HTML5的出世，標(biāo)志著web進(jìn)入一個(gè)富客戶端（具有很強(qiáng)的交互性和體驗(yàn)的客戶端程序）時(shí)代，像APP網(wǎng)頁，小程序都是HTML5的應(yīng)用場景。

Html5新特性：

用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
對本地離線存儲的更好的支持。
新的特殊內(nèi)容元素，比如 article、footer、header、nav、section。
新的表單控件，比如 calendar、date、time、email、url、search。

頁面基本結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="關(guān)鍵詞" />
    <meta name="Description" content="頁面描述" />
    <title>頁面標(biāo)題</title>
</head>
<body>

</body>
</html>

關(guān)于viewport

viewport用戶網(wǎng)頁的可視區(qū)域，一個(gè)針對移動(dòng)網(wǎng)頁優(yōu)化的頁面 viewport meta 標(biāo)簽如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一個(gè)值，如 600，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）。
height：和 width 相對應(yīng)，指定高度。
initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時(shí)候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動(dòng)縮放。

常見元素

head區(qū)域元素：

meta title style link script base。

body區(qū)域元素：

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、dl、dt、dd
a
form、input、select、textarea、button

元素分類

塊級元素：每個(gè)元素都是獨(dú)占一行

address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是css layout的主要標(biāo)簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1-h6 – 標(biāo)題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容）
noscript – ）可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

行內(nèi)元素：元素在同一行水平排列

a – 錨點(diǎn)
abbr – 縮寫
acronym – 首字
b – 粗體
big – 大字體
br – 換行
em – 強(qiáng)調(diào)
font – 字體設(shè)定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標(biāo)簽
s – 中劃線(不推薦)
select – 項(xiàng)目選擇
small – 小字體文本
span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
strike – 中劃線
strong – 粗體強(qiáng)調(diào)
sub – 下標(biāo)
sup – 上標(biāo)
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量

inline-block：元素可以排列在同一行顯示，并且可以設(shè)置一些塊元素屬性

通過Css：display:inline-block 改變元素。

元素默認(rèn)樣式

很多元素都自帶了默認(rèn)樣式，不同瀏覽器下默認(rèn)樣式表現(xiàn)不一致，為了統(tǒng)一或者滿足一些需求我們需求將所有默認(rèn)樣式清空，這種處理方式又稱為 Css Reset，比如：

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的默認(rèn)樣式進(jìn)行了統(tǒng)一，

https://github.com/necolas/normalize.css

CSS（層疊樣式表）

Css的單位

html中的單位是像素px

絕對單位

in：英寸，1in=2.54cm=96px
pc：皮卡，1皮卡=1/16英寸
pt：點(diǎn)，1點(diǎn)=1/72英寸
px：像素，1點(diǎn)=1/96英寸

相對單位

em：font-size中相對于父元素的字體大小，在元素屬性中使用是相對于自身字體大小
rem：根元素的字體大小，在元素屬性中使用是相對于根元素字體大小
1h：元素的line-height
vw：視窗寬度的1%
vh：視窗高度的1%
vmin：視窗較小尺寸的1%
vmax：視圖大尺寸的1%

字體屬性

屬性：字體、行高、顏色、大小、背景、邊框、滾動(dòng)、換行、修飾屬性（粗體、斜體、下劃線）

p{
    font-size: 20px;        /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;   /*字體類型：顯示PingFang SC，沒有就顯示默認(rèn)*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;  /*粗體或?qū)懀?00｜500｜600）*/
    font-variant: small-caps;  /*小寫變大寫*/
}

行高（line-height）

一般約定行高、字號都是偶數(shù)，這樣保證它們的差一定偶數(shù)除2得到整數(shù)，如下圖所示：

line-height

文本垂直居中

對于單行文本可以設(shè)置行高=盒子高度。

對于多行元素的垂直對齊，我們可以使用vertical-align: middle屬性，不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。

vertical-align

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

文本屬性

letter-spacing: 0.5em ; 單個(gè)字母之間的間距。
word-spacing: 1em; 單詞之間的間距。
text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
color:red; 字體顏色。
text-align: center; 文字對齊方式，屬性值可以是：left、right、center、justify。
text-transform: lowercase; uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。
text-indent:10px; 文本首行縮進(jìn)。
text-shadow:2px 2px #ff0000; 文字陰影效果。
white-space: normal; 設(shè)置元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內(nèi)容溢出處理

visible：默認(rèn)值，多余的內(nèi)容會(huì)全部顯示出來。
hidden：超過元素的內(nèi)容隱藏。
auto：內(nèi)容超出顯示滾動(dòng)條。
scroll：Windows總是顯示滾動(dòng)條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

background-color:#fff; 設(shè)置背景顏色。
background-image:url(img.png); 設(shè)置圖像為背景。
background-repeat: no-repeat; no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。
background-position:center top; 設(shè)置背景圖片在容器的位置，top，bottom，left，right，center。
background-attachment:scroll; 設(shè)置背景圖片隨滾動(dòng)條移動(dòng)，scroll（跟隨滾動(dòng)），fixed（固定）。
background-origin:border-box; css3，border-box（背景相對于邊框框定位），padding-box（背景相對于填充框定位），content-box（背景相對于內(nèi)容框定位）。
background-clip:border-box; css3，背景裁切。
background-size:cover; css3，調(diào)整尺寸，contain（在不裁剪或拉伸圖像的情況下，在其容器內(nèi)盡可能大地縮放圖像），cover（盡可能大地縮放圖像以填充容器，必要時(shí)拉伸圖像。），auto（在相應(yīng)的方向上縮放背景圖像，以保持其固有比例。）。

優(yōu)先級

理解優(yōu)先級很重要，有助于我們排查一些問題。瀏覽器將優(yōu)先級分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式。

行內(nèi)樣式

行內(nèi)樣式是直接作用在元素，它的優(yōu)先級高于選擇器樣式，使用！important可以提高樣式表的優(yōu)先級。

<div style="font-size:16px">
</div>

選擇器樣式

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

優(yōu)先級規(guī)則如下：

如果選擇器的ID數(shù)量最多的勝出。
如果ID數(shù)量一致，那么擁有最多類的選擇器勝出。
如果以上兩次比較都一致，那么擁有最多標(biāo)簽名的選擇器勝出。

優(yōu)先級

我們通過下圖這種標(biāo)記方式，就可以判斷出選擇器的優(yōu)先級。

優(yōu)先級

兩條經(jīng)驗(yàn)法則

盡量不要使用ID選擇器，因?yàn)樗鼤?huì)大幅提升優(yōu)先級。當(dāng)需要覆蓋這個(gè)選擇器時(shí)，通常找不到另一個(gè)有意義的ID，于是就需要復(fù)制原來的選擇器加上另一個(gè)類來讓它區(qū)別于想要覆蓋的選擇器。
不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個(gè)！important，而且依然要處理優(yōu)先級的問題。

基礎(chǔ)選擇器

類型或標(biāo)簽選擇器，匹配目標(biāo)元素的標(biāo)簽名，如：p，input[type=text]，優(yōu)先級（0，0，1）。
類選擇器，匹配class屬性中有指定類名的元素，如：.box，優(yōu)先級（0，1，0）。
ID選擇器，匹配擁有指定ID屬性的元素，如：#id，優(yōu)先級（1，0，0）。
通用選擇器（*），匹配所有元素，優(yōu)先級（0，0，0）。

組合選擇器

由多個(gè)基礎(chǔ)選擇器組合成的復(fù)雜選擇器。

后代組合器（單個(gè)空格（）表示），比如 .nav li，表示li是一個(gè)擁有nav類的元素的后代。
子組合器（>），匹配的元素是直接后代，.parent > .child。
相鄰兄弟組合器（+），匹配的元素緊跟在后面其它元素后面，div + p。
通用兄弟組合器（~），匹配所有跟隨在指定元素之后的兄弟元素，它不會(huì)選中目標(biāo)元素之前的兄弟元素，li.active ~ li。

復(fù)合選擇器

多個(gè)基礎(chǔ)選擇器連起來（中間沒有空格）組成一個(gè)復(fù)合選擇器（如：ul.nav）。復(fù)合選擇器選中的元素將匹配其全部基礎(chǔ)選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用于選中某種特定狀態(tài)的元素，優(yōu)先級（0，1，0）。

:first-child——匹配的元素是其父元素的第一個(gè)子元素。
:last-child——匹配的元素是其父元素的最后一個(gè)子元素。
:only-child——匹配的元素是其父元素的唯一一個(gè)子元素（沒有兄弟元素）。
:nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數(shù)，該公式指定要選中哪個(gè)元素。要了解一個(gè)公式的工作原理，請從0開始代入n的所有整數(shù)值。公式的計(jì)算結(jié)果指定了目標(biāo)元素的位置。下表給出了一些例子。

:nth-child(an+b)

:nth-last-child(an+b)——類似于：nth-child()，但不是從第一個(gè)元素往后數(shù)，而是從最后一個(gè)元素往前數(shù)。括號內(nèi)的公式與：nth-child()里的公式的規(guī)則相同。
:first-of-type——類似于：first-child，但不是根據(jù)在全部子元素中的位置查找元素，而是根據(jù)擁有相同標(biāo)簽名的子元素中的數(shù)字順序查找第一個(gè)元素。
:last-of-type——匹配每種類型的最后一個(gè)子元素。
:only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個(gè)子元素。
:nth-of-type(an+b)——根據(jù)目標(biāo)元素在特定類型下的數(shù)字順序以及特定公式選擇元素，類似于：nth-child。
:nth-last-of-type(an+b)——根據(jù)元素類型以及特定公式選擇元素，從其中最后一個(gè)元素往前算，類似于：nth-last-child。
:not(<selector>)——匹配的元素不匹配括號內(nèi)的選擇器。括號內(nèi)的選擇器必須是基礎(chǔ)選擇器，它只能指定元素本身，無法用于排除祖先元素，同時(shí)不允許包含另一個(gè)排除選擇器。
:focus——匹配通過鼠標(biāo)點(diǎn)擊、觸摸屏幕或者按Tab鍵導(dǎo)航而獲得焦點(diǎn)的元素。
:hover——匹配鼠標(biāo)指針正懸停在其上方的元素。
:root——匹配文檔根元素。對HTML來說，這是html元素，但是CSS還可以應(yīng)用到XML或者類似于XML的文檔上，比如SVG。在這些情況下，該選擇器的選擇范圍更廣。還有一些表單域相關(guān)的偽類選擇器。
:disabled——匹配已禁用的元素，包括input、select以及button元素。
:enabled——匹配已啟用的元素，即那些能夠被激活或者接受焦點(diǎn)的元素。
:checked——匹配已經(jīng)針對選定的復(fù)選框、單選按鈕或選擇框選項(xiàng)。
:invalid——根據(jù)輸入類型中的定義，匹配有非法輸入值的元素。例如，當(dāng)<inputtype="email">的值不是一個(gè)合法的郵箱地址時(shí)，該元素會(huì)被匹配。

更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS

偽元素選擇器

偽元素選擇器可以向HTML標(biāo)記中未定義的地方插入內(nèi)容，優(yōu)先級（0，0，1）。

::before——?jiǎng)?chuàng)建一個(gè)偽元素，使其成為匹配元素的第一個(gè)子元素。該元素默認(rèn)是行內(nèi)元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現(xiàn)，如：.nav::before。
::after——?jiǎng)?chuàng)建一個(gè)偽元素，使其成為匹配元素的最后一個(gè)子元素。該元素默認(rèn)是行內(nèi)元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現(xiàn)，如：.nav::after。
::first-letter——用于指定匹配元素的第一個(gè)文本字符的樣式，如：h1::first-letter。
::first-line——用于指定匹配元素的第一行文本的樣式。
::selection——用于指定用戶使用鼠標(biāo)高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數(shù)屬性可以使用，包括color、background-color、cursor、text-decoration。

屬性選擇器

屬性選擇器用于根據(jù)HTML屬性進(jìn)行匹配元素，優(yōu)先級（0，1，0）。

[attr]——匹配的元素?fù)碛兄付▽傩詀ttr，無論屬性值是什么，如：input[disabled]。
[attr="value"]——匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值等于指定的字符串值，如：input[type="radio"]。
[attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值的開頭是指定的字符串值，例如：a[href^="https"]。
[attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
[attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值是一個(gè)空格分隔的值列表，列表中的某個(gè)值等于指定的字符串值，如：a[rel="author"]。
[attr|="value"]——匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值要么等于指定的字符串值，要么以該字符串開頭且緊跟著一個(gè)連字符（-）。

小結(jié)

本文要點(diǎn)回顧，歡迎留言交流。

Web中的一些基本概念介紹。
Html頁面結(jié)構(gòu)，元素分類。
Css優(yōu)先級。
Css選擇器，（基礎(chǔ)選擇器，組合選擇器，復(fù)合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。

賣UI一致性項(xiàng)目是外賣UI設(shè)計(jì)團(tuán)隊(duì)與研發(fā)團(tuán)隊(duì)共建的項(xiàng)目，目的是改善用戶端體驗(yàn)的一致性，提升多技術(shù)方案間組件的通用性和復(fù)用率，降低整體視覺改版帶來的研發(fā)成本。外賣技術(shù)團(tuán)隊(duì)通過在實(shí)踐中不斷總結(jié)經(jīng)驗(yàn)，開發(fā)了一套完整的UI一致性解決方案，目前已經(jīng)取得了一些成果，本文系實(shí)踐經(jīng)驗(yàn)分享。

1. 背景

1.1 行業(yè)現(xiàn)狀與問題

很多技術(shù)同學(xué)都知道，移動(dòng)端往往比較側(cè)重業(yè)務(wù)開發(fā)，這會(huì)導(dǎo)致人員規(guī)模不斷擴(kuò)大，項(xiàng)目復(fù)雜度也會(huì)持續(xù)增長。而為了滿足業(yè)務(wù)的快速上線，很難去落實(shí)統(tǒng)一的設(shè)計(jì)規(guī)范，在開發(fā)過程中由于UI缺乏標(biāo)準(zhǔn)導(dǎo)致的問題不斷凸顯，具體體現(xiàn)在以下4個(gè)層面：

設(shè)計(jì)層面：由于UI缺乏標(biāo)準(zhǔn)化設(shè)計(jì)規(guī)范，在不同App及不同開發(fā)語言平臺上設(shè)計(jì)風(fēng)格不統(tǒng)一，用戶體驗(yàn)不一致；設(shè)計(jì)資源與代碼均缺乏統(tǒng)一管理手段，無法實(shí)現(xiàn)積累沉淀，無法適應(yīng)新業(yè)務(wù)的開發(fā)需求。
開發(fā)層面：組件代碼實(shí)現(xiàn)碎片化，存在多次開發(fā)的情況，質(zhì)量難以保證；各端代碼API不統(tǒng)一，維護(hù)拓展成本較高，變更主題、適配Dark Mode等需求難以實(shí)現(xiàn)。
測試層面：重復(fù)走查，頻繁回歸，每次發(fā)版均需驗(yàn)證組件質(zhì)量。
產(chǎn)品層面：版本迭代效率低，版本需求吞吐量低，不具備業(yè)務(wù)的快速拓展能力。

1.2 外賣移動(dòng)端UI一致性情況

近來年，美團(tuán)外賣業(yè)務(wù)開始由發(fā)展期走入成熟期，這更要求對細(xì)分場景的快速迭代。目前，外賣平臺承載了餐飲、商超、閃購、跑腿、藥品等多個(gè)業(yè)務(wù)品類，用戶入口則覆蓋了美團(tuán)App外賣頻道、外賣App、大眾點(diǎn)評外賣頻道等多個(gè)獨(dú)立應(yīng)用。由于前期側(cè)重需求的快速上線，設(shè)計(jì)層面缺乏標(biāo)準(zhǔn)化的規(guī)范約束，UI設(shè)計(jì)風(fēng)格不統(tǒng)一，也存在多次開發(fā)的情況，目前的維護(hù)成本較高，在開發(fā)過程中逐漸暴露出一些問題，主要體現(xiàn)在以下三個(gè)層面。

指標(biāo)一：移動(dòng)端UI問題統(tǒng)計(jì)

在Ones（美團(tuán)內(nèi)部研發(fā)需求管理工具）中，單個(gè)版本的UI適配問題占比超過總Bug數(shù)的11.82%，亟待優(yōu)化；交互適配問題在絕大多數(shù)版本中均有出現(xiàn)，一定程度上反映了其發(fā)生的普遍性。

指標(biāo)二：需求承接率數(shù)據(jù)統(tǒng)計(jì)

用戶側(cè)UI需求吞吐率達(dá)18.3%，目前用戶側(cè)UI需求吞吐率較低，亟待解決。

指標(biāo)三：需求入版情況統(tǒng)計(jì)

目前各版本UI同學(xué)都會(huì)提出一定數(shù)量的視覺優(yōu)化需求，但實(shí)際入版量僅為三分之一左右，未上線的原因均為RD開發(fā)時(shí)間不足。

從長遠(yuǎn)角度來看，隨著固有業(yè)務(wù)滲透率的不斷飽和，未來一段時(shí)間內(nèi)，美團(tuán)外賣還有開拓新業(yè)務(wù)、進(jìn)入新市場的需求，如國際化App、閃購App等，需要移動(dòng)端能夠高效地組建新業(yè)務(wù)App。在此背景下，移動(dòng)端具備快速調(diào)整適應(yīng)的UI展現(xiàn)能力是重中之重。為了達(dá)到上述目標(biāo)，需要PM/UI/RD共同維護(hù)一套設(shè)計(jì)規(guī)范，在產(chǎn)品上統(tǒng)一風(fēng)格，在源頭上做到統(tǒng)一設(shè)計(jì)，并在代碼中統(tǒng)一進(jìn)行實(shí)現(xiàn)。

1.3 UI一致性項(xiàng)目

基于上述開發(fā)工作中的切實(shí)痛點(diǎn)，以及未來可預(yù)見的移動(dòng)端能力需求，迫切需要一套統(tǒng)一的UI設(shè)計(jì)規(guī)范，以此沉淀設(shè)計(jì)風(fēng)格，建立統(tǒng)一的UI設(shè)計(jì)標(biāo)準(zhǔn)。

UI一致性項(xiàng)目自2019年5月份被提出，是外賣UI設(shè)計(jì)團(tuán)隊(duì)與研發(fā)團(tuán)隊(duì)的共建項(xiàng)目，該項(xiàng)目是為了改善用戶端體驗(yàn)一致性，提升多技術(shù)方案間組件的通用性和復(fù)用率，降低整體視覺改版的研發(fā)成本。通過抽離成熟的業(yè)務(wù)場景，建立可提供高質(zhì)量、可擴(kuò)展、可統(tǒng)一配置的基于Android/iOS/MRN的組件代碼庫，使之具備支持多業(yè)務(wù)高層次的代碼復(fù)用能力，進(jìn)而提高UI業(yè)務(wù)中臺能力，使項(xiàng)目保持高度一致性。

為了幫助團(tuán)隊(duì)提升產(chǎn)研效率，外賣技術(shù)成立了袋鼠UI共建項(xiàng)目組，將門戶建設(shè)、工具鏈建設(shè)以及組件建設(shè)統(tǒng)一管理統(tǒng)一規(guī)劃，并將工具鏈的品牌確定為“積木”，此前我們已經(jīng)寫過兩篇文章《積木Sketch Plugin：設(shè)計(jì)同學(xué)的貼心搭檔》、《積木Sketch插件進(jìn)階開發(fā)指南》介紹過積木相關(guān)的內(nèi)容，本文主要介紹UI一致性。

UI一致性是絕大部分研發(fā)團(tuán)隊(duì)面臨的共性問題，大家對落地設(shè)計(jì)規(guī)范，提高UI中臺能力，提升產(chǎn)研效率具有強(qiáng)烈的訴求。通過UI一致性的建設(shè)，不僅可以在品牌上實(shí)現(xiàn)體驗(yàn)升級，更可以全面提高產(chǎn)研效率，為業(yè)務(wù)的快速迭代提供有力支持和有效保障。

統(tǒng)一的品牌符號、品牌特征，有助于加深產(chǎn)品在用戶心目中的印象。統(tǒng)一的用戶界面和交互形式，能幫助用戶加深對產(chǎn)品的熟悉感和信任感。而一個(gè)好的設(shè)計(jì)語言可以在體驗(yàn)上為產(chǎn)品加分，也能夠更好的創(chuàng)造一致性體驗(yàn)。

2. UI一致性整體方案

為了幫助更多的業(yè)務(wù)部門定制符合一致性原則的專屬設(shè)計(jì)風(fēng)格，外賣技術(shù)部在實(shí)踐中不斷總結(jié)經(jīng)驗(yàn)，開發(fā)了一套通用的UI一致性解決方案。該方案通過UI一致性工具鏈落地項(xiàng)目建設(shè)，并打造一整套的閉環(huán)UI開發(fā)流程，目前已經(jīng)取得了一定的成果，以下系具體方案的介紹。

2.1 方案全景

外賣UI一致性套件由積木工具鏈、代碼組件庫、定制化設(shè)計(jì)云協(xié)作平臺以及文檔化說明（官網(wǎng)）四部分組成。

積木工具鏈：通過建立包含相同設(shè)計(jì)元素的統(tǒng)一物料市場，PM通過Axure插件拾取物料市場中的組件產(chǎn)出原型稿；UI/UE通過Sketch插件落地物料市場中的設(shè)計(jì)規(guī)范，產(chǎn)出符合要求的設(shè)計(jì)稿。未來，希望通過高保真原型輸出，可以給中后臺項(xiàng)目、非依賴體驗(yàn)項(xiàng)目提供更好的服務(wù)體驗(yàn)，賦予產(chǎn)品同學(xué)直接向技術(shù)側(cè)輸出原型稿的能力。
代碼組件庫（Android、iOS、MRN）：設(shè)計(jì)稿中的組件與RD代碼倉庫中組件一一對應(yīng)。
文檔化說明：官網(wǎng)詳細(xì)描述了代碼組件庫的集成方式、組件的使用方法，降低開發(fā)上手難度，只需要理解接口和職責(zé)即可進(jìn)行業(yè)務(wù)開發(fā)。
定制化設(shè)計(jì)云協(xié)作平臺：與美團(tuán)內(nèi)部的印跡團(tuán)隊(duì)（云協(xié)作平臺）合作開發(fā)，在RD的設(shè)計(jì)稿中標(biāo)注了哪些是代碼組件庫中已有的元素，避免重復(fù)開發(fā)，同時(shí)關(guān)聯(lián)了官網(wǎng)中該組件的使用說明，是代碼組件庫與官網(wǎng)的紐帶。

外賣UI一致性解決方案

2.2 接入指南

設(shè)計(jì)師逐步將設(shè)計(jì)語言沉淀為設(shè)計(jì)規(guī)范（包括組件、顏色、字體、圖片等）上傳至官網(wǎng)供整個(gè)設(shè)計(jì)團(tuán)隊(duì)查閱，同時(shí)將其量化并內(nèi)置于積木Sketch插件中；開發(fā)同學(xué)則將其代碼化，針對Android/iOS/MRN三端進(jìn)行組件庫開發(fā)。
設(shè)計(jì)師使用積木Sketch插件繪制設(shè)計(jì)稿，可以保證設(shè)計(jì)元素均從既定的設(shè)計(jì)標(biāo)準(zhǔn)中獲取，產(chǎn)出符合業(yè)務(wù)設(shè)計(jì)規(guī)范的設(shè)計(jì)稿，而代碼組件庫中也有對應(yīng)的實(shí)現(xiàn)。
繪制完成的設(shè)計(jì)稿上傳至印跡云協(xié)作平臺，交付開發(fā)同學(xué)進(jìn)行設(shè)計(jì)稿還原。
開發(fā)同學(xué)拿到設(shè)計(jì)稿后，就可以知道本次需求哪些組件已內(nèi)置于代碼組件庫中，并可以點(diǎn)擊設(shè)計(jì)稿中的鏈接，直接查看組件的使用說明。

UI一致性協(xié)作流程閉環(huán)

2.3 方案落地

雖然UI一致性在落地上會(huì)增加開發(fā)同學(xué)不少的工作量，推進(jìn)一致性建設(shè)也是一個(gè)艱難的工作，由于成本較高，且無法量化評估收益，很多團(tuán)隊(duì)最終未達(dá)到預(yù)期效果，但一旦有效運(yùn)作起來后，團(tuán)隊(duì)將獲得豐厚的回報(bào)。UI一致性的建設(shè)需要設(shè)計(jì)者對現(xiàn)有狀態(tài)有足夠的認(rèn)識，對業(yè)務(wù)有充分理解，以及優(yōu)秀的設(shè)計(jì)能力，同時(shí)還要不斷地進(jìn)行實(shí)踐和優(yōu)化。為了保證一致性項(xiàng)目的成功落地，避免“半途而廢”，我們制定了一系列的推進(jìn)措施：

項(xiàng)目小組不能脫離日常需求開發(fā)工作。這樣可以保證設(shè)計(jì)師所沉淀的設(shè)計(jì)元素始終來自于最新的業(yè)務(wù)場景，同時(shí)項(xiàng)目產(chǎn)出可以快速應(yīng)用到最新的版本中得以驗(yàn)證。
優(yōu)先選擇受視覺因素影響較大、投入產(chǎn)出比高的模塊場景進(jìn)行改造，化繁為簡，確定最小驗(yàn)證閉環(huán) （MVP，Minimum Viable Product），在實(shí)踐中不斷優(yōu)化，進(jìn)而跑通整個(gè)流程。
項(xiàng)目推進(jìn)由UI同學(xué)按版本提出需求，移動(dòng)端排期并落地實(shí)施，由UI統(tǒng)一驗(yàn)收。
建立階段性目標(biāo)，并完成最近三期工作的具體規(guī)劃，定期復(fù)盤完成情況，保證項(xiàng)目的持續(xù)推進(jìn)。

2.4 一致性成果

經(jīng)過一段時(shí)間的UI一致性建設(shè)，在資源一致性方面，外賣App團(tuán)隊(duì)已經(jīng)完成了近百個(gè)Iconfont的替換工作，有效減小了安裝包的體積。在組件代碼庫建設(shè)方面，完成組件替換三十多處，中等業(yè)務(wù)需求平均節(jié)約3pd人力；在工具鏈方面，根據(jù)UI/UE提供的數(shù)據(jù)，對于強(qiáng)依賴設(shè)計(jì)資源的需求，在使用積木Sketch插件后，提效能夠達(dá)到30%以上，對于UI資源依賴不強(qiáng)的流程需求，平均提效可以達(dá)到50%以上。

3. 設(shè)計(jì)體系建設(shè)

細(xì)化來看，UI一致性整體方案主要分為兩個(gè)部分，一個(gè)是設(shè)計(jì)體系建設(shè)，另一個(gè)則是工具鏈建設(shè)。設(shè)計(jì)體系建設(shè)是基礎(chǔ)，主要是設(shè)計(jì)師沉淀設(shè)計(jì)風(fēng)格，建立統(tǒng)一的UI設(shè)計(jì)標(biāo)準(zhǔn)的工作，而工具鏈建設(shè)則是支撐，是開發(fā)人員通過開發(fā)一系列的工具將開發(fā)過程閉環(huán)，實(shí)現(xiàn)設(shè)計(jì)體系落地。

3.1 外賣DPL

DPL（Design Pattern Library）是一份面向UED設(shè)計(jì)人員的文檔化說明，描述了設(shè)計(jì)模式庫的規(guī)范以及應(yīng)用場景等，外賣DPL主要包括組件搭建規(guī)范以及資源一致性兩部分。DPL的背面是技術(shù)實(shí)現(xiàn)，一般體現(xiàn)在Android/iOS/RN代碼框架中，比如阿里的FusionDesign庫、騰訊的QMUI庫等，這些封裝好的代碼組件面向程序開發(fā)人員。在未建立DPL模型之前，開發(fā)同學(xué)拿到設(shè)計(jì)稿進(jìn)行視覺還原后，需要修改多次，才能最終通過設(shè)計(jì)師的驗(yàn)證，極大影響了開發(fā)效率，還降低了需求吞吐率。

未建立外賣DPL模型之前開發(fā)流程

而通過DPL實(shí)現(xiàn)設(shè)計(jì)-開發(fā)流程的閉環(huán)，UI同學(xué)由于設(shè)計(jì)規(guī)范的標(biāo)準(zhǔn)化，可使出稿效率、走查效率顯著提升，重復(fù)組件甚至無需走查；對于RD同學(xué)來說，組件庫中的組件在配置正確的情況下，由于已經(jīng)經(jīng)過了歷史版本的檢驗(yàn)，適配問題出現(xiàn)較少，無需重復(fù)進(jìn)行視覺的修正；對于設(shè)計(jì)團(tuán)隊(duì)來說，優(yōu)秀的設(shè)計(jì)體系具有包容性且充滿生命力，好的設(shè)計(jì)模式庫能夠幫助實(shí)現(xiàn)規(guī)范化，從而減輕界面開發(fā)的工作量，提高一致性；而對于設(shè)計(jì)師來說，建立DPL有助于減少誤用、濫用以及無效的創(chuàng)新。

3.2 組件搭建

在長期的版本迭代中，隨著功能的不斷增加以及UI的持續(xù)改版，新舊樣式混雜，維護(hù)極為困難。設(shè)計(jì)師通過將頁面走查結(jié)果歸納梳理，制定設(shè)計(jì)規(guī)范，從而選取復(fù)用性高的組件進(jìn)行組件庫搭建。通過搭建組件庫可以進(jìn)行規(guī)范控制，避免控件的隨意組合，減少頁面之間的差異；組件庫中組件滿足業(yè)務(wù)特色，同時(shí)可以應(yīng)對不斷變化的環(huán)境，具有云端動(dòng)態(tài)調(diào)整能力，可以在規(guī)范更新時(shí)進(jìn)行統(tǒng)一調(diào)整。

在不影響需求實(shí)現(xiàn)以及設(shè)計(jì)效果的前提下，只有在方案設(shè)計(jì)中盡可能使用組件，提升組件設(shè)計(jì)稿中的覆蓋度，才可能真正通過組件庫來提效。而除了在新的需求中使用組件，還需要將已有頁面內(nèi)容盡量替換成組件，才能避免頁面升級時(shí)的重復(fù)修改問題，真正提高產(chǎn)研效率。在進(jìn)行組件庫建設(shè)時(shí)要注意以下幾點(diǎn)。

選擇合適粒度

組件的粒度選擇曾是困擾我們很久的一個(gè)問題，雖然有構(gòu)建設(shè)計(jì)系統(tǒng)的核心理論——原子設(shè)計(jì)理論為指導(dǎo)，即按照“原子、分子、組織、模板、頁面”五個(gè)層面進(jìn)行頁面設(shè)計(jì)。這一理論對于從零開發(fā)新應(yīng)用沒有任何問題，但進(jìn)行一致性改造的App，往往已經(jīng)暴露出很多設(shè)計(jì)問題，已經(jīng)存在數(shù)百個(gè)成熟的線上頁面，改造存在非常大的困難，必須根據(jù)具體業(yè)務(wù)選擇合適粒度。在進(jìn)行組件制作前，項(xiàng)目同學(xué)對外賣的近百個(gè)頁面進(jìn)行了梳理，對使用到的組件進(jìn)行了分類，并根據(jù)組件的使用頻率進(jìn)行排序，制定了逐步替換計(jì)劃。從而避免了組件庫做的很全、花費(fèi)了很多的人力，但實(shí)際很多組件都用不上，或者開發(fā)的組件過少，覆蓋場景不足等問題。

我們將走查結(jié)果與設(shè)計(jì)師反復(fù)交流，發(fā)現(xiàn)復(fù)用性較高的組件大體可以分為兩類：第一類“基礎(chǔ)控件”，也就是類似于標(biāo)簽、按鈕、開關(guān)等具備基礎(chǔ)功能的元素，對應(yīng)原子理論中的原子；第二類“業(yè)務(wù)組件”，類似于商品卡片等，是由“基礎(chǔ)控件”組成（比如商品卡片由“標(biāo)簽控件”與“圖片控件”組成），同時(shí)“業(yè)務(wù)組件”還能相互組合，成為更高階的“復(fù)雜組件”，類似于原子理論中的分子。“業(yè)務(wù)組件”的組合又是千變?nèi)f化的，不同樣式的業(yè)務(wù)組件可以組成類似“商家列表”、“菜品列表”等“模板”，而“模板”與“基本控件”組合在一起，就成為了“頁面”。

外賣DPL模型建立

具備拓展性

組件必須具備一定的可配置屬性才能提升適用場景。可配置屬性體現(xiàn)在三個(gè)方面：組件支持局部元素展示隱藏，例如商品卡片的標(biāo)題、說明、價(jià)格可根據(jù)接口數(shù)據(jù)控制展示邏輯；組件支持多種樣式，例如商品卡片的左圖右文排列、上圖下文排列；組件支持業(yè)務(wù)方配置主題，如調(diào)整高亮色、調(diào)整對齊方式等。

組件應(yīng)具有拓展性

支持統(tǒng)一管理

組件管理功能對外賣UI一致性起著至關(guān)重要的作用，這主要體現(xiàn)在兩方面：首先是設(shè)計(jì)風(fēng)格沉淀，目前袋鼠UI已經(jīng)形成了自己的獨(dú)特風(fēng)格，外賣設(shè)計(jì)團(tuán)隊(duì)根據(jù)設(shè)計(jì)規(guī)范，對符合UI一致性外賣業(yè)務(wù)場景的組件不斷進(jìn)行抽象及建設(shè)，沉淀出越來越多的通用業(yè)務(wù)組件，這些組件需要及時(shí)擴(kuò)充到Library中，供團(tuán)隊(duì)成員使用；另外一個(gè)作用則是保持團(tuán)隊(duì)使用的均為最新組件。由于各種原因，組件的設(shè)計(jì)元素（色彩、字體、圓角等屬性）可能會(huì)發(fā)生變更，需要及時(shí)提醒團(tuán)隊(duì)成員更新組件，從而保持所有頁面的一致性。

3.3 資源一致性

UI設(shè)計(jì)語言與自身業(yè)務(wù)關(guān)聯(lián)性很強(qiáng)，美團(tuán)很多業(yè)務(wù)包括外賣、酒旅、團(tuán)購等都有一套自己的設(shè)計(jì)系統(tǒng)。“通用”意味著無法滿足具有業(yè)務(wù)特色的需求，不同業(yè)務(wù)的組件、色彩系統(tǒng)、動(dòng)效、字體樣式等千差萬別，其中任意一環(huán)的缺失都會(huì)導(dǎo)致一致性被破壞。

設(shè)計(jì)語言并不是一個(gè)抽象的概念，大家提到美團(tuán)就想起美團(tuán)黃，想到袋鼠，想到菜品卡片列表，想到騎著摩托車穿著印有“美團(tuán)外賣”衣服的騎手，通過設(shè)計(jì)語言可以傳達(dá)品牌主張和設(shè)計(jì)理念。目前，袋鼠UI已經(jīng)形成了一套屬于自己的獨(dú)特風(fēng)格，對于一致性元素處理有了一套自己的標(biāo)準(zhǔn)，對于產(chǎn)品的設(shè)計(jì)者而言，必須將這種風(fēng)格化延續(xù)，才能使我們整個(gè)項(xiàng)目具備高度的一致性，才能保持“袋鼠特色“，保證吸引力。

3.3.1 圖片

建立插畫庫

插圖作為一種視覺語言，是品牌識別度的關(guān)鍵核心元素，與單純的文案信息不同，圖形化在直觀描述固有信息的同時(shí)，也在塑造情感背景，使用戶更具沉浸感和共情性。插畫在提升產(chǎn)品用戶體驗(yàn)的同時(shí)完成商業(yè)目標(biāo)，在表達(dá)效果及生產(chǎn)效率上有獨(dú)特的優(yōu)勢，在追求效率的互聯(lián)網(wǎng)產(chǎn)品中被大量地運(yùn)用。

由于之前產(chǎn)品中的插圖未經(jīng)系統(tǒng)整合，而插畫師的個(gè)人風(fēng)格明顯，不同的設(shè)計(jì)師在圖形化的工作協(xié)同中，風(fēng)格很難復(fù)現(xiàn)，而單純由一名設(shè)計(jì)師去完成整體業(yè)務(wù)的插畫建設(shè)工作也存在一定風(fēng)險(xiǎn)。不同設(shè)計(jì)師之前畫過的元素?zé)o法互通，造成很多元素重復(fù)設(shè)計(jì)、風(fēng)格不統(tǒng)一，缺乏系統(tǒng)性地創(chuàng)作和整理，無法最大化地提升生產(chǎn)效率，并且影響產(chǎn)品的品質(zhì)感。所以插圖體系在保持品牌一致性、提升工作效率以及規(guī)避風(fēng)險(xiǎn)上尤為重要。

插畫規(guī)范示例

使用Iconfont

Iconfont可譯為圖標(biāo)字體，顧名思義就是用字體文件取代圖片文件來展示圖標(biāo)、特殊字體等元素的一種方法。簡單來說，Iconfont就是把多個(gè)圖標(biāo)文件打包為ttf字體文件，注冊到系統(tǒng)中，App可以像使用字體一樣使用圖標(biāo)。其原理可以簡單理解為通過ttf字體文件維護(hù)一個(gè)Unicode碼與圖形的映射關(guān)系。當(dāng)使用Iconfont為項(xiàng)目助力的時(shí)候，配置多個(gè)圖標(biāo)不再需要去下載數(shù)個(gè)PNG文件，僅需要維護(hù)一套ttf字體文件即可。

Iconfont不僅具有矢量性、可自由變化大小的特點(diǎn)，而且支持任意改變顏色。從項(xiàng)目角度來看，由于無需針對不同手機(jī)分辨率內(nèi)置多張圖片，可以一定程度減小包體積，而且方便UI同學(xué)對圖標(biāo)進(jìn)行統(tǒng)一管理，為無用icon和相似icon檢測做基礎(chǔ)。

使用iconfont替換項(xiàng)目中的圖片

歸檔圖片文件

當(dāng)App發(fā)展到一定階段，必然面臨著包體積會(huì)越來越大，無用圖片與相似圖片也會(huì)越來越多的問題。同時(shí)，由于開拓新業(yè)務(wù)而不斷涌現(xiàn)的新場景，又不可避免地新增大量的圖片。總結(jié)來看，圖片文件在一致性項(xiàng)目中需要解決兩個(gè)問題，即存量圖片的處理以及新增圖片的管理。

對于存量圖片，必須判斷其合理性，項(xiàng)目中存在大量相似圖片，這些圖片可能僅是padding不同，或者顏色尺寸存在微小差異，可以通過腳本掃描相似圖片，根據(jù)圖片的特征Hash判斷圖片的相似度，相似度高的圖片根據(jù)UI建議，保留一張即可。那如何防止新增圖片“重蹈覆轍”呢？通過建立圖片管理后臺，將圖片按場景分類，標(biāo)準(zhǔn)圖片需從組件代碼庫中選取，新增圖片執(zhí)行PR策略，需相關(guān)負(fù)責(zé)人審核，可有效防止相似圖片的堆積問題。

一致性項(xiàng)目實(shí)施前項(xiàng)目中的相似圖片

3.3.2 動(dòng)效

動(dòng)效是指那些那些能夠?yàn)楫a(chǎn)品賦予生機(jī)的動(dòng)態(tài)界面元素及視覺效果，這些交互效果通常與特定的響應(yīng)行為相關(guān)，甚至包括那些與交互行為沒有直接關(guān)聯(lián)的臨時(shí)狀態(tài)。精細(xì)而恰當(dāng)?shù)膭?dòng)畫效果可以傳達(dá)狀態(tài)，增強(qiáng)用戶對于直接操縱的感知，通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果。

隨著外賣業(yè)務(wù)的不斷增加，動(dòng)效的使用比重在不斷增加，重要性日漸凸顯，也是增強(qiáng)用戶體驗(yàn)與競品拉開差距的重要因素，因此，統(tǒng)一規(guī)范的使用動(dòng)效尤為重要。通過動(dòng)效庫建設(shè)，UI層面可以承載品牌、傳遞情感，加深用戶對App的印象，讓用戶放松、愉悅；RD層面同一組件可在多場景直接復(fù)用，還降低了研發(fā)成本。

動(dòng)效

3.3.3 顏色

顏色可以起到傳遞品牌信息、區(qū)分信息的所屬關(guān)系、標(biāo)明控件的選中狀態(tài)以及對內(nèi)容的信息進(jìn)行分層級展示等功能。重要的信息需要在頁面中被突出展示。系統(tǒng)級色彩體系主要定義了外賣的主要顏色、文字顏色、輔助顏色以及標(biāo)準(zhǔn)漸變色，顏色在一定時(shí)期內(nèi)不再支持新增。通過將標(biāo)準(zhǔn)色板內(nèi)置于積木Sketch插件中，限制UI繪制設(shè)計(jì)稿時(shí)的使用范圍，而RD同學(xué)僅可通過代碼組件庫中選取顏色，保證色值的準(zhǔn)確性，也便于進(jìn)行主題定制。

定義顏色使用場景

3.3.4 字體

字體是體系化界面設(shè)計(jì)中最基本的構(gòu)成之一。用戶通過文本來理解內(nèi)容和完成工作，科學(xué)的字體系統(tǒng)將大大提升用戶的閱讀體驗(yàn)及工作效率。設(shè)計(jì)師在字體設(shè)計(jì)過程中需要關(guān)注非常多的方面，比如字體family、字距、行高、段落等等。如何讓文字看起來更自然，是設(shè)計(jì)師團(tuán)隊(duì)一直探尋的答案，UI同學(xué)根據(jù)文字的層級關(guān)系，規(guī)定了Headline、Subtitle、Body、Button以及Caption的文字使用規(guī)范，根據(jù)設(shè)計(jì)稿中文字的位置，就可確定文字的具體樣式。

定義字體使用規(guī)范

4. 工具鏈建設(shè)

要想保持UI一致性，就不能打破規(guī)則。外賣UI一致性套件由積木工具鏈、代碼組件庫、定制化設(shè)計(jì)云協(xié)作平臺以及官網(wǎng)四部分組成，通過將這四部分連接起來，形成一個(gè)閉環(huán)，把整個(gè)工作流限制在標(biāo)準(zhǔn)操作以內(nèi)。

4.1 積木Sketch插件

在之前的文章中，我們已經(jīng)對積木插件進(jìn)行了詳細(xì)介紹，這里只作簡要概述，介紹其在一致性項(xiàng)目中發(fā)揮的作用。從設(shè)計(jì)階段顏色的選擇、字體的規(guī)范、控件的樣式，到RD開發(fā)階段代碼的統(tǒng)一管理、API的制定、多端的實(shí)現(xiàn)方式都必須遵守一套規(guī)則，通過積木Sketch插件落地設(shè)計(jì)規(guī)范，可以保證設(shè)計(jì)元素均從既定設(shè)計(jì)標(biāo)準(zhǔn)中獲取，產(chǎn)出符合業(yè)務(wù)設(shè)計(jì)語言的設(shè)計(jì)稿，而各平臺UI代碼庫中也有對應(yīng)實(shí)現(xiàn)，從而使積木插件成為UI一致性的抓手。

積木Sketch Plugin平臺化示意

4.1.1 插件功能

積木Sketch插件經(jīng)過一段時(shí)間的建設(shè)，目前已具備Iconfont、標(biāo)準(zhǔn)色板、組件庫、數(shù)據(jù)填充、文字模板等功能。通過Iconfont可以從公司圖標(biāo)庫中拉取設(shè)計(jì)團(tuán)隊(duì)上傳的SVG圖標(biāo)，并直接應(yīng)用于設(shè)計(jì)稿；標(biāo)準(zhǔn)色板可以限定設(shè)計(jì)師的顏色使用范圍，確保設(shè)計(jì)稿中的顏色均符合設(shè)計(jì)規(guī)范；組件庫中包含從外賣業(yè)務(wù)抽離的基本控件與通用組件，具有可復(fù)用和標(biāo)準(zhǔn)化的特點(diǎn)，并與不同開發(fā)語言組件庫中的代碼一一對應(yīng)；數(shù)據(jù)填充庫可以使設(shè)計(jì)師采用真實(shí)數(shù)據(jù)進(jìn)行填充，使設(shè)計(jì)稿更貼近線上環(huán)境；文字模板中內(nèi)置了字體樣式的使用規(guī)范，根據(jù)設(shè)計(jì)稿中文字的位置，點(diǎn)擊文字圖層即可直接應(yīng)用。

積木Sketch Plugin功能演示

4.1.2 物料市場

通過Sketch管理后臺，設(shè)計(jì)師可以將配色規(guī)范、文字規(guī)范、話術(shù)、Iconfont、組件庫上傳至云端并與整個(gè)設(shè)計(jì)團(tuán)隊(duì)中成員共享，并可實(shí)現(xiàn)設(shè)計(jì)資產(chǎn)的版本管理。通過將Sketch Library存儲在后臺物料市場，設(shè)計(jì)師可以與團(tuán)隊(duì)成員共享組件（Symbol），Library可以實(shí)現(xiàn)“一處更改，處處生效”，即使是關(guān)聯(lián)了遠(yuǎn)程組件庫歷史的設(shè)計(jì)稿檢測到更新時(shí)，也會(huì)收到Sketch通知，確保工作中使用的是最新組件。

積木Sketch Plugin 物料管理后臺

4.2 代碼模型建設(shè)

為了滿足中小企業(yè)的需求，越來越多的開源組件庫誕生，但開源代表著“通用”，無法滿足業(yè)務(wù)特色的需求，于是很多企業(yè)也開始做起了自己的組件庫。通過建立代碼組件庫，能幫助開發(fā)同學(xué)快速搭建App頁面，減少設(shè)計(jì)與開發(fā)溝通成本，統(tǒng)一體驗(yàn)規(guī)范等。

代碼組件庫模型

4.2.1 代碼庫功能

提高項(xiàng)目可維護(hù)性

由于組件庫中的組件職責(zé)單一，降低了系統(tǒng)的耦合度，開發(fā)人員可以很容易地了解該組件提供的能力。組件可以自由替換、組合為高階組件，在進(jìn)行組件更新時(shí)僅需修改一處。每個(gè)項(xiàng)目成員維護(hù)一定數(shù)量的組件，讓團(tuán)隊(duì)中每個(gè)人都能發(fā)揮所長，可以最大化團(tuán)隊(duì)的開發(fā)效率。

實(shí)現(xiàn)文檔化

組件接口有統(tǒng)一的規(guī)范，降低新人的上手難度，新成員只需要理解接口和職責(zé)即可開發(fā)組件代碼，由于代碼的影響范圍僅限于組件內(nèi)部，對項(xiàng)目的風(fēng)險(xiǎn)控制也非常有幫助。通過對組件統(tǒng)一管理，實(shí)現(xiàn)代碼的積累沉淀與有效復(fù)用，全面提升了新業(yè)務(wù)的需求開發(fā)效率。

便于單元測試

由于組件職責(zé)單一而清晰，對外僅暴露接口，概念上可以把組件當(dāng)成一個(gè)函數(shù)，輸入對應(yīng)著輸出，這讓自動(dòng)化測試變得更加簡單。

實(shí)現(xiàn)無障礙等定制化功能

無障礙功能可以改善殘障人士的用戶體驗(yàn)，組件庫中的組件資源高內(nèi)聚，完全由自身控制加載，不與全局或其他組件產(chǎn)生影響。組件的加載、渲染路徑清晰可控，對于組件功能定制，實(shí)現(xiàn)類似于無障礙等功能較為方便。

4.2.2 方案設(shè)計(jì)

統(tǒng)一配置文件

前文也提到，外賣業(yè)務(wù)入口覆蓋外賣獨(dú)立App、美團(tuán)外賣頻道以及大眾點(diǎn)評外賣頻道等，外賣組件需要在不同的移動(dòng)端上適配宿主App的UI風(fēng)格及交互體驗(yàn)，這就需要組件庫支持主題配置功能。由于主題涉及Android/iOS/MRN多端，需要一套通用的主題配置文件。經(jīng)過了各端開發(fā)同學(xué)與設(shè)計(jì)師的多輪討論，最終確定了包含主題顏色、文字外觀、組件風(fēng)格等內(nèi)容的主題描述文件格式。配置文件通過下發(fā)，就可以實(shí)現(xiàn)全局替換主題的功能。

{
  // 主題顏色
  "rooBrandColors": {
    "rooBrandPrimary": "#FFCC33"
  },
  // 文本外觀
  "rooTextAppearance": {
    "rooTextAppearanceHeadline1": {
      "fontFamily": "sans-serif-medium",    // 字體
      "textStyle": "normal",                // 風(fēng)格（normal/bold/italic）
      "textSize": 44,                       // 字號
    }
  },
  // 組件風(fēng)格
  "rooStyle":{
      "rooButtonStyle": {
        "textAppearance": "?attr/rooTextAppearanceButton",
        "backgroundColor": "?attr/rooBrandPrimary",
        "cornerRadius": 0,
      }
  }

搭建全平臺組件庫

目前，市面上耳熟能詳?shù)慕M件庫包括阿里的Antd Desigin、Fusion Design以及美團(tuán)的Roo Design等，基本都是服務(wù)于Web開發(fā)的組件庫，通過這些組件庫可以快速搭建一些中后臺系統(tǒng)。

為什么沒有知名的Native開源組件庫呢？因?yàn)槊總€(gè)應(yīng)用的主題、風(fēng)格以及交互體驗(yàn)都是不同的，而這些不同恰恰是傳達(dá)品牌主張和設(shè)計(jì)理念的靈魂，因此必須結(jié)合業(yè)務(wù)，針對Android/iOS/MRN三端進(jìn)行組件庫開發(fā)。通過搭建全平臺代碼組件庫，可以保證同一個(gè)UI組件在各端表現(xiàn)一致，進(jìn)行UI升級時(shí)降低改錯(cuò)或遺漏的風(fēng)險(xiǎn)，除此之外，還能降低測試壓力，提高需求的吞吐率。

4.2.3 示例應(yīng)用

我們針對Android/iOS/MRN三端代碼開發(fā)了示例工程，通過示例工程，不僅可以幫助UI同學(xué)完成組件驗(yàn)收，還能幫助開發(fā)同學(xué)快速查閱可以應(yīng)用的所有組件，了解其使用方式以及進(jìn)行代碼調(diào)試。

組件庫demo示例

4.3 官網(wǎng)門戶建設(shè)

官網(wǎng)相當(dāng)于項(xiàng)目的門面，一個(gè)好的門面才能吸引更多的用戶，才能更好地對項(xiàng)目進(jìn)行推廣。官網(wǎng)作為設(shè)計(jì)師與開發(fā)同學(xué)溝通的媒介，需要兩者共同維護(hù)。通過官網(wǎng)可以幫助團(tuán)隊(duì)內(nèi)設(shè)計(jì)師沉淀設(shè)計(jì)風(fēng)格，建立統(tǒng)一的UI設(shè)計(jì)規(guī)范，幫助RD同學(xué)進(jìn)行組件文檔管理與查閱。

4.3.1 官網(wǎng)功能

當(dāng)前的官網(wǎng)主要由四部分組成，分別是設(shè)計(jì)語言、組件庫、插畫庫以及資源下載，分別服務(wù)于UI和RD同學(xué)。

外賣平臺化官網(wǎng)導(dǎo)航欄

設(shè)計(jì)語言

UI一致性項(xiàng)目中采取了“原子理論”的構(gòu)成原理，即從最小的元素開始定義，進(jìn)而將這些元素按照規(guī)則進(jìn)行組裝，拼接成組件，最后通過這些組件拼接成最終的頁面，這是一個(gè)由點(diǎn)到面的過程。設(shè)計(jì)語言章節(jié)主要服務(wù)于UI/UE同學(xué)，該章節(jié)通過視覺、設(shè)計(jì)模式、動(dòng)效等三個(gè)子章節(jié)使得讀者能夠快速了解項(xiàng)目的設(shè)計(jì)規(guī)范，從而快速上手。

組件庫

組件庫是設(shè)計(jì)模式中各種元素的具體實(shí)現(xiàn)，在這個(gè)頁面描述了組件的使用方式。

插畫庫

插畫庫中則介紹了插畫的使用場景，插畫的繪制規(guī)范以及插畫案例展示。

資源下載

提供積木工具鏈產(chǎn)品下載功能。

外賣平臺化官網(wǎng)

4.3.2 方案設(shè)計(jì)

由于官網(wǎng)以純粹的圖文展示為主，且迭代頻率較快，因而選擇了當(dāng)下較為普遍的文檔-網(wǎng)站生成系統(tǒng)，即只需按照一定規(guī)范將書寫的Markdown文檔放至相應(yīng)目錄，前端自動(dòng)解析后生成導(dǎo)航，并且支持多語種、圖片、文件、視頻等素材。這種方式極大地縮短了官網(wǎng)的開發(fā)周期，即便是沒有前端經(jīng)驗(yàn)的同學(xué)也能快速上手。

為了方便UI同學(xué)對官網(wǎng)文檔的修改，我們基于文檔網(wǎng)站生成系統(tǒng)搭建了在線編輯平臺。通過該平臺，相關(guān)人員可以直接做到在線編輯、發(fā)布，節(jié)約了UI同學(xué)與RD同學(xué)的溝通成本以及發(fā)布成本。填充期間，使用者可以實(shí)時(shí)預(yù)覽編輯的內(nèi)容，修改后只需點(diǎn)擊保存即可立即更新到網(wǎng)站中。

官網(wǎng)支持平臺化功能，不同業(yè)務(wù)方可以創(chuàng)建屬于自己的文檔站點(diǎn)，一個(gè)好的文檔站點(diǎn)對于設(shè)計(jì)組的方案推廣、外部接入都大有裨益。

外賣平臺化官網(wǎng)錄入后臺

4.4 工具鏈的閉環(huán)

當(dāng)我們信心滿滿的把UI一致性解決方案推廣到日常開發(fā)中時(shí)，除了聽到可以提升效率的褒獎(jiǎng)外，開發(fā)同學(xué)對項(xiàng)目的吐槽聲也常常傳入我們的耳邊，“怎么才能知道設(shè)計(jì)稿中的哪個(gè)組件已經(jīng)開發(fā)完成了？”，“查詢這個(gè)組件的使用方法好麻煩，每次都要去官網(wǎng)檢索”，“規(guī)范顏色、圖標(biāo)的名稱是什么？怎么才能引用到？”

我們無法限制別人的選擇，所以只能讓這套體系變得更好用，如果不去優(yōu)化整個(gè)流程，將其串聯(lián)起來形成閉環(huán)，后面整個(gè)項(xiàng)目可能都會(huì)慢慢崩塌，所以我們對項(xiàng)目進(jìn)行了重新復(fù)盤，經(jīng)過大家集思廣益，終于找到了能將工具鏈體系打通的解決方案：設(shè)計(jì)稿作為銜接RD與UI的紐帶，可以把官網(wǎng)與代碼倉庫打通。

我們與美團(tuán)內(nèi)部的印跡團(tuán)隊(duì)合作開發(fā)，然后定制了一個(gè)設(shè)計(jì)云協(xié)作平臺，在給RD的設(shè)計(jì)稿中標(biāo)注了哪些是代碼組件庫中已有的元素，避免了重復(fù)開發(fā)，同時(shí)關(guān)聯(lián)了官網(wǎng)上該組件的使用說明，RD同學(xué)在開發(fā)過程中遇到組件使用問題無需檢索，點(diǎn)擊即可跳轉(zhuǎn)至使用文檔。后期我們還將顏色、iconfont以及插畫庫中圖片也進(jìn)行了關(guān)聯(lián)，真正做到了一致性元素的全覆蓋。

與印跡合作支持組件展示的云協(xié)作平臺

加入我們

UI一致性項(xiàng)目原本只是外賣技術(shù)團(tuán)隊(duì)提升UI/RD協(xié)作效率的一次嘗試，現(xiàn)在已經(jīng)作為全面提升產(chǎn)研效率的媒介，承載了越來越多的功能。圍繞設(shè)計(jì)日常工作，提供高效的設(shè)計(jì)元素獲取方式，讓工作變得更輕松，是我們的核心目標(biāo)。如何推動(dòng)設(shè)計(jì)規(guī)范落地，并且輸出到各個(gè)業(yè)務(wù)系統(tǒng)靈活使用，是我們持續(xù)追尋的答案。探尋研發(fā)和設(shè)計(jì)更為高效的協(xié)作模式，是我們一直努力的方向。

如你所見，通過UI一致性建設(shè)可以幫助設(shè)計(jì)團(tuán)隊(duì)提升設(shè)計(jì)效率、沉淀設(shè)計(jì)語言以及減少走查負(fù)擔(dān)；讓RD同學(xué)面對新項(xiàng)目時(shí)可以專注于業(yè)務(wù)需求，而無需把時(shí)間耗費(fèi)在組件的編寫上；減少Q(mào)A工作量，保證控件質(zhì)量無需頻繁的回歸測試；幫助PM提高版本迭代效率及版本需求吞吐量，提供業(yè)務(wù)的快速拓展能力。當(dāng)然，我們除了希望制作一流的產(chǎn)品，也希望可以讓大家在繁忙的工作中得以喘息。我們會(huì)繼續(xù)以設(shè)計(jì)語言為依托，以工具鏈建設(shè)為抓手持續(xù)進(jìn)行UI一致性建設(shè)，不斷提高移動(dòng)端UI業(yè)務(wù)中臺能力。

如果你也想?yún)⑴c我們的UI一致性項(xiàng)目建設(shè)，歡迎加入我們！

致謝

感謝曉飛、彥平、杜瑤、冰冰、云鵬對項(xiàng)目的大力支持。

感謝到家優(yōu)秀設(shè)計(jì)師淼林、昱翰、冉冉、璟琦、雪美、田園。

感謝用戶平臺組參與UI一致性建設(shè)的開發(fā)同學(xué)王鵬、騰飛、趙炎、瀚陽等，感謝美團(tuán)印跡開發(fā)團(tuán)隊(duì)的支持。

感謝所有參與人的努力與堅(jiān)持，為外賣DPL建立貢獻(xiàn)力量！

---------- END ----------

招聘信息

美團(tuán)外賣長期招聘Android、iOS、FE高級/資深工程師和技術(shù)專家，歡迎加入外賣App大家庭。感興趣的同學(xué)可投遞簡歷至：tech@meituan.com（郵件主題請注明：外賣大前端）。

| 歡迎關(guān)注：美團(tuán)技術(shù)團(tuán)隊(duì)微信公眾號（meituantech），我們會(huì)定期推送技術(shù)干貨、技術(shù)沙龍和技術(shù)團(tuán)隊(duì)招聘信息。
| 在公眾號菜單欄回復(fù)【2019年貨】、【2018年貨】、【2017年貨】、【算法】等關(guān)鍵詞，可查看美團(tuán)技術(shù)團(tuán)隊(duì)歷年技術(shù)文章合集。

在線咨詢

上一篇：瀏覽器常見的6個(gè)安全風(fēng)險(xiǎn)，安全瀏覽網(wǎng)頁這樣做
下一篇：.NET Core中WebUtility與HttpU

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何使用界面控件DevExtreme自定義基于HTM

組件的API

單個(gè)CSS類

TML（網(wǎng)頁）

WEB

W3C

WEB標(biāo)準(zhǔn)

HTML定義

頁面基本結(jié)構(gòu)

關(guān)于viewport

常見元素

元素分類

元素默認(rèn)樣式

CSS（層疊樣式表）

Css的單位

字體屬性

文本屬性

Overflow屬性

濾鏡

背景屬性

優(yōu)先級

基礎(chǔ)選擇器

組合選擇器

復(fù)合選擇器

偽類選擇器

偽元素選擇器

屬性選擇器

小結(jié)

1. 背景

2. UI一致性整體方案

3. 設(shè)計(jì)體系建設(shè)

4. 工具鏈建設(shè)

加入我們

致謝

您的項(xiàng)目需求