中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、什么是Smart UI

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

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

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

1. 原子理論拆解

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

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

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

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

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

三、設(shè)計理念傳達

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

1. 自然的色彩體系

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

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

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

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

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

2. 嚴謹?shù)淖煮w梯度

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

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

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

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

4. 豐富的圖標選擇

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

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

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

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

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

五、結(jié)語

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

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

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

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

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