重新思考電視平台的用戶界面設計

電視用戶界面的基本組成介紹

如今，絕大多數消費者都在使用付費電視，但這並不意味著他們已經避開大屏幕來消費他們的內容。 根據尼爾森公佈的數據，美國成年人的收視習慣發現，92% 的收視仍然發生在電視屏幕上。 這些都是相當大的數字。

美國成年人中超過 92% 的觀看仍然發生在電視屏幕上。

在過去的幾十年裡，“看電視”的含義發生了很大變化。 我們不再局限於裝滿屏幕的遙控器和有線電視盒； 我們正在使用智能電視，或者使用 Roku、Amazon Fire 和 Apple TV 等冰球進行流媒體播放，或者連接 Xbox 和 Playstation 等視頻遊戲機。 這些設備中的每一個都允許用戶界面比老式的屏幕指南強大得多。

通過 Hulu、Netflix 或亞馬遜等基於訂閱的在線服務付費觀看廣播或 VOD 節目，佔全球在線受訪者 (Nielsen) 的 26%。 這是一個很大的數字。 然而，72% 的受訪者確認他們仍然通過傳統的電視連接來觀看他們的內容。

這是否意味著傳統的電視連接將繼續存在？

我們似乎都認為那裡的剪線鉗代表了更高的數字。 尼爾森報告稱，預計 2015-16 賽季美國將有 1.164 億家庭觀看電視。 這是一個巨大的數字，該報告還發現，其中大約 950 萬戶家庭已經切換到免費的 OTA 電視。 在所有流媒體服務中，Netflix (60.7%) 似乎領先於遊戲，其次是 Amazon Prime Video (49.4%) 和 Hulu (26%)。 我相信人們切斷電源的最大原因之一是我們只想為我們使用的東西付費。

與電腦甚至手機相比，為電視設計 UI 仍然是一個相對較新的領域。 它也是一個根本不同的平台，我們消費內容的方式也不同。 電視設計需要一系列獨特的考慮因素，包括屏幕尺寸和觀看距離、技術限制和使用環境。 用戶處於“靠背”體驗，平均坐在 10 英尺外，用戶界面和體驗需要反映這一點。 與觸摸屏平板電腦和手機相反，電視上的交互是通過 D-pad（方向控制板）使用遙控器或視頻遊戲控制器完成的，這增加了複雜性。

顯示器

電視不像平板電腦和手機。

隨著時間的推移，電視已經發生了很大變化，從笨重的家具變成了掛在牆上的時尚簡約顯示器。 當電視佔據整個客廳時，他們使用了一種技術，可以在電視機上產生不一致的圖像，尤其是靠近邊緣的地方。 為了彌補這些問題，CRT 電視受到過掃描。 這只是意味著圖像被略微放大，因此邊緣不在查看區域的範圍之外。

傳統上，廣播公司預料到了這一點，並希望避免他們的任何關鍵信息過於靠近屏幕邊緣顯示。 為了解決這個問題，他們創建了一個標題安全區域來顯示不失真的文本，以及一個可以安全顯示圖像的動作安全區域。

由於我們無法控制的原因，過掃描仍然存在……即使在您的新高清電視上也是如此。 電視的過掃描量不一致。 為確保您的所有主要信息（例如標題和重要操作）都是安全的，請將它們保存在安全範圍內。

目前還沒有安全行動領域的“標準”； 它主要由平臺本身定義。 谷歌將他們的安全區域保持在狹窄的範圍內，而蘋果則更加慷慨。 根據我在網絡上的多次搜索，這些區域將在電視屏幕中心的 85% 到 95% 之間變化。 為了滿足您可能正在使用的所有不同平台的要求，我建議使用 60px 頂部和底部邊距以及 90px 側邊距的安全區域。 這意味著您的所有主要信息都需要適合該區域，以適應所有電視屏幕並滿足每個平台要求。

要開始您的新電視用戶界面設計，請創建一個新的 1920 x 1080 畫布。 您的邊距（安全區）應為兩側（左側和右側）90 像素以及頂部和底部 60 像素。 您可以在此處免費下載文件。

導航

上下左右如何塑造電視界面。

作為設計師，我們設計的硬件將定義我們的一些設計模式。 在移動設備上，我們通過滑動、點擊、長按、拉動等方式來執行操作。 選項卡和菜單用作我們設備上的導航模式。 電視提供了一個巨大的畫布，如果做得不好，很容易變得過於復雜。 觀看一長串內容以最大化用戶可見的內容量已成為電視 UI 的標準元素。

與我們用手指控制的移動設備不同，大多數電視用戶界面由方向鍵控制並在遠離屏幕的地方使用。 無論是遙控器還是遊戲手柄，方向鍵都將導航限制為四個方向：上、下、左和右。

每個平台也有自己的既定約定。 例如，在 Xbox 上，觸發器提供“Page Up”和“Page Down”控件，而保險槓用於在內容視圖之間切換。 每個平台上還有許多經驗豐富的遊戲玩家會熟悉的“高級用戶”按鈕。

TV UI 中的另一個關鍵元素是焦點狀態。 由於無法觸摸屏幕或使用鼠標，用戶必須導航到他們想要選擇的元素。 當用戶在應用程序中導航時，應突出顯示不同的 UI 元素，指示導航元素處於焦點位置。

電視設計時的焦點和突出狀態非常重要。 該焦點狀態是突出顯示可選組件並表示用戶當前屏幕位置的元素。 顯示焦點的形式可能會有所不同； 但是，根據組件的不同，一致性始終是關鍵。 清晰且高度可見的焦點可幫助用戶快速識別其當前的屏幕位置並簡化導航。 當用戶將視線從電視上移開，然後又收回視線時，應該會自動清楚當前選擇了哪個選項進行導航。 屏幕上的每個項目都必須可以通過光標到達，並且應該始終清楚光標接下來可以移動的位置。

可能讓用戶想知道他們在應用程序中的位置的設計示例。 這些示例沒有提供足夠的定位視覺指示（焦點狀態）。 用戶應該能夠隨時清楚地看到他們所在的位置，而無需上下移動。 您應該能夠將視線從電視機上移開並返回，並且仍然知道您的位置。

排版

在十英尺外閱讀。

電視應用程序通常被稱為十英尺體驗，這個術語指的是您和電視之間的共同距離。 與移動設備和台式機等其他設備相反，電視將更像是一個“靠背放鬆”的環境。 鑑於這個距離，我們需要對 UI 的處理方式與我們在 Web 或移動設備上的處理方式有所不同。

電視屏幕通常比移動設備和台式電腦顯示器大，但觀看距離更遠。 易讀性成為一個重要特徵，這意味著必須相應地調整文本和其他元素的大小。 根據您的年齡，18px 可能是最小的可讀尺寸，並且僅適用於非必要標籤，例如眉毛標籤。 儘管如此，作為一般經驗法則，您選擇的字體大小永遠不應小於 24 pts。 這就是我認為適合每種類型用戶的最小字體大小。

電視上良好排版的關鍵是不斷測試。 顯示器上的薄、小字體看起來乾淨利落，但一旦放在電視上，它可能會顯得過時或變得難以理解。

掃描線

什麼是掃描線？

與台式機、移動設備和平板電腦屏幕不同，電視屏幕上的圖像由奇數和偶數掃描線組成。 電視在奇數和偶數掃描線之間快速交替地呈現這些線。 落在單個掃描線上的任何單個像素（或像素線）都會閃爍。 為了避免您的項目在屏幕上閃爍，您應該始終保持您的線條為偶數且不小於 2 像素。 這是在處理跨平台項目並準備從觸摸設備（移動設備和平板電腦）傳輸您的設計時需要考慮的事情，您通常會發現自己在為電視創建 1px 邊框按鈕。

避免這些模糊線條或形狀的另一種方法是確保您的設計始終像素完美。 下面的示例是使用奇數創建的線的一個很好的示例。 正如你所看到的，我們可以清楚地看到它的效果，它變得令人不安。

顏色

電視顯示器有限制。

首先要記住的是，電視的伽馬值比台式機、平板電腦和手機設備高得多。 描述 gamma 如何影響圖像質量的最佳方式是 gamma 表示灰度中每個步驟之間的亮度差異水平，或者“快速”黑色變得更亮的程度。 我們認為兩倍的光只亮了一小部分。 不同品牌和型號的電視在亮度、顯示和其他設置方面差異很大。 像字體一樣，顏色應該儘早並且經常在電視上進行測試。

選擇顏色時要遵循的一些指導原則： 晚上或在黑暗的房間裡看電視時，明亮的顏色可能會使眼睛刺眼。 避免在大型元素或背景中過度使用飽和顏色（尤其是紅色）和大量使用白色。 純白色會產生光暈和其他視覺干擾。 選擇白色時，建議選擇#f1f1f1十六進制值以避免任何閃爍。 為了提高可讀性，請確保在元素之間創建足夠的對比度

一般規則是避免高對比度顏色之間的銳利邊緣（尤其是深色旁邊的亮色），並避免“熱”色，例如非常飽和的紅色和黃色。 與飽和度較低的顏色或藍色和綠色等較冷的顏色相比，這些顏色更容易流血。

始終在實際電視上測試顏色，以了解您的顏色選擇如何轉化為大屏幕。 如果可能，請在多台電視上預覽您的應用，因為電視型號之間的顏色可能會有很大差異。 只需連接電視機上的 HDMI 電纜並進行測試。

基礎

小事要考慮。

這些元素應該用於指導您的整體設計。 設計電視 UI 時最大的考慮因素是簡單性和輕量級交互。

雖然交互設計的許多基本原理和最佳實踐仍然適用，但與計算機或移動設備不同，電視的使用方式更加輕鬆。 電視上的用戶界面應該清晰、簡單、直觀。 設計要求簡單明了，信息密度低。 這些元素需要足夠大並且間隔足夠遠，以便從遠處讀取。 為每個屏幕提供一組清晰的操作或選項。

這種設計乾淨簡單，使用漂亮的大卡片處理。 焦點狀態是通過與乾淨設計的其餘部分對齊的比例和陰影來實現的。 元數據也僅在懸停時可見，這使用戶可以將注意力集中在當前卡片上。

將最重要的內容或選項首先放在屏幕上，以便用戶輕鬆查看和導航。 必須刪除不必要的屏幕級別。 進入不同的層次並再次退出必須是容易和明顯的。

設計電視應用程序時最關鍵的因素是為用戶操作提供清晰準確的導航。 如果導航不明確，用戶會感到困惑和不安全。

簡而言之，用戶應該始終準確地知道他們在應用程序中的位置。 請記住，用戶僅使用基本控件進行導航。 移動、返回、回車等基本導航功能必須清晰。 用戶應該能夠通過這些操作使用他們想要的操作。

作為設計師，我們的工作是創建和設計用戶界面，使用戶能夠以清晰且易於瀏覽的方式訪問內容。 我們不能指望用戶為了看到我們的內容而適應新的習慣。 相反，我們必須調整我們的用戶界面，以便他們可以在黑暗中被那些給我們提供低於他們全部意圖的人操作，並且使用非常有限的輸入設備。 這是一個相當大的挑戰，但潛在的回報是巨大的。 玩得開心設計！

• • •

進一步閱讀 Toptal 設計博客：

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