Categories


Tags


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

易用性

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

导航架构清晰

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

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

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

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

正确

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

错误

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

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

正确

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

错误

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

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

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

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

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

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

正确

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

错误

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

操作流程流畅

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

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

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

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

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

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

来源:百度智能小程序


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

百度搜索资源平台-关于移动索引量数据异常的公告

近日平台索引量工具进行统计升级,升级中出现移动索引量数据波动,数据波动最快于今晚恢复。关于本次数据索引量数据升级,特此公告如下:1、索引量数据变化,并不影响网站流量2、如网站此期间出现网站流量异常,请网站尽快自查网站其他方向,关于流量异常的追查方式请参考:《网站流量异常,如何正确反馈》3、网站如在平台工具使用中遇到问题,请在反馈中心进行反馈。来源:百度搜索资源平台

Public @ 2020-10-01 16:06:07

百度《移动互联网发展趋势报告2015贺岁版》同步首发

2月10日,兄弟部门百度移动服务事业群组&百度商业分析部对外发布《移动互联网发展趋势报告2015贺岁版》,报告详细盘点了2014年Q4及全年的国内移动互联网市场,同时首次对00后的移动互联网行为进行了分析和洞察。报告显示,截止2014年Q4的数据表明BAT在移动互联网时代拥有了更强的生态控制力,以手机百度、淘宝、微信为代表的BAT超级APP已经开始在“连接人与服务”领域展开正面交锋;与此同

Public @ 2009-03-20 16:03:12

如何打造体验优质的品牌类小程序

为帮助品牌类小程序打造高品质体验,助力开发者实现更好的经营,智能小程序官方针对品牌类小程序提出了体验方面的建议,来指导开发者低成本高质量的改善小程序体验,助力品质感知及关键指标提升。遵循指引,优化品牌类小程序体验,可助力小程序达成以下目标:提升品质:助力品牌类小程序进行体验改善以符合官方要求,并进一步提升品质感知;促进转化:结合典型品牌类小程序实验数据发现,按照官方建议优化体验后,试点小程序的支付

Public @ 2009-07-25 15:59:22

百度智能小程序设计指南-页面布局

基础布局基于宽度 750px(iPhone 6)输出视觉方案,我们在布局智能小程序信息时,为信息内容区至少留出左右边距 34px(17pt),限制内容宽度以获得最佳的可读性。正确内容左右边距应至少留出34px。错误边距过宽,页面元素过于集中。错误边距过窄,页面元素过于分散。透明框架布局适配当开发者使用小程序的原生顶部导航栏时,开发者只需要在顶部导航栏下方开始布局页面即可。智能小程序在基础库 2.1

Public @ 2014-09-13 15:59:21

更多您感兴趣的搜索

0.566779s