Categories


Tags


百度智能小程序-如何提升小程序浏览体验

在小程序大力发展的浪潮之下,用户会选择体验更好,更易用的小程序,平台也更愿意扶持优质小程序的发展,以此来营造健康繁荣的小程序生态。

期待开发者们结合自身产品特色,打造出优秀、易用、好用、充满情感关怀独具特色的小程序。我们建议从以下几个方面开始:

一、选用合适的导航栏

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

智能小程序提供 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:通过多媒体营造沉浸式氛围,让用户获得成就感。

来源:百度智能小程序


Public @ 2020-11-27 15:59:28

智能小程序单卡流量配置说明

1.智能小程序单卡介绍:智能小程序单卡是一种搜索特型卡片,具有曝光强势、用户交互服务更直接等优点,能够帮助开发者获取更多流量。在品牌曝光上,用户搜索小程序相关名称,会有4大特型样式展现,配合每种样式中开发者自行配置的多个展示模块,能给为用户带来更强烈的感知,从而促进品牌曝光,获取流量。在交互服务上,用户可以在搜索结果页上就直接找到所需要的服务,点击可直达相关小程序首页或具体服务页面,从而帮助用户快

Public @ 2020-03-15 15:44:33

百家号「搜索关键词」有什么用

「搜索关键词」能够增加文章在搜索渠道的曝光量,提升作者内容收益的同时也有助于增强作者及内容的影响力。简而言之,如果文章正确填写了搜索关键词,就会有更大的几率被百度搜索推荐,被用户看到。举个例子,新闻类文章在填写了正确的搜索关键词后就有机会被「关联上热搜」;知识类文章填写了正确的搜索关键词后有可能「频繁且优先出现在用户的搜索结果中」;菜谱类内容正确填写搜索关键词后,想学这道菜的用户有较大几率在搜索结

Public @ 2022-04-28 15:43:06

【搜索视频课】智能小程序搜索优化指南

本节课程将从“百度搜索为什么喜欢智能小程序、开发前必须了解的搜索知识、如何搭建智能小程序更友好、智能小程序如何接入搜索“这四个纬度对智能小程序搜索优化进行介绍。第一部分:百度搜索为什么喜欢智能小程序第二部分:开发前必须了解的搜索知识第三部分:如何搭建智能小程序更友好第四部分:智能小程序如何接入搜索常见Q&A:Q:小程序和H5内容冲突吗?都会搜索收录吗?是否都能展现?A:若是开发者已经有H5

Public @ 2011-09-15 15:44:37

百度智能小程序-如何提升电影行业购票体验

1、建立有效的票务系统:有效建立票务系统,使客户能够更快捷的购买电影票,提升用户体验。 2、提供具有竞争力的就餐服务:尽可能多的让客户享受丰富的就餐服务,保证客户可以就餐后准时观影,不影响观影体验。 3、加强卡片系统:可以提供VIP卡片服务,为VIP用户提供贵宾厅、尊享座位等优质服务,提升他们的观影体验。 4、采用智能系统:采用智能电影院管理系统,为客户提供更加得心应手的服务,使用户感受

Public @ 2023-02-24 12:12:26

更多您感兴趣的搜索

0.601321s