环球电气之家-午夜精彩视频-中国专业电气电子产品行业服务网站！

　　兩年前作為電視UI的新人，開始入手學習時發現關于電視的交互和UI教程甚少，相關文章也是少之又少。兩年快過去啦，各大設計網站上搜一搜智能電視UI，竟然還是少的可憐的那一點點東西。各大做電視端的師哥師姐們，你們咋那么吝惜筆墨膩？能不能寫寫教程教教偶們新入行的小鮮肉？好啦，不廢話啦，如今我已然不再是什么小鮮肉，只希望能把工作兩年來學到的東西都記錄下來，如果哪天被某個想入行電視UI的鮮肉看見了，希望能有所幫助。

　　這篇文章先講一下電視用戶體驗第一元素：焦點，程序里面叫Focus。

　　移動端頁面有可點擊內容和不可點擊內容，相應的，到電視上，我們有“可獲取焦點內容”和“不可獲取焦點內容”。（一般電視上的內容都是可以獲取焦點的，只有部分提示性文字沒有焦點屬性）先來看兩張圖

　　這是電視圈兒內大名鼎鼎的當貝市場的首頁，頂部標簽焦點和內容焦點的樣式，這也是當前大部分電視端App焦點的樣式。這種焦點簡單，美觀，醒目。

　　下面我們說一下電視焦點視覺設計第一個要注意的問題：焦點在哪兒？

　　設計原則：焦點要醒目

　　建議方法：使用描邊，外發光，放大，或其他動畫來加強焦點視覺效果。當然也不是越夸張越好，要拿捏得當，適合的才最好。

　　電視屏幕上的焦點也是用戶的視覺落點，用戶找了滿屏也不知道自己在哪兒的感覺是很崩潰的。不知道焦點在哪兒，就沒法預知自己按下遙控器后會怎樣。我們來看一張焦點很微弱的圖：

　　自從小米首先在電視上使用時尚畫報做屏保后，一批批屏保圖片類電視app出現，上圖為一款叫風迷style的app首次使用設置界面。左圖，深色和淺色的按鈕，哪個是焦點？假設焦點在“跳過”上，而用戶卻以為焦點是全選，按下遙控器跳過了此界面，用戶肯定會很吃驚“誒，我按了什么啊！？”如果下一頁不支持返回重新編輯，那用戶會是十分崩潰的。這個app的焦點都不太明顯，看右圖，沒有放大也沒有外發光也沒有動態輔助，不過還好，還是可以分辨的清的。

　　第二個要注意的問題：焦點的樣式要統一么？

　　設計原則：樣式盡量統一，這樣才感覺都是一家人嘛～

　　建議方法：外發光選框焦點，替換顏色焦點盡量不要混著使用。動畫焦點也不要有很多動畫樣式，盡量統一。

　　看上上圖，色塊卡片是當前最流行的電視UI形式，如果焦點樣式也是色塊，難免會造成視覺混淆，下圖我再舉個例子。

　　蝦米音樂的搜索按鈕焦點樣式，和QQ音樂的搜索按鈕焦點樣式，哪個更直接明了一些？顯然是QQ音樂啦，看來鵝廠對電視App的焦點也是研究過的啊，哈哈。另外我要說一下互聯網電視新秀暴風TV里面一個頁面的焦點

　　找到焦點了嘛？沒錯，焦點在左下角的“未登錄”那里，這是一個動畫效果，暴風TV的UI使用了很多柔和的微動畫，營造了不錯的氛圍感。小米電視UI上也有很多拿捏到位動畫，樂視就不要提了，樂視剛出來時候在那個年代真的挺好看的，可是這幾年怎么就沒有設計創新呢，感覺它的UI都被時代拋棄了。