在过去的10年中，随着移动互联网的发展，移动应用已渗透到用户生活的各个方面；在潮流之下，只有那些更美丽，更流畅，更丰富体验的产品才会保留在用户的手机中，与用户待在一起。

智能小程序的体验优势

与受许多浏览器限制的H5相比，Smart 小程序在美观，流畅和丰富的体验方面更为出色，甚至可以与APP保持同步。 Smart 小程序不仅创建了更美观，易于使用的界面，而且还支持流畅的交互动力学，并开放了多种交互组件和功能，以帮助开发人员使用比APP更低的开发成本并获得更好的，获得更多的端到端体验。

智能小程序比H5更漂亮，更流畅，更丰富

智能小程序可以改善界面的美观度：

与传统浏览器不同，Smart 小程序没有顶部地址栏和底部导航栏，因此用户可以将更多精力放在小程序本身的内容上。基于智能小程序框架，开发人员可以在更大的显示空间中充分发挥其创造力，并制作出更美观，更高质量的小程序。

使用智能小程序开发更精致的视觉效果

智能小程序提供了丰富而多样的交互式增强功能：

当前，有30多个常用组件和200多个开放的界面，涵盖界面显示，交互过程，多媒体增强，人工智能功能等，以提高开发效率和用户组装基础的用户体验。页面。

部分展示了百度Smart 小程序的200多种交互功能

体验设计的六个步骤1.选择正确的信息体系结构

优秀体验设计的第一步不是打开计算机来启动设计软件，而是要充分了解要设计的智能小程序的位置和功能，并为它选择最合适的信息体系结构。它。

当智能小程序的内容维度为单个时，请使用I形结构信息，该信息从上到下直接明了，并且浏览是最直观，最方便的；当需要并行构造不同维度的内容时，会引入顶部的标签栏，并呈T形。该结构便于用户滚动浏览不同的内容类别；倒T形结构与T形结构类似，不同之处在于它使用底部的标签条来构造内容差异较大的功能模块。当智能小程序的功能和级别很多时，可以使用I形结构，底部的标签栏用于构建第一级导航，顶部的标签栏用于进行第二级内容分类。

智能小程序通用信息架构模型

2.进行顺畅的互动过程

尊重用户的习惯。在用户完成任务的过程中，以“交互方式”采用“出处，去处”的导航路径，最能满足用户的心理期望和心理模型。

我们建议，智能小程序交互过程设计也应逐步提高。在顺应用户习惯和认知的基础上，流畅的交互过程应有助于用户更有效地完成信息获取或任务。实现：减少使用障碍，缩短用户步骤，并降低运营成本。

用户使用路径：来历，后退

降低用户运营成本。考虑到移动设备的屏幕尺寸和使用环境，应尽可能减少用户的输入交互，而应由具有较低运营成本的选择性交互来代替；当然，应该使用百度的智能图像识别功能，智能语音识别等功能来自动完成信息输入，从而可以进一步降低用户的运营成本。

智能小程序已经建立并开放了更多的智能功能。将来，它将继续帮助开发人员使用更智能的方法，更好地降低用户运营成本，并使智能小程序交互过程更加顺畅。

3.营造舒适的阅读体验

合理的布局可以有效地传达信息。阅读体验的质量取决于排版，排版会测试我们的开发人员组织和呈现信息的能力。强调主要内容，削弱次要信息，并打开页面之间的不同信息级别，以便用户可以快速识别并获取所需的内容。

正确和不正确的内容布局示例

智能小程序设计文档提供了在不同级别的场景信息（例如标题，文本，摘要等）上使用字体大小的建议，以便开发人员可以理解阅读和布局的节奏。在此基础上，我们可以结合自己的产品特点，然后进行创新以定义更好的阅读节奏。

关于使用字体大小进行内容布局的建议

有一个主要功能和次要功能来区分强项和弱项。良好的阅读体验使用户可以清楚地找到所需的内容。

在下图中购买火车票的情况下，在出站票的购买完成页面上，使用蓝色的大按钮显示两个操作按钮，这会使用户在选择过程中犹豫；在主要功能和次要功能操作中，区分和强调可以引导用户注意优先级，并减少用户选择和思考的成本。

按钮排版正确性和错误性示例

4.使用友好的色彩系统

确保其内容清晰易读。合理使用色彩对比度关系是清除界面内容显示的关键。我们建议开发人员在选择组件时选择与当前颜色具有更大对比度的样式。

例如：当颜色饱和度较低时，将使用左列黑色样式的顶部导航栏，而当颜色饱和度较高时，将使用右列倒置样式以使信息更具可读性。

关于选择顶部导航栏的建议

所使用的颜色符合用户的理解。颜色的含义会影响功能说明。

例如，灰色表示不可用。因此，当设置按钮的颜色时，如果使用灰色的按钮文本，则用户可能认为该按钮是灰色的并且不可用，从而导致用户承担理解和决策的额外费用。使用右侧的肯定，直接和清晰的蓝色可以有效地显示操作的可行性。

使用正确和错误按钮颜色的示例

5.创建可识别的LOGO

图形清晰易读。 LOGO是小程序交给用户的第一张名片。此名片应清晰易读，这是用户快速印象深刻的前提。许多开发人员将使用他们自己的小程序名称作为LOGO，但是不建议将长名称直截了当地嵌套在LOGO中。

以Smart 小程序学院为例：嵌套长文本后，对LOGO的识别不好，其次，空白太多，导致缺乏基本的美感。通过视觉创意技能将其转换为图形设计，从而使LOGO更加完整，表达更清晰，并且更有利于小程序的传播，识别和记忆。

LOGO设计的对与错例子

映射产品功能。此LOGO名片应与界面相呼应。在用户打开小程序之前，小程序的特征会提前传递给用户。

Love Rap Sing 小程序徽标使用激光渐变融合了一系列高纯度，高亮度颜色，丰富多变的色阶和跳跃的涂鸦字体，表明它是一种年轻，独特，娱乐性和时尚的Chao。风扇小程序。

Love Rap 小程序的LOGO映射产品具有年轻娱乐性

AI Triage Assistant的LOGO是将听诊器和心形相结合的创新设计，以及简单而拘谨的蓝白配色方案，证明了其作为医学属性工具的专业性和严谨性小程序。

AI triage助手小程序的LOGO映射产品的科学严谨功能

正确输出完整的显示。如果要整洁地显示自己的品牌LOGO，则在输出图片时需要注意细节：因为开发人员平台提交的LOGO是方形图片，但是当页面实际显示小程序时，方形图片会显示出来。被切成圆形，所以切开后我们必须特别注意徽标的效果。

输出时，建议LOGO的主图形控制中间的红色区域，该区域约占正方形图像的70％。这样可以确保徽标完整显示，并且适当的空白区域也使徽标更易于阅读。

LOGO设计和输出的正确与错误的例子

6.使用生动的运动设计

及时适度的动态效果可以使流程之间的流程过渡更加平滑，并使小程序更人性化。

（[1）“负鸭”智能小程序在设计交互式过渡向导时，放松和舒缓运动后，向上的光环巧妙地将用户的注意力转移到其运动方向上，自然而然地产生结果；

（2）“春节摇红包”智能小程序在摇红包的互动过程中，使用掉落金币的动态效果来增加用户摇红包的真实互动。

（[3）和“星动”灵动小程序使用类似于游戏的技能来触发特殊效果，以解锁动画效果，从而使整个事件更加生动有趣。

7.其他：请注意设计细节

全屏适配。随着全屏手机的普及，我们还应该注意它们的新系统功能。

当小程序不适合全屏显示时，不仅会影响页面的外观，而且底部的操作按钮也太靠近系统操作区域，将导致正常使用。

全屏适配的正确性和错误性示例

请考虑容错演示。该页面无法正确显示内容。可能是因为网络信号突然断开，或者用户的百度APP版本需要升级。适当的指导和提示可以大大减少用户遇到“令人困惑的空白”的机会。

在异常数据页面上显示的正确性和错误示例

为了减少这些空白，我们总结了一些常见的空状态情况，并将其放入可视化组件库中，以供所有人使用。我希望将来，智能小程序中的空白会越来越少。

百度Smart 小程序设计组件库中的空图标

智能小程序体验设计工具

Smart 小程序体验设计指南：描述Smart 小程序的设计原理，并提供交互式和可视化的设计实践建议。

百度Smart 小程序官方网站上的体验设计指南

本文由@百度MEUX发布。每个人都是产品经理。禁止擅自转载。

标题图片来自Unsplash，基于CC0协议

给予作者奖励并鼓励他努力工作！

赞赏