生產決定消費，電視載體創新、互聯網視頻服務和技術之間的交替促進，推動着大眾家庭影音體驗的升級。那麼，如何設計電視大屏的家庭影音應用呢？一起來看一下吧。
回顧以前，我們看電視只能看CCTV、江蘇衛視、湖南衛視這些直播內容，可是我們不滿足於直播節目，想要去廣告想要看收費內容想要回放看上課時播出的電視劇。讓我印象很深刻的是那種點播台，要打電話用話費點播，來來回回就放的那幾個動畫。現在，我們可以在電視上語音搜索到熱門網絡劇，訂閱歐冠英超球賽直播、選擇各家綜藝影視等等。
生產決定了消費，正是電視載體創新、互聯網視頻服務和技術之間的交替促進在推動着大眾家庭影音體驗的升級。如何設計電視大屏的家庭影音應用，就是我接下來想要分享的內容，我打算先從電視和手機的幾個不同講起。
01 智能電視設計和手機的5大不同點
用戶—上下文場景—行為—工具或媒介—目的。
1. 居家使用的場景
不同的場景下人和物都有不盡相同的交互方式。
我們使用手機時的用戶使用場景可以是移動的，在地鐵上在衛生間，利用碎片化時間，而電視通常都是被固定在客廳卧室這樣的居家場景中，使用時長是整段的，一般集中在晚上時段。
場景：在什麼時間，什麼地點，什麼樣的環境，最後發生什麼事情；
電影里場景的分類：內景、外景、實體場景、虛擬場景。
2. 家庭成員共享
在居家場景中，電視是全家的公共設備，覆蓋不同年齡段的人。尤其是老人和小孩，各年齡段使用時段也很不同。因此使用電視時，用戶學習成本要低，操作要求更簡單，還有不同模式切換。
而手機作為個人物品，更具隱私、個性化的特徵。手機雖然各種交互感應很靈敏，但是相對的，操作要求更精確，學習成本高。
3. 休閑消費的行為
與手機相比，電視不適合承擔功能型的操作任務，作為一個家庭休閑娛樂設備，使用場景和功能相對單一。休閑娛樂是電視的主要用途，還有學習、智能助手、家居控制、裝飾等。
4. 遠距離遙控+語音輸入的交互方式
與移動端不同，電視體驗發生在不同的空間中，並且需要在3米外清晰可見。在近場交互時實體與觸控是第一選擇，而當中遠場交互時語音成為輸入方式的第一選擇，遙控器這種遠程遙控的實體輸入方式學習成本低而被保留至今。
5. 沉浸式體驗的目的
人們經常以輕鬆的心態使用電視，希望獲得一種觀看小屏無法獲得的身臨其境的娛樂體驗。電視相比於手機更注重沉浸式體驗，做到電影般的效果。
02 如何思考智能電視的界面設計
首先，在設計電視端時，我們可以參考安卓和蘋果的TV端設計原則來主導界面設計，其次我們依舊可以根據設計五要素去思考界面設計的方向。
1. 使用場景的限制
1）配合場景的暗色模式
電視的使用場景：夜晚的客廳環境——具有弱光、安靜、舒適的特點，因此我們一般都採用暗色主題，讓背景色融入場景氛圍，以此突出內容。內容和背景的對比也不需要過於明顯，背景顏色的選擇不宜過黑而無法辨別出圖片的陰影。在主題高亮色上避免使用過於飽和以免產生刺眼的感覺。
2）海報內容一目了然
一般電視里也分為應用圖標與內容推薦，它們都需要在3米外就能被清楚地識別出來。每一個圖片的色調可以統一區別於背景。
圖片內使用簡單的背景讓主體脫穎而出，並且不會壓倒附近的內容。使用過多的漸變反而會減弱整體的對比，因此應該減少圖片內顏色的使用，讓主要內容凸顯。
3）避免主題色刺眼和失真
純白色 (#FFFFFF) 在明亮的電視屏幕上可能會非常刺眼，建議將淺灰色 (#EEEEEE) 作為深色背景上的默認文本顏色。同樣部分高亮主題色運用到電視界面設計時也需要注意，尤其是紅、黃、橙色系，這些顏色會特別嚴重地失真。
4）文字可識別
由於遠距離閱讀大量文字會使眼睛疲勞，要認真考慮文本顯示的字數，能用圖像或者動畫交流就避免使用文字。確保各類字體在遠處清晰可見，一般系統字體不要小於22px（12sp），也盡量精簡字體樣式並避免過細的字重。
2. 設備本身的限制
1）常見電視尺寸
主流電視尺寸一般在43-85寸之間，常見的有43、50、55、60、65、75等，消費者根據觀看距離選擇適合的電視尺寸。電視屏幕的尺一般都遵循16:9的電視畫面寬高比。我們一般使用1920×1080為最小畫布，是當下最常見的電視分辨率，所有圖片資源都是@1x 分辨率。隨着4K內容的普及，也可以使用1920×1080，但是需要提供應提供@2x圖的圖像。
提問：1920×1080的電視是幾K？1080P就是指1920×1080的分辨率大小嗎？
2）畫布尺寸與安全區設置
由於在舊電視上存在過度掃描，可能會發生意外裁剪，需要留出安全區，使主要內容遠離屏幕邊緣。一般上下左右留出畫布5%左右的距離。
3）顯色差異明顯需要測試
各家電視主打畫質作為賣點，價格各有不同，各家的畫質處理技術也不同，可見各家屏幕的畫質一定有一些區別。區別主要在於顯色、色域、控光、畫質等，總結就是顯色差異明顯，我們應該在消費者主要使用的電視型號上進行顯示測試。尤其是綠色、紅色、黃色等顏色容易明顯色差。
3. 操控的限制
正是有了這樣一個外設輸入源，就需要考慮觸碰但未觸發的上焦狀態（focused），正如當有鍵盤就有輸入時，當鼠標懸浮時。TV焦點態的設計即遵循安卓一般設計原則，也有它的獨特性。
1）D-PAD十字交互與網格布局
我們可以把D-PAD和屏幕間的交互形式，稱為「十字線性交互」，也正是這種交互形式決定了輸出端的界面布局的基本形式。
在這個大屏里，我們的焦點只能按照D-PAD的指揮走水平或者垂直線，每一個位置的路徑只能走二維的「十」線，這樣可以更好引導用戶到達他想要的內容。（這裡運用了非常典型的親近性原則）
設計師和開發都熟悉用柵格的形式來布局橫版頁面，而電視上更常採用間距統一的網格形式來規範內容集合，方便遠程瀏覽，也可以方便遙控器快速導航。設計可以根據內容自定列數，最多甚至可以達到9列。
2）焦點在空間中的層次
位置與方向感：在安卓設計語言中，我們可以通過不同控件在Z軸上不同的位置來劃分控件間的層次。通常是通過陰影的變化來表現。因此，我們為了突出焦點所在的位置，焦點一般會有明顯的陰影。以外可能還會添加別的樣式來加強它。
同時，為了明確指向D-PAD所能到達的位置，我們在設計布局時，也需要避免控件間出現重疊。
即Z軸方向，只有一個焦點和普通兩種層級，且（可上焦的）普通層級相互不重疊。
4. 多個用戶的限制
1）家庭共享下的多模式
輸入源除了考慮輸入設備本身，還可以考慮多個來自多個人，可能是多人協作或者多人共用。在居家環境這個場景下，根據使用者的不同提供對應賬號下的信息頁面，以及多人共同進行電視操作。
2）年齡分段模式呈現不同內容與UI
在多個用戶的模式下，就需要對不同用戶進行分類，電視端常見的用戶模式有：兒童、普通、長輩三種模式。
三種模式下，視覺上色調、背景、間距、焦點態、字號、內容海報都有相應的調整。它意味着很多控件是需要做成自定義的。（運營也可以對其進行配置的）
3）常駐的「新手」提示和引導
電視還是一種公共設備，不同時段有不同的人使用它。不同年齡層對智能電視的操作熟悉度也不同，我們在做有引導的頁面設計時，也會做成可重複提示的過程頁面，而非一次性引導。常見的如按鈕文案設計成操作描述的文案，以及焦點帶氣泡提示等。
5. 即時性與沉浸體驗
在首頁用戶更多的是找尋感興趣的內容，用戶選中一個內容就可以立即看到視頻內容。所以在這裡推薦使用獲取焦點即執行的方式，能夠節省找尋成本。用戶點擊確認鍵即可進入播放頁面。
一種是背景圖片跟隨焦點進行切換並自動播放。
一種是焦點聚焦到內容且未移動時，自動播放墊片內容，無需進入二級，所選即時播放。
03 如何規劃一個電視應用頁面
電視應用的層級少，結構扁平，下面我將舉例如何思考一個大屏頁面的信息排布以及頁面焦點的一些設計重點。
1. 常見的四種頁面結構
安卓設計指南里列出了幾種常見的頁面結構：瀏覽視圖、詳細視圖、消費視圖、搜索視圖。這幾類頁面結構基本上就構成了TV端瀏覽一個內容的流程，從語音或推薦項目里選擇一個內容，進入詳情並開始觀看的一個主要流程。
在appleTV中對應的頁面效果如下圖所示，都無一不體現大畫布背景+不拆分視圖帶來的沉浸感，並且沒有多餘的狀態欄標題欄。
一個常見的流程如下：我們在瀏覽視圖和詳細視圖裡或者搜索視圖裡選擇了觀看內容後，進入消費視圖（視頻播放頁），同時可能主動或被動選擇相關內容，跳轉播放或畫中畫播放。
04 以一個K歌應用舉例
1. 產品定位
咪咕愛唱是一款主要通過會員付費為用戶提供音樂類版權內容（包括音樂MV、K歌伴奏、演唱會）的產品。
2. 重點頁面布局——瀏覽視圖
當我們從行為開始考慮，一個K歌的信息頁面有什麼時，我們可以想到，家庭K歌行為下，對應着多人控制、多年齡段使用，平鋪直敘的排版方式是最好，一眼進來最好能看到即時的K歌伴奏MV，有可以讓多人同時操作點歌的二維碼，支持方便的語音搜索。
在確定的功能點模塊基礎上，根據沉浸式的目的和十字交互的規則，我重新規划了一種以即時播放未主要中心的首頁布局，展示的內容其實沒有變化，但是整個頁面不再是被劃分的卡片而是有主次的功能和信息的排布。
新規劃的沉浸式布局1
新規劃的沉浸式布局2
3. 重點頁面布局——消費視圖（播放頁面）
消費視圖裡不僅承載了最重要的視聽內容，還有一些個性化推薦的服務和功能，因此在設計時，需要提到頁面最前來考慮。
純歌詞內容視圖，歌詞逐字上屏是K歌獨有一種展示形式，LRC歌詞本身有時間刻度，所以這裡我將時間進度條和歌詞關聯，用戶上下移動選擇單句歌詞更加直觀，而不是快進或後退。
內容推薦+歌詞展示內容視圖，其實這個是上一個頁面選擇播放列表後的頁面效果，我傾向於給每個歌麴生成封面圖。（一般每個歌曲都會有圖片或者MV）
視頻展示內容視圖，在播放內容時，儘可能減少選擇內容對沉浸式觀影的體驗，當然後期針對運營需求可以權衡。
4.配色
常用的深色調配色當然能更好突出，但是考慮與白天的氛圍匹配，淺色調也可以，淺色背景上的陰影更能明顯突出焦點層次，更重要的是，按鈕背景的顏色在不同素材上都能顯示出來。以及所有圖片整體的色調選擇。
暗黑帶透明度按鈕背景顏色在兩種背景上的表現
中度灰帶透明度的按鈕背景顏色
當然每一個電視大屏的目標用戶不盡相同，還是要根據主要人群來設計和規劃。因為K歌產品也是一款既有兒童又有老年人用戶的產品。因此針對不同用戶，頻道的風格也有一些區別。
我們不管是從國外的應用如網飛和亞馬遜也好，還是從國內的幾家頭部視頻網站也好，我們可以發現影視作品的封面也呈現出以下我舉例的一些方向和風格。我們在做電視端應用的圖片展示時，更應該遵循那種精簡、乾淨、光效統一的風格。
以前一些設計舉例
5. 焦點態設計
1）遙控器與焦點的狀態
控件狀態需要多少種只跟輸入源有關係。比如你輸入源是鼠標+鍵盤，那麼 focus (給鍵盤）、 hover （給鼠標）、active （給鼠標/鍵盤按下），然後細膩點你還會想要加入 disabled。正是由於遠距離交互+按鍵的形式，電視端的焦點態的形式有很大的不同。
電視端焦點態存在的目的是，方便用戶時刻都清晰且明確地知道自己的光標在哪裡，可以移動到哪裡。——通過焦點的統一性、即時性來進一步明確地告訴電視這端的用戶停在了哪裡，可以往哪裡走。
蘋果TV統一的焦點態樣式
控件的狀態和輸入端的形式是強關聯的。輸入源是D-PAD，那麼控件焦點態就是二維的，輸入源是觸控盤，那麼控件焦點態就可以是三維動態的。
蘋果電視的焦點態動態圖
國內由於強運營的需要，對於電視焦點態的設計五花八門，想盡了心思，層層疊加。
2）焦點動效與遙控方向
我們總覽兩大設計原則，都提到了電影體驗、沉浸式體驗，一些小屏幕的細微變化（比如spring）會被放大而顯得複雜過度，我們可以想像看電影時掉幀卡頓的糟糕體驗，電視端的動畫時為了在人和屏幕上的內容之間創造一種視覺上的聯繫。
和移動端一樣的也可以按照這樣的分類來考慮：啟動動畫、反饋動畫、轉場動畫。也可以按照交互動作來考慮，僅在響應用戶操作時使用，比如在考慮入場和出場動畫時，出場動畫可以考慮統一——對應遙控器上的返回鍵，而入場動畫則考慮兩個點：
- 關聯性：讓用戶在布局中理解剛才發生了什麼，是什麼導致了變化。
- 目的性：讓用戶明白接下來會有什麼，可以去哪裡。
因為電視端更多是一種圖片列表的展示形式，因此圖片列表的展示經常以視差運動出現，表現一種大屏上縱向內容源源不斷的出現的感覺。
3）沉浸式的焦點效果
目前在瀏覽器和電視端已經可以看到這樣的效果——即當你滾動瀏覽推薦行時，只要在圖像上停留超過一兩秒鐘，每個標題的預覽視頻就會開始自動播放。這是在電視上一種非常直覺性的交互，就像很久以前我們打開電視就有生動的音畫一樣。
電視具有數十年的期望值，當您打開電視時，可以播放視頻和音頻。因此，有一個沉默的經歷實際上是很奇怪的。
如果還想深入優化優秀的大屏端動態效果可以去PS這類遊戲主機系統里取取經。對於大屏設計如何精進，我認為還是從主機端遊戲界面設計可以瞥見一隅。未來大屏就是AR眼鏡，就是VR，電視的那套東西已經被搬進了小小主機和輕便的眼鏡里。
結語
本文主要以交互設計的5個要素為框架，從電視與手機的不同着手分析電視的特有屬性，繼而引出界面設計一些特殊點，最後以一個電視端K歌APP設計舉例，從布局、配色、焦點態設計等幾個面展開詳細說明。
參考資料:
- Adroid design guidlines
- tvOS-Human Interface Guidlines
- 從物理邏輯到行為邏輯http://www.360doc.com/content/15/0210/13/21907744_447672901.shtml
- 設計基礎：電視交互設計的一些事 http://www.woshipm.com/ucd/918841.html
- TV端設計原則分析 http://www.woshipm.com/pd/4105626.html
- TV UI設計快速上手指南 https://www.zcool.com.cn/work/ZMjc3NTU0ODA=.html
- 在電視端，卡片設計如何進行？ http://www.woshipm.com/pd/1047767.html
- 電視端設計入門，焦點知識不可少 https://www.ui.cn/detail/364730.html?nopop=1
- 小米電視兒童模式體驗報告 https://www.ui.cn/detail/322402.html?nopop=1
- 智能電視launcher設計總結 https://www.ui.cn/detail/309609.html?nopop=1
- 3個方面分析：TV端如何做好反饋？ http://www.woshipm.com/pd/1060010.html
- 從零到壹 | 企鵝電競TV初試啼聲 https://mp.weixin.qq.com/s/aAFNZCp2vg9CYaaQgDWnQw
- 產品分析 | 愛奇藝——「我會成為國產版網飛嗎」http://www.woshipm.com/evaluating/4296471.html
- 電視屏推薦系統如何設計？這裡有個詳細的方案 http://www.woshipm.com/pd/1089858.html
本文由 @皮質大獎得主 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
該文觀點僅代表作者本人，人人都是產品經理平台僅提供信息存儲空間服務。
