智能電視的交互設計需要注意什麼？

12-18

曾經在Amazon做過Fire TV的一些設計，在我有限的設計經驗中，深感為這樣一個「用遙控器交互的」、「通常在客廳使用的」、「多人共享的超大屏」做設計，和為桌面、手機做設計很不一樣！Google旗下有Android TV和Chromecast，蘋果去年發了新的Apple TV，感覺為客廳電視又回到了公眾的視線（或者說其實電視從來就沒離開過？）

以下是我在看了一些文章，結合自己有限的經驗後總結的一些針對智能電視設計的注意要點：

1. 和為手機設計一樣，Google和Apple也分別為自家的電視App設計寫了設計規範文檔，如果你別的什麼都不看，這兩個文檔你也也應該要看看

Designing for Android TV: https://developer.android.com/design/tv/index.html
Apple TV Human Interface Guidelines: https://developer.apple.com/tvos/human-interface-guidelines/

2. Apple TV是在一個1920 X 1080的畫布上做設計（是的，你再也不用擔心不同解析度和@1X、@2X啦）

3. 不管是為哪個廠的TV OS做，你都需要理解一個叫Focus Engine的設計概念，你要時刻記得在電視UI上應該始終有一個東西是處在Focus的狀態的

舉個栗子：在手機上一個photo gallery的app你可以平鋪幾十張照片在一個屏幕里，然後用手指去戳你想看的就好了。而在電視上，默認狀態就應該是選中了一排照片中的某一個，這是由遙控器這種獨特的交互方式決定的

4. 在TV OS上，橫向滑動是相對容易的，我們在手機上習慣的縱向滑動是相對「昂貴的」——因為電視是橫屏的，縱向滑動造成屏幕的變化較大，通常應該用於切換類別。

5. 電視上的按鈕應該要有更明顯的Affordance，選中的效果應該誇張一些

6. 在設計上要儘可能減少文字輸入，減少文字輸入，減少文字輸入（重要的事情重複三遍），如果不得不輸入（比如登錄操作），可以考慮使用網址二維碼等和其他設備配合操作

7. 在很多主流TV OS上（Android TV、Apple TV、Fire TV），請記得你還有「語音控制」這個黑科技

8. 和「語音輸入」相對的，是你可以更大膽的使用聲音和音樂效果（別怕，和手機不一樣，沒有人會因為電視app發出聲音而感到惱火，悅耳的音效是很常見的提升體驗的手法）

9. 在電視界面上，可以多採取一些動畫來讓它顯得更加鮮活（和手機、PC不同，在電視上看一個完全靜止的界面的感覺是很奇怪的。。。）

舉個例子：在電視上看一張靜態照片，加一些慢慢放大、移動之類的效果會讓靜止的照片看上去更鮮活（如果你注意電視台節目或廣告中播放靜態照片，你會發現這個trick被用的很多~）

10. 由於顯像設備的差別，在電視上，深色背景白色字通常要比白色背景深色字要具備更高的可讀性。純白背景在電視上會比在電腦顯示器和手機上都更加刺眼！這就是為什麼大部分TV OS和App都是使用深色作為默認背景色的（哪怕是對「白色」最為執著的Apple，也使用了一些深色色彩和磨砂效果來柔和）

11. 和做手機界面一樣，請記得要在真實電視上預覽你的設計（你的電腦顯示器渲染文字和圖片的效果和大部分電視都是不一樣的）

12. 在功能設計上，需要考慮到「客廳」這個特殊的使用場景。電視是你和全家人共享的一個設備，多用戶和隱私設置是一個嚴峻的設計挑戰。（毀了老公給老婆準備的驚喜禮物事小，被同事朋友看到自己的看片記錄事大。。。）

* 所有圖片搜集自網路：）

參考鏈接：

Designing for Android TV: https://developer.android.com/design/tv/index.html
Apple TV Human Interface Guidelines: https://developer.apple.com/tvos/human-interface-guidelines/
Building for Android TV?—?Episode 1: https://medium.com/building-for-android-tv/building-for-android-tv-episode-1-2d03f9ba541e#.dwk02azbi
Designing for the Apple TV: https://medium.com/@flarup/designing-for-the-apple-tv-5992c3aab1e4#.ld1dz18yi

小聲的說，其實我覺得以前那種老的只能看模擬頻道的遙控電視，交互體驗就達到一種頂峰了，喬布斯來設計也未必比這個更好。一個開關機按鈕，兩個按鍵前後換台，兩個按鍵調音量，幾個數字鍵可以讓你跳躍選台，更複雜的功能都隱藏在菜單鍵里。盡量的避免了過多的交互操作。真乃大道至簡，老少咸宜啊。

#知乎怎麼還不支持markdown#
電視機是成精了還是怎麼的，不過是內容多了，怎麼就變成「當前技術無法解決的交互問題」了？

1.現在的電視操作方式是什麼？
主流的，四向遙控器，學習簡單，上手迅速，只是操作效率低一些。遇到文字輸入的情況則會變得非常可怕。無線遙控APP也歸於此類，除了讓文字輸入稍微變得容易了之外沒有進步。觸摸天生就不是遙控的好解決方案（後面說）。
次流的，手勢操作。不管是kinect還是wii，不管是leap motion還是MYO，無外乎通過攝像頭或動作感應裝置把人的動作轉換為命令輸入。同樣上手迅速，但是累人，同時對文字輸入基本無解
非主流的，語音控制。巨大的延遲性和差強人意的準確率讓人望而卻步但廠商們完全不死心啊。但好處是，文字輸入方便了很多。我說，你們起碼在遙控器上設個麥克風吧，要不然客廳環境一嘈雜，聽誰的是？（我其實在腦補男的大半夜睡不著起來看電視一打開聲音超大然後男的捂著耳朵大喊音量調低！音量調低！）

2.為什麼智能電視的交互變成了大問題？
反饋。
傳統電視的使用過程中基本不存在「輸入文字」的情況，而實體按鍵提供了固定的操作區域。上手一摸就能找到換台和音量區域，低頭看一眼分清之後怎麼按怎麼是。但上面說的「無線遙控APP」呢？屏幕本身沒有任何區域劃分，比如我用的阿里助手，經常就是往下滑往下滑一點好么點到返回了（好想猛扇阿里工程師的臉，滑動動作離開方向區那這個動作就應該被判定為無效啊！這個還是小事，DLNA投影時字幕字那麼小！而且純白色！但凡白色背景的就完全看不清！都不知道用黑色描邊嗎！！！！！！！）
對於手勢操作更沒譜了。你確定你這次坐在茶几上右手揮了30cm屏幕向左划了一屏，下次躺在沙發上左手揮了30cm向右也能返回一屏嗎？無法重複，那用戶就無法以低注意力完成操作。

知道問題了就對症下藥就是了啊。
1.原則：離手觸發
觸屏比滑鼠和物理按鍵缺少的一個狀態，就是「接觸但不觸發」。正是這個狀態，帶給用戶的是修正錯誤的機會（這也是我上面說「觸摸天生就不是遙控的好解決方案」。另，還記得觸摸版網頁剛剛興起，一干網頁只是為自己的頁面增加觸摸響應之後的慘烈景象嗎！）那麼就要想辦法，從軟硬體上補完這個操作。

2.方案一：激光筆
是的朋友們你們沒有看錯！激光筆這麼殘暴的方案都能入選，原因就是光的直線傳播帶來的直接性——指哪點哪！再配合一個按鍵，像滑鼠一樣以單擊作為觸發。（我知道你們肯定會說給無線APP弄個指針，no no no，那樣你也無法保證能像激光筆一樣的物理移動：像素移動=嚴格1：1）

3.方案二：12宮格

觸控與點按結合：觸摸區域像正常觸摸板一樣可以滑動；同時，整個觸控區域是可以按下的。觸摸板上的網格線像鍵盤FJ的定位星一樣幫助用戶確定自己的觸摸區域，同時電視機界面通過被觸區域發光給予使用者反饋，使用者調整到目標觸控區後按下實體鍵觸發選擇操作。
【僅對熟練使用者開放】提供點觸輸入，同樣使用者可以通過界面反饋調整所觸位置，到達目標位置之後離手觸發。（實體鍵可以替換為MOTO E8的震動模擬功能，真的完全和按實體鍵觸感相同，而且可以通過設置關閉）

分區：電視界面以九宮格為基本元素，對應鍵盤上的九宮格觸摸區。界面根據遙控器的狀態。縱向使用（正常狀態），電視界面為九宮格，對應鍵盤上三排鍵區，整個觸摸區滑動翻頁（或者點按最後一排兩頭的鍵區）；橫向使用，電視界面為4X3的十二宮格，對應十二宮格鍵區，整個觸摸區滑動翻頁。
觸摸區的網格線可以幫助用戶判斷滑動的尺度（每划過一格翻一頁）。（配合離手觸發，同樣適用於無線遙控APP。）

文字輸入：妥協的方案，九宮格。使用上三排鍵區輸入，最後一排左右翻頁，中間做空格上屏。
橫向使用時整個鍵區識別為全鍵盤，配合 Fleksy 這類觸摸演算法提高準確率。
遙控器同時會配備麥克風，以語音輸入作為備選方案。

開關：整個使用周期只會操作兩次的按鍵，沒必要為它在正面留空間。放在頂端，甚至可以讓使用者習慣"拿起來後往桌上捅一下開機「。（等等，都智能電視了為什麼還需要開機鍵？不能拿起遙控器之後自動喚醒電視機嗎？連手機都能做到離眼暫停了啊。）
音量：通過音量鍵喚出音量調節按鍵，通過左右、上下、逆時針順時針（音量旋鈕！）等任何你習慣的方式調小調大音量，長按音量鍵靜音。
菜單：通過摺疊菜單可以讓電視機界面更簡潔更高效，因此菜單鍵不可少。
返回：重要操作鍵因此增大觸摸面積。對於電視來說，絕大多數使用情景是「實時的」和「單任務的」，因此將主頁鍵合併到返回鍵，長按觸發。（在操作邏輯上也提供了「主頁就是不斷返回之後到達的地方」的暗示。）

【僅對熟練使用者開放】將菜單鍵整合到「從觸摸區外向上滑動」觸發則可以去掉，然後將所有按鍵居中對齊，則遙控器可以根據體感方向自適應，不分上下。

4.方案三：click wheel
人的正常閱讀順序是從左往右從上到下，但實際上當單行的閱讀寬度太窄（手機）或太寬（帶魚屏顯示器上的全屏txt文檔）時都會造成閱讀效率的降低和加速閱讀疲勞的產生。因此在電視機上，卡片形態非常重要，而卡片的尺寸也要嚴格控制。在界面左側提供label標籤上下切換類別，然後右側提供內容左右滾動（或者上側提供標籤左右切換下策內容上下滾動），這樣能保證無論何時都可使上下和左右的操作無需切換進行，高效。登錄之類的雜項功能就摺疊到菜單中，層級為「覆蓋於當前頁面上」。
這樣，就可以通過click wheel快速滾動內容然後選中，音量也可以真的是「模擬旋轉音量旋鈕」。而對於電視機這樣輕操作重內容的場所，由內容提供方限制應用形態、像WP那樣嚴格控制界面並提供pivot這樣高度一致的界面非常重要，甚至可以提供結構框架和軟體入口，由軟體方自行填充內容。
我沒有用過Apple TV，我估計方案三可能與它高度相似，如果真是，請多諒解。
最後小猜測：小米的觸摸板遙控器有可能接近方案二。

智能電視真的是越來越熱了，但是許多人只是把智能電視當成了一個在LED、3D等概念後的產品換代概念，而忽視了智能電視的本質是一個軟體、硬體、互聯網服務三位一體的互聯網產品，更忽略了用戶使用感受，以致讓老人不知所措，讓年輕人咬牙忍受。

智能電視的交互和智能車載交互有點類似，就是二者都是處於一個混合交互場景中，所以在交互設計中所要考慮的就超過了一些兩點之間互動產品的交互：

1、電視和人的距離：看電視最舒服的姿勢就是坐在或者躺在沙發上，這時候人和電視機最小的距離至少要超過2米，所以首先從最基本的設計元素說起，字體的大小必須超過26號才能保證閱讀效率。從現在的用戶習慣看，躺在沙發上能操作電視的遙控器最好就是一個「智能手機」，電視只充當存儲、播放和顯示的作用。

2、用戶群體：一貫我們認為「智能「這個詞好像是和年輕人綁在一起，所以很多人做智能電視也按照年輕化標準設計，導致老年人或者兒童根本無法操作，而實際上忠實用戶群體中，我們的父親母親甚至祖父祖母（45-70歲人群）佔了相當比例。面對這些用戶群體，豐饒的功能並不能提升用戶體驗，所以易用性更加重要。

3、交互技術：現在的交互不單純是人機界面交互，還涉及到語音、手勢、人臉識別等交互技術。這些交互方式和技術也在產品中逐步應用，雖然暫時宣傳和噱頭的作用大於實際應用價值，但未來隨著技術的發展和使用場景的普及可能會發揮更大作用，彌補遙控器以外的交互場景，個人認為尤其是語音的價值將會被大大挖掘使用。

只說一點自己的使用體會：
遙控器觸摸操作真心很有必要，如果有其他更好的方法也行。

原因一：現有的智能電視並不是像我們想像的哪有所有的安卓應用都能安裝，就算安裝上由於應用沒有針對電視遙控器控制做考慮，你也是無法使用該應用，或者非常非常的難選中「按鈕」

原因二：現有的電視應用中針對遙控器的左右上下移動真心太麻煩了，比如我搜索一部紀錄片：舌尖上的中國，可能需要輸入：sjsdzg，這個幾個字母需要使用上下左右按多少次才會出結果？想想都蛋疼。

在智能電視遙控應用領域學習實踐了三年，以下是一些關於交互的小小感悟。

一、智能電視交互的特性

電視是一個遠距離非接觸式的屏幕，這個定義包涵兩個重點，一個是非接觸，一個是遠距離。
距離代表電視屏幕所能容納的信息其實是非常有限的。
非接觸意味我們對電視的控制是間接的，需要轉換的。

先說非接觸：

我們熟悉的控制方式五向鍵（上下左右確定）就是通過控制焦點來控制內容的，焦點某種程度上是我們間接與電視產生交互的一個中介，既表達選擇框的位置，又可以表達選擇的命令。明確這一點才能區分電視與手機、平板、電腦之間的交互區別，才能理解為什麼當前其他平台已有的成熟應用不能直接複製到電視上。

焦點這裡的坑非常大，它並不是一個簡單的指針，一個放大的滑鼠，如果限制了它的屬性便無法設計出符合自身應用需求的交互方式。例如，我們要移動的是背景還是焦點：

移動背景是指與背景（物件）直接交互，此時是正向移動，焦點就是畫面的正中，焦點保持不動。舉例：圖片。
移動焦點是控制焦點與目標間接互動，此時是反向移動，焦點在畫面中明確標出，焦點可能是移動的可能是不移動的。舉例：滾軸。

目前常見的控制方式都是移動焦點，然而是否電視場景內都只有這一種方式？假設我們在電視上觀看圖片庫，將圖片全屏顯示時又該如何控制呢？

相關的考量還包括，焦點表達的是位移還是命令，形象點說，就是表達的是視線的移動還是物體的移動？這大概就是為什麼會有雙擊或長按呼出菜單的「高級交互方式」吧……

另外焦點的移動是絕對定位還是相對定位，是否有加速度，在瀏覽時如何權衡效率和準確度等，都是焦點的交互方式中需要深入考慮的地方。

再談遠距離：

遠距離大屏幕能承載的內容其實非常有限，我們常見的界面都將內容儘可能的放大，Launcher界面幾乎都由各種色塊和海報組合而成。而在電視的視覺設計上，無論iOS還是Android都沒有給出一份詳盡的視覺設計規範。

基於五向鍵控制方式設計的界面和交互方式，目標主要為結構清晰、承載更多內容、更高效的選擇：

單一方向的滾動

單屏放不下的內容需要滾動時，選取單一方向滾動，左右滾動和上下滾動沒有絕對的優劣之分。
讓用戶清楚當前瀏覽的位置，如果同時可以上下左右滾動瀏覽的話容易迷失。
如果選取其中一個方向（如左右）作為內容滾動的方向，則另一個方向（如上下）增加功能時較為隱蔽，要考慮如何能被發現。

2. 分類標題和內容同層的方式展示內容，提高效率

在電視上進行內容瀏覽與搜索的效率較低，需要數十次點擊才能找到需要的內容，於是內容推薦對用戶來說比較重要。
將推薦內容與它的分類同級展示，可以減少部分用戶的跳轉和搜索，同時也可以豐富分類的展示。

二、智能電視交互的限制

目前國內用戶常用的設備的主頁、應用的界面幾乎出自同一類設計，說真的一眼看過去有時候都分不出來是在首頁還是應用內……主要原因還是受限於操控方式。

上下左右的操作適合十字劃分的規整排布，所以界面上多是方塊的排列組合。
假如操控是觸摸板，是否可以不將界面生硬的橫豎切割？假如操控是三維立體的球，是否可以將界面的延伸拓展到更多的地方？

而智能電視的操控方式受限主要還是源於輸入設備的落後：

傳統遙控所能提供的單一信息（是和否）無法滿足用戶的需求
逐漸風靡的手機遙控並沒有將手機的功能開放給智能電視的系統
智能電視的應用為了更廣泛的適配而選擇了傳統遙控器作為簡單的有保障的輸入設備，從而限制了自身內容交互上的可拓展性。
暫時只有遊戲在交互上有較高的探索需求。

如今我們討論的智能電視的交互，都還是基於傳統控制方式的交互。而真正致力於從根本改善這種交互方式的，比如我在打雜的這個應用，咳咳，其實還有更多關於交互的思考和探索，下次和大家分享。

第一次答題，廣告輕拍QAQ。

問題中提到互動式設計需要注意什麼，結合上面幾位提到的，單從「設計」角度談下愚見補點缺漏：

1、電視操作需要用遙控器來操作，最常用的按鍵是：「上」、「下」、「左」、「右」、「確定」、「返回」以及「菜單」，所以電視UI設計中請記錄並研究你的操作軌跡，不僅要讓用戶所有的操作都可以使用這些最常用按鍵完成功能切換，更需要想辦法如何讓用戶最短路徑完成操作；

2、電視屏幕比起移動屏幕要大很多，但因為使用者觀看距離比較大，所以，請在所有交互設計中，給予用戶最明確的"切換"、"選中"及"子菜單(如篩選)"的樣式提示，常見方式如下：
a、使用外框高亮顯示；
b、使用大面積反差色背景顯示；
c、使用放大效果顯示；
d、以上方式輔助聲音素材使用；
e、子菜單選項使用文字氣泡提示；

3、因為電視屏幕關係，所有的設計中，請「上」、「左」各預留10%的邊距，否則，不同材質、解析度的電視機屏幕可能會吞掉你的設計！

4、針對第三點的延伸，常見的電視布局都是橫向滑動(天貓魔盒曾使用豎向滑動，後來也改了應該)，橫向滑動右側內容可以不預留邊距，隨著滑動內容而向中間靠攏，同理，豎向滑動底部不需要預留邊距；

5、謹慎設計"返回"功能：我們在手機上可以方便使用滑動或點擊迅速返回，android手機基本都配備有「返回」的物理鍵，但是在電視上，用戶操作意義上的「返回」是指回到上一次操作，而不是返回到上一個功能(有點拗口，請腦補...),所以「返回」按鍵事件請盡量設計在涉及頁面轉換功能時候使用，比如收起展開的子菜單、返回前一個頁面等；另外，一般的設計規則是，無論用戶在任何界面，按兩下「返回」會提示要「退出」程序；

6、電視的功能設計中，請盡量避免使用大面積的文字（所以我看到zaker齣電視版快崩潰了……），根據你的功能，盡量提供視頻、圖片類內容，如果必須用到大量文字內容，請選擇適當的排版加良好的背景、字型大小，否則在電視的那麼大屏幕上看文字絕對是一種糟糕的體驗；

7、交互設計中，請盡量避免涉及到用戶輸入部分，目前絕大部分的智能電視輸入都是一個巨大的麻煩。可嘗試使用電視設備號綁定、手機二維碼掃描、語音輸入。樂視採用了手機號註冊方式，這樣就避免了在字母和數字間切換了，可借鑒。

8、湊齊8個……在電視交互設計外，可以設計下手機（微信、APP、或網頁）與電視的交互體驗。很多在手機上可以完成的事情，如果你們有類似移動端，可以結合到一起，體驗更好。可以參考電視貓的微信助手：電視貓MoreTV 智能電視應用專家，非常實用的功能，在微信中查找影片，然後推送到電視上觀看。

供參考，歡迎討論。

關鍵是改進智能電視的遙控設計。遙控設計就像是一把鑰匙，不起眼，但確實智能電視發展推廣的關鍵，可以看看我其他回答，手機打字麻煩。

智能電視離用戶距離最近，最簡單直接，當然是最有可能成為所謂家庭互聯網的控制中心（相比諸如所謂智能路由器等產品，構建生態的可能性要大得多），但是整個智能電視和智能家居的產品形態未定，現在還在培育期，這是我個人的觀點。

1）智能電視的本質上是人的原始視覺需求（想像一下人獲取信息的渠道里，視覺佔比多少？就知道它其實具備很簡單粗暴的衝擊力了），所以有個簡單的判斷標準——如果在大屏幕上，某項內容能獲得視覺效果上的加成，形成和手機屏，PC屏的差異化，那麼就是適合的。
具體來說：大屏幕上的內容或應用，近期內應該是集中在視頻、遊戲、教育這3塊。

2）交互設備和交互方式：個人認為大屏幕和客廳的場景，如果有很強勢的內容，那麼用戶可以接受配套內容的專用外設。

例如遊戲，沉浸式，搭配一些遊戲外設，只要遊戲品質夠，用戶可以接受。

例如教育，只要有效，家庭付費沒問題。

例如視頻，躺在沙發上不想說話時，用遙控器；想快速切換時，用語音；想更有效率，更詳細查找時，用移動端多屏互動。

結論：屏幕的的分工是提供極致的視聽體驗，在外圍，終端外設和操控方式可以多種多樣，對應不同的應用和場景，達到最好的用戶體驗。

前提是場景和應用夠強勢，用戶願意買單。

目前缺少針對智能電視而開發的遊戲和應用
報告顯示視頻、遊戲、教育的下載量佔據智能電視應用的前三。然而智能電視的遊戲應用存在諸多問題，仍存在大量發展短板，導致開發者不敢冒然布局，業界對此也沒有做好充分準備。

如設計出發點多為手機，缺乏體現智能電視大屏幕優勢的遊戲；傳統遙控器無法操控遊戲。

幾乎所有遊戲都需要滑鼠或手機進行操控，操控不匹配；熒幕比例不適合，導致屏幕兩側有黑條，解析度不匹配導致畫面精細度差；現有硬體性能不足夠運行大型遊戲；存儲空間太小，可安裝遊戲數量有限等。

與此同時，電視大屏幕的優勢讓遊戲的實際體驗與手機、平板完全不同。尤其是體感應用在電視遊戲中的加入，其前所未有的體驗更是廣大消費者熱衷於電視遊戲的一個重要原因。

事實上，已經有智能電視廠商試水遊戲應用，如樂視TV應用開放平台，面向全終端、所有用戶、開發者開放的智能電視應用平台，通過電視客戶端、官方網站，為用戶提供智能電視應用下載等服務，實現用戶一站式下載、管理、升級智能電視應用，已有2000餘款應用預置數百萬台終端。

不卡就行！

我用的樂視，我覺得目前的智能電視有以下幾個問題（不限於交互設計）
1.啟動慢
2.響應慢
3.需要輸入的地方太多
4.不夠智能
5.只關注內容，沒有體現客廳互動節點、計算節點的價值

看電視最舒服的姿勢就是坐在或者躺在沙發上，這時候人和電視機最小的距離至少要超過2米，所以首先從最基本的設計元素說起，字體的大小必須超過26號才能保證閱讀效率。從現在的用戶習慣看，躺在沙發上能操作電視的遙控器最好就是一個「智能手機」，電視只充當存儲、播放和顯示的作用。

不管用遙控器還是用app來控制電視都太麻煩，搜索方式太複雜