針對手機端和PC端的設計大家已經非常熟悉了，那電視上的遙控器操作設計又有哪些不同呢？目前大多數的電視端，依然還是以遙控器操作為主。用戶不能直接觸摸或用鼠標點擊屏幕，而是靠遙控器控制焦點，來選中和點擊目標，因此對「聚焦狀態」的分析很有必要。
焦點與失焦概覽
電視端的焦點，就是當前唯一能用遙控器的「OK」鍵點擊的部位。
它的特點是，同一時間界面中只能有一處聚焦，并需要足夠明顯，以告知用戶當前哪個元素處于上焦狀態，所以它的設計原則就是：唯一且醒目。
圖源：New TV極光（電視端的騰訊視頻）
什么是「失焦」？
定義：這里指一種已經被選中，但焦點暫未落在其上的狀態。失焦往往出現在有多個導航項的部位，當焦點從導航項移動到內容區時，為了體現當前的內容是屬于哪個導航項，就用「失焦」狀態來表示該導航項。如上圖中的「少兒天地」。
能體現上焦、失焦的UI表現方法有很多，先簡單介紹下上焦狀態。
上焦的方法一共有六種：加框、放大、填充背景、投影、新增元素、動效：
上右圖中的海報上焦點時有個彈一彈的動效。
圖源：銀河奇異果（電視端的愛奇藝）
在分析上焦和失焦方法之前，有必要先了解一下被上焦元素的類別和特征，就像在買衣服前，有必要先了解自己的身材，才好選擇最合適的衣服。
我將被上焦的元素按三個維度來分析：尺寸、形狀和合離關系。
被上焦元素剖析
元素維度1 尺寸
在實際電視中可看到，元素所需要的上焦方式跟其自身大小有關，小元素如文本和小圖標，由于本身不明顯，它們需要較大強度的焦點形式，單一的上焦形式不足夠引起注意，常用做法是放大+背景填色：
左：芒果TV，右：銀河奇異果
中等元素如普通卡片、圖片等，它們的上焦方式多種多樣，加框、投影、放大、填充背景色、改變元素等都有。但只加框是不夠的，常常會因為卡片本身色彩豐富而焦點框不夠明顯，如下左圖，除了加框外還有放大和投影：
芒果TV
大型元素占屏幕寬度1/2以上，都是帶有容器的大卡片或大圖、大列表項，它們的焦點樣式也很多，但要注意的是由于本身塊頭夠大夠醒目，焦點樣式不能太夸張，應避免大面積填充亮色帶來的刺眼，和放大倍數過大造成的遮擋和超出屏幕。
尺寸小結：小元素可盡量運用放大、填充背景色等較強的方式，而避免加框或描邊等較弱的方式；中等元素需要重點考慮元素內容和框的強弱關系；大元素和小元素相反，應避免過于夸張的放大和填充，因此放大倍數有必要根據元素大小分別定義。
正圓：主要用于頭像，和獨立的圖標、數字。圓不會很大，都是小到中的尺寸。上焦方式為：圖標數字類都會填充背景色，頭像則描邊、投影，通常都會放大：
‘異形：指容器形狀不規則，或沒有容器，如文字。上焦的幾種方式：1 放大，2 圍繞元素生成一個矩形容器再按矩形處理，3 如果本身有一個規則容器，只是少部分突出，則按規則容器處理，突出部分保留原樣：
形狀小結：規則的形狀如矩形、正圓，會很好處理，常用的方法為放大、加框、填充背景。不規則的異形有兩種方法：1 整個放大，2 轉化為規則或只將其中的規則部分上焦點。
「整體」類：是多數情況，形狀可能規則或不規則，它的焦點方式比較常規：放大/填充/描邊。上面的文中可以找到很多示例圖。「分離」類：主要存在于圖像和文本分開的情況，另外不帶容器的純文本也算此類，上焦時輪廓的銜接是設計焦點時最復雜的一個問題。在收集了幾家大廠的做法后，我將分離類的焦點處理分為三種：1 用一個容器把其全部框住，2 分別處理，比如圖像部分加框放大、文本部分變色， 3 搭個橋讓兩部分相連從而變成「整體」類：
所以分離情況的小結是：元素要么看作兩個「整體」分別處理，要么合二為一再做處理。
了解完元素特征，下面是焦點形式的分類，現實中所有的焦點往往是至少兩種方式的結合。
焦點的方式分類
1 加框（或描邊）
適合：中、大尺寸，矩形、正圓、不太過古怪的異形（文本不適合），整體元素。
優點：不用改動元素內部。
缺點：不適合小尺寸元素，形狀不規則的元素需先生成規則容器-但這樣做容易失去原有的精致，如果卡片本身顏色豐富，框會顯得不起眼。
優化方法：給框的內部留個深色縫隙，會更漂亮精致，且提高對比度，兩個不同色的框能適應所有的環境色，如下右圖：
‘
3 填充背景
適合：規則形狀，小文本最常用，不適合大面積填充，分離的元素需要考慮銜接。
優點：塊狀往往比框和投影都更醒目（界面彩色色塊多的時候除外）。
缺點：相對復雜，有時文字需要同步變色，以滿足和填充色的對比度；如果是花哨的界面，也難以脫穎而出；對分離元素處理較復雜-需要先用一個容器概括進離散的元素然后再做填充。
高亮的焦點色慎用于過大面積，下面這些容器占比大的卡片/區域都沒有用背景填充：
文本和圖標變色：往往是為響應背景填充而同時出現的，目的是保證可讀性，在設計中需要注意：
左圖：CIBN酷喵影視
6 動效
動效分兩種時機，一是在上焦時一次性出現，二是在整個上焦狀態下持續出現。
NewTV極光在上焦瞬間有彈一彈和高光劃過效果：
銀河奇異果在整個上焦狀態都有水波擴散動效：
適合：各種尺寸，各種形狀、合離狀態。
優點：會很明顯，活潑，能彌補焦點不明顯的缺陷，但不能設計的過于復雜以免視覺疲勞。
焦點形式小結
電視上無論什么樣的元素，其上焦方式并不是單一的形式，而是至少兩種的組合。下面是我截取了五家電視應用的近300張界面總結出的規則，供參考。在設計TV視覺規范時，可以根據組件元素的屬性，在表格中選取相應的焦點形式。圖中藍色勾勾表示最重要，黑色勾勾次之：
但這張總結不能完全保證100%適用于任何場景，因為影響聚焦效果的因素還有色彩對比度、畫面擁擠度、排版、元素的重復程度等等，我認為可以允許一定范圍內（小于5%）的焦點不明顯，因為畢竟難以概括所有極端情況。
這四張圖中的焦點，你可以很快找到嗎？如果不好找，相信你也知道背后的原因。
失焦的方式
設計原則：失焦的存在感介于上焦和默認狀態之間，它的形式和焦點形式一脈相承（有相同的DNA） 。
表現方式主要有5類：變色、背景填充、加框、新增元素、動效。比起上焦，它多了個變色，少了放大和投影。和上焦不同，失焦得形式都較為低調保守，就比如背景填充，不會填一個很艷麗的色彩，而往往是簡單的明度調整。此外，失焦狀態很多時候可以只用一個方式 （最常用的是文字變色），不需要兩個以上組合。
一些大廠的做法：
上左圖中一個界面能看到三個失焦點，「隨心看」和「會員專享」都是當前焦點的上級路徑，它們統一做了文字變色處理，并且把二級的「會員專享」加了一個較弱的背景填充。而「每周精選」是當前正在播放視頻的所屬路徑，這里給加了個表示正在播放的動畫圖標。雖然看似運用了多種方法組合，但它們三個在視覺上都沒有焦點明顯。
簡單又得體的失焦：
失焦形式小結
小文本：1背景填充（低調的顏色），2文本變色，3新增元素（短線or打勾圖標）。
中等卡片：1文字變色，2新增元素（播放圖標、動畫），3背景填充（低調的顏色），4加框。
大卡片：新增元素（打勾圖標、箭頭）。
總之在設計失焦時，考慮到其介于默認和上焦狀態之間，從上面選擇即可。
焦點色與失焦色
前面總結了焦點和失焦的形式，但還沒有說加框、填充、變色時，到底該用什么顏色，這也是個值得探索的問題。我們可能第一時間想到的是：當然用主色咯。
沒錯，既能脫引而出又體現品牌基調，主色是首選。先來看看愛優騰芒四家的做法：
其實這幾家的做法還有更多的講究，比如VIP界面都會用黃色作為焦點和失焦色，芒果的焦點色更是由被上焦元素本身是否花哨來決定使用橙色還是白色，等等。限于篇幅，不展開討論了，總結如下：
焦點色和失焦色的幾個注意點：
-
焦點色往往選取產品主色，并可以適當用白色作為輔助。 -
電視端界面中除了焦點，應盡量避免用焦點色。這一點和移動端、PC端有些不同，在后面這兩個終端，用戶可以用手指、鼠標指針及時掌控可操作區域，但電視端這一步要相對遲緩一些，所以盡量避免讓其他元素搶了焦點的存在感。 -
失焦色可以和焦點色一致，但形式上焦點需要強于失焦。 -
失焦色也可以和焦點色不一致，甚至可以用互補色，以拉開層次。
總結
本文先是按照3個維度分析了UI元素的特征-從尺寸、形狀和合離關系分析了它們分別適合的焦點形式，然后窮舉并解析了6種上焦方式-放大、加框、投影、填充背景、新增元素、動效，并整理出元素和上焦方式之間的關系表。然后列舉了5種失焦方式，最后分析了上焦和失焦顏色的關系。
原文地址：UI設計語言（公眾號）
作者：a珠珠
