頭條楓林網
文章摘要： 圖13 不統一的焦點樣式 電視端焦點也是有著各種不同的狀態的遙控器輸入、導航和選單、資訊展現、控制元件擺放和焦點狀態
在過去一年多的時間裏，筆者有幸參與了電視端大螢幕的專案，在不斷的嘗試、探索和設計中，也收穫了一些關於電視端的設計經驗，因此將這些「電視互動設計的一些事」分享出來，共同探討電視端的設計。
– 硬體+遠距離操控——基本互動 –
基於桌面資料研究以及設計經驗，總結了基本互動主要包含以下幾個關鍵內容：遙控器輸入、導航和選單、資訊展現、控制元件擺放和焦點狀態。
一 、遙控器輸入
當我們用手指快速便捷地在手機螢幕上點選或滑動時，主流電視大屏及應用的操作還是：使用遙控器進行操作。而市面上不同電視生產商生產的遙控器也有著不同的造型和按鍵數量，如圖1，分別展示了：蘋果、谷歌、小米、樂視和中興機頂盒的遙控器。
圖1 不同廠商的遙控器
儘管有著千奇百怪的造型和按鍵數量，但幾乎全部的遙控器都有幾個相同的按鍵：上、下、左、右、返回鍵和OK鍵，如圖2。它們也夠成了遙控器輸入的基本互動方式：通過「上下左右鍵」移動焦點位置，選中介面元素，按「OK鍵」進行相關操作，按「返回鍵」返回。
圖2 遙控器的基本按鍵
而上圖中還有一些按鍵，如數字鍵、選單鍵，有些遙控器是沒有它們的。這裏強調下「選單鍵」，比如之前的一個設計，將不常用的操作隱藏到選單鍵中，當用戶按選單鍵時再喚出操作（如安卓端的「長按」，iOS端的「左滑」等）。後來，才發現並不是所有遙控器都有該按鍵，只能在後續版本中迭代優化。因此，在設計之前，不妨研究一下你的輸入硬體裝置，避免因「刻板印象」造成不必要的坑。
遙控器輸入的特性決定了使用者在輸入時的效率和便捷程度都大打折扣，因此，在這樣的侷限下，設計師只能通過各種不同的方式來儘量減弱這種不便捷：
1. 減少使用者輸入
能不讓使用者輸入就不輸入，儘量只讓使用者去做「選擇型」輸入，避免大量「文字型」輸入，比如電視上的搜尋功能中，及時聯想、熱搜詞就變得極為重要，如圖3右圖所示。
圖3 鍵盤輸入的優化
2. 優化輸入模式
結合專案情況，去嘗試優化輸入模式，比如充分利用遙控器數字鍵輸入、重新設計鍵盤以減少使用者操作，如圖3所示。
3. 將輸入轉移
越來越多的產品開始將一些輸入轉移並引導到手機端進行操作，甚至將手機端直接做為遙控器，比如最常見的掃碼登入和TV助手類APP。輸入轉移能大大提升使用者操作效率，但設計時還是要結合具體場景，避免使用者過多地在手機和遙控器間切換。
4. 創新的輸入方式
隨著各種技術的發展，在未來，電視端也會有越來越多的輸入方式，而不僅限於遙控器輸入，如智慧語音輸入，而我們也需要了解這些新技術，才能幫助我們不斷的創新並給使用者帶來優秀的體驗。
二、導航和選單
電視端的導航和選單大多數和手機端、PC端是類似的，但因遙控器輸入的特性或多或少的有些差異，主要分為以下幾類：
1. 十字
十字導航在國內的產品中比較少見，但因它的主導航和二級導航同時展開，能與十字方向鍵完美契合，使用者可通過方向鍵在主導航和二級導航之間以最高效的方式切換，如圖4所示。但它最多展現2級選單，即縱向選單和橫向選單，又浪費了大量介面空白，因此針對國內大而全的產品而言，往往不是特別適用。
圖4 十字導航
2. 磁貼
磁貼廣泛應用於各種電視應用產品，一般包含主導航和二級磁貼，往往二級磁貼的展現能使資訊更加扁平、直觀及視覺化，且相比於十字導航，操作的方向不會受到限制；但往往焦點從磁貼移回到左側/上側導航需要更多的操作成本，如圖5所示。磁貼的資訊展現能夠充分利用介面空間，並把資訊前置，因此，對很多內容型產品而言，磁貼可以很好的適用內容露出，吸引使用者進入。
圖5 磁貼資訊展示
3. Tab
廣泛應用於手機端和PC端，當然在電視端中也經常使用，往往起到一級導航的作用，在告知使用者所處位置的同時，很好的引導使用者進行模組間的切換，如圖6所示。然而，Tab導航也有一些基本的設計要求，比如儘量不使用多層Tab套用，即使不得已套用也需儘量保證表現形式不同；另外，在「焦點」的章節，也還會提到Tab切換時的載入問題。
圖6 Tab導航
4. 列表
列表也是手機端最常用的選單展現形式，在電視端同樣適用，如電視直播類產品，主功能就利用了多層列表套用的展現形式，詳見圖7所示。而在電視端，列表的樣式也是多種多樣的：如純文字列表（可配按鈕）、圖文列表（可配按鈕）、展示型列表（不可操作）、橫向列表（選集列表）等。
圖7 圖文列表和展示型列表
5. 其他
電視產品上最常用的選單和導航模式一般都可以總結為以上4種，當然還有一些其他的方式。隨著使用者多裝置的使用，越來越多的手機端和PC端的設計模式開始在電視上出現；而更多的產品介面因其複雜的功能無法只使用1種菜單和導航模式，往往是混合型設計，如圖8所示。不過，無論使用何種導航和選單型別，電視大螢幕的選單和導航的設計目標終歸是：使用者可以快速定位，並且能夠預測出操作結果。因此，靈活使用導航和選單，使使用者不會迷失在功能繁多的介面資訊中就尤為重要。
圖8 其他型別的導航和選單
三、資訊展現
在前面的文字中，我在「電視」這個詞後面都緊跟了「大屏」這個詞，電視的螢幕是比PC還要大的螢幕；而使用者也因為如此大的螢幕，往往是坐在兩三米之外。因此，電視端的資訊設計有著兩個顯著的特質：為大螢幕而設計和為遠距離而設計，有著以下幾個注意事項：
1. 重視資訊的識別性和簡潔易懂
文字、圖示和按鈕，乃至toast提示，在電視端的識別性問題比手機和PC端更為凸顯。因為遠距離、大螢幕，加上電視本身的休閒屬性，使得使用者的注意力較為分散，因此，介面中的資訊和元素就需要適當放大，至少保證使用者能夠在兩三米之外能清晰看到，如圖9所示。
圖9 資訊識別案例
2. 提前露出資訊和多露出點資訊
在「遙控器輸入」章節中有提到，提前露出資訊能夠在一定程度上減少使用者輸入，並在產品層面吸引使用者進入。不過，和手機端設計類似，還是需要甄別哪些資訊需要提前露出、怎麼露出以及露出資訊後對產品穩定性和效能的影響；這些都需要基於產品特點，並與產品、視覺和開發共同協商確定。而「多露出點資訊」卻相對容易理解，主要是告知使用者右邊/下邊「還有一些內容，快去看看」，如圖10所示。
圖10 資訊露出案例
3. 避免過多無模組資訊的展示
相比於手機端，因螢幕較大，與PC端類似，往往需將螢幕劃分爲多個排列整齊的小螢幕來進行設計，即模組化、區域化的設計資訊展現。通過這種方式，可以使資訊佈局更為規整，使用者不容易迷失在繁雜的資訊中，如圖11所示。
圖11 資訊模組化案例
四、控制元件位置
控制元件的位置問題是初期開始電視產品設計時非常容易犯的錯誤，如圖12所示。左圖中的「新增股票」按鈕，當已新增的股票過多時，可能會看不到該按鈕，或需使用者按很多下才能使焦點移動到「新增股票」；右圖中的文字瀏覽，完全不知道如何瀏覽，也不知道如何將焦點從文字移動到「檢視票種」按鈕。這兩個案例闡述了：按鈕的位置導致按鈕丟失或操作效率較低；電視端文字閱讀也得遵守焦點瀏覽原則，如每行1個焦點或整篇1個焦點，若是後者，就得保證可見範圍內文字已展示全。因此，在電視大屏中放置互動控制元件，需充分考慮是否符合電視端的使用方式以及使用者的操作效率。
圖12 控制元件位置案例
五、焦點狀態
前文提到過很多次的「焦點」，它其實是電視大屏使用者體驗的第一要素，而在互動說明中最常出現的也是「焦點怎麼樣了」。無論是互動還是視覺，在初期接觸電視產品設計時，可能都會因為「焦點」的設計失誤引發使用者體驗問題，比如：焦點的移動順序不一致（從哪裏來未回到哪裏去，焦點在介面中亂跳）使使用者認知錯亂；焦點的不夠醒目或樣式不統一使使用者無法找到焦點等，如圖13所示。
圖13 不統一的焦點樣式
電視端焦點也是有著各種不同的狀態的，如圖14所示，「焦點狀態」一般採用「描邊、放大、高亮等」方式使其明顯，而「按下狀態」可能不一定有，或者是和其他幾個狀態相同。
圖14 焦點狀態種類
可能需要簡單講述一下「標記狀態」和「半選中狀態」：「標記狀態」在PC和手機端也非常常見，比如告知使用者所在位置在哪裏的Tab標記；而「半選中狀態」是「焦點狀態」的一種情況，即移動到某個焦點後，不進行載入或觸發操作，需按「OK鍵」才觸發，如圖15所示。這種狀態在早期電視盒子效能不足、在Tab切換時經常需要使用，因為如果直接切換焦點時就載入，可能會造成卡頓。
圖15 標記狀態和半選中狀態案例
六、結語
我總結和歸納的這些基本知識和注意事項，雖然它們能夠幫助我們快速瞭解電視大屏的基本互動知識，避免一些不必要的坑；但還遠遠不夠，更多的是需要在實際參與專案中快速學習、快速應用，因此，之後我將會基於我參與的專案再次進行電視大屏的實戰總結，歡迎下次再與大家一同交流和成長。
由前 MIT 媒體實驗室副主任、羅德島設計學院院長前田約翰（John Maeda）主持的年度重磅設計研究報告《2018 科技中的設計（Design in Tech 2018）》英文版日前正式釋出。這份來自硅谷的 90 頁報告資訊巨量，傳遞出對正在發生的設計變革趨勢的深度本質辨析。
4月15日，廣州美術學院工業設計學院前院長、國際體驗設計協會（IXDC）主任委員童慧明老師將舉辦一場《2018 科技中的設計》報告深度解讀分享會。 參與本次活動，請點選「 閱讀原文 」報名。
