2019-8-15 濤濤
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
之前一直在做移動端的 UI 設計，在進入小米后，開始接觸電視端的 UI 設計，目前在負責小米電視商城。經過一個電視端項目后，自己做了一些關于電視 UI 的總結以及設計方法原則。電視 UI 算得上是一個偏冷門的界面設計，因為它的交互比較特殊，同時有一些限制，比如交互限制，焦點原則等等。以下就自己的項目經驗為電視 UI 設計原則做一個總結。
對于現在家庭智能電視而言，技術在不斷的進步，但是其飽和度和對比度有的還是很強，還會遇到大紅碰到大紫的色塊對比。但是信息變得簡約了，都是以 tab 導航為主，下面是幾個卡片信息瀑布流顯示。語音提示很重要，會隨著焦點的移動發出提示聲響，提示用戶電視焦點的移動狀態。
小米電視商城全新改版，在接到需求后，一定要模擬用戶來體驗一下購物流程還有用電視購物的環境，環境應該是固定的，那就是在家里。電視和手機購物體驗是不一樣的，電視是要用遙控器來控制，所以每一步的操作流程都很珍貴，如果界面跳轉太多，會給用戶一種煩躁的感覺，所以盡量同一層級的信息要在同一界面填寫完畢，避免二次跳轉。
第二點說的就是焦點問題，焦點不能層次不齊，跳動太大會引起視覺不適。以小米電視商城詳情為例，焦點盡量在同一水平線上，同行的焦點移動，視覺感受上會舒服很多。
智能電視的分辨率和大家平常在 app 看電影的時候差不多，如上圖所示，目前 1080p 最常見，2k 和 4k 基本都是資源類節目。設計尺寸以小米電視為例，通常做 1920*1080 的視覺稿就可以了，開發會適配比 1920*1080 小的電視屏幕，這樣下來，如果小分辨率的電視沒問題了，大的分辨率也就沒問題了。
我們知道在設計 app 的時候，都有左右間距的控制，移動端一般常見的控制在 28px 或者 32px，電視端因為是大屏設計，所以預留的空間也要大一些，基本左右留出 120px，上面留出 90px 就可以了。一般我設計的時候左右是固定的 120px，上面可以隨設計內容來自定義，90px 或者 100px，都是可以的，只要視覺舒服即可。
焦點在電視端 UI 設計里顯得尤為重要，因為它就是你的視覺焦點，焦點會隨著遙控器上下左右確認而改變。焦點的設計不能是扁平的，因為那樣不能夠提醒用戶焦點狀態的位置，焦點的設計應該是放大的、夸張的、可以帶邊框，也可以使用投影外發光的方式來設計，確保能夠給用戶足夠的清晰位置。
焦點放大我這里建議放大 1.1 倍或者 1.2 倍就可以了，再大就顯得過于大了。
如上圖所示，我在設計焦點的時候，就用了放大+外邊框的形式，這樣焦點移動起來可以讓用戶足夠看到位置所在。電視端的交互也是很簡單的，基本屬于十字交互，即自上而下，從左到右的交互方式。紅色剪頭屬于禁區，所有的電視交互，沒有斜 45 度的交互，這樣是錯誤的。
大家可以看到，在 app 里，常見的彈窗和浮窗可以壓蓋在可點擊功能上，比如美團的紅包，愛奇藝的一鍵關注，即使是這樣，也不會影響功能的正常使用。但是電視端的設計，如果兩個可點擊功能壓蓋在一起，焦點是無法獲取的，因為它沒法判斷你想要選的那個功能，所以在電視上，一定要將兩個功能分開來布局最為合適。
露出屏外的內容，和移動端設計是一樣的。如果有多個卡片內容，我們需要將露出屏外的那張卡片做一些邊界化處理，控制好間距，也就是說我們要將一個完整的卡片漏出來一些，讓用戶知道，后面還有內容；反之，用戶可能不知道后面還有內容，就不會按遙控器右鍵查看了。
電視端 UI 設計忌諱控件隱藏，比如上圖，如果有很多文字的時候，左邊的設計是錯誤的，因為隱藏了 button 按鈕。改為右邊的設計是比較好的，我們可以選擇焦點選中文字給一個彈窗狀態或者其它，將 button 功能位露出來，如果一個界面可選功能位較少，我們設計的時候盡量在第一屏展示。如果實在不行，可以選擇吸底吸邊來設計。
顏色的選擇運用是重中之重，因為這個會直接影響到用戶的視覺體驗。因為用戶環境大多數是晚上的時候回去看電視，分開燈和關燈的情況，開燈的情況其實還好。如果關燈，顏色太刺眼的話，飽和度較高的顏色會直接影響到眼睛，這個危害是很大的，而且不一樣顏色的色塊，會增加用戶的視覺負擔，這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。
電視 UI 設計中，白色謹慎使用。因為白色過多實在是太刺眼了，我們可以選中較為灰一些的接近白色的顏色來代替。
背景的運用這里也建議使用深色的背景，原因和上述講的一樣，還有一個就是深色背景可以更好地襯托出界面的主要內容。反之如果用淺色的背景，有的卡片如果需求方要求設計成淺色，那么這樣淺色的背景+淺色的卡片疊在一起，主要內容就特別難區分了。
我們在設計電視端 UI 的時候，要真實的先去體驗一下特殊的場景，電視端每個 tab 是一個頻道，每個頻道的設計風格也是不同的，比如少兒頻道，購物頻道和電影電視劇頻道，設計風格肯定不同，體驗模擬流程可以讓我們更快地了解電視特性。
字體的選擇默認思源黑體，因為這個字體是開源字體，可以免費使用，沒有版權之分，以上列入的字體是小米電視商城改版的字號，具體的字體和間距可以根據自己的設計需求變化。
關于字體的選擇，當然你也可以選用其它字體，或者一些特殊字體，好看的字體，但是這樣的話，字體包應該會很大，會影響一些加載速度。
字體顏色的選擇盡量用白色或者亮色，深色背景上選用白色是最好的，這樣更易于閱讀。
字體的粗細大小，這里標題建議加粗選擇，其余選擇常規字體就好，避免太粗或者太細的字體。
電視的設計只是其中的一部分，未來我們的電視可能比現在的體驗更加好，比如會出現實景商城，單一的圖片形式已經不能滿足我們對購物的需求，一些視頻類，動效類的體驗會更加合適。想讓電視擁有好的體驗并不是一件簡單的事情，想必大家已經從諸多「電視盒子」上體驗到了這一點。我們曾經熟悉的電視已經發生改變，而我們適應的手機、平板和電腦和新的電視還有著巨大的差別，我們需要忘掉之前熟悉的模式，未來五年、十年、甚至更久。電視、電燈、冰箱洗衣機等智能家具的體驗，正是我們設計師需要在未來幾年所做的事情，這很重要。
小米電視商城全新改版是我接觸的第一個電視端 UI 設計項目，第一期的優化還有很多不足，根據項目經驗總結了上面的規范。以上的基本設計規范掌握后，那么做電視 UI 基本問題不大，大的錯誤肯定不會有了，但是每個公司的設計規范肯定也有所差別。電視端的設計是個偏冷門的 UI 設計，多掌握一些另類項目經驗也是設計師必備的技能。
文章來源：優設網
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。