繼上文講到的電視焦點(diǎn)基礎(chǔ)知識(shí)后，筆者進(jìn)一步深化內(nèi)容，為我們介紹焦點(diǎn)的移動(dòng)原則以及使用場(chǎng)景。

之前寫(xiě)過(guò)一篇關(guān)于電視焦點(diǎn)的基礎(chǔ)文章，主要是適用于想入門(mén)的人看的，簡(jiǎn)單地介紹了電視操作、遙控器、焦點(diǎn)概念和常見(jiàn)的焦點(diǎn)知識(shí)點(diǎn)。

如果是TV端設(shè)計(jì)新手，建議先看《電視端設(shè)計(jì)入門(mén)，這些焦點(diǎn)知識(shí)你需要了解》，再看此篇文章可能會(huì)有助于理解。

文章結(jié)構(gòu)：

1. 焦點(diǎn)概況
2. 焦點(diǎn)移動(dòng)原則
3. 焦點(diǎn)使用場(chǎng)景及運(yùn)動(dòng)方式
4. 總結(jié)

一、焦點(diǎn)概況

1. 焦點(diǎn)是什么？

焦點(diǎn)就是在當(dāng)前界面上，你的遙控器操作的起點(diǎn)（但并不是頁(yè)面中的第一個(gè)卡片，因?yàn)橛行┠J(rèn)焦點(diǎn)不是在頁(yè)面中的第一個(gè)位置），當(dāng)前選中的位置，類(lèi)似PC端的hover狀態(tài)（鼠標(biāo)懸停）。

如果此時(shí)你按方向鍵（上/下/左/右），則焦點(diǎn)在當(dāng)前位置向其他位置移動(dòng)。

2. 焦點(diǎn)在界面上的狀態(tài)

焦點(diǎn)在界面上主要有六種狀態(tài)，分別是可用焦點(diǎn)、可用非焦點(diǎn)、禁用焦點(diǎn)、禁用非焦點(diǎn)、當(dāng)前已選狀態(tài)、按下態(tài)。如下圖所示：

其中“按下態(tài)”在TV中較少出現(xiàn)，常用的是一種表現(xiàn)方式就是按下【OK】鍵后，有圓點(diǎn)向周?chē)鷶U(kuò)散的波紋。

3. 焦點(diǎn)和遙控器的關(guān)系

焦點(diǎn)是遙控器在界面上操作行為的體現(xiàn)，也就是根據(jù)遙控器的操作，焦點(diǎn)和界面在電視上發(fā)生變化，達(dá)到用戶通過(guò)遙控器控制電視的目的。

二、焦點(diǎn)移動(dòng)原則

1. 十字運(yùn)動(dòng)原則

由于焦點(diǎn)的移動(dòng)依賴(lài)遙控器「方向鍵」的來(lái)操作，所以焦點(diǎn)移動(dòng)需遵循“十”字運(yùn)動(dòng)規(guī)則。且焦點(diǎn)的運(yùn)動(dòng)方向需和用戶預(yù)期方向一致，如按【左】則焦點(diǎn)向左移動(dòng)，按【右】則焦點(diǎn)向右移動(dòng)，按【上】則焦點(diǎn)向上移動(dòng)，按【下】則焦點(diǎn)向下移動(dòng)。

2. 就近原則

在焦點(diǎn)運(yùn)動(dòng)過(guò)程中需遵循就近移動(dòng)原則。當(dāng)用戶按方向鍵時(shí)，則焦點(diǎn)移動(dòng)默認(rèn)到距離當(dāng)前焦點(diǎn)位置最近的一個(gè)卡片上（適用當(dāng)前無(wú)焦點(diǎn)記憶情況下）。

3. 焦點(diǎn)記憶運(yùn)動(dòng)路徑

焦點(diǎn)路徑記憶指的是根據(jù)用戶的操作行為記錄焦點(diǎn)移動(dòng)軌跡。

無(wú)焦點(diǎn)移動(dòng)記錄時(shí)，按行移動(dòng)焦點(diǎn)，默認(rèn)獲取到此行的首位；有焦點(diǎn)移動(dòng)記錄時(shí)，焦點(diǎn)移動(dòng)到此路徑記錄內(nèi)容上。

適用于范圍：側(cè)邊多層結(jié)構(gòu)；固定區(qū)域拓展內(nèi)容（包括屏外拓展的行和屏內(nèi)豎向區(qū)域拓展）。

三、焦點(diǎn)使用場(chǎng)景及運(yùn)動(dòng)方式

1. 行與行之間的焦點(diǎn)移動(dòng)

行與行之間的焦點(diǎn)移動(dòng)規(guī)則主要有3種情況：

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

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

（3）不完整行之間的卡片運(yùn)動(dòng)，當(dāng)焦點(diǎn)在完整行按方向鍵移動(dòng)到非完整行時(shí)，需要遵循就近原則，焦點(diǎn)移動(dòng)到離當(dāng)前焦點(diǎn)最近的卡片上。

2.?多行屏外延伸焦點(diǎn)移動(dòng)

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

三種方式在各品牌電視中都有人用，但是根據(jù)人的視覺(jué)規(guī)則以及使用電視時(shí)是遠(yuǎn)距離的場(chǎng)景，個(gè)人比較建議采用焦點(diǎn)固定在屏幕的中部位置的方式。且在系統(tǒng)中建議只使用一種方式，不要三種方式并用，否則會(huì)造成用戶疑惑。

（1）焦點(diǎn)固定在第一個(gè)卡片

（2）焦點(diǎn)固定在中間

（3）焦點(diǎn)在右側(cè)最后一個(gè)完整卡片

3.?焦點(diǎn)翻頁(yè)

無(wú)論電視是采用橫向布局（向右翻頁(yè)）還是類(lèi)似瀑布流的方式（向下翻頁(yè)），超出首屏的需要通過(guò)移動(dòng)焦點(diǎn)翻頁(yè)來(lái)進(jìn)行查看。

（1）按行翻頁(yè)

按行翻頁(yè)并不是嚴(yán)格意義上的翻頁(yè)，是通過(guò)不斷滾動(dòng)行來(lái)達(dá)到翻頁(yè)的目的。此方式的好處是在翻頁(yè)的過(guò)程中不會(huì)出現(xiàn)焦點(diǎn)跳躍的情況。

此方式需要確定固定行的位置，建議固定行在視覺(jué)的中心，操作起來(lái)更加舒適?，F(xiàn)在的新系統(tǒng)比較多使用此方式，個(gè)人建議采用此方式。

（2）按頁(yè)翻

按頁(yè)翻則像我們看書(shū)一樣，在當(dāng)前頁(yè)的最后一個(gè)位置翻頁(yè)后看新頁(yè)面的第一個(gè)位置。采用這種方式會(huì)出現(xiàn)一個(gè)焦點(diǎn)跳躍的問(wèn)題，處理不好看著很難受。如下圖：

4.?回到頂部

這種情況在近兩年的瀑布流的電視系統(tǒng)中比較常見(jiàn)，通常有兩種方式：主要來(lái)源于早期的PC端網(wǎng)友的交互，點(diǎn)擊「回到頂部」則頁(yè)面回到頂部；和手機(jī)頁(yè)面中的點(diǎn)擊頂部狀態(tài)欄回到頂部的效果是一致的。

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

（2）在非首屏頁(yè)面按【返回】鍵則焦點(diǎn)回到首屏的默認(rèn)焦點(diǎn)處。

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

這兩種方式可根據(jù)實(shí)際情況選用或是兩種都用。在縱向/橫向頁(yè)面比較長(zhǎng)的情況下，用戶需要按方向鍵非常久的情況下才到達(dá)邊緣，建議兩種方式一起使用。

5. 焦點(diǎn)記憶運(yùn)動(dòng)路徑

路徑記憶指的是根據(jù)用戶操作行為記錄焦點(diǎn)的移動(dòng)軌跡。無(wú)焦點(diǎn)移動(dòng)記錄時(shí)，按行移動(dòng)焦點(diǎn)，默認(rèn)獲取到此行的首位；有焦點(diǎn)移動(dòng)記錄時(shí)，焦點(diǎn)移動(dòng)到此路徑記錄內(nèi)容。

適用于范圍：側(cè)邊多層結(jié)構(gòu)；固定區(qū)域拓展內(nèi)容（包括屏外拓展的行和屏內(nèi)豎向區(qū)域拓展）。

6. 側(cè)邊多層結(jié)構(gòu)

側(cè)邊多層結(jié)構(gòu)常見(jiàn)于分類(lèi)結(jié)構(gòu)，例如：影片分類(lèi)，新聞分類(lèi)等，并且大類(lèi)下很多小類(lèi)；頭條分類(lèi)下包含熱點(diǎn)、社會(huì)、娛樂(lè)、趣聞等分類(lèi)，分類(lèi)下包含內(nèi)容。

7. 固定區(qū)域拓展內(nèi)容

拓展內(nèi)容指的是顯示內(nèi)容區(qū)域超過(guò)屏幕固定區(qū)域，通過(guò)移動(dòng)焦點(diǎn)可以看到超出固定區(qū)域位置的內(nèi)容，有橫向擴(kuò)展和縱向擴(kuò)展兩種情況。

需要注意的是：如果是正常屏內(nèi)展示時(shí)，則遵循十字運(yùn)動(dòng)原則，超出則需要焦點(diǎn)記憶。

（1）橫向擴(kuò)展

（2）縱向擴(kuò)展

8. 單選項(xiàng)返回規(guī)則

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

（1）不可在前一級(jí)直接切換選項(xiàng)的，只能跳轉(zhuǎn)到第二級(jí)才可進(jìn)行選項(xiàng)更換。從第一級(jí)進(jìn)入到第二級(jí)時(shí)，則默認(rèn)焦點(diǎn)在列表的第一個(gè)選項(xiàng)上。

（2）可在前一級(jí)切換選項(xiàng)的，在第二級(jí)也可以切換選項(xiàng)的。從第一級(jí)進(jìn)入到第二級(jí)頁(yè)面后，默認(rèn)焦點(diǎn)在一級(jí)所選中的選項(xiàng)上。

四、總結(jié)

1. 關(guān)于運(yùn)動(dòng)原則

十字運(yùn)動(dòng)原則和焦點(diǎn)記憶不能同時(shí)在同一表現(xiàn)區(qū)域使用，這兩者是互斥的。

十字運(yùn)動(dòng)原則主要用于完整的行內(nèi)運(yùn)動(dòng)，無(wú)屏外延伸時(shí)；焦點(diǎn)記憶主要用于在固定區(qū)域延伸和側(cè)邊欄。

這兩種原則經(jīng)常會(huì)出現(xiàn)在同一套系統(tǒng)或同一個(gè)應(yīng)用的不同區(qū)域，根據(jù)內(nèi)容的排布規(guī)則來(lái)確定使用何種方式。

2. 關(guān)于使用場(chǎng)景

焦點(diǎn)在各種場(chǎng)景下的表現(xiàn)有所不同，需要根據(jù)不同場(chǎng)景各取所需。

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

對(duì)于翻頁(yè)場(chǎng)景，通常采用的是按行翻頁(yè)，因?yàn)榘错?yè)翻動(dòng)視覺(jué)跳躍太大。

作者：一戈何處，微信公眾號(hào)：一戈何處

本文由 @一戈何處?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議