百度智能小程序体验资产构建之旅-柠檬ai自媒体

编辑导语：智能UI是一套具有统一开发设计风格的智能小程序扩展组件库，由百度智能小程序官方设计团队和智能小程序团队专门设计，旨在提升开发者的开发体验。本文对智能用户界面进行了详细的分析。

2022年起，百度智能小程序迎来大规模增长，开发者数量达到20w。小程序团队也在逐渐思考如何给开发者更多的供给和支持，同时也能给用户带来优质内容和服务的小程序。

要实现开发者和用户的共赢，需要探索一种丰富易用的体验资产库———智能UI，既能在供给侧降低开发者的开发成本，又能在输出侧保证小程序用户的高质量体验。

其实在Smart UI诞生之前，在面向开发者的服务提供体系中，就已经存在相对稳定的原生基础组件库和API。由于原生组件的限制，无法满足更多样化、定制化的小程序设计需求，于是像Smart UI这样的扩展资源库应运而生。

我们对智能UI的官方定义如下：

因为每个小程序的内容形式多样，为了满足每个开发者的诉求，我们搭建的资产库必须足够丰富。因此，在构建如此庞大的设计体系之初，可以用积木式组装来描述其构建过程，将单个的积木元素组合起来，形成千变万化的实体。

同时，结合德国前端工程师Brad Frost提出的“原子设计- Atomic Design”的概念，刚刚解决了我们对于复杂多样的用户界面的反汇编逻辑，用原子、分子、组织、模板、页面对界面进行分层解构。

利用“原子设计”的逻辑和小程序的界面特性，我们形成了智能UI的组件模型，按照递进关系呈现为元素库、控件库、组件库、页面库和案例库。

此外，要涵盖这些内容，还需要有全球通用的原则。对这六个要素进行穷尽分类，共划分出68个子项资产，这是程序设计和开发所需要的资源。

小程序的设计需要个性化高于标准。我们提供了一套通用的设计基准和资产，包括自然的颜色系统、严格的字体渐变、科学的圆角应用和丰富的图标选择。开发者可以使用这个基准，结合Smart UI提供的组件和模板，灵活地设计和组装页面。

小程序的颜色应用建议基于自己的小程序品牌颜色，智能UI也提供了一套颜色生成方法，帮助定制品牌颜色。

我们建议使用HSB颜色模式。HSB是最接近人眼的颜色模式，是将自然颜色转换成计算机颜色的直接方式。

我们选取接近小程序风格的高饱和度颜色(S饱和度在80-100之间，B亮度在90-100之间)作为参考色，叠加20%的亮度作为阶梯，生成7个色阶，然后匹配小程序的品牌色。

如果按照12种参考色计算，可以衍生出84种颜色。这些颜色基本可以满足小程序设计中的色彩要求。

有了小程序的品牌色系，接下来就是在小程序界面中合理应用。应用场景可以包括功能图标、按键控制、步进状态、沉浸式背景、语义图形等。不同的颜色应用可以让小程序传达不同的品牌品质。

渐变字体大小应用——字体大小选择是打开界面信息层次的重要手段。经过严格的实验测试和大量的用户访谈，建议使用19pt作为文字，以满足最佳的阅读体验，然后上下增减，得到六种通用字号，基本覆盖页面标题。

、正文内容、辅助说明等主要应用场景。

以文章落地页为例，通过4挡字号梯度的设定，能够构建出以文章标题H1（24pt）为一级信息，正文H2（19pt）为主要信息，说明文字H5（16pt）和H6（14pt）为辅助信息的一套字号应用页面。

　　适当的圆角设计能够塑造小程序自然、友好的品牌印象，Smart UI提供了一套科学的圆角数值设计，我们认为控件圆角的大小应该与本身面积呈正相关，并且遵循斐波那契数列，按照斐波那契面积分布共分为五档：2pt、3pt、5pt、8pt、13pt，可按照由小至大的数值特征应用于不同体量的控件中。

　　在日常的小程序项目实践中，我们将以往沉淀的284个图标进行细节优化，使其在应用中更具准确性、多样性和丰富度，并且封装成SVG格式对外输出，塑造为一套真正能够为开发者所用的Smart UI图标库。

　　准确性：我们对图标的轮廓线进行了优化，明确出安全区、出血区、切图区的基准，确保每个图标的绘制都遵循统一的绘制模板。多样性：图标库中具备线型单色、面型彩色2种图标风格。并配备Light、Dark 2种主题效果，便于在各类风格的小程序中应用。丰富度：图标库覆盖了7类小程序典型行业，分为系统设置类、互动社交类、书籍影音类、生活服务类、政务服务类、交通出行类、天气类。