繼上文講到的電視焦點基礎知識后，筆者進一步深化內容，為我們介紹焦點的移動原則以及使用場景。

之前寫過一篇關于電視焦點的基礎文章，主要是適用于想入門的人看的，簡單地介紹了電視操作、遙控器、焦點概念和常見的焦點知識點。

如果是TV端設計新手，建議先看《電視端設計入門，這些焦點知識你需要了解》，再看此篇文章可能會有助于理解。

文章結構：

1. 焦點概況
2. 焦點移動原則
3. 焦點使用場景及運動方式
4. 總結

一、焦點概況

1. 焦點是什么？

焦點就是在當前界面上，你的遙控器操作的起點（但并不是頁面中的第一個卡片，因為有些默認焦點不是在頁面中的第一個位置），當前選中的位置，類似PC端的hover狀態（鼠標懸停）。

如果此時你按方向鍵（上/下/左/右），則焦點在當前位置向其他位置移動。

2. 焦點在界面上的狀態

焦點在界面上主要有六種狀態，分別是可用焦點、可用非焦點、禁用焦點、禁用非焦點、當前已選狀態、按下態。如下圖所示：

其中“按下態”在TV中較少出現，常用的是一種表現方式就是按下【OK】鍵后，有圓點向周圍擴散的波紋。

3. 焦點和遙控器的關系

焦點是遙控器在界面上操作行為的體現，也就是根據遙控器的操作，焦點和界面在電視上發生變化，達到用戶通過遙控器控制電視的目的。

二、焦點移動原則

1. 十字運動原則

由于焦點的移動依賴遙控器「方向鍵」的來操作，所以焦點移動需遵循“十”字運動規則。且焦點的運動方向需和用戶預期方向一致，如按【左】則焦點向左移動，按【右】則焦點向右移動，按【上】則焦點向上移動，按【下】則焦點向下移動。

2. 就近原則

在焦點運動過程中需遵循就近移動原則。當用戶按方向鍵時，則焦點移動默認到距離當前焦點位置最近的一個卡片上（適用當前無焦點記憶情況下）。

3. 焦點記憶運動路徑

焦點路徑記憶指的是根據用戶的操作行為記錄焦點移動軌跡。

無焦點移動記錄時，按行移動焦點，默認獲取到此行的首位；有焦點移動記錄時，焦點移動到此路徑記錄內容上。

適用于范圍：側邊多層結構；固定區域拓展內容（包括屏外拓展的行和屏內豎向區域拓展）。

三、焦點使用場景及運動方式

1. 行與行之間的焦點移動

行與行之間的焦點移動規則主要有3種情況：

（1）（多行完整卡片）非首尾卡片行與行之間焦點按移動，這時只需要根據方向鍵移動、判斷此方向上最近距離的卡片即可，如下圖所示：

（2）首尾卡片行之間的移動，當焦點在非末行最后一張卡片上時，按【右】則焦點移動到下一行的第一個卡片上（適用于不延伸到屏幕外的行）；當焦點在非首行第一個卡片時，按【左】則焦點移動到上一行的的末尾的卡片上。此種焦點行為的定義有利于用戶連續換行操作。

（3）不完整行之間的卡片運動，當焦點在完整行按方向鍵移動到非完整行時，需要遵循就近原則，焦點移動到離當前焦點最近的卡片上。

2.?多行屏外延伸焦點移動

屏外延伸的行焦點需要固定要某一位置處，主要有三種方式：將焦點固定在第一個卡片（行左側）；焦點固定在中間卡片（行中線）；焦點固定在右側最后一個完整卡片（行右側）。

三種方式在各品牌電視中都有人用，但是根據人的視覺規則以及使用電視時是遠距離的場景，個人比較建議采用焦點固定在屏幕的中部位置的方式。且在系統中建議只使用一種方式，不要三種方式并用，否則會造成用戶疑惑。

（1）焦點固定在第一個卡片

（2）焦點固定在中間

（3）焦點在右側最后一個完整卡片

3.?焦點翻頁

無論電視是采用橫向布局（向右翻頁）還是類似瀑布流的方式（向下翻頁），超出首屏的需要通過移動焦點翻頁來進行查看。

（1）按行翻頁

按行翻頁并不是嚴格意義上的翻頁，是通過不斷滾動行來達到翻頁的目的。此方式的好處是在翻頁的過程中不會出現焦點跳躍的情況。

此方式需要確定固定行的位置，建議固定行在視覺的中心，操作起來更加舒適?，F在的新系統比較多使用此方式，個人建議采用此方式。

（2）按頁翻

按頁翻則像我們看書一樣，在當前頁的最后一個位置翻頁后看新頁面的第一個位置。采用這種方式會出現一個焦點跳躍的問題，處理不好看著很難受。如下圖：

4.?回到頂部

這種情況在近兩年的瀑布流的電視系統中比較常見，通常有兩種方式：主要來源于早期的PC端網友的交互，點擊「回到頂部」則頁面回到頂部；和手機頁面中的點擊頂部狀態欄回到頂部的效果是一致的。

（1）第一種是在頁面底部有一個「返回頂部/TOP」等提示的按鈕，焦點選中后按【OK】鍵焦點回到首屏默認焦點。

（2）在非首屏頁面按【返回】鍵則焦點回到首屏的默認焦點處。

這種方式的好處就是：只要在非首屏頁面按【返回】鍵即可，而不是要到頁面底部才可返回。

這兩種方式可根據實際情況選用或是兩種都用。在縱向/橫向頁面比較長的情況下，用戶需要按方向鍵非常久的情況下才到達邊緣，建議兩種方式一起使用。

5. 焦點記憶運動路徑

路徑記憶指的是根據用戶操作行為記錄焦點的移動軌跡。無焦點移動記錄時，按行移動焦點，默認獲取到此行的首位；有焦點移動記錄時，焦點移動到此路徑記錄內容。

適用于范圍：側邊多層結構；固定區域拓展內容（包括屏外拓展的行和屏內豎向區域拓展）。

6. 側邊多層結構

側邊多層結構常見于分類結構，例如：影片分類，新聞分類等，并且大類下很多小類；頭條分類下包含熱點、社會、娛樂、趣聞等分類，分類下包含內容。

7. 固定區域拓展內容

拓展內容指的是顯示內容區域超過屏幕固定區域，通過移動焦點可以看到超出固定區域位置的內容，有橫向擴展和縱向擴展兩種情況。

需要注意的是：如果是正常屏內展示時，則遵循十字運動原則，超出則需要焦點記憶。

（1）橫向擴展

（2）縱向擴展

8. 單選項返回規則

單選常用于setting中的選項，通常是選擇某項之后按【OK】鍵即可確定并返回到前一級。但是從前一級進入到下一級的頁面中則有兩種不同情況：

（1）不可在前一級直接切換選項的，只能跳轉到第二級才可進行選項更換。從第一級進入到第二級時，則默認焦點在列表的第一個選項上。

（2）可在前一級切換選項的，在第二級也可以切換選項的。從第一級進入到第二級頁面后，默認焦點在一級所選中的選項上。

四、總結

1. 關于運動原則

十字運動原則和焦點記憶不能同時在同一表現區域使用，這兩者是互斥的。

十字運動原則主要用于完整的行內運動，無屏外延伸時；焦點記憶主要用于在固定區域延伸和側邊欄。

這兩種原則經常會出現在同一套系統或同一個應用的不同區域，根據內容的排布規則來確定使用何種方式。

2. 關于使用場景

焦點在各種場景下的表現有所不同，需要根據不同場景各取所需。

由于電視尺寸比較大，觀看距離較遠，通常在放松的情況下觀看電視，容易被外界信息干擾。因此要對于屏外延伸的行的焦點固定位置，最常使用的是焦點固定在中部（視覺中心）；

對于翻頁場景，通常采用的是按行翻頁，因為按頁翻動視覺跳躍太大。

作者：一戈何處，微信公眾號：一戈何處

本文由 @一戈何處?原創發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議