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

電視UI算得上是一個(gè)偏冷門的界面設(shè)計(jì)，因?yàn)樗慕换ケ容^特殊，同時(shí)有一些限制，比如交互限制，焦點(diǎn)原則等等。以下就自己的項(xiàng)目經(jīng)驗(yàn)為電視UI設(shè)計(jì)原則做一個(gè)總結(jié)。

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

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

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

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

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

焦點(diǎn)在電視端UI設(shè)計(jì)里顯得尤為重要，因?yàn)樗褪悄愕囊曈X焦點(diǎn)，焦點(diǎn)會隨著遙控器是上下左右確認(rèn)會改變；焦點(diǎn)的設(shè)計(jì)不能是扁平的，因?yàn)槟菢硬荒軌蛱嵝延脩艚裹c(diǎn)狀態(tài)的位置，焦點(diǎn)的設(shè)計(jì)應(yīng)該是放大的、夸張的、可以帶邊框，也可以使用投影外發(fā)光的方式來設(shè)計(jì)，確保能夠給用戶足夠的清晰位置。

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

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

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

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

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

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

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

我們在設(shè)計(jì)電視端UI的時(shí)候，要真實(shí)的先去體驗(yàn)一下特殊的場景，電視端每個(gè)tab是一個(gè)頻道，每個(gè)頻道的設(shè)計(jì)風(fēng)格也是不同的，比如少兒頻道，購物頻道和電影電視劇頻道，設(shè)計(jì)風(fēng)格肯定不同，體驗(yàn)?zāi)M流程可以讓我們更快的了解電視特性。

字體的選擇默認(rèn)思源黑體，因?yàn)檫@個(gè)字體是開源字體，可以免費(fèi)使用，沒有版權(quán)之分，以上列入的字體是小米電視商城改版的字號，具體的字體和間距可以根據(jù)自己的設(shè)計(jì)需求來變；

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

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

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

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

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

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