多语言展示
当前在线:958今日阅读:3今日分享:40

智能小程序设计原则

智能连接人与信息、人与服务、人与万物的开放生态, 依托以百度App为代表的全域流量,通过百度AI开放式赋能, 精准连接用户,无需下载安装便可享受智慧超前的使用体验。
工具/原料
2

登录智能小程序

重点突出,流程明确
1

重点突出,流程明确设计界面信息时,重点突出主要信息和操作

2

正确信息主次层次分明

3

错误字号颜色均一样,没有主次

4

正确操作有主次重点

5

错误多平行操作,用户难以选择

6

设计任务流程时,一次只做一件事情移动设备使用场景复杂,用户注意力易分散。设计智能小程序时,为了帮助用户聚焦当前任务并且快速顺利完成,设计智能小程序的任务流程时,应明确当前主要任务操作,并且避免出现任务路径外的内容打断用户流程。

7

错误弹窗打断了用户原充值流程

导航清晰,反馈及时
1

小程序导航合理地设计清晰的导航,能使智能小程序的信息架构和浏览体验提升当用户进入智能小程序,我们需要清晰地告知用户当前的位置,确认用户在浏览页面时不迷路,从而更舒适愉悦地使用智能小程序。智能小程序框架已具备页面导航能力,开发者只需要标记定义“首页”即可,无需额外开发成本。

2

顶部导航栏帮助用户定位“当前位置”,并指示“可往何方”和“可归何处”固定顶部,不随页面滑动。自定义配置:文字内容(字号固定)、背景颜色(请关注并保证其可读性和可用性)。

3

标准配色方案

4

正确背景色与文字色搭配可读性好

5

错误背景色与文字色搭配效果可读性差

6

底部标签栏用于架构同级信息通常不随页面滑动,用户切换可在当前页面浏览更多的内容。同一页面不可出现两组底部分类标签导航栏叠加。标签数量不得少于2个,不得超过5个。每个选项字数建议保持一致且不超过4个中文字符,以保证不同手机屏幕尺寸,标签点击区域的易用性。通常在首页底部固定展现。自定义配置:图标样式(大小固定)、文字内容和颜色(字号固定)、背景颜色(请关注并保证其可读性和可用性)。

7

反馈对当前状态及时反馈,能降低用户使用过程中等待的焦虑感在用户使用智能小程序时,有时难免会出现各种需要等待的场景。移动场景下,用户的耐心是非常宝贵的,我们应该避免让用户面对一个静止的屏幕等待未知的结果。使用反馈组件和动画辅助,以暗示用户当前智能小程序仍在正常运作,而没有卡死。

9

2. 内容加载反馈:用于反馈页面内容的加载状态局部加载局部加载反馈即只在触发加载的局部模块进行反馈,此加载反馈模式更好地指示了操作响应入口,且用户在此反馈下仍可浏览页面,负面情绪较少,推荐使用。

10

全局加载全局性操作反馈且无法明确加载进度时使用。此加载样式为模态,此时用户无法操作页面,又无法明确告知具体加载位置和进度,可能引起用户焦虑,应该谨慎使用。

11

3. 选择操作反馈:表达用户选择的状态用户对于当前页面内某个选项做出选择后,应在当前操作区域反馈其选择的状态。各组件详细说明,请参考组件-选择章节。

12

4. 操作结果反馈:显示用户操作的结果提示反馈操作反馈3秒后消失,不打断用户流程,适用于轻量级的提示。设计时请注意,同一时间只显示一个反馈提示,并且应该根据不同的场景和反馈需要的强弱程度选择样式。各组件详细说明,请参考组件-反馈章节。

13

提示框反馈提示框为模态,适用于需要用户明确知晓的信息,并做出下一步决定的情况。请谨慎使用提示框,因为它们打断用户路径,并会分散用户的注意力。各组件详细说明,请参考组件-反馈章节。

减少输入,缩短路径
1

手机的输入效率低且输入场景复杂,应减少用户输入手机屏幕虽然有变大的趋势,屏幕精度也在增加,但整体交互操作的准确性并不算精确;尤其手机键盘布键密集,输入困难还易引起输入错误。开发者在设计智能小程序时,应该充分考虑手机特性,尽量减少用户输入,利用现有接口或其他一些容易操作的选择控件来改善用户输入的体验。

3

降低操作成本当无法通过接口帮助用户输入时,可以尝试以下种方法帮助用户降低其输入操作成本。1.选择比输入更便利,让用户做选择而不是键盘输入。

4

正确用户一步点击完成任务

5

错误需要用户输入并进行下一步

6

2.提供输入历史和输入帮助

7

正确提供搜索历史,帮助用户回溯

8

消除附加工作,可以提升操作效率,缩短用户路径产品在使用过程中经常会有一些多余的点击,对于用户而言,这些不必要的操作都是附加成本。减少消耗用户的精力、但是不直接实现用户的目标的附加工作,改善产品的可用性。

9

正确用户1步操作到位,信息明确

10

错误用户需要操作3步,且无法看到价格选项,增加了附加工作

注意事项

百度智能小程序是百度研发的产品,2018年7月4日,百度智能小程序正式上线 。

推荐信息