編輯導(dǎo)語(yǔ)：Smart UI 是一套開發(fā)、設(shè)計(jì)風(fēng)格統(tǒng)一的智能小程序擴(kuò)展組件庫(kù)，由百度智能小程序官方設(shè)計(jì)團(tuán)隊(duì)和智能小程序團(tuán)隊(duì)為小程序量身設(shè)計(jì)，以增強(qiáng)開發(fā)者開發(fā)體驗(yàn)。本文作者詳細(xì)分析了Smart UI。

2020年以來，百度智能小程序迎來了規(guī)?；鲩L(zhǎng)，開發(fā)者入駐的數(shù)量達(dá)到20w+，小程序團(tuán)隊(duì)也在逐漸思考：如何給予開發(fā)者更多的供給和扶持，同時(shí)也能為用戶帶來具備優(yōu)質(zhì)內(nèi)容和服務(wù)的小程序。

若要達(dá)到開發(fā)者和用戶需求的雙贏，我們需要探索出一套豐富易用的體驗(yàn)資產(chǎn)庫(kù)—Smart UI，這樣不僅能在供給側(cè)降低開發(fā)者的開發(fā)成本，又能在輸出側(cè)保證小程序用戶的優(yōu)質(zhì)體驗(yàn)。

一、什么是Smart UI

其實(shí)在Smart UI誕生之前，在面向開發(fā)者的服務(wù)供給體系中，已經(jīng)存在了較穩(wěn)定的原生基礎(chǔ)組件庫(kù)和API，由于原生組件的局限性，無(wú)法滿足更加多元和定制化的小程序設(shè)計(jì)需求，于是Smart UI這樣一套擴(kuò)展資產(chǎn)庫(kù)便應(yīng)運(yùn)而生。

我們給Smart UI的官方定義如下：

二、Smart UI構(gòu)成模型

1. 原子理論拆解

由于每個(gè)小程序的內(nèi)容構(gòu)成千姿百態(tài)，要想滿足每個(gè)開發(fā)者的訴求，我們構(gòu)建的資產(chǎn)庫(kù)必須要足夠豐富，所以在構(gòu)建這樣一個(gè)龐大的設(shè)計(jì)體系之初，可以用積木拼裝來形容它的構(gòu)建過程，以單體的積木元件通過組合形成千變?nèi)f化的實(shí)體。

我們同時(shí)結(jié)合德國(guó)前端工程師Brad Frost提出的 “Atomic Design-原子設(shè)計(jì)”這一理念，恰好解決了我們針對(duì)復(fù)雜多樣的用戶界面的拆解邏輯，以原子、分子、組織、模板、頁(yè)面，來進(jìn)行界面分層和解構(gòu)。

2. Smart UI模型轉(zhuǎn)化

我們利用 “原子設(shè)計(jì)”的邏輯，結(jié)合小程序的界面特點(diǎn)，從而形成了Smart UI的構(gòu)成模型，按照遞進(jìn)關(guān)系呈現(xiàn)為：元素庫(kù)、控件庫(kù)、組件庫(kù)、頁(yè)面庫(kù)、案例庫(kù)。

另外，覆蓋于這些內(nèi)容之上，還需要有全局的通用原則。將這6大構(gòu)成要素進(jìn)行窮舉和歸類，共分裂出68個(gè)資產(chǎn)子項(xiàng)，程序設(shè)計(jì)和開發(fā)所需的資源。

三、設(shè)計(jì)理念傳達(dá)

小程序的設(shè)計(jì)需要在標(biāo)準(zhǔn)之上實(shí)現(xiàn)個(gè)性化。我們提供了一套通用的設(shè)計(jì)基準(zhǔn)和資產(chǎn)，包含自然的色彩體系、嚴(yán)謹(jǐn)?shù)淖煮w梯度、科學(xué)的圓角應(yīng)用、豐富的圖標(biāo)選擇，開發(fā)者可以利用這套基準(zhǔn)，結(jié)合Smart UI提供的組件和模板，靈活的進(jìn)行頁(yè)面設(shè)計(jì)拼裝。

1. 自然的色彩體系

小程序的色彩應(yīng)用建議以自身小程序品牌色為主，Smart UI 也提供了一套色彩生成方法來幫助自定義品牌顏色。

我們建議使用HSB 色彩模式，HSB是最接近人眼的色彩模式，是將自然顏色轉(zhuǎn)換為計(jì)算機(jī)色彩的直接方式。

我們選取接近小程序風(fēng)格的高飽和度顏色（S飽和度在80-100之間，B亮度在90-100之間）作為基準(zhǔn)色，以20%為階梯進(jìn)行亮度疊加，從而生成7個(gè)色階，進(jìn)而匹配到該小程序的品牌色。

如果按照12個(gè)基準(zhǔn)色進(jìn)行計(jì)算，便可衍生為84個(gè)顏色。這些顏色基本可以滿足小程序設(shè)計(jì)中對(duì)于顏色的需求。

有了小程序的品牌色彩系統(tǒng)，下一步就是合理的在小程序界面中去應(yīng)用。應(yīng)用場(chǎng)景可包含功能圖標(biāo)、關(guān)鍵控件、步驟狀態(tài)、沉浸式背景、語(yǔ)義化圖形等，不同的顏色應(yīng)用可使小程序傳達(dá)出不同的品牌氣質(zhì)。

2. 嚴(yán)謹(jǐn)?shù)淖煮w梯度

字號(hào)梯度應(yīng)用—字號(hào)的選擇是拉開界面信息層級(jí)的重要手段。小程序內(nèi)的通用字號(hào)梯度，經(jīng)過嚴(yán)謹(jǐn)?shù)膶?shí)驗(yàn)測(cè)試和大量的用戶訪談，建議以19pt作為正文，符合最佳閱讀體驗(yàn)，進(jìn)而向上/下進(jìn)行增減，可得出6檔通用字號(hào)，基本涵蓋了頁(yè)面標(biāo)題、正文內(nèi)容、輔助說明等主要應(yīng)用場(chǎng)景。

以文章落地頁(yè)為例，通過4擋字號(hào)梯度的設(shè)定，能夠構(gòu)建出以文章標(biāo)題H1（24pt）為一級(jí)信息，正文H2（19pt）為主要信息，說明文字H5（16pt）和H6（14pt）為輔助信息的一套字號(hào)應(yīng)用頁(yè)面。

3. 科學(xué)的圓角應(yīng)用

適當(dāng)?shù)膱A角設(shè)計(jì)能夠塑造小程序自然、友好的品牌印象，Smart UI提供了一套科學(xué)的圓角數(shù)值設(shè)計(jì)，我們認(rèn)為控件圓角的大小應(yīng)該與本身面積呈正相關(guān)，并且遵循斐波那契數(shù)列，按照斐波那契面積分布共分為五檔：2pt、3pt、5pt、8pt、13pt，可按照由小至大的數(shù)值特征應(yīng)用于不同體量的控件中。

4. 豐富的圖標(biāo)選擇

在日常的小程序項(xiàng)目實(shí)踐中，我們將以往沉淀的284個(gè)圖標(biāo)進(jìn)行細(xì)節(jié)優(yōu)化，使其在應(yīng)用中更具準(zhǔn)確性、多樣性和豐富度，并且封裝成SVG格式對(duì)外輸出，塑造為一套真正能夠?yàn)殚_發(fā)者所用的Smart UI圖標(biāo)庫(kù)。

• 準(zhǔn)確性：我們對(duì)圖標(biāo)的輪廓線進(jìn)行了優(yōu)化，明確出安全區(qū)、出血區(qū)、切圖區(qū)的基準(zhǔn)，確保每個(gè)圖標(biāo)的繪制都遵循統(tǒng)一的繪制模板。
• 多樣性：圖標(biāo)庫(kù)中具備線型單色、面型彩色2種圖標(biāo)風(fēng)格。并配備Light、Dark 2種主題效果，便于在各類風(fēng)格的小程序中應(yīng)用。
• 豐富度：圖標(biāo)庫(kù)覆蓋了7類小程序典型行業(yè)，分為系統(tǒng)設(shè)置類、互動(dòng)社交類、書籍影音類、生活服務(wù)類、政務(wù)服務(wù)類、交通出行類、天氣類。

四、Smart UI應(yīng)用實(shí)踐

Smart UI不僅提供了從元素到頁(yè)面和案例庫(kù)的一系列構(gòu)成要素，并且可根據(jù)小程序需求動(dòng)態(tài)進(jìn)行UI樣式編輯；在滿足底層能力的同時(shí)，還能滿足開發(fā)者個(gè)性化定制訴求。

通過利用Smart UI提供的元素、控件、組件、頁(yè)面、案例庫(kù)等一系列體驗(yàn)資產(chǎn)，通過提取和層層遞進(jìn)的拼裝，便可組合成小程序關(guān)鍵界面，并結(jié)合顏色、字體等通用原則，進(jìn)行內(nèi)容數(shù)據(jù)灌入，從而可低成本的完成小程序從0到1的構(gòu)建過程。

五、結(jié)語(yǔ)

Smart UI上線后，得到了廣大開發(fā)者的關(guān)注，也切實(shí)解決了許多開發(fā)者高成本的設(shè)計(jì)開發(fā)問題。

然而我們才僅僅邁出了第一步，接下來我們將致力于研究如何處理復(fù)雜的資產(chǎn)能力，比如前后端一體化資產(chǎn)設(shè)計(jì)、資產(chǎn)的組合規(guī)則等。

我們也將重新思考Smart UI的服務(wù)范疇和發(fā)力方向，強(qiáng)化垂直行業(yè)的設(shè)計(jì)解決方案、打造更加智能化的小程序資產(chǎn)整案，為小程序開發(fā)者輸出更大的業(yè)務(wù)價(jià)值。

本文由@百度MEUX 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash, 基于CC0協(xié)議