百度智能小程序体验资产构建之旅 | 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个资产子项，程序设计和开发所需的资源。

2. 严谨的字体梯度

字号梯度应用—字号的选择是拉开界面信息层级的重要手段。小程序内的通用字号梯度，经过严谨的实验测试和大量的用户访谈，建议以19pt作为正文，符合最佳阅读体验，进而向上/下进行增减，可得出6档通用字号，基本涵盖了页面标题、正文内容、辅助说明等主要应用场景。

3. 科学的圆角应用

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

四、Smart UI应用实践

Smart UI不仅提供了从元素到页面和案例库的一系列构成要素，并且可根据小程序需求动态进行UI样式编辑；在满足底层能力的同时，还能满足开发者个性化定制诉求。

通过利用Smart UI提供的元素、控件、组件、页面、案例库等一系列体验资产，通过提取和层层递进的拼装，便可组合成小程序关键界面，并结合颜色、字体等通用原则，进行内容数据灌入，从而可低成本的完成小程序从0到1的构建过程。

五、结语

Smart UI上线后，得到了广大开发者的关注，也切实解决了许多开发者高成本的设计开发问题。

然而我们才仅仅迈出了第一步，接下来我们将致力于研究如何处理复杂的资产能力，比如前后端一体化资产设计、资产的组合规则等。

我们也将重新思考Smart UI的服务范畴和发力方向，强化垂直行业的设计解决方案、打造更加智能化的小程序资产整案，为小程序开发者输出更大的业务价值。

本文作者@百度MEUX 。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！