TV端設計原則分析總結

前段時間完成了公司從0-1的TV端產品設計，在設計過程中，整理了一些TV端的設計原則和設計經驗，與大家共同學習交流。

相對於移動端和PC端，TV端設計對於很多人來説比較陌生。

接下來從以下幾個方面和大家聊聊TV端的設計方法和經驗總結：

1. TV端使用場景；
2. TV端操控方式；
3. 焦點；
4. 頁面佈局；
5. 交互特點；

一、TV端使用場景

一般談到看電視，人們首先想到的畫面是家人聚在客廳裏，坐在沙發上邊聊天邊追劇或者邊玩遊戲。

基於這種最常見的觀影環境和氛圍，TV端的使用場景有以下幾個特點：

1. 遠距離操控

由於現在的電視屏幕尺寸越來越大屏，用户的觀影距離一般在距離電視2-5米左右。

這麼遠的距離，為了讓用户能夠始終輕易的關注到主要內容，電視界面往往通過將其居中和靠前突出，讓主要內容不被淹沒在大屏之中。

2. 娛樂式消費

人們一般會通過看綜藝、看電影來達到放鬆休閒的目的，所以娛樂消費是TV端的特點。

大篇幅的設置在TV端並不適用，多層級的探索也會讓用户迷失方向。

內容的易被發現、簡單的層級、極簡的操作步驟；讓用户快速抵達目的，享受觀影本身，是需要着重考慮的。

3. 沉浸式體驗

越來越多的家庭擁有家庭影院。

試想下，在昏暗的環境中，帶上3D眼鏡，沉浸在劇情之中，是一種美好的享受。

這種環境下，適合讓視頻、圖片、聲音作為主旋律，摒棄大段的文字，構建豐富和動態的視聽享受。

4. 共享式環境

電視處於家庭公共場合，離不開社交體驗，如看電影、看照片、玩遊戲等，是一種共享設備。

故電視端的內容需要廣泛適應家庭所有受眾成員。

二、TV端操控方式

不同於移動端的手指操控和PC端的鼠標操控，TV端主要通過遙控器操控；從傳統的老式遙控器到現在的極簡遙控器，在操作的簡易程度上有很大改善。

• 傳統的遙控器操作除了方向鍵，還有數字鍵和其他眾多按鍵，用户除了不好記憶，還容易誤操作；
• 新式遙控器將不常用的按鍵去除或轉移至電視端，僅保留上/下/左/右方向鍵，首頁、返回、菜單和音量鍵；最新式的遙控器還加入了語音控制鍵，極大提升了用户的操作方式。

國內遙控器的最常見操作方式為點按操作，包括長按和短按；國外遙控器典型是蘋果公司的apple TV遙控器，除了點按，還支持滑動操作，體驗更流暢、操作效率更高。

改進仍在繼續，目前有些廠商將遙控器操作轉移至手機，用户可以將電視端界面投屏至手機，在手機上直接點擊操作，減少了中間的移動步驟。

不過由於需要手機與電視相互配合，而且手機屏幕畢竟沒有電視端直觀，所以該種操作方式還處於萌芽階段。

三、焦點1. 定義

智能電視端有一個特有的設計概念——焦點。

焦點為用户指明瞭當前內容所處位置，並且讓內容最突出、最顯眼，是電視屏幕上始終存在的一種狀態。

電視端內容常見狀態有：默認狀態、焦點狀態、按下狀態、標記狀態。

2. 焦點移動原則

十字移動：

焦點根據遙控器的上/下/左/右按鍵，呈現“十字”形移動；在屏幕內容區域劃分規整、且無空缺情況下，不支持斜向移動。

就近原則：

在焦點移動過程中，焦點不能跳躍性的移動，需要按照上/下/左/右鍵的操作，依次移動至離上一個焦點最近的位置處。

居中顯示原則：

當一行中有延伸在屏幕之外的內容時，焦點移動方式有多種形式：焦點居中固定或在頁面邊緣固定。

以往智能電視的常見做法是，當焦點向右移動至一行最後一個完整可見內容時，繼續向右移動，則內容移動，焦點固定。

根據心理學研究，用户往往更關注屏幕中心的信息，而非邊緣，所以在屏幕內容完整顯示前提下，將焦點位置固定在中間，更合適一些。

四、頁面佈局1. 導航

常見的TV端導航有橫向導航和縱向導航。

這兩種導航分別在哪種場景下適用呢？

其實兩種形式的導航各有特點：

• 橫向導航佔據屏幕上方（或下方）邊緣位置，既可以定位內容的位置、但是又不會過多幹擾用户，帶來的沉浸式體驗更好；適用於首頁、電視劇等有feed流形式的地方。
• 縱向導航佔據屏幕左側（或右側，右側極少見）位置，雖然犧牲了左側部分區域，帶來的沉浸感也不如橫向導航，但是勝在導航內容更加聚焦，用户使用的效率更高；適用於篩選等旨在快速查找內容的地方。

2. 內容

除了導航之外，影片內容的排版佈局也有一定的規則。

分區明顯：

在TV端，每一處可操作性內容都需要有固定區域的劃分，無論是卡片、面性或者線性的區分。

沒有明顯分區的內容不僅容易淹沒在屏幕眾多內容中，而且容易影響頁面的規整性，用户對焦點的移動路徑也無法正確預期。

• 在形式1中，屏幕底部文案1—文案4處，無明顯分區，在未操作前，並不知道這個區域能不能獲得焦點，或者是以怎樣的形式獲得焦點；
• 形式2中，有了整塊分區，第一感覺是可以整體獲得焦點，但是也可能是其中的每個部分獲得焦點，這個也需要操作後確認；
• 形式3就比較明朗了，底部分為四個區域，在未操作前，用户能夠預期到每個區域都能夠獨立獲取到焦點。

有限數量：

根據調研，內容在橫向可擴展時，隱藏在屏幕之外的內容，越靠後用户查看的幾率越小。

所以在設計時，儘量不宜頻繁的的讓內容橫向擴展，或者橫向擴展的數量不宜過多，在縱向上，內容可以無限擴展。

• 左圖中，內容橫向移動時，內容控制在有限數量以內；在本人設計過程中，橫向擴展數量極限值一般為20個，大家可以根據實際情況排布；
• 右圖中，內容縱向移動時，內容可以無線擴展；比如首頁、電視劇一級頁面等，內容呈現瀑布流式移動，提供給用户儘量多的選擇。

規則佈局：

內容佈局如果是規整的十字型佈局是最佳佈局形式，不建議設計過於交錯的卡片佈局。

過於交錯的佈局會使用户對焦點的移動路徑無法正確預期，同時為技術同學增加了開發難度。

五、TV端交互特點

根據TV端用户的使用場景和操作方式，TV端的基本交互有以下幾個特點。

1. 簡單操作、層級少

TV端層級不宜過深，否則用户容易迷失，而且過深的層級意味着過多的步驟，對於使用遙控器操作的用户很不友好。

一般來説，層級控制在3~5個以內是比較合適的。

2. 減少用户輸入

由於目前用户的主流輸入方式還是遙控器，遙控器的輸入特點使它的輸入過程繁瑣、步驟多。

所以如非必要，儘量減少用户輸入。可以用選擇代替輸入、語音代替輸入、或者將輸入方式轉移都是比較好的方式。

目前大多數智能電視都融合了幾種輸入方式，用户可以根據所在場景選擇最便捷的輸入方式。

3. 界面展示重圖片、輕文字

由於電視的娛樂性、觀看的沉浸式和遠距離的特點，使用户往往沒有耐心看大段的文字，高清大圖和音視頻更吸引用户眼球。

4. 提示或反饋明顯且簡潔

由於用户觀看電視時往往是輕鬆的狀態，導致注意力不會高度集中。

所以在一些特殊節點上，如果需要出現提示，這些提示需要明顯、簡潔。

在重要提示上，可以展示常駐提示，一般提示上，給出互動性小的toast提示即可。

5. 善用漸進式展示

由於TV端屏幕尺寸較大，往往可以展示很多內容，但是過多的內容也可能會讓用户抓不住當前重點。

所以在內容層級上可以首先展示最重要內容，當用户有需要時，再通過進一步操作展示出其餘內容。

6. 重視新手引導

由於TV端內容多，遙控器操作又有其不便捷性，所以為了方便用户，TV端往往會有一些隱藏的便捷性功能，這些功能在用户使用熟練之後會輕易掌握。

但是對完全沒使用過的新手用户來説，就像隱藏的彩蛋，無意間嘗試才會發現，所以為了避免用户探索，在初次使用時加上必要的引導可以提高操作便捷性。

六、結論

以上是在實際項目過程中得出的一些經驗和心得，主要是圍繞一些通用性原則展開説明的，實際設計過程中，考慮的東西遠遠不止這些。

每個模塊都可以深入去挖掘，在實際做項目過程中也會有更深的體會。

這篇文章，希望給剛上路的同學帶來些指引，也希望大家共同交流學習。

本文由 @江邊菇涼 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議