广泛应用于手机端和PC端,当然在电视端中也经常使用,往往起到一级导航的作用,在告知用户所处位置的同时,很好的引导用户进行模块间的切换,如下图所示。然而,Tab导航也有一些基本的设计要求,比如尽量不使用多层Tab套用,即使不得已套用也需尽量保证表现形式不同。另外,在「焦点」的章节,也还会提到Tab切换时的加载问题。
△ Tab导航 4. 列表 列表也是手机端最常用的菜单展现形式,在电视端同样适用。如电视直播类产品,主功能就利用了多层列表套用的展现形式,详见下图所示。而在电视端,列表的样式也是多种多样的,如纯文字列表(可配按钮)、图文列表(可配按钮)、展示型列表(不可操作)、横向列表(选集列表)等。
△ 图文列表和展示型列表 5. 其他 电视产品上最常用的菜单和导航模式一般都可以总结为以上4种,当然还有一些其他的方式。随着用户多设备的使用,越来越多的手机端和PC端的设计模式开始在电视上出现。而更多的产品界面因其复杂的功能无法只使用1种菜单和导航模式,往往是混合型设计,如下图所示。不过,无论使用何种导航和菜单类型,电视大屏幕的菜单和导航的设计目标终归是用户可以快速定位,并且能够预测出操作结果。因此,灵活使用导航和菜单,使用户不会迷失在功能繁多的界面信息中就尤为重要。
△ 其他类型的导航和菜单 四. 信息展现 在前面的文字中,我在「电视」这个词后面都紧跟了「大屏」这个词,电视的屏幕是比PC还要大的屏幕。而用户也因为如此大的屏幕,往往是坐在两三米之外。因此,电视端的信息设计有着两个显著的特质,为大屏幕而设计和为远距离而设计,有着以下几个注意事项。 1. 重视信息的识别性和简洁易懂 文字、图标和按钮,乃至toast提示,在电视端的识别性问题比手机和PC端更为凸显。因为远距离、大屏幕,加上电视本身的休闲属性,使得用户的注意力较为分散,因此,界面中的信息和元素就需要适当放大,至少保证用户能够在两三米之外能清晰看到,如下图所示。
△ 信息识别案例 2. 提前露出信息和多露出点信息 在「遥控器输入」章节中有提到,提前露出信息能够在一定程度上减少用户输入,并在产品层面吸引用户进入。不过,和手机端设计类似,还是需要甄别哪些信息需要提前露出、怎么露出以及露出信息后对产品稳定性和性能的影响。这些都需要基于产品特点,并与产品、视觉和开发共同协商确定。而「多露出点信息」却相对容易理解,主要是告知用户右边/下边「还有一些内容,快去看看」,如下图所示。
△ 信息露出案例 3. 避免过多无模块信息的展示 相比于手机端,因屏幕较大,与PC端类似,往往需将屏幕划分为多个排列整齐的小屏幕来进行设计,即模块化、区域化的设计信息展现。通过这种方式,可以使信息布局更为规整,用户不容易迷失在繁杂的信息中,如下图所示。
△ 信息模块化案例 五. 控件位置 控件的位置问题是初期开始电视产品设计时非常容易犯的错误,如下图所示。左图中的「添加股票」按钮,当已添加的股票过多时,可能会看不到该按钮,或需用户按很多下才能使焦点移动到「添加股票」。右图中的文字浏览,完全不知道如何浏览,也不知道如何将焦点从文字移动到「查看票种」按钮。这两个案例阐述了按钮的位置导致按钮丢失或操作效率较低。电视端文字阅读也得遵守焦点浏览原则,如每行1个焦点或整篇1个焦点,若是后者,就得保证可见范围内文字已展示全。因此,在电视大屏中放置交互控件,需充分考虑是否符合电视端的使用方式以及用户的操作效率。
△ 控件位置案例 六. 焦点状态 (责任编辑:admin) |