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

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

電視的輸入方式

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

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

遙控器也經過了好幾次的更新換代，已經由一開始復雜的遙控器進化到現在的只?；A按鍵的簡化版遙控器。

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

遙控器基本認識

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

1. 第一代遙控器

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

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

2. 第二代遙控器

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

3. 第三代遙控器

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

因此遙控器發生了兩個變化：

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

焦點

1. 焦點是什么？

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

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

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

2. 焦點狀態

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

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

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

3. 默認焦點位置

在設計時，必須標明默認焦點的位置，默認焦點位置是用戶到達一個新頁面的時候的起點，是執行下一步操作的基礎。

默認焦點位置有以下幾種情況：

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

下圖是一些默認焦點在Tab上的位置示例：

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

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

3種情況如下：

（1）默認焦點在第一個卡片上

（2）默認焦點在左側導航欄第一個位置

這里要說明的是：當用戶跳轉前沒有進行分類的，到達新頁面之后，默認焦點一般在第一個分類名稱上（并不是導航的第一個位置），如上左圖所示。

上右圖的這種做法是不推薦的，當左邊導航中出現一些附加功能區如搜索、篩選等，默認焦點還是應該在第一個分類名稱上。

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

操作請看下方動圖：

（3）跳轉前已經分類

默認焦點在內容區域的第一個卡片處，如下圖（紅色塊為焦點位置，紅框為半焦點位置）：

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

如上圖所示，根據用戶選擇的分類不同而跳轉到的內容和選定的分類有所不同。

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

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

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

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

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

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

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

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

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

4. 焦點樣式設計

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

現有的電視系統上的焦點樣式主要有以下6種：

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

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

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

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

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

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

總結

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

感謝觀看文章的人！

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

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

題圖來自Unsplash，基于CC0協議