智能小程序体验设计指引

2,393 阅读13分钟

从用户体验角度出发,如何更好的设计智能小程序。

移动端体验趋势演变

智能小程序体验优势

过去的十年里,随着移动互联网的发展,移动APP已经渗透到用户生活的方方面面,而浪潮之下,唯有那些体验更美观、更流畅、更丰富的产品,最终留在用户身边。相对于受到诸多浏览器限制的H5,无疑,智能小程序在美观、流畅、丰富的体验上更胜一筹,甚至和APP并驾齐驱。智能小程序在打造更加美观易用的界面的同时,还能支持流畅的交互动效,并开放了丰富多样的交互组件和能力,帮助开发者用比APP更低的开发成本,达到了更好的、更端化的体验。

更美观,提升界面展现的精致度

智能小程序提升界面展现的美观度,与传统的浏览器不同,智能小程序性没有顶部地址栏和底部导航栏,从而使用户更沉浸聚焦于小程序本身内容。基于智能小程序框架,开发者可以在更大的展现空间中充分发挥能动性,制作更美观、更高品质的小程序,正如上图的智能小程序们,它们精心打造的视觉界面效果,已比肩APP。

更流畅,使用体验更为平滑顺畅

智能小程序在设计转场时,舍弃传统浏览器走进度条、生硬切换页面的方式。改而采用了APP页面转场效果:新页面从右往左,平滑覆盖;同时,我们为横滑切换体验引入了缓动的效果,使其更符合物体在真实世界中的运动方式,从而横滑操控手感更好,使用更加舒适。

更丰富,提供多种交互增强方式

智能小程序还能提供多种交互增强方式。在手势交互上,智能小程序支持与APP同等体验级别的手势,如滑动,拖拽,缩放等。如视频播放器组件,能通过滑动手势,精准地完成进度、亮度和音量调节;图片查看器组件,用户能通过手势缩放图片、下滑快速返回内容浏览;开发者还可以通过使用摇一摇,震动反馈等能力接口,提升智能小程序中的互动趣味性和使用体验。

30多种交互组件,仍在不断拓展

智能小程序的设计组件均已整合相应的交互能力,开发者可以快速调用默认组件,拼装基础页面,提升开发效率;也可以根据自己的智能小程序使用场景,定义组件的主题样式、调整相应参数…目前,智能小程序已有30多种常用组件,并支持200多种自定义属性,这个数字还在不断上升,欢迎大家在智能小程序官方示例中体验。

设计六部曲

1.选择合适的信息架构

准备设计小程序时,第一步永远不是打开电脑启动设计软件。我们有一个常常挂在大家口头边的设计诀窍,叫“442”,也就是“4分沟通,4分思考,2分挽起袖子干”。所谓磨刀不误砍柴工,我们应当全面理解小程序的核心定位、产品功能,知其然才能知其所以然,选择最合适的信息架构。

当小程序内容维度单一时,使用第一种一字型架构信息,从上到下平铺直叙,最为直观和方便浏览;而当需要平行架构不同维度的内容时,引入顶部标签栏,使用第二种T字架构,方便用户在不同内容分类中滑动浏览。第三种倒T结构与T字结构有相似之处,只是它使用底部标签栏,用于架构内容差异性较大的功能模块。而小程序功能和层级较多时,使用第四种工字架构,用底部标签栏架构一级导航,顶部标签栏承载二级内容分类。我在线上找了些案例,大家可以看到:糖豆广场舞小程序是典型的1字型结构,小红书小程序使用了T字型结构,贴吧小程序使用了倒T型,汽车之家小程序使用了工字型的结构。

2.铺设顺畅的交互流程

符合认知,便捷高效,减少操作成本

交互顺畅,首要原则是需要尊重用户的使用习惯:用户已经在使用APP时,习惯了从哪来,回哪去的操作路径。我们不建议在小程序设计中突然改变这一用户认知。交互流程的优化应建立在在符合用户习惯和认知的基础上,我们应把精力集中在帮助用户更高效完成信息的获取或任务的执行:减少使用障碍,缩短用户步长,降低操作成本。

300多个能力接口

违章查询智能小程序就做得挺好,通过选择器组件,它使用户免于逐字输入车型,只需简单滑动即可完成选择;更优秀的是,它应用了百度智能识图能力,扫描行驶证即可自动填写所有信息,进一步降低了用户操作成本。除了百度智能识图能力,我们还开放了300多个能力接口,比如获取当前位置、获取手机网络状态等。此外,智能语音识别、语音合成等能力等都也正在陆续建设开放,开发者可以调用这些能力,从而用更智能的方式、更好地减少用户的操作成本,使小程序的交互流程更加顺畅。

3.建立舒适的阅读体验

  • 合理排版,有效传达信息
  • 不同场景的排版字号建议
  • 功能展现区分主次强弱

阅读体验的好坏取决于排版,就也就是小程序组织和处理信息的能力。左图就是一个反面例子:这篇示例中,所有文字大小都一样,一眼望去,信息没有重点。而右图使用不同大小的字号,强调主要内容,弱化次要信息,把页面间不同的信息层次拉开,用户可以快速辨认和获取所需内容,完成了从小程序到用户的一次信息的有效传达。

在智能小程序设计文档中,我们也给出了排版字号的基础使用建议,如标题、正文、摘要等,方便开发者为页面赋予初步的阅读排版节奏 ,在这基础上,可以结合自身产品特点再加以发挥创新,定义更优的阅读节奏。

好的阅读体验能让用户清晰定位并找到所求。在上面买火车票案例中,当用户完成去程票的购买后,左图两个操作按钮展现都使用蓝色大按钮,同等的展现强度,会导致用户在选择过程中可能会迟疑;而右图很好地将主次功能操作做了区分强调,优先把注意力聚焦到“购买回程”的按钮上,从而降低了用户选择和思考的成本。

4.使用友好的色彩系统

  • 选对组件,保证清晰易读
  • 正确用色,降低理解成本

选用颜色时,首要考虑保证界面清晰展现和信息可读性。合理的运用色彩对比度关系,是界面内容清晰展现的关键。我们建议开发者选用与当前颜色对比度更大的组件样式。例如:当颜色饱和度较低时,选用左列黑色样式的顶部导航栏,而当颜色饱和度较高时,使用右列反白样式,使信息可读性更好。

在信息可读性良好的基础上,还需要重点注意色彩的表意和对功能引导的影响。比如在设计弹窗按钮时,如果使用灰色的按钮文字,用户可能会以为按钮是置灰不可用的,从而让用户产生额外的理解决策成本。而使用右图肯定、直接、明了的蓝色,则能有效明示操作可行性。

5.打造有识别度的LOGO

  • 图形清晰可辨识
  • 映射产品特点
  • 正确输出完整展现

1544953534945

LOGO就是小程序递给用户的第一张名片,这张名片应该清晰可辨,这是用户能快速一瞥留下印象的前提。举个例子,很多开发者会使用自己的小程序名称作为LOGO,但像左图这样,把长长名称一昧生硬地嵌套成LOGO的方式并不可取:首先,它的识别度不好,其次由于留白过多导致欠缺基础的美感。 当需要使用文字名称作为LOGO时,可以像右图一样,通过视觉创意技巧把它转化为图形化设计,从而让LOGO更构图饱满,表达更清晰,利于小程序传播和记忆强化。

这张LOGO名片应当与界面有所呼应,在用户打开小程序之前,提前向用户传递小程序的特点,例如:爱说唱小程序logo使用镭射渐变色整合了一系列高纯度、高明度的色彩,丰富多变的颜色层次配合跳跃的涂鸦字体,预示它是一个年轻独特,富于趣味和娱乐感的时髦的潮范小程序;而右边AI分诊助手的LOGO,使用听诊器与心形结合的创意设计,简洁克制的蓝白配色,彰显了它作为医疗属性工具小程序的专业和严谨。

为了认真打造的logo能整整齐齐地展现,输出图片时需要注意细节:由于开发者平台提交logo的文件是正方形图片,但在百度APP各入口界面中展示小程序时,会把方形图片的裁切成圆形,因此我们要特别关注logo裁切后的效果:像左图,长隆AR动物园在正方形图片中显示完整的,但是在圆形的展示容器中就会被裁切和遮挡。所以,最好的输出方式是和右图一样,将LOGO的主要图形控制中间红色区域,也就是大约占正方形图片的70%左右,这样能保证logo展现完整,而适当的留白,也让logo的阅读更舒适。

6.运用生动的动效设计

  • 适时适度,增加趣味
  • 动效制作工具和方法
  • 注重设计细节:适配,空态

适时适度的动效,能使流程间的过渡更平滑,并让小程序富于人情味。当动效用于交互转场引导时,如左图,在放松舒缓的练习结束后,上移的光晕巧妙地将用户的注意力顺应着其运动的方向转移,自然地引出结果;当动效用于交互互动增强时,如中间的减压练习,用户手指触碰屏幕的同时,也会触发“涟漪”动效,增加用户互动的趣味性。当动效用于流程衔接时,如右图的爱说唱小程序,在等待歌曲合成完成的过程中,引入导师点评动效,不但缓解用户在等待流程中的焦虑心情,还带用户一些小惊喜。我们今天分享两种常用的动效设计方法:第一种,制作交互型动效,使用PRINCIPLE软件,它能提供准确的动效参数,辅助开发精准实现;第二种,制作展现型动效时,我们推荐After Effects搭配Lottie插件,输出Json文件后,开发者直接调用,便可快速精准实现动效。

此外,还有两个在我们在日常设计工作也容易常常被忽略的细节经验: 第一个,随着全面屏手机的普及,我们也应该注意它们新增的系统特性。可以看到左图,当小程序没有适配全面屏时,不仅影响页面美观,底部操作按钮过于靠近系统操作区,导致无法正常使用。要解决这个问题非常简单,只需像右图一样,引用全面屏适配参数,保证功能可用性和界面的美观度。

另一个细节,不知道大家在使用小程序时是否遇到过,我称之“困惑的空白”——页面白茫茫真干净,令人不禁困惑:“我在哪,我要干什么”。空白的出现可能是因为网络信号突然断开,或者是用户的百度APP版本需要升级…… 为了填补这些空白,我们总结了一些常见的空态情况,并放在视觉组件库供大家使用,希望以后智能小程序令人困惑的空白们会越来越少。

设计工具

第一个是智能小程序的设计组件库,为方便使用,我们提供了sketch版本和Photoshop版本,里面除了设计组件外,还有刚刚提到的,空态等常用页面,帮助智能小程序设计师节省设计成本。 第二个是智能小程序的设计走查表。虽说是设计走查,但我们鼓励团队各角色都下载收藏一份,在项目流程的各阶段中,常常用此进行工作审视,查漏补缺。第三个是智能小程序的官方示例,它展示了智能小程序常用交互组件及能力的使用方法,大家可以通过百度APP搜索“智能小程序官方示例”,或者直接扫码体验一下。

不知不觉,本次分享已经接近尾声,后续想继续深入更多设计内容,可以查阅开放者文档平台中《智能小程序设计指南》,里面整理总结了智能小程序的设计原则,提供了交互和视觉和层面的设计实践建议,沉淀了智能小程序设计探索故事,也放置了上述设计工具的下载地址。 欢迎大家在开发者论坛中提出设计相关的问题、意见建议,期待听到你们更多关于智能小程序设计的声音。

总结

以上就是今天我与大家分享的《智能小程序体验设计指引》,从智能小程序的美观、流畅、丰富的体验优势为起点,再阐述了智能小程序的设计六部曲,最后为大家准备了设计工具。希望这次分享对各位开发者有所帮助,谢谢各位。