百度智能小程序-如何提升小程序浏览体验
- 威海自媒体运营与推广 威海百度智能小程序运营
- 1106
在小程序大力发展的浪潮之下，用户会选择体验更好，更易用的小程序，平台也更愿意扶持优质小程序的发展，以此来营造健康繁荣的小程序生态。
期待开发者们结合自身产品特色，打造出优秀、易用、好用、充满情感关怀独具特色的小程序。我们建议从以下几个方面开始：
一、选用合适的导航栏
开发者应该选择符合小程序定位和内容展现的顶部导航栏，使小程序内的浏览体验更符合用户认知和操作习惯。
智能小程序提供 3 种可选顶部导航栏：顶部导航/基础、顶部导航/基础/可配置颜色、顶部导航/自定义。（了解更多）
1. 顶部导航/基础：建议浏览型、资讯型场景使用
使用注意：标题字数建议不超过 8 个中文字符
正确
标题字数合理，小程序名称一目了然。
注意
标题字数过长，截断导致信息丢失，容易困惑。
2. 顶部导航/基础/可配置颜色：建议强烈品牌展示型场景使用
黑色元素适合颜色较浅的容器背景（1），白色元素适合颜色较深的容器背景（2）。
使用注意：标题字数建议不超过 8 个中文字符；颜色应对比鲜明，确保内容可读性
正确
当容器背景颜色较浅时，使用黑色元素，信息可读性优。
注意
当容器背景颜色较浅时，选用白色元素，信息可读性差。
3. 顶部导航/自定义：建议娱乐型、内容沉浸型场景使用
黑色元素适合颜色较浅的容器背景（1），白色元素适合颜色较深的容器背景（2）。
使用注意：布局内容时，避免与右侧框架控制功能区交叠
正确
使用自定义导航，展现春节红包小程序沉浸式体验。
注意
信息内容与右侧框架控制功能区交叠，影响阅读和使用。
二、建立舒适的阅读体验
建议开发者在设计小程序时通过文字、布局排版和适配，建立舒适的视觉阅读体验，让用户可以快速辨认和获取所需内容。
1. 文字
文字是页面信息最重要的载体，合理的文字排版布局可以决定基础的阅读体验。（了解更多）
使用注意：标题、辅助信息、正文、可跳转链接，应使用不同的字号、字重和字色，拉开层次
示例：百度文库（1）、百度知道（2）的页面标题、正文字号、字重有明确区分，阅读体验好。
你可直接使用智能小程序相关体验资产。（下载设计资源 | 查看开发文档）
2. 排版
排版会影响阅读体验，建议开发者在组织和呈现信息的时候通过适合的间距和布局方式，让用户可以快速辨认和获取所需内容。（了解更多）
使用注意：通过适合的间距和布局方式，拉开页面间的信息层级
示例：宝宝知道（1）、TA说（2）的间距布局合理，信息呈现清晰。
三、使用友好的色彩系统
建议开发者通过友好的颜色运用，确保内容识别无障碍，表达最有效的功能信息，为内容提供更好的展现空间。
1. 品牌感知颜色
建议开发者在页面的关键位置，重要的操作命令和重要信息通过品牌色进行强调。
2. 功能辅助颜色
用于传达信息，区分状态，建议在完成/通过，警示/出错，提醒等场景，运用符合用户常规认知的色彩。
使用注意：色彩应该保证内容清晰易读，并符合用户理解认知
正确
用呼应品牌清新的绿色作为长隆动物园主色，绿色的邻近色浅黄色辅助内容呈现。
正确
以蓝色作为AI分诊小程序的主色，给用户安全可信赖的感受，蓝色对比色橙色凸显重要按钮信息。
四、设置易识别的小程序名称及 LOGO
LOGO 就是小程序递给用户的第一张名片，优秀的 LOGO 能让用户在快速一瞥间对产品留下良好印象。
1. 小程序名称设定
名称需保证其所在领域具有唯一识别性和客观性，禁止侵权。（了解更多）
字数建议：建议名称字符数在 3-30 个字符之间（6 个汉字以内最优），仅支持使用中文、数字、英文，不能使用特殊符号、繁体字、无意义的数字字母。
2. 小程序 LOGO 输出规则
小程序 LOGO 将在开发者平台、百度 App、小程序页面内以圆形外观展现；请使用清晰、合适大小的 LOGO 切图，以保证在界面展现上的美观和完整。（了解更多)
1）裁切规范：容器裁切，出血区域至少占整张图的 20%
正确
出血区域占整张图20%左右，合适。
错误
出血区域过小，无法完整展示。
2）格式规范：输出尺寸为 180x180px 的正方形，格式为 PNG、JPEG、JPG 静态图片，大小不超过 2M，LOGO 背景不能为透明。
注意
使用 PNG 切图时背景透明，导致 LOGO 在百度 App 的暗色模式下，LOGO 识别不清晰。
3）确保清晰：LOGO 不可出现像素点，建议使用矢量图形，小尺寸下也可以清晰显示
错误
切图尺寸过小，出现像素点，在前端展现质量低。
3. 小程序 LOGO 设计建议
小程序 LOGO 将在开发者平台、百度 App、小程序页面内以圆形外观展现；LOGO 图片必须清晰，必须突出主题，不得含有网站、水印、二维码、联系方式等营销信息，并且符合基本设计规范。
1）构图饱满：LOGO 主体构图填充有效利用，主体元素至少保证占据 70%-80%空间面积
正确
主体元素占空间面积80%，构图饱满。
注意
主体元素占空间面积25%，图形识别性差。
2）映射产品特点：LOGO 配色及风格与界面有所呼应，提前向用户传递产品行业特点
正确
AI分诊助手的LOGO，使用听诊器与心形结合的创意设计，简洁克制的蓝白配色，彰显了它作为医疗属性工具小程序的专业和严谨，并且与主页面风格一致。
3）创意亮点：小程序 LOGO 可以通过名称、图形隐喻产品特色，以此给用户留下深刻印象
正确
减减鸭小程序LOGO，用基础的心形，传递释放心理压力的含义；绿色和黄色，与页面色彩风格呼应；提取减“压”的谐音减“鸭”，加深用户对产品的印象。
五、运用多媒体互动能力增加情感化体验
小程序满足基本使用体验的同时，适时适度的增加情感化细节，可以进一步提升用户体验。
1. 运用图文并茂的方式，合理引导操作
在产品新功能、缺省态的场景用户容易困惑的时候，提供贴心符合品牌特征的插图引导，可以让用户获得更好的使用体验，并产生对产品的好感。
正确
通过插画营造结果页氛围，让用户获得成就感，从产品细节增加用户好感度。
正确
使用插画提示用户当前页面缺省，并提供“去逛逛”按钮，引导用户下一步操作。
智能小程序提供了常用场景的功能型静态图标，开发者可以根据页面功能选用。（了解更多）
你可直接使用智能小程序相关体验资产。（下载设计资源 | 查看开发文档）
2. 通过动效减少焦虑，丰富互动体验
为了更好地实现流畅的动画效果，智能小程序支持 Lottie 导出的 json 文件以及位图。(查看开发文档)
1）引导交互状态：动效帮助用户理解界面前后变化的逻辑关系；
2）加强反馈：用户的操作行为获得相应的动态反馈，可以为用户带来安全感；
3）丰富互动，提升愉悦感：合理的动效能提高产品的「表达能力」，增加亲和力和趣味性。
示例1：利用动效，打造生动有趣的点赞互动效果。
示例2：动态弹窗帮助用户理解功能。
3. 运用多媒体效果打造沉浸氛围体验
除了 Lottie 动画（了解更多），智能小程序也支持 AFX 透明视频（了解更多）播放。
1）品质感：丰富合理的动效不仅可以提升产品的可用性水平，而且能提升产品的品质感；
2）成就感：精彩的动效能够强化产品的功能和体验，让用户获得成就感，与用户构建起情感联系。
示例1：通过多媒体，强化产品的功能和体验，提升品质感。
示例2：通过多媒体营造沉浸式氛围，让用户获得成就感。
来源：百度智能小程序
