之前一直在做移動端的UI設計，在進入小米后，開始接觸電視端的UI設計，目前在負責小米電視商城。經(jīng)過一個電視端項目后，自己做了一些關于電視UI的總結(jié)以及設計方法原則。

電視UI算得上是一個偏冷門的界面設計，因為它的交互比較特殊，同時有一些限制，比如交互限制，焦點原則等等。以下就自己的項目經(jīng)驗為電視UI設計原則做一個總結(jié)。

對于現(xiàn)在家庭智能電視電視而言，技術在不斷的進步，但是其飽和度和對比度有的還是很強，還會遇到大紅碰到大紫的色塊對比；但是信息變得簡約了，都是以tab導航為主，下面幾個卡片信息瀑布流顯示；語音提示很重要，會隨著焦點的移動發(fā)出提示聲響，提示用戶電視焦點的移動狀態(tài)。

小米電視商城全新改版，在接到需求后，一定要模擬用戶來體驗一下購物流程還有用電視購物都環(huán)境，環(huán)境應該是固定的，那就是在家里；電視和手機購物體驗是不一樣的，電視是要用遙控器來控制，所以每一步的操作流程都很珍貴，如果界面跳轉(zhuǎn)太多，會給用戶一種煩躁的感覺，所以盡量同一層級的信息要在同一界面填寫完畢，避免二次跳轉(zhuǎn)。

第二點說的就是焦點問題，焦點不能層次不齊，跳動太大會引起視覺不適；以小米電視商城詳情為例，焦點盡量在同一水平線上，同行的焦點移動，視覺感受上會舒服很多。

智能電視的分辨率和大家平常在app看電影的時候差不多，如上圖所示，目前1080p最常見，2k和4k基本都是資源類節(jié)目，設計尺寸以小米電視為例，通常做1920*1080的視覺稿就可以了，開發(fā)會適配比1920*1080小的電視屏幕，這樣下來，如果小分辨率的電視沒問題了，大的分辨率也就沒問題了。

我們知道在設計app的時候，都有左右間距的控制，移動端一般常見的控制在28px或者32px，電視端因為是大屏設計，所以預留的空間也要大一些，基本左右留出120px，上面留出90px就可以了。我一般設計的時候左右是固定的120px，上面可以隨設計內(nèi)容來自定義，90px或者100px，都是可以的，只要視覺舒服即可。

焦點在電視端UI設計里顯得尤為重要，因為它就是你的視覺焦點，焦點會隨著遙控器是上下左右確認會改變；焦點的設計不能是扁平的，因為那樣不能夠提醒用戶焦點狀態(tài)的位置，焦點的設計應該是放大的、夸張的、可以帶邊框，也可以使用投影外發(fā)光的方式來設計，確保能夠給用戶足夠的清晰位置。

焦點放大我這里建議放大1.1倍或者1.2倍就可以了，再大就顯得過于大了。

如上圖所示，我在設計焦點的時候，就用了放大+外邊框的形式，這樣焦點移動起來可以讓用戶足夠看到位置所在；電視端的交互也是很簡單的，基本屬于十字交互，即自上而下，從左到右的交互方式；紅色剪頭屬于禁區(qū)，所有的電視交互，沒有斜45度的交互，這樣是錯誤的～

大家可以看到，在app里，常見的彈窗和浮窗可以壓蓋在可點擊功能上，比如美團的紅包，愛奇藝的一鍵關注，即使是這樣，也不會影響功能的正常使用；但是電視端的設計，如果兩個可點擊功能壓蓋在一起，那么尷尬的就是，焦點無法獲取，因為它沒法判斷你想要選那個功能，所以在電視上，一定要將兩個功能分開來布局最為合適。

露出屏外的內(nèi)容呢，和移動端設計是一樣的，如果有多個卡片內(nèi)容，我們需要將露出屏外的那張卡片做一些邊界化處理，控制好間距，也就是說我們要將一個完整的卡片漏出來一些，讓用戶知道，后面還有內(nèi)容；反之，用戶可能不知道后面還有內(nèi)容，就不會按遙控器右鍵查看了。

電視端UI設計忌諱控件隱藏，比如上圖，如果有很多文字的時候，左邊的設計是錯誤的，因為隱藏了button按鈕；改為右邊的設計是比較好的，我們可以選擇焦點選中文字給一個彈窗狀態(tài)或者其它，將button功能位露出來，如果一個界面可選功能位較少，我們設計的時候盡量在第一屏展示，如果實在不行，可以選擇吸底吸邊來設計。

顏色的選擇運用是重中之重，因為這個會直接影響到用戶的視覺體驗。因為用戶環(huán)境大多數(shù)是晚上的時候回去看電視，分開燈和關燈的情況，開燈的情況其實還好；如果關燈，顏色太刺眼的話，飽和度較高的顏色會直接影響到眼睛，這個危害是很大的，而且不一樣顏色的色塊，會增加用戶的視覺負擔，這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。特別提示：電視UI設計中，白色謹慎使用！白色謹慎使用！白色謹慎使用！重要的事情說三遍，因為白色過多實在是太太太刺眼了，我們可以選中較為灰一些的接近白色的顏色來代替。

背景的運用這里也建議使用深色的背景，原因和上述講的一樣，還有一個就是深色背景可以更好的襯托出界面的主要內(nèi)容；反之如果用淺色的背景，有的卡片如果需求方要求設計成淺色，那么這樣淺色的背景+淺色的卡片，這樣疊在一起，主要內(nèi)容就特別難區(qū)分了。

我們在設計電視端UI的時候，要真實的先去體驗一下特殊的場景，電視端每個tab是一個頻道，每個頻道的設計風格也是不同的，比如少兒頻道，購物頻道和電影電視劇頻道，設計風格肯定不同，體驗模擬流程可以讓我們更快的了解電視特性。

字體的選擇默認思源黑體，因為這個字體是開源字體，可以免費使用，沒有版權之分，以上列入的字體是小米電視商城改版的字號，具體的字體和間距可以根據(jù)自己的設計需求來變；

關于字體的選擇，當然你也可以選用其它字體，或者一些特殊字體，好看的字體，但是這樣的話，字體包應該會很大，會影響一些加載速度吧。

字體顏色的選擇盡量用白色或者亮色，深色背景上選用白色是最好的，這樣更易于閱讀。

字體的粗細大小，這里標題建議加粗選擇，其余就常規(guī)字體就好來，避免太粗或者太細的字體選擇。

 更好的智能家居體驗電視的設計只是其中的一部分，未來我們的電視可能比現(xiàn)在的體驗更加好，比如會出現(xiàn)實景商城，單一的圖片形式已經(jīng)不能滿足我們對購物的需求，一些視頻類，動效類的體驗會更加合適，想讓電視擁有好的體驗并不是一件簡單的事情，想必大家已經(jīng)從諸多“電視盒 子”上體驗到了這一點。我們曾經(jīng)熟悉的電視已經(jīng)發(fā)生改變，而我們適應的手機、平板和電腦和新的電視還有著巨大的差別，我們需要忘掉之前熟悉的模式，未來五年、十年、甚至更久；電視、電燈、冰箱洗衣機等智能家具的體驗，正是我們設計師需要在未來幾年所做的事情，這很重要。

小米電視商城全新改版是我接觸的第一個電視端UI設計項目，第一期的優(yōu)化還有很多不足，根據(jù)項目經(jīng)驗總結(jié)了上面的規(guī)范類。以上的基本設計規(guī)范掌握后，那么做電視UI基本問題不大，大的錯誤肯定不會有了；但是每個公司的設計規(guī)范肯定也有所差別，但是基本的規(guī)范和注意事項也就是我上面所提到的種種；電視端的設計是個偏冷門的UI設計，多掌握一些另類項目經(jīng)驗也是一個設計師必備的技能。

作者：Ericlee的腦洞    原文鏈接：https://www.zcool.com.cn/article/ZMTAwMzMxNg==.html