层次感

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


    正确

    字体大号加粗的标题最突出,正文字体小颜色浅的辅助信息展现能力较弱。

    层次感 - 图2
    错误

    所有信息都强,分散阅读时的注意力,影响信息传递。

    适当地省略重复信息,合理的排版,使浏览更加轻松。


    正确

    除了字体大小不同,上下排版也使需要使的重点信息更突出。

    层次感 - 图4
    错误

    对主次信息的混排、冗余的文案穿插均让找关键信息变得困难。

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

    对用户可能需要进行的下一步操作的功能进行强化展现。


    错误

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

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

    启动小程序框架时,加载反馈动画与百度 App 通用加载动画不同,更突出小程序的品牌和特性。此为百度小程序框架通用能力,除 LOGO 和名称调用开发者的小程序信息外,其他视觉动效及交互均由百度小程序框架统一提供,开发者无需进行额外开发。

    层次感 - 图7

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


    1.加载浮层 2.顶部导航栏加载 3.开发者自定义加载样式(示例)

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

    层次感 - 图9

    用于页面内某个选项或输入区做出的用户选择的状态,并在当前操作区域反馈其选择状态,详见选择

    单选 Radio

    开关 Switch
    层次感 - 图12

    滑动选择条 Slider

    当选择项较多,或选项间有前向依赖时,可以使用浮层选择器承载内容。

    层次感 - 图14
    1.单列选择器 2.时间选择器 3.日期选择器

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

    反馈提示 Toast

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


    1.图文Toast 适用于操作成功反馈。 2.纯文Toast 适用于情况说明和提醒。

    提示框 Dialog

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

    层次感 - 图16
    1.单按钮提示框 用于重要信息周知。 2.双按钮提示框 周知并询问下一步操作。

    全屏结果页

    在任务流程的最后一环,且结果反馈比较重要时,可使用全屏结果页向用户明确操作结果,并引导下一步操作。开发者可以根据场景需求自行开发,设计资源的中也放置了基础视觉源文件,供快速开发使用。

    易用性