如何提升小程序浏览体验

在小程序大力发展的浪潮之下,用户会选择体验更好,更易用的小程序,平台也更愿意扶持优质小程序的发展,以此来营造健康繁荣的小程序生态。期待开发者们结合自身产品特色,打造出优秀、易用、好用、充满情感关怀独具特色的小程序。我们建议从以下几个方面开始:

一、选用合适的导航栏

二、建立舒适的阅读体验

三、使用友好的色彩系统

五、运用多媒体互动能力增加情感化体验

一、选用合适的导航栏

开发者应该选择符合小程序定位和内容展现的顶部导航栏,使小程序内的浏览体验更符合用户认知和操作习惯。

智能小程序提供3种可选顶部导航栏:顶部导航/基础、顶部导航/基础/可配置颜色、顶部导航/自定义。(了解更多

1. 顶部导航/基础:建议浏览型、资讯型场景使用

如何提升小程序浏览体验 - 图1

使用注意:标题字数建议不超过8个中文字符。

如何提升小程序浏览体验 - 图2正确

标题字数合理,小程序名称一目了然。

如何提升小程序浏览体验 - 图3注意

标题字数过长,截断导致信息丢失,容易困惑。

2. 顶部导航/基础/可配置颜色:建议强烈品牌展示型场景使用

如何提升小程序浏览体验 - 图4黑色元素适合颜色较浅的容器背景(1),白色元素适合颜色较深的容器背景(2)。

使用注意:标题字数建议不超过8个中文字符;颜色应对比鲜明,确保内容可读性。

如何提升小程序浏览体验 - 图5正确

当容器背景颜色较浅时,使用黑色元素,信息可读性优。

如何提升小程序浏览体验 - 图6注意

当容器背景颜色较浅时,选用白色元素,信息可读性差。

3. 顶部导航/自定义:建议娱乐型、内容沉浸型场景使用

如何提升小程序浏览体验 - 图7黑色元素适合颜色较浅的容器背景(1),白色元素适合颜色较深的容器背景(2)。

使用注意:布局内容时,避免与右侧框架控制功能区交叠。

如何提升小程序浏览体验 - 图8正确

使用自定义导航,展现春节红包小程序沉浸式体验。

如何提升小程序浏览体验 - 图9注意

信息内容与右侧框架控制功能区交叠,影响阅读和使用。

二、建立舒适的阅读体验

建议开发者在设计小程序时通过文字、布局排版和适配,建立舒适的视觉阅读体验,让用户可以快速辨认和获取所需内容。

1. 文字

文字是页面信息最重要的载体,合理的文字排版布局可以决定基础的阅读体验。(了解更多

如何提升小程序浏览体验 - 图10

使用注意:标题、辅助信息、正文、可跳转链接,应使用不同的字号、字重和字色,拉开层次。

如何提升小程序浏览体验 - 图11示例:百度文库(1)、百度知道(2)的页面标题、正文字号、字重有明确区分,阅读体验好。

你可直接使用智能小程序相关体验资产。(下载设计资源如何提升小程序浏览体验 - 图12 | 查看开发文档如何提升小程序浏览体验 - 图13

2. 排版

排版会影响阅读体验,建议开发者在组织和呈现信息的时候通过适合的间距和布局方式,让用户可以快速辨认和获取所需内容。(了解更多

如何提升小程序浏览体验 - 图14

使用注意:通过适合的间距和布局方式,拉开页面间的信息层级。

如何提升小程序浏览体验 - 图15示例:宝宝知道(1)、TA说(2)的间距布局合理,信息呈现清晰。

三、使用友好的色彩系统

建议开发者通过友好的颜色运用,确保内容识别无障碍,表达最有效的功能信息,为内容提供更好的展现空间。

1. 品牌感知颜色

建议开发者在页面的关键位置,重要的操作命令和重要信息通过品牌色进行强调。

2. 功能辅助颜色

用于传达信息,区分状态,建议在完成/通过,警示/出错,提醒等场景,运用符合用户常规认知的色彩。

如何提升小程序浏览体验 - 图16

使用注意:色彩应该保证内容清晰易读,并符合用户理解认知。

如何提升小程序浏览体验 - 图17正确

用呼应品牌清新的绿色作为长隆动物园主色,绿色的邻近色浅黄色辅助内容呈现。

如何提升小程序浏览体验 - 图18正确

以蓝色作为AI分诊小程序的主色,给用户安全可信赖的感受,蓝色对比色橙色凸显重要按钮信息。

LOGO就是小程序递给用户的第一张名片,优秀的LOGO能让用户在快速一瞥间对产品留下良好印象。

1. 小程序名称设定

名称需保证其所在领域具有唯一识别性和客观性,禁止侵权。(了解更多如何提升小程序浏览体验 - 图19)字数建议:建议名称字符数在3-30个字符之间(6个汉字以内最优),仅支持使用中文、数字、英文,不能使用特殊符号、繁体字、无意义的数字字母。

2. 小程序LOGO输出规则

小程序LOGO将在开发者平台、百度APP、小程序页面内以圆形外观展现;请使用清晰、合适大小的LOGO切图,以保证在界面展现上的美观和完整。(了解更多)

1)裁切规范:容器裁切,出血区域至少占整张图的20%;

如何提升小程序浏览体验 - 图20正确

出血区域占整张图20%左右,合适。

如何提升小程序浏览体验 - 图21错误

出血区域过小,无法完整展示。

2)格式规范:输出144*144px,PNG(背景不能为透明)、BMP、JPEG、JPG格式的静态图片,小于等于120kb。

如何提升小程序浏览体验 - 图22注意

使用PNG切图时背景透明,导致LOGO在百度APP的暗色模式下,LOGO识别不清晰。

3)确保清晰:LOGO不可出现像素点,建议使用矢量图形,小尺寸下也可以清晰显示。

如何提升小程序浏览体验 - 图23错误

切图尺寸过小,出现像素点,在前端展现质量低。

3. 小程序LOGO设计建议

小程序LOGO将在开发者平台、百度APP、小程序页面内以圆形外观展现;LOGO图片必须清晰,必须突出主题,不得含有网站、水印、二维码、联系方式等营销信息,并且符合基本设计规范。

1)构图饱满:LOGO主体构图填充有效利用,主体元素至少保证占据70%-80%空间面积。

如何提升小程序浏览体验 - 图24正确

主体元素占空间面积80%,构图饱满。

如何提升小程序浏览体验 - 图25注意

主体元素占空间面积25%,图形识别性差。

2)映射产品特点:LOGO配色及风格与界面有所呼应,提前向用户传递产品行业特点。

如何提升小程序浏览体验 - 图26正确

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

3)创意亮点:小程序LOGO可以通过名称、图形隐喻产品特色,以此给用户留下深刻印象。

如何提升小程序浏览体验 - 图27正确

减减鸭小程序LOGO,用基础的心形,传递释放心理压力的含义;绿色和黄色,与页面色彩风格呼应;提取减“压”的谐音减“鸭”,加深用户对产品的印象。

五、运用多媒体互动能力增加情感化体验

小程序满足基本使用体验的同时,适时适度的增加情感化细节,可以进一步提升用户体验。

1. 运用图文并茂的方式,合理引导操作

在产品新功能、缺省态的场景用户容易困惑的时候,提供贴心符合品牌特征的插图引导,可以让用户获得更好的使用体验,并产生对产品的好感。

如何提升小程序浏览体验 - 图28正确

通过插画营造结果页氛围,让用户获得成就感,从产品细节增加用户好感度。

如何提升小程序浏览体验 - 图29正确

使用插画提示用户当前页面缺省,并提供“去逛逛”按钮,引导用户下一步操作。

智能小程序提供了常用场景的功能型静态图标,开发者可以根据页面功能选用。(了解更多

如何提升小程序浏览体验 - 图30

你可直接使用智能小程序相关体验资产。(下载设计资源如何提升小程序浏览体验 - 图31 | 查看开发文档如何提升小程序浏览体验 - 图32

2. 通过动效减少焦虑,丰富互动体验

为了更好地实现流畅的动画效果,智能小程序支持Lottie导出的json文件以及位图。(查看开发文档如何提升小程序浏览体验 - 图33)1)引导交互状态:动效帮助用户理解界面前后变化的逻辑关系;2)加强反馈:用户的操作行为获得相应的动态反馈,可以为用户带来安全感;3)丰富互动,提升愉悦感:合理的动效能提高产品的「表达能力」,增加亲和力和趣味性。

示例1:利用动效,打造生动有趣的点赞互动效果。

你的浏览器不支持该视频播放

示例2:动态弹窗帮助用户理解功能。

你的浏览器不支持该视频播放

3. 运用多媒体效果打造沉浸氛围体验

除了Lottie动画(了解更多),智能小程序也支持AFX透明视频(了解更多)播放。1)品质感:丰富合理的动效不仅可以提升产品的可用性水平,而且能提升产品的品质感;2)成就感:精彩的动效能够强化产品的功能和体验,让用户获得成就感,与用户构建起情感联系。

示例1:通过多媒体,强化产品的功能和体验,提升品质感。

你的浏览器不支持该视频播放

示例2:通过多媒体营造沉浸式氛围,让用户获得成就感。

你的浏览器不支持该视频播放