智能小程序体验设计指南

智能小程序的体验优势

与被许多浏览器限制的H5相比，Smart 小程序优于美丽，流畅和丰富的体验，甚至可以与APP携手并进。智能小程序可以创建更流畅的交互式效果，同时创建更美观和易于使用的界面，并打开各种交互式组件和功能，帮助开发人员以比APP更低的开发成本获得更好的结果。更多样化的体验。

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

智能小程序可以增强界面的美感：

与传统浏览器不同，Smart 小程序没有顶部地址栏和底部导航栏，允许用户更多地关注小程序本身。基于智能小程序框架，开发人员可以在更大的演示空间中充分利用创意主动性，创建更美观，更高质量的小程序。

是使用沈阳小程序

开发的

智能小程序可以开发更精致的视觉效果

Smart 小程序提供了广泛的交互式增强功能：

目前，开放了30多个通用组件和200多个接口，包括界面显示，交互过程，多媒体增强，AI功能等，以提高开发人员组装基本页面的开发效率和用户体验。

百度智能小程序的200多个交互功能的一部分

体验设计六部曲

1. 选择合适的信息架构

设计优秀经验的第一步不是打开计算机汇海设计软件，而是要充分了解智能小程序的设计定位和功能，并为其选择最合适的信息架构。

当智能小程序的内容维度是单个时，使用I形结构信息，并且从上到下浏览是直截了当的。浏览最直观，最方便。当需要平行不同尺寸的内容时，引入顶部标签条，并且使用T形结构以方便用户。在不同的内容类别中滑动浏览;倒T形结构与T形结构有相似之处，只是它使用底部标签杆作为内容差异较大的结构模块;当智能小程序功能和层次结构很大时，使用I形架构，底部标签栏用于1级导航，顶部标签栏用于次要内容分类。

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

2. 铺设顺畅的交互流程

尊重用户的使用习惯。在用户完成任务的过程中，“从哪里来，去哪里”的导航路径最符合用户心理期望和心理模型的交互模式。

我们建议智能小程序交互式流程设计也在层次上进步，在用户习惯和认知的基础上，流畅的交互过程应该是帮助用户更有效地完成信息的获取或任务的执行：减少障碍的使用减少用户步长并降低运营成本。

用户使用路径：来自哪里，去哪里

降低用户运营成本。考虑到移动设备的屏幕尺寸和使用环境，应该最小化用户的输入交互，并且应该改变具有较低操作成本的选择性交互。当然，百度智能图像识别功能和智能语音识别的应用可以自动完成信息输入。可以进一步降低用户运营成本。

智能小程序构建和打开了更多智能功能，并将继续以更智能的方式帮助开发人员，更好地降低用户的运营成本，并使智能小程序交互过程更加顺畅。

3. 建立舒适的阅读体验

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

内容布局错误示例

智能小程序设计文档具有不同的字体信息级别使用建议，如标题，正文，摘要等，以方便开发人员理解阅读排版的节奏。在此基础上，我们可以将创新与我们自己的产品功能相结合，以定义更好的阅读节奏。

内容布局字体大小使用建议

主要和次要功能有强弱差别。良好的阅读体验使用户能够清楚地找到并找到他们想要的东西。

在下图中购买火车票的情况下，在票价的购买完成页面中，使用大蓝色按钮显示两个操作按钮，这可能导致用户在选择过程中犹豫不决;它可以引导用户的注意力优先，降低用户选择和思考的成本。

按钮排版错误示例

4. 使用友好的色彩系统

保证清晰易读。合理使用颜色对比是清晰呈现界面内容的关键。我们建议开发人员在选择组件时选择与当前颜色形成鲜明对比的样式。

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

顶部导航栏选择建议

颜色与用户对认知的理解一致。颜色表意符号对功能指导有影响。

例如，灰色表示不可用。因此，当设置按钮的颜色时，如果使用灰色按钮文本，则用户可能认为该按钮变灰并且不可用，使得用户可以生成额外的理解决策成本。在右侧使用肯定的，直接的和清晰的蓝色可以有效地证明操作的可行性。

按钮颜色使用错误示例

5. 打造有识别度的LOGO

图形清晰可辨。 LOGO是小程序向用户提供的第一张名片。此名片应清晰易读，这是用户快速浏览一下印象的先决条件。许多开发人员将使用自己的小程序名称作为LOGO，但不建议将长名称严格嵌套到LOGO中。

以智能小程序学院为例：经过长文本嵌套后，LOGO的识别效果不佳。其次，留下太多的空白，导致缺乏基本的美感。它通过视觉创作技术转化为平面设计，使LOGO更加丰富的构图，更清晰的表达，更有利于小程序的传播，识别和记忆。

正确和错误的LOGO设计示例

映射产品功能。此LOGO名片应对应于该界面。在用户打开小程序之前，小程序功能会提前传递给用户。

Love Rap 小程序logo使用激光渐变来整合一系列高纯度，高清晰度的色彩，丰富多样的色彩层次与跳跃的涂鸦字体，表明它是一种年轻而独特，娱乐性的时尚潮流小程序。

爱说唱小程序 LOGO贴图产品年轻娱乐功能

AI诊断助手的LOGO采用创意设计，结合了听诊器和心形，以及简单的蓝白配色方案，展示了其作为医疗属性工具小程序的专业性和严谨性。

AI分流助手小程序 LOGO映射产品科学严谨的特点

正确输出完整的演示文稿。我想整齐地制作自己的品牌LOGO展示。输出图像时我需要注意细节：由于开发者平台提交的LOGO是方形图像，当页面显示小程序时，方形图像将被切割成圆形。因此，我们必须特别注意标识切割的效果。

当推荐输出时，LOGO的主图形控制中间的红色区域，约为方形图像的70％。这样可确保徽标完整，适当的空白区域使徽标的阅读更加舒适。

LOGO设计和输出错误的示例

6. 运用生动的动效设计

及时和适度的动态可以使流程之间的过渡更加顺畅，并使小程序富有人性。

（1）“降低鸭子”智力小程序在交互式过渡训练的设计中，在舒缓练习放松之后，移动的晕圈巧妙地将用户的注意力转移到其运动方向，自然导致结果。

（2）“春节红包”智能小程序在抖动红包的过程中，利用金币效果，增加了用户真正的互动感。

（3）“Star Motion”Smart 小程序在解锁效果中使用类似游戏的技能触发效果，为整个事件增添了生动感和趣味感。

7. 其他：注重设计细节

全屏改编。随着全屏手机的普及，我们也应该关注他们的新系统功能。

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

正确屏幕调整的示例

考虑容错。页面没有正确显示内容，可能是因为网络信号突然断开，或者用户的百度APP版本需要升级，适当的引导提示可以大大降低用户遇到“混淆空白”的可能性。

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

为了减少这些差距，我们总结了一些常见的空状态情况，并将它们放在可视组件库中供大家使用。我希望智能小程序的混乱空白会越来越少。

百度智能小程序设计空库图标库

智能小程序体验设计工具

Smart 小程序体验设计指南：介绍Smart 小程序的设计原则，为交互和视觉方面提供设计实践建议。

百度智能小程序官方网站体验设计指南

智能小程序设计组件库，支持草图版和Photoshop版。设计演练表：支持在线版，Excel版和PDF版，以方便填写和填写项目过程的各个阶段。智能小程序设计故事：介绍在项目中设计六部分设计方法的实践。智能小程序官方示例：直接使用百度智能小程序的交互式组件和功能。