Categories


Tags


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

易用性

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

导航架构清晰

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

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

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

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

正确

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

错误

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

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

正确

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

错误

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

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

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

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

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

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

正确

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

错误

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

操作流程流畅

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

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

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

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

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

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

来源:百度智能小程序


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

蝶变行动专场沙龙嘉宾曝光

作者:百度站长平台   时间:2015年3月12日《百度站长平台蝶变行动专场沙龙——看新站如何突出重围,傲视群雄》即将于3月19日在北京召开。此次沙龙汇聚互联网教育、资讯、金融、O2O等各个行业十余家优质新站,这些创业者将倾情分享他们的创业故事,看他们如何发现用户需求,抢占创业先机,在激烈竞争中再创蓝海;倾听他们在运营、推广网站道路上的有益经验。本期嘉宾有:e10c09c2b8

Public @ 2016-08-08 16:07:19

百度搜索资源平台-如何使用死链工具

使用死链工具可以帮助网站管理员快速发现站内的死链接,并及时进行修复,提升网站的用户体验和SEO优化效果。以下是在百度搜索资源平台上使用死链工具的步骤: 1. 登录百度搜索资源平台,选择“站长工具”>“链接检测”>“死链检测”。 2. 在“死链检测”页面,输入需要进行检测的网站地址,并点击“开始检测”。 3. 等待检测结果出现,在“死链检测”页面中将会显示检测出来的死链接数量,点击“查看”可查

Public @ 2023-06-11 19:50:26

百度智能小程序-如何提升火车票购票体验

1. 提供票价查询功能:让用户能够快速地查询火车票的价格,方便用户在购票前了解票价信息,以便做出更好的购票决策。 2. 提供余票查询功能:让用户能够快速地查询火车票的余票信息,让用户能够及时得知火车票的销售情况,以便用户能够选择最优的购票方案。 3. 提供自动填写功能:让用户能够像购买机票那样自动填写身份信息,提高购票速度和购票体验。 4. 提供订单信息查询功能:方便用户在购票后查看订单信息

Public @ 2023-06-17 15:50:28

【干货】智能小程序起名“黄金法则”都在这了!(

【小智姐姐说】第二期视频号评论点赞活动开奖啦!(中奖名单见文末)同时,新福利也如期而至,就藏在本期文章中哦~ 快来看看吧!在前两期的视频中,小智姐姐给大家详细讲解了智能小程序代码包被驳回的两种情况:头像问题、代码包bug问题。缺席了前两节课的同学,记得扫码关注视频号补补课哦~图片小智姐姐为开发者们可是操碎了心,这不,小程序的名称规范讲解也提上了日程,本期为大家解决“名称宽泛问题”的问题。快快看视频

Public @ 2019-02-14 15:44:30

更多您感兴趣的搜索

0.477101s