Categories


Tags


百度智能小程序设计原则-易用性

易用性

用户在日常使用移动设备时,由于实际场景的多样性,注意力容易分散或暂时中断。因此为用户设计小程序的使用流程时,需要做到:用户架构清晰,流程明确简单,并为用户的每一步操作提供及时的反馈。

导航架构清晰

架构连续的用户任务流程,通常使用统一纵向导航

百度小程序框架通过顶部导航栏,为小程序配备统一的页面纵深导航能力。开发者只需要标记定义“首页”即可,无需额外开发成本,页面默认返回时逐层级返回。

从小程序首页开始浏览小程序页面的经典用户路径示意(红线前进路径,蓝线逐级返回路径,灰线关闭路径)。

顶部导航栏位置始终固定,可以帮助用户定位“当前位置”,以防用户迷失在小程序流程页面中,顶部导航栏名称应体现小程序页面的核心内容。

正确

标题清晰的体现了查询航班的起点和终点。

错误

标题表达模糊,必须通过浏览内容进行思考判断。

除标题文字外,每个页面的顶部导航栏样式均可进行自定义,自定义时需注意信息的可读性。(了解更多)

正确

保证可读性的前提下,可通过适当的颜色搭配辅助品牌定位。

错误

背景色和前置元素的颜色对比度较低,会导致可读性变差。

架构横向的同级信息通常使用底部标签栏

当用户在页面标签栏切换时,可在当前视图内浏览更多同层级的内容,页面标签栏本身并不随页面滑动。

底部标签导航栏通常在首页使用,常驻屏幕底部,提供小程序 2-5 个顶层视图的快速切换。

下图为小程序首页的底部标签栏切换示意。

标签栏个数、标签栏背景色、选项的图标和文字外均可进行自定义,自定义时请注意信息可读性。(了解更多)

正确

保证可读性的前提下,可通过适当的颜色搭配辅助品牌定位。

错误

背景色和前置元素的颜色对比度较低,会导致可读性变差。

操作流程流畅

考虑使用场景的复杂性和移动设备屏幕大小的适配问题,建议一次只引导用户做一件事情,并且避免出现任务路径外的内容打断用户流程,从而帮助用户聚焦当前任务,快速顺利完成操作。

请勿在用户浏览目标已经明确的情况下(蓝线),强行引导用户中断原目标流程(红线)。

移动设备屏幕虽然有变大的趋势,屏幕精度也在提升,但输入操作的准确性并不算高——尤其手机键盘布键密集,输入困难还易引起输入错误。因此开发者在设计小程序时,应该充分考虑手机特性,尽量减少用户输入,利用现有接口或其他易操作的选择控件来改善用户输入的体验。

例:查违章小程序,在选择汽车类型时,使用选择的方式取代了让用户直接手动输入,预期明确,操作也更加便利。

例:智能小程序,在搜索时会记录用户近期搜索小程序的历史。

例:百度火车票小程序,在搜索城市时,跟随用户输入提供关键词进行联想。

来源:百度智能小程序


Public @ 2011-06-20 15:59:49

关于站长平台数据提交的知识产权声明

站长平台上提交的数据,包括但不限于网站信息、文章、图片、视频、音频等,均为用户自有知识产权。用户应确保所提交的数据不侵犯任何第三方的知识产权,并对其提交的数据承担全部责任。 站长平台保留对用户提交的数据进行审核、编辑、删除等操作的权利,但不对用户提交的数据承担任何知识产权责任。用户若发现其提交的数据被第三方侵权,请及时联系站长平台处理,站长平台将积极配合用户维权。 站长平台不允许用户在平台内发

Public @ 2023-04-04 03:50:15

关于site域名后提示“危险网站”的公告

我们注意到一些用户报告称,当访问特定网站的时候,会收到一个名为“危险网站”的提示。我们理解这会对用户体验造成不便,并且我们正在进行调查以找出导致这种提示出现的原因。 在某些情况下,浏览器会标记某些网站为“危险”的。这可能是因为该网站曾经涉及到恶意软件、钓鱼攻击、欺诈或其他网络安全问题,或者因为该网站的安全证书有问题。这些提示旨在保护用户免受潜在的网络威胁。 然而,有时候一些合法的网站可能会被误

Public @ 2023-07-28 15:50:31

听说小程序页面标题低质会影响分发?我该怎么办?

对于小程序的页面标题,一定要突出页面内容,要使用正确简洁有意义的语义,使用高质量、正确意义的文案标题,比如使用具体的品牌或者产品名称,以自然流畅的方式展示产品的特性,使用宣传性的标题来描述关键信息。另外,还要注意遵守小程序的相关指南和最佳实践,确保标题准确而具有意义,以提升小程序的审核和分发效果。

Public @ 2023-02-26 01:54:16

百度智能小程序设计原则-层次感

百度智能小程序设计原则之一是层次感。在设计智能小程序时,应该考虑到页面元素之间的层次关系,从而营造出清晰明了、易于理解的用户界面。 以下是实现层次感的一些方法: 1. 使用不同的字体大小、字体颜色和字体样式来区分重要性和次要性的内容,使用户能够快速分辨出主要信息。 2. 使用不同的图标和形状来区分不同的功能和选项。并且相似的功能和选项应该统一使用相同的图标和形状,以加强用户的认知和记忆。

Public @ 2023-06-19 13:50:23

更多您感兴趣的搜索

0.440104s