電視 UI 設計:使用空白空間

已發表: 2022-03-11

電視設計需要對 UX 原則有全面、嚴謹的理解。 為電視設計時經常關注的元素之一是在設計中使用空白空間。 市場上有太多不知道如何(或有意識地選擇不)正確利用空白的電視應用程序。 結果是雜亂無章的眼睛,積極破壞業務目標。

這裡解釋了什麼是空白以及如何在您的電視應用程序中使用它最適合業務。

空白是我們的朋友

首先也是最重要的……

什麼是空白?

空白是一塊未被佔用的不動產,頂部有零文本或圖形。

這一點很重要,因為只要在其上方沒有添加任何內容,就可以將背景圖形圖像視為空白。

空白是
白色空間並不總是白色的。

有什麼大不了的?

為什麼這麼簡單的事情會產生如此大的不同? 企業主經常將空白視為宣傳更多內容的錯失機會——浪費寶貴的屏幕空間。 他們的目標是將盡可能多的內容放在用戶面前,這在某種程度上是可以理解的。 但是,當向客戶提供太多內容時,他們就會面臨所謂的決策癱瘓——完全缺乏決策能力。

希克定律或希克-海曼定律,以英國和美國心理學家威廉·埃德蒙·希克和雷·海曼命名,描述了一個人根據他或她的可能選擇做出決定所需的時間:增加數量的選擇會以對數方式增加決策時間。

當您考慮電視應用程序的整個概念時,這實際上是一件大事 - 選擇! 您有多少次瀏覽了無盡的電視節目和電影縮略圖庫,卻發現自己根本無法決定任何事情? 不是因為內容不好。 這是因為沒有喘息的空間——沒有重要的分隔符。 你的頭腦看到這麼多選擇,它會關閉。

對於設計師來說,空白是頁面上的負空間,為您的眼睛提供視覺呼吸空間。

設計師知道留白有助於用戶集中註意力並吸收他們希望看到的內容。

誠聘美國全職自由 UI 設計師

對空白說“是”

留白對於電視應用程序設計尤為重要,因為通常情況下,用戶很放鬆,享受悠閒的體驗——試圖在遠處做出決定。 通過為他們提供內容和空白之間的良好平衡,我們實際上是在幫助他們完成這個過程。

如果使用得當,空白可以改變設計和用戶從中獲得的體驗。 設計和佈局需要呼吸空間,以便於眼睛並有助於促進決策。 通過利用空白,您實際上可以提高內容的易讀性和用戶交互。 這是通過減少阻礙觀眾做出決定的干擾來實現的。

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

讓我們看看留白如何幫助創造喘息空間,以及它如何改變決策過程。

一個看似旨在引起焦慮的電視界面
一個看似旨在引起焦慮的電視界面。


試圖同時做太多事情的電視界面
一個電視界面試圖同時做太多事情。


美觀執行,但內容之間缺乏空白
美學上執行得很好,但內容之間缺乏空白。


帶呼吸空間的接口
與呼吸空間的接口。


元素之間具有良好平衡和層次結構的電視界面
具有良好平衡和元素之間層次結構的電視界面。


元素之間具有良好平衡和層次結構的電視界面
具有良好平衡和元素之間層次結構的電視界面。


看到了嗎?

空白創建清晰的分隔,將用戶的眼睛集中在您希望他們查看的內容上。

Hulu 在其 Hulu Live 應用程序中使用空白區域做得很好。 查看用於代替傳統海報藝術的大背景圖像——它看起來身臨其境且美觀。 這是如何利用可用的巨大零售空間的一個很好的例子。

Hulu 以身臨其境的白色空間吸引您
Hulu 以身臨其境的白色空間吸引您。

留白可以減少認知負擔並加快決策速度。 正如 Fast Co Design 所描述的,添加空白空間不僅僅是消除雜亂,它還具有以下基本功能:

  • 提高理解力
  • 闡明交互元素之間的關係
  • 吸引並集中用戶的注意力

留白不僅關乎美觀,還是成功用戶界面的關鍵。 通過專注於視覺空白、佈局空白、文本空白和內容空白,我們極大地提高了用戶理解。 這增加了重點並將您的內容定位在前面和中心。 彼此靠近的圖像會顯得相似; 因此,澄清與用戶的關係將使他們能夠自信地導航。 正如您之前所聽到的,“少即是多”。

利用留白的力量提升您的設計並幫助您做出決策。

減少認知負擔將使 UI 不僅更可用,而且使用起來更愉快——留白將有助於在整個用戶體驗中營造和諧感和流暢感。

有效利用空白

下面是一些電視應用程序的示例,這些應用程序利用有效空白的力量來創建使用起來令人愉快的界面。

這些電視界面允許用戶專注於一個,而不是幾十個選擇
這些電視界面允許用戶一次專注於一個,而不是幾十個選擇。

空白是當今許多電視設計中經常被忽視和未充分利用的元素。 雖然內容是電視應用程序中的王者,但這並不意味著我們應該通過覆蓋每一寸屏幕來弄亂屏幕。 白色空間是一種簡單而強大的設計工具,應該應用於市場上的每個電視應用程序。 它現代、時尚、視覺刺激,並被證明可以幫助用戶決定觀看哪些內容。

在設計中使用空白空間可以讓您的內容在任何尺寸的屏幕上閃耀
在設計中使用空白空間可以讓您的內容在任何尺寸的屏幕上閃耀。

• • •

進一步閱讀 Toptal 設計博客:

  • 電子商務用戶體驗——最佳實踐概述(附信息圖)
  • 以人為本的設計在產品設計中的重要性
  • 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
  • 移動界面的啟發式原則
  • 預期設計:如何創造神奇的用戶體驗