2個方面,帶你深入了解電視端焦點運動設計

PMBear

繼上文講到的電視焦點基礎知識后,筆者進一步深化內容,為我們介紹焦點的移動原則以及使用場景。

之前寫過一篇關於電視焦點的基礎文章,主要是適用於想入門的人看的,簡單地介紹了電視操作、遙控器、焦點概念和常見的焦點知識點。

如果是TV端設計新手,建議先看《電視端設計入門,這些焦點知識你需要了解》,再看此篇文章可能會有助於理解。

文章結構:

  1. 焦點概況
  2. 焦點移動原則
  3. 焦點使用場景及運動方式
  4. 總結

一、焦點概況

1. 焦點是什麼?

焦點就是在當前界面上,你的遙控器操作的起點(但並不是頁面中的第一個卡片,因為有些默認焦點不是在頁面中的第一個位置),當前選中的位置,類似PC端的hover狀態(鼠標懸停)。

如果此時你按方向鍵(上/下/左/右),則焦點在當前位置向其他位置移動。

2. 焦點在界面上的狀態

焦點在界面上主要有六種狀態,分別是可用焦點、可用非焦點、禁用焦點、禁用非焦點、當前已選狀態、按下態。如下圖所示:

其中“按下態”在TV中較少出現,常用的是一種表現方式就是按下【OK】鍵后,有圓點向周圍擴散的波紋。

3. 焦點和遙控器的關係

焦點是遙控器在界面上操作行為的體現,也就是根據遙控器的操作,焦點和界面在電視上發生變化,達到用戶通過遙控器控制電視的目的。

二、焦點移動原則

1. 十字運動原則

由於焦點的移動依賴遙控器「方向鍵」的來操作,所以焦點移動需遵循“十”字運動規則。且焦點的運動方向需和用戶預期方向一致,如按【左】則焦點向左移動,按【右】則焦點向右移動,按【上】則焦點向上移動,按【下】則焦點向下移動。

2. 就近原則

在焦點運動過程中需遵循就近移動原則。當用戶按方向鍵時,則焦點移動默認到距離當前焦點位置最近的一個卡片上(適用當前無焦點記憶情況下)。

3. 焦點記憶運動路徑

焦點路徑記憶指的是根據用戶的操作行為記錄焦點移動軌跡。

無焦點移動記錄時,按行移動焦點,默認獲取到此行的首位;有焦點移動記錄時,焦點移動到此路徑記錄內容上。

適用於範圍:側邊多層結構;固定區域拓展內容(包括屏外拓展的行和屏內豎向區域拓展)。

三、焦點使用場景及運動方式

1. 行與行之間的焦點移動

行與行之間的焦點移動規則主要有3種情況:

(1)(多行完整卡片)非首尾卡片行與行之間焦點按移動,這時只需要根據方向鍵移動、判斷此方向上最近距離的卡片即可,如下圖所示:

(2)首尾卡片行之間的移動,當焦點在非末行最後一張卡片上時,按【右】則焦點移動到下一行的第一個卡片上(適用於不延伸到屏幕外的行);當焦點在非首行第一個卡片時,按【左】則焦點移動到上一行的的末尾的卡片上。此種焦點行為的定義有利於用戶連續換行操作。

(3)不完整行之間的卡片運動,當焦點在完整行按方向鍵移動到非完整行時,需要遵循就近原則,焦點移動到離當前焦點最近的卡片上。

2. 多行屏外延伸焦點移動

屏外延伸的行焦點需要固定要某一位置處,主要有三種方式:將焦點固定在第一個卡片(行左側);焦點固定在中間卡片(行中線);焦點固定在右側最後一個完整卡片(行右側)。

三種方式在各品牌電視中都有人用,但是根據人的視覺規則以及使用電視時是遠距離的場景,個人比較建議採用焦點固定在屏幕的中部位置的方式。且在系統中建議只使用一種方式,不要三種方式並用,否則會造成用戶疑惑。

(1)焦點固定在第一個卡片

(2)焦點固定在中間

(3)焦點在右側最後一個完整卡片

3. 焦點翻頁

無論電視是採用橫向布局(向右翻頁)還是類似瀑布流的方式(向下翻頁),超出首屏的需要通過移動焦點翻頁來進行查看。

(1)按行翻頁

按行翻頁並不是嚴格意義上的翻頁,是通過不斷滾動行來達到翻頁的目的。此方式的好處是在翻頁的過程中不會出現焦點跳躍的情況。

此方式需要確定固定行的位置,建議固定行在視覺的中心,操作起來更加舒適。現在的新系統比較多使用此方式,個人建議採用此方式。

(2)按頁翻

按頁翻則像我們看書一樣,在當前頁的最後一個位置翻頁后看新頁面的第一個位置。採用這種方式會出現一個焦點跳躍的問題,處理不好看着很難受。如下圖:

4. 回到頂部

這種情況在近兩年的瀑布流的電視系統中比較常見,通常有兩種方式:主要來源於早期的PC端網友的交互,點擊「回到頂部」則頁面回到頂部;和手機頁面中的點擊頂部狀態欄回到頂部的效果是一致的。

(1)第一種是在頁面底部有一個「返回頂部/TOP」等提示的按鈕,焦點選中后按【OK】鍵焦點回到首屏默認焦點。

(2)在非首屏頁面按【返回】鍵則焦點回到首屏的默認焦點處。

這種方式的好處就是:只要在非首屏頁面按【返回】鍵即可,而不是要到頁面底部才可返回。

這兩種方式可根據實際情況選用或是兩種都用。在縱向/橫向頁面比較長的情況下,用戶需要按方向鍵非常久的情況下才到達邊緣,建議兩種方式一起使用。

5. 焦點記憶運動路徑

路徑記憶指的是根據用戶操作行為記錄焦點的移動軌跡。無焦點移動記錄時,按行移動焦點,默認獲取到此行的首位;有焦點移動記錄時,焦點移動到此路徑記錄內容。

適用於範圍:側邊多層結構;固定區域拓展內容(包括屏外拓展的行和屏內豎向區域拓展)。

6. 側邊多層結構

側邊多層結構常見於分類結構,例如:影片分類,新聞分類等,並且大類下很多小類;頭條分類下包含熱點、社會、娛樂、趣聞等分類,分類下包含內容。

7. 固定區域拓展內容

拓展內容指的是顯示內容區域超過屏幕固定區域,通過移動焦點可以看到超出固定區域位置的內容,有橫向擴展和縱向擴展兩種情況。

需要注意的是:如果是正常屏內展示時,則遵循十字運動原則,超出則需要焦點記憶。

(1)橫向擴展

(2)縱向擴展

8. 單選項返回規則

單選常用於setting中的選項,通常是選擇某項之後按【OK】鍵即可確定並返回到前一級。但是從前一級進入到下一級的頁面中則有兩種不同情況:

(1)不可在前一級直接切換選項的,只能跳轉到第二級才可進行選項更換。從第一級進入到第二級時,則默認焦點在列表的第一個選項上。

(2)可在前一級切換選項的,在第二級也可以切換選項的。從第一級進入到第二級頁面后,默認焦點在一級所選中的選項上。

四、總結

1. 關於運動原則

十字運動原則和焦點記憶不能同時在同一表現區域使用,這兩者是互斥的。

十字運動原則主要用於完整的行內運動,無屏外延伸時;焦點記憶主要用於在固定區域延伸和側邊欄。

這兩種原則經常會出現在同一套系統或同一個應用的不同區域,根據內容的排布規則來確定使用何種方式。

2. 關於使用場景

焦點在各種場景下的表現有所不同,需要根據不同場景各取所需。

由於電視尺寸比較大,觀看距離較遠,通常在放鬆的情況下觀看電視,容易被外界信息干擾。因此要對於屏外延伸的行的焦點固定位置,最常使用的是焦點固定在中部(視覺中心);

對於翻頁場景,通常採用的是按行翻頁,因為按頁翻動視覺跳躍太大。

 

作者:一戈何處,微信公眾號:一戈何處

本文由 PMBear 作者:小熊爸爸 发表,其版权均为 PMBear 所有,文章内容系作者个人观点,不代表 PMBear 对观点赞同或支持。如需转载,请注明文章来源。
PMBear

发表评论