编辑导语：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. 严谨的字体梯度