智能小程序体验设计指引

创新互联-专业网站定制、快速模板网站建设、高性价比点军网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式点军网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖点军地区。费用合理售后完善，十载实体公司更值得信赖。

智能小程序比H5更美观、流畅和丰富

智能小程序能提升界面展现的美观度：

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

智能小程序提供丰富多样的交互增强能力：

目前开放的30多种常用组件和200多种接口，覆盖界面展现、交互流程、多媒体增强、AI能力等方面，提升开发者拼装基础页面的开发效率和用户使用体验。

百度智能小程序的200+交互能力中的的部分展示

智能小程序内容维度单一时，使用I字型架构信息，从上到下平铺直叙，浏览最为直观和方便；

当需要平行架构不同维度的内容时，引入顶部标签栏，使用T字型架构，方便用户在不同内容分类中滑动浏览；

倒T型结构与T字型结构有相似之处，只是它使用底部标签栏，用于架构内容差异性较大的功能模块；

当智能小程序功能和层级较多时，可使用工字型架构，用底部标签栏架构一级导航，顶部标签栏承载二级内容分类。

智能小程序常见信息架构模型

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

用户使用路径：从哪来，回哪去

降低用户操作成本。考虑到移动设备的屏幕大小和使用环境，应尽量减少用户的输入交互，而改为操作成本更低的选择型交互；当然，应用百度智能识图能力，智能语音识别等能力，自动完成信息输入，能进一步降低用户操作成本。

智能小程序更多智能能力已陆续建设开放，未来将继续助力开发者用更智能的方式、更好地减少用户的操作成本，使智能小程序的交互流程更加顺畅。

合理排版，有效传达信息。阅读体验的好坏取决于排版，这考验我们开发者组织和呈现信息的能力。强调主要内容，弱化次要信息，把页面间不同的信息层次拉开，用户可以快速辨认和获取所需内容。

内容排版正误示例

智能小程序设计文档中有不同场景信息层级的字号使用建议，如标题、正文、摘要等，方便开发者了解阅读排版节奏。在这基础上，可以结合自身产品特点再加以发挥创新，定义更优的阅读节奏。

内容排版字号使用建议

有强弱区分的主次功能。好的阅读体验能让用户清晰定位并找到所求。

在下图购买火车票案例中，在去程票的购买完成页面，两个操作按钮展现都使用蓝色大按钮，会导致用户在选择过程中可能会迟疑；而在主次功能操作做了区分强调，能引导用户注意力优先级，降低了用户选择和思考的成本。

按钮排版正误示例

保证清晰易读。合理的运用色彩对比度关系，是界面内容清晰展现的关键。我们建议开发者选用组件时，选择与当前颜色对比度更大的样式。

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

顶部导航栏选用建议

用色符合用户理解认知。色彩的表意会对功能引导有影响。

例如，灰色代表着不可用。因此设置按钮的颜色时，如果使用灰色的按钮文字，用户可能会认为按钮是置灰不可用的，从而让用户产生额外的理解决策成本。而使用右图肯定、直接、明了的蓝色，则能有效明示操作可行性。

按钮颜色使用正误示例

图形清晰可辨识。LOGO就是小程序递给用户的第一张名片。这张名片应该清晰可辨，这是用户能在快速一瞥间留下印象的前提。很多开发者会使用自己的小程序名称作为LOGO，但要生硬地把长长名称嵌套成LOGO的方式并不可取。

LOGO设计的正误示例

爱说唱小程序的LOGO映射产品年轻娱乐的特点

AI分诊助手的LOGO，使用听诊器与心形结合的创意设计，简洁克制的蓝白配色，彰显了它作为医疗属性工具小程序的专业和严谨。

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

建议输出时，将LOGO的主要图形控制中间红色区域，也就是大约占正方形图片70%左右，这样能保证logo展现完整，而适当的留白,也让logo的阅读更舒适。

LOGO设计和输出的正误示例

（1）“减减鸭”智能小程序在设计交互转场引导时，在放松舒缓的练习结束后，上移的光晕巧妙地将用户的注意力顺应着其运动的方向转移，自然地引出结果；

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

（3）而“星动”智能小程序则在解锁动效中使用了类似游戏的技能触发特效，为整个活动增加了生动感和趣味性。

全面屏适配。随着全面屏手机的普及，我们也应该注意它们新增的系统特性。

全面屏适配的正误示例

考虑容错展现。页面没有正确展现内容，可能是因为网络信号突然断开，或者是用户的百度APP版本需要升级，适当的引导提示，能大大减少用户与“困惑的空白”的相遇机会。

数据异常页面展现的正误示例

为了减少这些空白，我们总结了一些常见的空态情况，并放在视觉组件库供大家使用，希望以后智能小程序令人困惑的空白们会越来越少。

百度智能小程序设计组件库中的空态图标

智能小程序体验设计指南：描述智能小程序的设计原则，提供了交互和视觉层面的设计实践建议。