分享些實用的設計經驗，科普電視使用者體驗的基礎知識
入智慧電視行業一年半，先後在傳統電視品牌，和網際網路電視新秀品牌的使用者體驗部門工作，具體工作是電視端app，launcher的互動和視覺設計，手機端電視相關app設計。兩年前作為電視UI的新人，開始入手學習時發現關於電視的互動和UI教程甚少，相關文章也是少之又少。兩年快過去啦，各大設計網站上搜一搜智慧電視UI，竟然還是少的可憐的那一點點東西。各大做電視端的師哥師姐們，你們咋那麼吝惜筆墨膩？能不能寫寫教程教教偶們新入行的小鮮肉？好啦，不廢話啦，如今我已然不再是什麼小鮮肉，只希望能把工作兩年來學到的東西都記錄下來，如果哪天被某個想入行電視UI的鮮肉看見了，希望能有所幫助。
這篇文章先講一下電視使用者體驗第一元素：焦點，程式裡面叫focus。
移動端頁面有可點選內容和不可點選內容，相應的，到電視上，我們有“可獲取焦點內容”和“不可獲取焦點內容”。（一般電視上的內容都是可以獲取焦點的，只有部分提示性文字沒有焦點屬性）先來看兩張圖
這是電視圈兒內大名鼎鼎的當貝市場的首頁，頂部標籤焦點和內容焦點的樣式，這也是當前大部分電視端app焦點的樣式。這種焦點簡單，美觀，醒目。
下面我們說一下電視焦點視覺設計第一個要注意的問題：焦點在哪兒？
設計原則：焦點要醒目
建議方法：使用描邊，外發光，放大，或其他動畫來加強焦點視覺效果。當然也不是越誇張越好，要拿捏得當，適合的才最好。
電視螢幕上的焦點也是使用者的視覺落點，使用者找了滿屏也不知道自己在哪兒的感覺是很崩潰的。不知道焦點在哪兒，就沒法預知自己按下遙控器後會怎樣。我們來看一張焦點很微弱的圖
自從小米首先在電視上使用時尚畫報做屏保後，一批批屏保圖片類電視app出現，上圖為一款叫風迷style的app首次使用設定介面。左圖，深色和淺色的按鈕，哪個是焦點？假設焦點在“跳過”上，而使用者卻以為焦點是全選，按下遙控器跳過了此介面，使用者肯定會很吃驚“誒，我按了什麼啊！？”如果下一頁不支援返回重新編輯，那使用者會是十分崩潰的。這個app的焦點都不太明顯，看右圖，沒有放大也沒有外發光也沒有動態輔助，不過還好，還是可以分辨的清的。
第二個要注意的問題：焦點的樣式要統一麼？
設計原則：樣式儘量統一，這樣才感覺都是一家人嘛～
建議方法：外發光選框焦點，替換顏色焦點儘量不要混著使用。動畫焦點也不要有很多動畫樣式，儘量統一。
看上上圖，色塊卡片是當前最流行的電視UI形式，如果焦點樣式也是色塊，難免會造成視覺混淆，下圖我再舉個例子。
蝦米音樂的搜尋按鈕焦點樣式，和QQ音樂的搜尋按鈕焦點樣式，哪個更直接明瞭一些？顯然是QQ音樂啦，看來鵝廠對電視app的焦點也是研究過的啊，哈哈。另外我要說一下網際網路電視新秀暴風TV裡面一個頁面的焦點
找到焦點了嘛？沒錯，焦點在左下角的“未登入”那裡，這是一個動畫效果，暴風TV的UI使用了很多柔和的微動畫，營造了不錯的氛圍感。小米電視UI上也有很多拿捏到位動畫，樂視就不要提了，樂視剛出來時候在那個年代真的挺好看的，可是這幾年怎麼就沒有設計創新呢，感覺它的UI都被時代拋棄了。
找到焦點了嘛？沒錯，焦點在左下角的“未登入”那裡，這是一個動畫效果，暴風TV的UI使用了很多柔和的微動畫，營造了不錯的氛圍感。小米電視UI上也有很多拿捏到位動畫，樂視就不要提了，樂視剛出來時候在那個年代真的挺好看的，可是這幾年怎麼就沒有設計創新呢，感覺它的UI都被時代拋棄了。
第三個要注意的問題：焦點路徑的記憶
這個問題用純文字比較難表達清楚，先看下圖
再拿多米音樂和QQ音樂舉個例子。多米音樂中，首次使用app時，焦點在位置1按遙控器右鍵，焦點會落到位置2，在位置2按下鍵，焦點落到位置3，在位置3按左鍵，焦點會回到位置1，此時再在位置一按右鍵，焦點會落在位置3，而不是首次使用時的位置2啦。
QQ音樂的方式則不同，不管是不是第一次使用，焦點在位置1時按下鍵，則焦點始終落在焦點2。QQ的方式是先上後下，先左後右的順序。而蝦米則會記住焦點上一步所在的位置，完全遵從著“從哪兒來，回哪兒去”的原則。蝦米音樂在這點做的要比QQ音樂好，因為記住使用者上一步的操作總是體貼的。
設計原則：從哪兒來，回哪兒去
建議方法：記住使用者上一步的操作（即上一步焦點所在位置），再次執行同一動作的時候使用上次記住的方式。
這個方法不僅僅適用於焦點移動，也適用於頁面切換。在A介面上的位置1進入到B介面，那從B介面回到A介面時，焦點還應該在位置1。可能你會覺得，一個小小焦點位置，有必要糾結那麼多嘛？對於電視互動，還真的需要考慮這麼多，你不寫清楚，程式設計師就不知道該怎麼做，有的會亂搞，或直接忽視這個問題，造成差的使用者體驗。當然有經驗的程式設計師哥哥是會自動完善你的互動稿的，這些程式設計師哥哥還經常提出互動中的不完善之處，簡直就是互動小幫手。當然作為互動設計師，我們不能指望程式設計師哥哥啊，萬一他也是個菜鳥級的鮮肉腫麼辦！
第四個要注意的問題：獲取焦點即執行VS獲取焦點後按確認鍵再執行
電視上的元素應該有五個狀態：1.正常狀態，2.焦點狀態，3.按下狀態，4.標記狀態，5.半選中狀態。其中“半選中狀態”是一個互動狀態，在視覺上與“焦點狀態”是相同的，半選中即焦點移動到相應內容但並不執行動作，需要再次按確認鍵才響應操作。這種狀態常見於視訊播放或音訊播放介面的設定選單裡，所選內容要對當前介面執行更改的情況。比如愛奇藝電視端視訊播放介面按“選單鍵”調出選集選單（下圖左），暴風TV影視庫裡面按“選單鍵”調出設定選單（下圖右）
圖左和圖右均有明顯標記狀態和半選中狀態，這兩個狀態從來都是成對出現。半選中狀態是使用者即將進行的更改按鈕，而標記狀態，要對當前模式進行標記。
半選中狀態在智慧電視剛誕生的時候非常流行，各大廠商的launcher介面上的頂部tab都採用半選中狀態，因為那時候技術限制，電視重新整理頻率比較慢，若是移動焦點則更改畫面，卡頓現象非常嚴重，所以電視界出現了一個“半選中狀態”，使用者隨便移動焦點卻不執行操作（實際上很多使用者無聊的時候會移動焦點玩兒），要到想要的位置按確定再執行操作。這種使用者體驗是十分不流暢的，所以現在的網際網路電視，好一點的app，都是遵循所見即所得原則，焦點移過去就執行更改（實際上是有200ms的延遲的哦，程式設計師哥哥說200ms也不會被使用者察覺，是程式界通用的延遲執行時間）。
也有一些情況，是必須執行半選中狀態的，比如選擇劇集
這種場景，你肯定不希望焦點每動一次畫面都跟著切換，那樣簡直太不流暢了，要是網速不好，簡直是要崩潰的體驗。
其實半選中狀態和選中狀態也沒有絕對的區分，只是我覺得這樣描述在工作中和人溝通起來比較容易，如果嚴格追求字面意思我這麼說是不嚴謹的。主要大家知道電視存在這麼一種特殊狀態就好，類似於電腦上的滑鼠懸停效果吧，在移動端上我並沒想到對應效果。關於獲取焦點即執行還是獲取焦點按確定後再執行，真的是要具體情況具體分析，主要是東西跑在電視上，操作得流暢啊！所以這裡就不寫設計原則和建議方法，筆者能力有限也怕寫不明白。有時間我會以案例為單位單獨分析。
剛剛把設定選單這個東西引出來了，那選單掉出來了要怎麼收回去？是按返回鍵還是按確定鍵？要不要儲存當前更改？遵循“從哪兒來回哪兒去”這個原則的時候，是回到上一個半選中狀態還是標記狀態？這就引出了下一個大問題：遙控器的常用按鍵應該有的合理功能。