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

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

電視的輸入方式

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

但是對于電視來說，主要是通過遙控器按鍵的操作來控制整個電視，并且使用者相對于電視的距離會較遠(yuǎn)，2～5米不等。

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

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

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

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

1. 第一代遙控器

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

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

2. 第二代遙控器

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

3. 第三代遙控器

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

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

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

焦點

1. 焦點是什么？

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

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

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

2. 焦點狀態(tài)

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

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

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

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

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

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

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

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

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

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

3種情況如下：

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

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

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

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

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

操作請看下方動圖：

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

默認(rèn)焦點在內(nèi)容區(qū)域的第一個卡片處，如下圖（紅色塊為焦點位置，紅框為半焦點位置）：

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

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

翻頁：翻頁焦點有4種情況

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

所以在設(shè)計時，需要標(biāo)明焦點在翻頁是如何運動的，這樣程序員就會很明了，到后期也沒有什么需要扯皮的。

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

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

如下圖，可以看到到焦點移動到大卡片上時，不是整個大卡片獲取焦點，而是大卡片中的小卡片獲取焦點，這一點特別需要注意。

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

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

下圖就是跨tab移動的動圖，大家可以看一下：

4. 焦點樣式設(shè)計

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

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

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

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

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

5. 焦點在設(shè)計樣式時需要注意兩個問題

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

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

總結(jié)

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

感謝觀看文章的人！

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

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

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