電視端設計入門,這些焦點知識你需要了解
談到電視端的設計,就不得不說到「焦點」,焦點是電視端設計中必不可少的一個元素,無焦點,用戶將無法進行操作。很多人都覺得電視端的設計比較有局限性,與PC端和移動端不一樣,鼠標和手機基本不用費力就可以達到整個界面,那么究竟是什么限制了電視端的操作?
了解焦點的相關知識之前,先了解一下用戶是如何操作電視的。
電視的輸入方式
對于PC端來說,我們是通過鼠標和鍵盤進行輸入,通過點擊和輸入文本在PC端的一些網站和工作軟件完成一些操作,這類操作適合復雜的工作。手機端則通過手勢,例如:點擊、長按、雙擊、坐滑/右劃等手勢進行主要操作。PC端和移動端的操作相對比較簡單,也比較容易進行輸入操作。
但是對于電視來說,主要是通過遙控器按鍵的操作來控制整個電視,并且使用者相對于電視的距離會較遠,2~5米不等。
遙控器也經過了好幾次的更新換代,已經由一開始復雜的遙控器進化到現在的只?;A按鍵的簡化版遙控器。
簡化版遙控器的基本按鍵有上/下/左/右、ok、返回、主頁、菜單、電源、語音、音量+/-等12個按鍵,這些按鍵基本滿足了電視上的操作,有些品牌會在遙控器上增加「信源」鍵的快速切換。
遙控器基本認識
接下來將會介紹一些主流電視遙控器,其中電視遙控器大概經歷3次的改革,每次的改進都和電視的功能的變化有關,以下文章將詳細介紹。
1. 第一代遙控器
也稱老式遙控器,主要是在智能電視面市之前生產的,因為當時電視界面中的可操作元素較少,基本操作都放在遙控器中,包含數字鍵,音量、頻道、首頁、返回、還有各種模式設置等操作。
所以那時的遙控器復雜并且較難使用,使用時總是需要先找一下按鍵位置,然后執行操作,并且誤按幾率非常高。
2. 第二代遙控器
伴隨著智能電視的產生而改革的遙控器,多數遙控器去掉了數字按鍵,以及頻道切換的按鈕,保留了最基礎的按鈕如:電源、信源、方向鍵、OK、主頁、聲音+/-以及返回鍵,這時已經植入了語音功能的電視在遙控器上可以看到語音按鈕,但是語音按鍵一般和其他按鍵放在一起。
3. 第三代遙控器
主要由于AI技術日益發展成熟,各大品牌紛紛加速開發電視的語音功能,企圖打造真正聽得懂人說話的智能電視,并且將其語音作為核心技術突破,同時有一部分電視開始自己的主營業務的推薦。
因此遙控器發生了兩個變化:
- 將語音鍵突出,通常表現為獨立成行,用戶能很快找到,或者說用了一段時間之后,不需要看遙控器也能操作。如下圖:康佳和小米遙控器(可以和上圖的做對比)。
- 主推功能,,例如:「喜愛」、「影視」等模塊放在遙控器中,例如:下圖的海信遙控器中的「直播」、「影視」、「游戲」等按鍵;康佳遙控器中的「直播」、「影視」等按鍵。其實我個人不是很贊同這種做法,對于家用電視來說,壽命較長,并且隨著系統的不斷迭代以及市場的變化,主推功能也會一直變化,但是遙控器的主推按鍵卻是不變的,并且還可能會存在主推功能變化之后,這些按鍵被屏蔽,體驗不好。
焦點
1. 焦點是什么?
使用過智能電視的朋友們都知道,在電視中有一個很重要的概念,就是當前焦點位置,每一個頁面都需要標明焦點位置,這樣用戶才知道當前的位置在哪里。要是還是不理解焦點是什么意思,可以這樣理解,當前焦點位置就像PC端上的鼠標懸停位置,也就是hover狀態。
下圖可以看到焦點是示例,圖中的紅框標明處就是焦點所在位置:
在電視的操作中,用戶可以通過【上/下/左/右】鍵來移動焦點達到在電視上選擇的目的,并且通過按【ok】鍵來確認所選目標,來完成一次操作。
2. 焦點狀態
在界面中找不到焦點,用戶就會在頁面中迷失方向,不知道自己所處的位置,以及不知道如何操作以及焦慮等。焦點不突出也會有同樣的問題。
焦點狀態:主要有選中、半選中兩種狀態,也稱為焦點和半焦點狀態。
半焦點并不是一直存在的,只有當焦點在某分類下的內容時才會出現(如下圖)。對于按鈕類的焦點還有【按下】的變化狀態,但是對于一些展示海報類一般是沒有這種效果的。設計時可以根據實際情況決定是否需要這個狀態。
3. 默認焦點位置
在設計時,必須標明默認焦點的位置,默認焦點位置是用戶到達一個新頁面的時候的起點,是執行下一步操作的基礎。
默認焦點位置有以下幾種情況:
Tab:焦點在tab上時,默認焦點可以是在第一個位置(前幾年很多這樣的設計),也可以特定的位置;一般默認焦點都是在產品主推的tab上,例如:精選tab,而左邊放重要卻相對于主要tab沒有那么經常用的tab,如用戶、搜索等,右邊則為其他推薦tab。
下圖是一些默認焦點在Tab上的位置示例:
新頁面:當用戶新來到一個頁面時,默認焦點一般是第一個卡片上,這樣符合用戶的視覺觀看習慣,并且承接上一個頁面的位置也是第一個卡片。
如果有左側導航欄,并且跳轉之前沒有明確分類的,建議焦點在左側導航欄的第一個分類名稱上面,或者是推薦的分類上。
3種情況如下:
(1)默認焦點在第一個卡片上
(2)默認焦點在左側導航欄第一個位置
這里要說明的是:當用戶跳轉前沒有進行分類的,到達新頁面之后,默認焦點一般在第一個分類名稱上(并不是導航的第一個位置),如上左圖所示。
上右圖的這種做法是不推薦的,當左邊導航中出現一些附加功能區如搜索、篩選等,默認焦點還是應該在第一個分類名稱上。
當默認焦點在篩選上,如果用戶覺得右邊內容區域的推薦內容已經是自己想要看的,那么用戶至少移動6次焦點才能到達內容去的第一個卡片,移動路徑為:篩選-》按評分-》全部-》全部-》全部-》全部-》到達第一張卡片,操作太多,太麻煩。
操作請看下方動圖:
(3)跳轉前已經分類
默認焦點在內容區域的第一個卡片處,如下圖(紅色塊為焦點位置,紅框為半焦點位置):
如果用戶在跳轉前已經選擇了分類名,則跳轉到新頁面時,默認焦點在該分類下的第一個卡片上。這個時候如果左側提供了快速切換分類的左邊導航,那么半焦點位置則在左邊已選中的分類上。
如上圖所示,根據用戶選擇的分類不同而跳轉到的內容和選定的分類有所不同。
翻頁:翻頁焦點有4種情況
- 按行移動,移動到頁面最下方一行時,按【下】焦點移動到下一行,并且位置整體在頁面中上下居中,這種方式最常用(如下圖);
- 翻頁后,默認焦點在頁面的第一個卡片;
- 翻頁后,默認焦點在頁面中間一行的第一個卡片;
- 翻頁后,默認焦點在指定位置,一般是完整露出第一行的一個卡片上。
所以在設計時,需要標明焦點在翻頁是如何運動的,這樣程序員就會很明了,到后期也沒有什么需要扯皮的。
左邊菜單欄切換到內容頁:很多程序員在實現焦點之間的跳轉時,通常設定的下一個焦點卡片為當前卡片在該方向上最近的一張卡片。交互設計師這個時候就需要根據自己想要的效果,給出焦點跳轉規則,要不然程序員就會靠想象發揮,或者會選擇一種他實現最簡單的方式去實現。
大卡片內的焦點移動:如果在一張大卡片上有很多個地方可以獲取焦點,那么也需要給出焦點移動的規律,默認焦點位置。
如下圖,可以看到到焦點移動到大卡片上時,不是整個大卡片獲取焦點,而是大卡片中的小卡片獲取焦點,這一點特別需要注意。
有很多人剛開始設計電視端應用時經常出現把焦點放在大卡片,再按一次【OK】鍵才進入到小卡片的做法,這樣是不合理的。
跨Tab移動:有些電視應用支持從左/右移動焦點,在前一個tab的最后一列卡片移動時,跳轉到下一個tab內容上。這種方式常用于橫向延伸頁面排版的應用中,在2017年之前,很多電視的launcher也經常采用這種設計方式,現在大部分電視已經轉戰瀑布流launcher。
下圖就是跨tab移動的動圖,大家可以看一下:
4. 焦點樣式設計
焦點樣式在設計時,一定要突出,并且與非焦點狀態的區別明顯,這樣用戶才不會在頁面中迷失。
現有的電視系統上的焦點樣式主要有以下6種:
- 框選
- 框選+變大
- 實色填充+變大
- 底部色塊
- 食色填充
- 主推特色
樣式如下圖所示,可以看到有一些樣式與品牌的結合,并且體現出品牌特色,如:「實色填充」示例的第右圖是b站和騰訊合作的一個電視應用,下方用了B站特色的二次元人物與返回button結合,非常有品牌特色。
還有一些樣式屬于特殊處理,這種情況下一般是結合節日以及深度合作的一些宣傳,例如:電影宣傳或者節日宣傳等(如圖:特殊處理)。
5. 焦點在設計樣式時需要注意兩個問題
- 是焦點樣式要統一,同一種模塊下的焦點樣式統一;
- ?焦點樣式要突出,并且用戶一掃界面就能找到焦點焦點樣式統一,焦點突出,用戶知道這個是焦點。
下面看一些例子,打鉤的為推薦樣式,打叉為不推薦樣式。
總結
其實焦點的設計并不難,只要認真看了上面的文章就基本沒什么問題啦。但是還是要啰嗦一句,在設計中,每個頁面都必須要記得標好默認焦點位置和樣式,以及描述焦點運動規則,不然免不了和程序員扯皮哦~
感謝觀看文章的人!
作者:一戈何處,公眾號:一戈何處
本文由 @一戈何處 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
天啊頭暈看的
好仔細~深入
電視的交互為什么一定要有焦點,個人覺得現在智能電視的交互實在是體驗太差,操作效率太低。我個人有一套覺得可行的電視交互方案,一直沒機會落地,想試試自己的電視交互方式是否可行。
可以加我QQ649349976,看看你的方案哦!
優秀~
多謝碼農兄的認可