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

自媒体平台如何提高推荐量

说起写这点东西的初衷,是因为初接触这一行,想学习一点东西,结果无论是网上还是QQ群之类的,都没有很多实质性的可以学习到的东西。其实一个人在自媒体的道路上摸着石头过河的日子真的很难,所以自己总结了一点经验,想写出来跟大家分享一下,希望能得到大家的回应,另外自己还突发奇想,建了一个小白群,目的也是想认识更多像我一样的新手们能够一起交流,一起成长!好了,废话就说这么都,现在开始“干货”时间。在大家看这篇

Public @ 2017-07-11 15:42:51

十四个方法提高博客的页面访问量

1.研究目标读者并提供内容:了解你的目标读者,他们的需求和兴趣,才能为他们提供有用的、有趣的内容。 2.定期发布内容:博客需要频繁发布内容,以便吸引读者的关注。 3.使用关键词优化文章:研究关键字并将其集成到文章中,这对于搜索引擎优化(SEO)和吸引读者来说都非常重要。 4.利用社交媒体宣传博客:将博客文章分享到社交媒体平台上,这将吸引更多的访问者。 5.建立电子邮件列表:让人们订阅博客,

Public @ 2023-06-14 21:00:41

什么是小程序自然搜索

对开发者:智能小程序为开发者提供对接百度搜索生态的能力,为智能小程序导入搜索流量,旨在打造更加开放、互联互通的小程序生态。对百度用户:在百度搜索结果页中,当智能小程序某页面被正常检索到,其展现形式和普通网页相同,用户在百度 App(10.10 或以上版本)点击该条搜索结果,即可打开智能小程序。自然搜索结果示例Alt text搜索流量接入流程图Alt text来源:百度智能小程序

Public @ 2013-07-12 15:59:37

百度智能小程序-百度收银台支付简介

本文阅读对象:智能小程序集成支付能力涉及的产品、运营、财务、法务等。小程序支付介绍为什么要开通百度收银台支付百度收银台支付是百度面向有开发能力的智能小程序合作者提供的支付能力,聚合了度小满、微信、支付宝等多种支付方式,方便开发者一站式快速接入多种支付渠道,让百度用户在智能小程序场景下,直接完成支付实现交易闭环,提升用户支付体验,提高订单转化率。百度收银台通过百信银行提供的金融基础服务,为小程序开发

Public @ 2016-04-14 15:59:39

更多您感兴趣的搜索

0.177996s