如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

之前一直在做移動(dòng)端的 UI 設(shè)計(jì)，在進(jìn)入小米后，開始接觸電視端的 UI 設(shè)計(jì)，目前在負(fù)責(zé)小米電視商城。經(jīng)過(guò)一個(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é)。

智能電視的特性

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

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

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

設(shè)計(jì)尺寸

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

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

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

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

交互設(shè)計(jì)

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

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

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

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

視覺(jué)設(shè)計(jì)

顏色的選擇運(yùn)用是重中之重，因?yàn)檫@個(gè)會(huì)直接影響到用戶的視覺(jué)體驗(yàn)。因?yàn)橛脩舡h(huán)境大多數(shù)是晚上的時(shí)候回去看電視，分開燈和關(guān)燈的情況，開燈的情況其實(shí)還好。如果關(guān)燈，顏色太刺眼的話，飽和度較高的顏色會(huì)直接影響到眼睛，這個(gè)危害是很大的，而且不一樣顏色的色塊，會(huì)增加用戶的視覺(jué)負(fù)擔(dān)，這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。

電視 UI 設(shè)計(jì)中，白色謹(jǐn)慎使用。因?yàn)榘咨^(guò)多實(shí)在是太刺眼了，我們可以選中較為灰一些的接近白色的顏色來(lái)代替。

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

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

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

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

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

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

更好的智能家居體驗(yàn)

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

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

文章來(lái)源：優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。