談到電視端的設(shè)計(jì)，就不得不說(shuō)到「焦點(diǎn)」，焦點(diǎn)是電視端設(shè)計(jì)中必不可少的一個(gè)元素，無(wú)焦點(diǎn)，用戶將無(wú)法進(jìn)行操作。很多人都覺(jué)得電視端的設(shè)計(jì)比較有局限性，與PC端和移動(dòng)端不一樣，鼠標(biāo)和手機(jī)基本不用費(fèi)力就可以達(dá)到整個(gè)界面，那么究竟是什么限制了電視端的操作？

了解焦點(diǎn)的相關(guān)知識(shí)之前，先了解一下用戶是如何操作電視的。

電視的輸入方式

對(duì)于PC端來(lái)說(shuō)，我們是通過(guò)鼠標(biāo)和鍵盤進(jìn)行輸入，通過(guò)點(diǎn)擊和輸入文本在PC端的一些網(wǎng)站和工作軟件完成一些操作，這類操作適合復(fù)雜的工作。手機(jī)端則通過(guò)手勢(shì)，例如：點(diǎn)擊、長(zhǎng)按、雙擊、坐滑/右劃等手勢(shì)進(jìn)行主要操作。PC端和移動(dòng)端的操作相對(duì)比較簡(jiǎn)單，也比較容易進(jìn)行輸入操作。

但是對(duì)于電視來(lái)說(shuō)，主要是通過(guò)遙控器按鍵的操作來(lái)控制整個(gè)電視，并且使用者相對(duì)于電視的距離會(huì)較遠(yuǎn)，2～5米不等。

遙控器也經(jīng)過(guò)了好幾次的更新?lián)Q代，已經(jīng)由一開始復(fù)雜的遙控器進(jìn)化到現(xiàn)在的只?；A(chǔ)按鍵的簡(jiǎn)化版遙控器。

簡(jiǎn)化版遙控器的基本按鍵有上/下/左/右、ok、返回、主頁(yè)、菜單、電源、語(yǔ)音、音量+/-等12個(gè)按鍵，這些按鍵基本滿足了電視上的操作，有些品牌會(huì)在遙控器上增加「信源」鍵的快速切換。

遙控器基本認(rèn)識(shí)

接下來(lái)將會(huì)介紹一些主流電視遙控器，其中電視遙控器大概經(jīng)歷3次的改革，每次的改進(jìn)都和電視的功能的變化有關(guān)，以下文章將詳細(xì)介紹。

1. 第一代遙控器

也稱老式遙控器，主要是在智能電視面市之前生產(chǎn)的，因?yàn)楫?dāng)時(shí)電視界面中的可操作元素較少，基本操作都放在遙控器中，包含數(shù)字鍵，音量、頻道、首頁(yè)、返回、還有各種模式設(shè)置等操作。

所以那時(shí)的遙控器復(fù)雜并且較難使用，使用時(shí)總是需要先找一下按鍵位置，然后執(zhí)行操作，并且誤按幾率非常高。

2. 第二代遙控器

伴隨著智能電視的產(chǎn)生而改革的遙控器，多數(shù)遙控器去掉了數(shù)字按鍵，以及頻道切換的按鈕，保留了最基礎(chǔ)的按鈕如：電源、信源、方向鍵、OK、主頁(yè)、聲音+/-以及返回鍵，這時(shí)已經(jīng)植入了語(yǔ)音功能的電視在遙控器上可以看到語(yǔ)音按鈕，但是語(yǔ)音按鍵一般和其他按鍵放在一起。

3. 第三代遙控器

主要由于AI技術(shù)日益發(fā)展成熟，各大品牌紛紛加速開發(fā)電視的語(yǔ)音功能，企圖打造真正聽得懂人說(shuō)話的智能電視，并且將其語(yǔ)音作為核心技術(shù)突破，同時(shí)有一部分電視開始自己的主營(yíng)業(yè)務(wù)的推薦。

因此遙控器發(fā)生了兩個(gè)變化：

1. 將語(yǔ)音鍵突出，通常表現(xiàn)為獨(dú)立成行，用戶能很快找到，或者說(shuō)用了一段時(shí)間之后，不需要看遙控器也能操作。如下圖：康佳和小米遙控器（可以和上圖的做對(duì)比）。
2. 主推功能，，例如：「喜愛(ài)」、「影視」等模塊放在遙控器中，例如：下圖的海信遙控器中的「直播」、「影視」、「游戲」等按鍵；康佳遙控器中的「直播」、「影視」等按鍵。其實(shí)我個(gè)人不是很贊同這種做法，對(duì)于家用電視來(lái)說(shuō)，壽命較長(zhǎng)，并且隨著系統(tǒng)的不斷迭代以及市場(chǎng)的變化，主推功能也會(huì)一直變化，但是遙控器的主推按鍵卻是不變的，并且還可能會(huì)存在主推功能變化之后，這些按鍵被屏蔽，體驗(yàn)不好。

焦點(diǎn)

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

使用過(guò)智能電視的朋友們都知道，在電視中有一個(gè)很重要的概念，就是當(dāng)前焦點(diǎn)位置，每一個(gè)頁(yè)面都需要標(biāo)明焦點(diǎn)位置，這樣用戶才知道當(dāng)前的位置在哪里。要是還是不理解焦點(diǎn)是什么意思，可以這樣理解，當(dāng)前焦點(diǎn)位置就像PC端上的鼠標(biāo)懸停位置，也就是hover狀態(tài)。

下圖可以看到焦點(diǎn)是示例，圖中的紅框標(biāo)明處就是焦點(diǎn)所在位置：

在電視的操作中，用戶可以通過(guò)【上/下/左/右】鍵來(lái)移動(dòng)焦點(diǎn)達(dá)到在電視上選擇的目的，并且通過(guò)按【ok】鍵來(lái)確認(rèn)所選目標(biāo)，來(lái)完成一次操作。

2. 焦點(diǎn)狀態(tài)

在界面中找不到焦點(diǎn)，用戶就會(huì)在頁(yè)面中迷失方向，不知道自己所處的位置，以及不知道如何操作以及焦慮等。焦點(diǎn)不突出也會(huì)有同樣的問(wèn)題。

焦點(diǎn)狀態(tài)：主要有選中、半選中兩種狀態(tài)，也稱為焦點(diǎn)和半焦點(diǎn)狀態(tài)。

半焦點(diǎn)并不是一直存在的，只有當(dāng)焦點(diǎn)在某分類下的內(nèi)容時(shí)才會(huì)出現(xiàn)（如下圖）。對(duì)于按鈕類的焦點(diǎn)還有【按下】的變化狀態(tài)，但是對(duì)于一些展示海報(bào)類一般是沒(méi)有這種效果的。設(shè)計(jì)時(shí)可以根據(jù)實(shí)際情況決定是否需要這個(gè)狀態(tài)。

3. 默認(rèn)焦點(diǎn)位置

在設(shè)計(jì)時(shí)，必須標(biāo)明默認(rèn)焦點(diǎn)的位置，默認(rèn)焦點(diǎn)位置是用戶到達(dá)一個(gè)新頁(yè)面的時(shí)候的起點(diǎn)，是執(zhí)行下一步操作的基礎(chǔ)。

默認(rèn)焦點(diǎn)位置有以下幾種情況：

Tab：焦點(diǎn)在tab上時(shí)，默認(rèn)焦點(diǎn)可以是在第一個(gè)位置（前幾年很多這樣的設(shè)計(jì)），也可以特定的位置；一般默認(rèn)焦點(diǎn)都是在產(chǎn)品主推的tab上，例如：精選tab，而左邊放重要卻相對(duì)于主要tab沒(méi)有那么經(jīng)常用的tab，如用戶、搜索等，右邊則為其他推薦tab。

下圖是一些默認(rèn)焦點(diǎn)在Tab上的位置示例：

新頁(yè)面：當(dāng)用戶新來(lái)到一個(gè)頁(yè)面時(shí)，默認(rèn)焦點(diǎn)一般是第一個(gè)卡片上，這樣符合用戶的視覺(jué)觀看習(xí)慣，并且承接上一個(gè)頁(yè)面的位置也是第一個(gè)卡片。

如果有左側(cè)導(dǎo)航欄，并且跳轉(zhuǎn)之前沒(méi)有明確分類的，建議焦點(diǎn)在左側(cè)導(dǎo)航欄的第一個(gè)分類名稱上面，或者是推薦的分類上。

3種情況如下：

（1）默認(rèn)焦點(diǎn)在第一個(gè)卡片上

（2）默認(rèn)焦點(diǎn)在左側(cè)導(dǎo)航欄第一個(gè)位置

這里要說(shuō)明的是：當(dāng)用戶跳轉(zhuǎn)前沒(méi)有進(jìn)行分類的，到達(dá)新頁(yè)面之后，默認(rèn)焦點(diǎn)一般在第一個(gè)分類名稱上（并不是導(dǎo)航的第一個(gè)位置），如上左圖所示。

上右圖的這種做法是不推薦的，當(dāng)左邊導(dǎo)航中出現(xiàn)一些附加功能區(qū)如搜索、篩選等，默認(rèn)焦點(diǎn)還是應(yīng)該在第一個(gè)分類名稱上。

當(dāng)默認(rèn)焦點(diǎn)在篩選上，如果用戶覺(jué)得右邊內(nèi)容區(qū)域的推薦內(nèi)容已經(jīng)是自己想要看的，那么用戶至少移動(dòng)6次焦點(diǎn)才能到達(dá)內(nèi)容去的第一個(gè)卡片，移動(dòng)路徑為：篩選-》按評(píng)分-》全部-》全部-》全部-》全部-》到達(dá)第一張卡片，操作太多，太麻煩。

操作請(qǐng)看下方動(dòng)圖：

（3）跳轉(zhuǎn)前已經(jīng)分類

默認(rèn)焦點(diǎn)在內(nèi)容區(qū)域的第一個(gè)卡片處，如下圖（紅色塊為焦點(diǎn)位置，紅框?yàn)榘虢裹c(diǎn)位置）：

如果用戶在跳轉(zhuǎn)前已經(jīng)選擇了分類名，則跳轉(zhuǎn)到新頁(yè)面時(shí)，默認(rèn)焦點(diǎn)在該分類下的第一個(gè)卡片上。這個(gè)時(shí)候如果左側(cè)提供了快速切換分類的左邊導(dǎo)航，那么半焦點(diǎn)位置則在左邊已選中的分類上。

如上圖所示，根據(jù)用戶選擇的分類不同而跳轉(zhuǎn)到的內(nèi)容和選定的分類有所不同。

翻頁(yè)：翻頁(yè)焦點(diǎn)有4種情況

1. 按行移動(dòng)，移動(dòng)到頁(yè)面最下方一行時(shí)，按【下】焦點(diǎn)移動(dòng)到下一行，并且位置整體在頁(yè)面中上下居中，這種方式最常用（如下圖）；
2. 翻頁(yè)后，默認(rèn)焦點(diǎn)在頁(yè)面的第一個(gè)卡片；
3. 翻頁(yè)后，默認(rèn)焦點(diǎn)在頁(yè)面中間一行的第一個(gè)卡片；
4. 翻頁(yè)后，默認(rèn)焦點(diǎn)在指定位置，一般是完整露出第一行的一個(gè)卡片上。

所以在設(shè)計(jì)時(shí)，需要標(biāo)明焦點(diǎn)在翻頁(yè)是如何運(yùn)動(dòng)的，這樣程序員就會(huì)很明了，到后期也沒(méi)有什么需要扯皮的。

左邊菜單欄切換到內(nèi)容頁(yè)：很多程序員在實(shí)現(xiàn)焦點(diǎn)之間的跳轉(zhuǎn)時(shí)，通常設(shè)定的下一個(gè)焦點(diǎn)卡片為當(dāng)前卡片在該方向上最近的一張卡片。交互設(shè)計(jì)師這個(gè)時(shí)候就需要根據(jù)自己想要的效果，給出焦點(diǎn)跳轉(zhuǎn)規(guī)則，要不然程序員就會(huì)靠想象發(fā)揮，或者會(huì)選擇一種他實(shí)現(xiàn)最簡(jiǎn)單的方式去實(shí)現(xiàn)。

大卡片內(nèi)的焦點(diǎn)移動(dòng)：如果在一張大卡片上有很多個(gè)地方可以獲取焦點(diǎn)，那么也需要給出焦點(diǎn)移動(dòng)的規(guī)律，默認(rèn)焦點(diǎn)位置。

如下圖，可以看到到焦點(diǎn)移動(dòng)到大卡片上時(shí)，不是整個(gè)大卡片獲取焦點(diǎn)，而是大卡片中的小卡片獲取焦點(diǎn)，這一點(diǎn)特別需要注意。

有很多人剛開始設(shè)計(jì)電視端應(yīng)用時(shí)經(jīng)常出現(xiàn)把焦點(diǎn)放在大卡片，再按一次【OK】鍵才進(jìn)入到小卡片的做法，這樣是不合理的。

跨Tab移動(dòng)：有些電視應(yīng)用支持從左/右移動(dòng)焦點(diǎn)，在前一個(gè)tab的最后一列卡片移動(dòng)時(shí)，跳轉(zhuǎn)到下一個(gè)tab內(nèi)容上。這種方式常用于橫向延伸頁(yè)面排版的應(yīng)用中，在2017年之前，很多電視的launcher也經(jīng)常采用這種設(shè)計(jì)方式，現(xiàn)在大部分電視已經(jīng)轉(zhuǎn)戰(zhàn)瀑布流launcher。

下圖就是跨tab移動(dòng)的動(dòng)圖，大家可以看一下：

4. 焦點(diǎn)樣式設(shè)計(jì)

焦點(diǎn)樣式在設(shè)計(jì)時(shí)，一定要突出，并且與非焦點(diǎn)狀態(tài)的區(qū)別明顯，這樣用戶才不會(huì)在頁(yè)面中迷失。

現(xiàn)有的電視系統(tǒng)上的焦點(diǎn)樣式主要有以下6種：

1. 框選
2. 框選+變大
3. 實(shí)色填充+變大
4. 底部色塊
5. 食色填充
6. 主推特色

樣式如下圖所示，可以看到有一些樣式與品牌的結(jié)合，并且體現(xiàn)出品牌特色，如：「實(shí)色填充」示例的第右圖是b站和騰訊合作的一個(gè)電視應(yīng)用，下方用了B站特色的二次元人物與返回button結(jié)合，非常有品牌特色。

還有一些樣式屬于特殊處理，這種情況下一般是結(jié)合節(jié)日以及深度合作的一些宣傳，例如：電影宣傳或者節(jié)日宣傳等（如圖：特殊處理）。

5. 焦點(diǎn)在設(shè)計(jì)樣式時(shí)需要注意兩個(gè)問(wèn)題

1. 是焦點(diǎn)樣式要統(tǒng)一，同一種模塊下的焦點(diǎn)樣式統(tǒng)一；
2. ?焦點(diǎn)樣式要突出，并且用戶一掃界面就能找到焦點(diǎn)焦點(diǎn)樣式統(tǒng)一，焦點(diǎn)突出，用戶知道這個(gè)是焦點(diǎn)。

下面看一些例子，打鉤的為推薦樣式，打叉為不推薦樣式。

總結(jié)

其實(shí)焦點(diǎn)的設(shè)計(jì)并不難，只要認(rèn)真看了上面的文章就基本沒(méi)什么問(wèn)題啦。但是還是要啰嗦一句，在設(shè)計(jì)中，每個(gè)頁(yè)面都必須要記得標(biāo)好默認(rèn)焦點(diǎn)位置和樣式，以及描述焦點(diǎn)運(yùn)動(dòng)規(guī)則，不然免不了和程序員扯皮哦～

感謝觀看文章的人！

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

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

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