电视 UI 设计:使用空白空间

已发表: 2022-03-11

电视设计需要对 UX 原则有全面、严谨的理解。 为电视设计时经常关注的元素之一是在设计中使用空白空间。 市场上有太多不知道如何(或有意识地选择不)正确利用空白的电视应用程序。 结果是杂乱无章的眼睛,积极破坏业务目标。

这里解释了什么是空白以及如何在您的电视应用程序中使用它最适合业务。

空白是我们的朋友

首先也是最重要的……

什么是空白?

空白是一块未被占用的不动产,顶部有零文本或图形。

这一点很重要,因为只要在其上方没有添加任何内容,就可以将背景图形图像视为空白。

空白是
白色空间并不总是白色的。

有什么大不了的?

为什么这么简单的事情会产生如此大的不同? 企业主经常将空白视为宣传更多内容的错失机会——浪费宝贵的屏幕空间。 他们的目标是将尽可能多的内容放在用户面前,这在某种程度上是可以理解的。 但是,当向客户提供太多内容时,他们就会面临所谓的决策瘫痪——完全缺乏决策能力。

希克定律或希克-海曼定律,以英国和美国心理学家威廉·埃德蒙·希克和雷·海曼命名,描述了一个人根据他或她的可能选择做出决定所需的时间:增加数量的选择会以对数方式增加决策时间。

当您考虑电视应用程序的整个概念时,这实际上是一件大事 - 选择! 您有多少次浏览了无尽的电视节目和电影缩略图库,却发现自己根本无法决定任何事情? 不是因为内容不好。 这是因为没有喘息的空间——没有重要的分隔符。 你的头脑看到这么多选择,它会关闭。

对于设计师来说,空白是页面上的负空间,为您的眼睛提供视觉呼吸空间。

设计师知道留白有助于用户集中注意力并吸收他们希望看到的内容。

诚聘美国全职自由 UI 设计师

对空白说“是”

留白对于电视应用程序设计尤为重要,因为通常情况下,用户很放松,享受悠闲的体验——试图在远处做出决定。 通过为他们提供内容和空白之间的良好平衡,我们实际上是在帮助他们完成这个过程。

如果使用得当,空白可以改变设计和用户从中获得的体验。 设计和布局需要呼吸空间,以便于眼睛并有助于促进决策。 通过利用空白,您实际上可以提高内容的易读性和用户交互。 这是通过减少阻碍观众做出决定的干扰来实现的。

根据 Human Factors International 进行的研究,留白使用户的理解能力提高了近 20%。

让我们看看留白如何帮助创造喘息空间,以及它如何改变决策过程。

一个看似旨在引起焦虑的电视界面
一个看似旨在引起焦虑的电视界面。


试图同时做太多事情的电视界面
一个电视界面试图同时做太多事情。


美观执行,但内容之间缺乏空白
美学上执行得很好,但内容之间缺乏空白。


带呼吸空间的接口
与呼吸空间的接口。


元素之间具有良好平衡和层次结构的电视界面
具有良好平衡和元素之间层次结构的电视界面。


元素之间具有良好平衡和层次结构的电视界面
具有良好平衡和元素之间层次结构的电视界面。


看到了吗?

空白创建清晰的分隔,将用户的眼睛集中在您希望他们查看的内容上。

Hulu 在其 Hulu Live 应用程序中使用空白区域做得很好。 查看用于代替传统海报艺术的大背景图像——它看起来身临其境且美观。 这是如何利用可用的巨大零售空间的一个很好的例子。

Hulu 以身临其境的白色空间吸引您
Hulu 以身临其境的白色空间吸引您。

留白可以减少认知负担并加快决策速度。 正如 Fast Co Design 所描述的,添加空白空间不仅仅是消除杂乱,它还具有以下基本功能:

  • 提高理解力
  • 阐明交互元素之间的关系
  • 吸引并集中用户的注意力

留白不仅关乎美观,还是成功用户界面的关键。 通过专注于视觉空白、布局空白、文本空白和内容空白,我们极大地提高了用户理解。 这增加了重点并将您的内容定位在前面和中心。 彼此靠近的图像会显得相似; 因此,澄清与用户的关系将使他们能够自信地导航。 正如您之前所听到的,“少即是多”。

利用留白的力量提升您的设计并帮助您做出决策。

减少认知负担将使 UI 不仅更可用,而且使用起来更愉快——留白将有助于在整个用户体验中营造和谐感和流畅感。

有效利用空白

下面是一些电视应用程序的示例,这些应用程序利用有效空白的力量来创建使用起来令人愉快的界面。

这些电视界面允许用户专注于一个,而不是几十个选择
这些电视界面允许用户一次专注于一个,而不是几十个选择。

空白是当今许多电视设计中经常被忽视和未充分利用的元素。 虽然内容是电视应用程序中的王者,但这并不意味着我们应该通过覆盖每一寸屏幕来弄乱屏幕。 白色空间是一种简单而强大的设计工具,应该应用于市场上的每个电视应用程序。 它现代、时尚、视觉刺激,并被证明可以帮助用户决定观看哪些内容。

在设计中使用空白空间可以让您的内容在任何尺寸的屏幕上闪耀
在设计中使用空白空间可以让您的内容在任何尺寸的屏幕上闪耀。

• • •

进一步阅读 Toptal 设计博客:

  • 电子商务用户体验——最佳实践概述(附信息图)
  • 以人为本的设计在产品设计中的重要性
  • 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
  • 移动界面的启发式原则
  • 预期设计:如何创造神奇的用户体验