虎牙开放平台文档

设计指南

我们基于小程序简单轻快的特点,为开发者提供小程序设计指南。设计指南的核心在于帮助开发者设计出具有稳定易用的用户体验的小程序,在维护良好的用户体验的同时,也尽可能为实际运营数据效果提供保证。

清晰简捷的导航

基于小程序的轻快简单特点,一般来说我们不建议使用导航(不建议区分多个不同的信息块)。一个页面强调一件事情是最能让用户沉浸的体验,也避免了复杂形态带来的干扰问题。 但如果你的作品包含多个概念上不一样的信息模块,导航就像一本书的目录,会一直在书的前几页。能让用户快速感知到目录在哪里、出口在哪里等。我们建议保持导航在页面的顶部,以一条bar的区域承载。

导航建议只有一级,在面积有限的轻快小程序中放置多级导航会显得非常复杂,并违背了小程序本应有的特点和定位。

一般来说不建议导航项超过3个,原因同上。当超过3个的导航项时不应该创造新的区域来承载,这样会占用核心的内容展示区域。可以尝试在导航bar上做快速展开3个以上的导航项的功能。

默认情况下,页面应该隶属于某一个导航项,并且建议是第一个。所在的导航项应该与其他导航项在视觉上做出区分,方便用户定位当前位置。

尽可能简单的流程体验

一般而言我们建议在单个页面快速交互完成任务,不管是互动、活动或是简单的小游戏。当有些任务需要多个步骤来完成时,尽量保证做到步骤的最少化。当步骤(包括结果反馈)少于等于3步时,建议使用弹窗作为步骤的信息承载。

我们不建议设计步骤超过3步的任务。当设计的任务步骤大于3步时,建议使用页面跳转,每个页面都需要在顶部留出返回路径,防止用户迷失。使用单独的悬浮返回按钮置于右上角,或者将导航区域变成页面title和返回都是合理的方案。

符合用户心流的布局

一个页面承载着不同类型的信息,根据排列组合设计符合用户在不同状态下心理预期的信息展示布局,能够提供良好的消费体验。我们建议使用较为成熟的布局如下,能够满足大部分活动、互动或者小游戏的设计,是兼顾体验和业务效果的布局模式。

其中,视觉效果重点突出核心信息和执行操作,导航的视觉强度不必喧宾夺主。执行按钮置于页面底部方便手指低成本操作,也可以使用滚屏常驻页面底部的做法。由于界面空间有限,次要信息的重要性相对较弱,建议置于二屏之后,一般可以是对于核心信息的解释、详细规则或其它推荐信息等。过于杂乱的信息布局,或不恰当地使用视觉强度,会让用户难以理解、困惑甚至造成迷失:

友好的引导

不要让用户做困难的选择是一条适用于大部分场景的用户体验原则。不管对于用户了解你的小程序,还是参与,都能通过有效的引导让用户更高效快速get到最需要的东西。

在信息展示上,建议一个页面只有一个重点信息/任务,通过颜色、形状重点突。

对于决策上,需要用户进行二选一或者三选一的决策时,突出大多数场景用户最想要最可能操作的决策路径。这里不建议通过这种突出引导用户跳转其它不符合当前场景的功能或者操作,是非常糟糕的设计。

对于次要信息或者与当前场景不太强相关的信息,通常不会放在当前屏幕上。此时可以通过一些引导设计提醒用户跳转或划到第二屏去消费这类型的信息。这种引导应该是明确的、较弱的、不影响当前页面主要信息的,最好是带有情感化的。

合理反馈

在任何时候清晰地告诉用户操作所处的状态和结果也是用户体验的常用原则之一。

启动加载

启动页虎牙官方会专门适配默认加载动效,开发者不需要自行设计。

加载反馈

用户在执行某项操作后,与系统交互的时间不可控,需要提供反馈告诉用户loading状态。

结果反馈

每项任务的结束,无论结果如何都建议反馈结果状态给用户,并提供合理的路径返回或跳转。对于错误或者异常状态,应该予以用户帮助。基于结果的重要性,建议让用户主动跳出,不建议做自动消失或关闭处理,以保证结果信息的有效传达。

视觉建议

页面尺寸与通用间距

页面内导航样式

我们建议保持导航在页面的顶部,以一条bar的区域承载,样式上应与虎牙的主导航样式保持一定的差异性。

一般来说不建议导航项超过3个,当超过3个的导航项时,可以尝试在导航bar上做快速展开3个以上的导航项的功能。

按钮样式

图标 / 预览图规范

设计师需要给小程序设计入口图标以及预览图,用于虎牙直播APP和助手端的展示。

相关下载

虎牙小程序设计指南0618.pdf

虎牙小程序基础样式库.sketch

虎牙小程序基础样式库.psd