百度智能小程序设计原则

访问:1462 次     发布时间:2019-06-17 09:15:36
  

易用性


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

  导航架构清晰

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

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

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

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

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

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

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

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

  操作流程流畅

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

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

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

层次感


  移动设备屏幕尺寸相对小,一屏展现的信息非常有限。设计小程序时,请注意在页面展现时突出一个重点,帮助用户快速理解,避免页面上出现其它与用户的决策和操作无关的干扰因素,降低筛选信息的难度。

  信息设计重点明确

  设计界面信息时,请注意根据内容的重要程度设计其层级主次,以帮助用户更简单地获取所需要的信息和做出判断。可以通过更大的字体、更重的文字体量、更明显的颜色等为内容赋予更强的展现,详见布局排版。

  功能操作主次分明

  当希望对用户的下一步功能操作进行引导时,应为推荐的主操作按钮设计更明显的样式。详见按钮。

  反馈力度强弱适度

  在用户使用小程序时,会出现需要等待的场景。用户的耐心有限,为避免让用户面对一个静止的屏幕等待未知的结果,需要对当前状态及时反馈,告知用户当前小程序仍在正常运作,以此降低用户使用过程中等待的焦虑感。

  框架启动加载

  启动小程序框架时,加载反馈动画与百度 App 通用加载动画不同,更突出小程序的品牌和特性。

  此为百度小程序框架通用能力,除 LOGO 和名称调用开发者的小程序信息外,其他视觉动效及交互均由百度小程序框架统一提供,开发者无需进行额外开发。

  全局加载反馈

  百度小程序提供通用加载的组件,也可以由开发者自己根据品牌定义加载样式。但此时无法明确告知具体加载位置和进度,自行设计时请注意设计加载动画,避免页面静止从而引起用户焦虑。

  1.加载浮层

  2.顶部导航栏加载

  3.开发者自定义加载样式(示例)

  下拉加载反馈

  百度小程序提供通用的下拉加载组件,使用此组件后,当用户下拉页面至一定高度时,可以触发当前页面的整体刷新。

  用户选项反馈

  用于反馈用户操作页面内选项的状态,详见选择。

  多选 Checkbox

  单选 Radio

  开关 Switch

  滑动选择条 Slider

  当选择项较多时,可以使用浮层选择器承载内容。

  1.单列选择器

  2.时间选择器

  3.日期选择器

  操作结果反馈

  同一时间只显示一个反馈提示,并且应该根据不同的场景和反馈需要的强弱程度选择不同样式。

  反馈提示 Toast

  不打断用户流程,会自动消失,适用于轻量级的提示,详见反馈提示。

  1.图文Toast 适用于操作成功反馈。

  2.纯文Toast 适用于情况说明和提醒。

  提示框 Dialog

  作为模态组件,会打断用户路径并分散用户的注意,请谨慎使用,详见提示框。

  1.单按钮提示框 用于重要信息周知。

  2.双按钮提示框 周知并询问下一步操作。

  全屏结果页

  在任务流程的最后一环,且结果反馈比较重要时,可使用全屏结果页向用户明确操作结果,并引导下一步操作。

  开发者可以根据场景需求自行开发,设计资源的视觉组件库中也放置了基础视觉源文件,供快速开发使用。

重创新


  百度小程序为开发者提供基础组件,如按钮、图片等;这些控件均已在百度App中使用论证,充分地考虑移动设备的特点和可用性。

  除了这些基础组件,我们还开放丰富的接口,如地理位置、地图导航等。利用这些开放资源,能够减少开发者搭建成本,而且能提升小程序性能。

  想要更好地了解和使用这些资源,开发者可以:

  在常用组件查看组件的使用细节和设计建议;

  下载设计所需的视觉组件库,我们提供Sketch版本和Photoshop版本;

  使用百度App的拍照扫码功能扫描二维码,在官方示例中查看和试用这些组件和接口。

  我们期待开发者们能灵活运用这些组件和接口工具,结合具体的场景需求和奇思妙想,一起创造出更多有趣的小程序。

  在小程序前期,我们设计团队也为不同行业打造了精品case,为其他智能小程序的接入提供参考借鉴,关于设计的思考与沉淀,将陆续在“设计故事”一栏中与大家见面。