編輯導語：Smart UI 是一套開發、設計風格統一的智能小程序擴展組件庫，由百度智能小程序官方設計團隊和智能小程序團隊爲小程序量身設計，以增強開發者開發體驗。本文作者詳細分析了Smart UI。

2020年以來，百度智能小程序迎來了規模化增長，開發者入駐的數量達到20w+，小程序團隊也在逐漸思考：如何給予開發者更多的供給和扶持，同時也能爲用戶帶來具備優質內容和服務的小程序。

若要達到開發者和用戶需求的雙贏，我們需要探索出一套豐富易用的體驗資產庫—Smart UI，這樣不僅能在供給側降低開發者的開發成本，又能在輸出側保證小程序用戶的優質體驗。

一、什麼是Smart UI

其實在Smart UI誕生之前，在面向開發者的服務供給體系中，已經存在了較穩定的原生基礎組件庫和API，由於原生組件的侷限性，無法滿足更加多元和定製化的小程序設計需求，於是Smart UI這樣一套擴展資產庫便應運而生。

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

二、Smart UI構成模型

1. 原子理論拆解

由於每個小程序的內容構成千姿百態，要想滿足每個開發者的訴求，我們構建的資產庫必須要足夠豐富，所以在構建這樣一個龐大的設計體系之初，可以用積木拼裝來形容它的構建過程，以單體的積木元件通過組合形成千變萬化的實體。

我們同時結合德國前端工程師Brad Frost提出的 “Atomic Design-原子設計”這一理念，恰好解決了我們針對複雜多樣的用戶界面的拆解邏輯，以原子、分子、組織、模板、頁面，來進行界面分層和解構。

2. Smart UI模型轉化

我們利用 “原子設計”的邏輯，結合小程序的界面特點，從而形成了Smart UI的構成模型，按照遞進關係呈現爲：元素庫、控件庫、組件庫、頁面庫、案例庫。

另外，覆蓋於這些內容之上，還需要有全局的通用原則。將這6大構成要素進行窮舉和歸類，共分裂出68個資產子項，程序設計和開發所需的資源。

三、設計理念傳達

小程序的設計需要在標準之上實現個性化。我們提供了一套通用的設計基準和資產，包含自然的色彩體系、嚴謹的字體梯度、科學的圓角應用、豐富的圖標選擇，開發者可以利用這套基準，結合Smart UI提供的組件和模板，靈活的進行頁面設計拼裝。

1. 自然的色彩體系

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

我們建議使用HSB 色彩模式，HSB是最接近人眼的色彩模式，是將自然顏色轉換爲計算機色彩的直接方式。

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

如果按照12個基準色進行計算，便可衍生爲84個顏色。這些顏色基本可以滿足小程序設計中對於顏色的需求。

有了小程序的品牌色彩系統，下一步就是合理的在小程序界面中去應用。應用場景可包含功能圖標、關鍵控件、步驟狀態、沉浸式背景、語義化圖形等，不同的顏色應用可使小程序傳達出不同的品牌氣質。

2. 嚴謹的字體梯度

字號梯度應用—字號的選擇是拉開界面信息層級的重要手段。小程序內的通用字號梯度，經過嚴謹的實驗測試和大量的用戶訪談，建議以19pt作爲正文，符合最佳閱讀體驗，進而向上/下進行增減，可得出6檔通用字號，基本涵蓋了頁面標題、正文內容、輔助說明等主要應用場景。

以文章落地頁爲例，通過4擋字號梯度的設定，能夠構建出以文章標題H1（24pt）爲一級信息，正文H2（19pt）爲主要信息，說明文字H5（16pt）和H6（14pt）爲輔助信息的一套字號應用頁面。

3. 科學的圓角應用

適當的圓角設計能夠塑造小程序自然、友好的品牌印象，Smart UI提供了一套科學的圓角數值設計，我們認爲控件圓角的大小應該與本身面積呈正相關，並且遵循斐波那契數列，按照斐波那契面積分布共分爲五檔：2pt、3pt、5pt、8pt、13pt，可按照由小至大的數值特徵應用於不同體量的控件中。

4. 豐富的圖標選擇

在日常的小程序項目實踐中，我們將以往沉澱的284個圖標進行細節優化，使其在應用中更具準確性、多樣性和豐富度，並且封裝成SVG格式對外輸出，塑造爲一套真正能夠爲開發者所用的Smart UI圖標庫。

  • 準確性：我們對圖標的輪廓線進行了優化，明確出安全區、出血區、切圖區的基準，確保每個圖標的繪製都遵循統一的繪製模板。
  • 多樣性：圖標庫中具備線型單色、面型彩色2種圖標風格。並配備Light、Dark 2種主題效果，便於在各類風格的小程序中應用。
  • 豐富度：圖標庫覆蓋了7類小程序典型行業，分爲系統設置類、互動社交類、書籍影音類、生活服務類、政務服務類、交通出行類、天氣類。

四、Smart UI應用實踐

Smart UI不僅提供了從元素到頁面和案例庫的一系列構成要素，並且可根據小程序需求動態進行UI樣式編輯；在滿足底層能力的同時，還能滿足開發者個性化定製訴求。

通過利用Smart UI提供的元素、控件、組件、頁面、案例庫等一系列體驗資產，通過提取和層層遞進的拼裝，便可組合成小程序關鍵界面，並結合顏色、字體等通用原則，進行內容數據灌入，從而可低成本的完成小程序從0到1的構建過程。

五、結語

Smart UI上線後，得到了廣大開發者的關注，也切實解決了許多開發者高成本的設計開發問題。

然而我們才僅僅邁出了第一步，接下來我們將致力於研究如何處理複雜的資產能力，比如前後端一體化資產設計、資產的組合規則等。

我們也將重新思考Smart UI的服務範疇和發力方向，強化垂直行業的設計解決方案、打造更加智能化的小程序資產整案，爲小程序開發者輸出更大的業務價值。

本文由@百度MEUX 發佈於人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash, 基於CC0協議

相關文章