起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識2個方面，帶你深入了解電視端焦點運動設計
繼上文講到的電視焦點基礎知識后，筆者進一步深化內容，為我們介紹焦點的移動原則以及使用場景。
之前寫過一篇關于電視焦點的基礎文章，主要是適用于想入門的人看的，簡單地介紹了電視操作、遙控器、焦點概念和常見的焦點知識點。
如果是TV端設計新手，建議先看《電視端設計入門，這些焦點知識你需要了解》，再看此篇文章可能會有助于理解。
文章結構：
- 焦點概況
- 焦點移動原則
- 焦點使用場景及運動方式
- 總結
一、焦點概況
1. 焦點是什么？
焦點就是在當前界面上，你的遙控器操作的起點（但并不是頁面中的第一個卡片，因為有些默認焦點不是在頁面中的第一個位置），當前選中的位置，類似PC端的hover狀態（鼠標懸停）。
如果此時你按方向鍵（上/下/左/右），則焦點在當前位置向其他位置移動。
2. 焦點在界面上的狀態
焦點在界面上主要有六種狀態，分別是可用焦點、可用非焦點、禁用焦點、禁用非焦點、當前已選狀態、按下態。如下圖所示：
其中“按下態”在TV中較少出現，常用的是一種表現方式就是按下【OK】鍵后，有圓點向周圍擴散的波紋。
3. 焦點和遙控器的關系
焦點是遙控器在界面上操作行為的體現，也就是根據遙控器的操作，焦點和界面在電視上發生變化，達到用戶通過遙控器控制電視的目的。
二、焦點移動原則
1. 十字運動原則
由于焦點的移動依賴遙控器「方向鍵」的來操作，所以焦點移動需遵循“十”字運動規則。且焦點的運動方向需和用戶預期方向一致，如按【左】則焦點向左移動，按【右】則焦點向右移動，按【上】則焦點向上移動，按【下】則焦點向下移動。
2. 就近原則
在焦點運動過程中需遵循就近移動原則。當用戶按方向鍵時，則焦點移動默認到距離當前焦點位置最近的一個卡片上（適用當前無焦點記憶情況下）。
3. 焦點記憶運動路徑
焦點路徑記憶指的是根據用戶的操作行為記錄焦點移動軌跡。
無焦點移動記錄時，按行移動焦點，默認獲取到此行的首位；有焦點移動記錄時，焦點移動到此路徑記錄內容上。
適用于范圍：側邊多層結構；固定區域拓展內容（包括屏外拓展的行和屏內豎向區域拓展）。
三、焦點使用場景及運動方式
1. 行與行之間的焦點移動
行與行之間的焦點移動規則主要有3種情況：
（1）（多行完整卡片）非首尾卡片行與行之間焦點按移動，這時只需要根據方向鍵移動、判斷此方向上最近距離的卡片即可，如下圖所示：
（2）首尾卡片行之間的移動，當焦點在非末行最后一張卡片上時，按【右】則焦點移動到下一行的第一個卡片上（適用于不延伸到屏幕外的行）；當焦點在非首行第一個卡片時，按【左】則焦點移動到上一行的的末尾的卡片上。此種焦點行為的定義有利于用戶連續換行操作。
（3）不完整行之間的卡片運動，當焦點在完整行按方向鍵移動到非完整行時，需要遵循就近原則，焦點移動到離當前焦點最近的卡片上。
2.?多行屏外延伸焦點移動
屏外延伸的行焦點需要固定要某一位置處，主要有三種方式：將焦點固定在第一個卡片（行左側）；焦點固定在中間卡片（行中線）；焦點固定在右側最后一個完整卡片（行右側）。
三種方式在各品牌電視中都有人用，但是根據人的視覺規則以及使用電視時是遠距離的場景，個人比較建議采用焦點固定在屏幕的中部位置的方式。且在系統中建議只使用一種方式，不要三種方式并用，否則會造成用戶疑惑。
（1）焦點固定在第一個卡片
（2）焦點固定在中間
（3）焦點在右側最后一個完整卡片
3.?焦點翻頁
無論電視是采用橫向布局（向右翻頁）還是類似瀑布流的方式（向下翻頁），超出首屏的需要通過移動焦點翻頁來進行查看。
（1）按行翻頁
按行翻頁并不是嚴格意義上的翻頁，是通過不斷滾動行來達到翻頁的目的。此方式的好處是在翻頁的過程中不會出現焦點跳躍的情況。
此方式需要確定固定行的位置，建議固定行在視覺的中心，操作起來更加舒適。現在的新系統比較多使用此方式，個人建議采用此方式。
（2）按頁翻
按頁翻則像我們看書一樣，在當前頁的最后一個位置翻頁后看新頁面的第一個位置。采用這種方式會出現一個焦點跳躍的問題，處理不好看著很難受。如下圖：
4.?回到頂部
這種情況在近兩年的瀑布流的電視系統中比較常見，通常有兩種方式：主要來源于早期的PC端網友的交互，點擊「回到頂部」則頁面回到頂部；和手機頁面中的點擊頂部狀態欄回到頂部的效果是一致的。
（1）第一種是在頁面底部有一個「返回頂部/TOP」等提示的按鈕，焦點選中后按【OK】鍵焦點回到首屏默認焦點。
（2）在非首屏頁面按【返回】鍵則焦點回到首屏的默認焦點處。
這種方式的好處就是：只要在非首屏頁面按【返回】鍵即可，而不是要到頁面底部才可返回。
這兩種方式可根據實際情況選用或是兩種都用。在縱向/橫向頁面比較長的情況下，用戶需要按方向鍵非常久的情況下才到達邊緣，建議兩種方式一起使用。
5. 焦點記憶運動路徑
路徑記憶指的是根據用戶操作行為記錄焦點的移動軌跡。無焦點移動記錄時，按行移動焦點，默認獲取到此行的首位；有焦點移動記錄時，焦點移動到此路徑記錄內容。
適用于范圍：側邊多層結構；固定區域拓展內容（包括屏外拓展的行和屏內豎向區域拓展）。
6. 側邊多層結構
側邊多層結構常見于分類結構，例如：影片分類，新聞分類等，并且大類下很多小類；頭條分類下包含熱點、社會、娛樂、趣聞等分類，分類下包含內容。
7. 固定區域拓展內容
拓展內容指的是顯示內容區域超過屏幕固定區域，通過移動焦點可以看到超出固定區域位置的內容，有橫向擴展和縱向擴展兩種情況。
需要注意的是：如果是正常屏內展示時，則遵循十字運動原則，超出則需要焦點記憶。
（1）橫向擴展
（2）縱向擴展
8. 單選項返回規則
單選常用于setting中的選項，通常是選擇某項之后按【OK】鍵即可確定并返回到前一級。但是從前一級進入到下一級的頁面中則有兩種不同情況：
（1）不可在前一級直接切換選項的，只能跳轉到第二級才可進行選項更換。從第一級進入到第二級時，則默認焦點在列表的第一個選項上。
（2）可在前一級切換選項的，在第二級也可以切換選項的。從第一級進入到第二級頁面后，默認焦點在一級所選中的選項上。
四、總結
1. 關于運動原則
十字運動原則和焦點記憶不能同時在同一表現區域使用，這兩者是互斥的。
十字運動原則主要用于完整的行內運動，無屏外延伸時；焦點記憶主要用于在固定區域延伸和側邊欄。
這兩種原則經常會出現在同一套系統或同一個應用的不同區域，根據內容的排布規則來確定使用何種方式。
2. 關于使用場景
焦點在各種場景下的表現有所不同，需要根據不同場景各取所需。
由于電視尺寸比較大，觀看距離較遠，通常在放松的情況下觀看電視，容易被外界信息干擾。因此要對于屏外延伸的行的焦點固定位置，最常使用的是焦點固定在中部（視覺中心）；
對于翻頁場景，通常采用的是按行翻頁，因為按頁翻動視覺跳躍太大。
作者：一戈何處，微信公眾號：一戈何處
本文由 @一戈何處?原創發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自Unsplash，基于CC0協議
圖畫的挺好，代碼怎么實現的