2019-8-15 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
之前一直在做移動端的 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)的移動發(fā)出提示聲響，提示用戶電視焦點(diǎn)的移動狀態(tài)。
小米電視商城全新改版，在接到需求后，一定要模擬用戶來體驗(yàn)一下購物流程還有用電視購物的環(huán)境，環(huán)境應(yīng)該是固定的，那就是在家里。電視和手機(jī)購物體驗(yàn)是不一樣的，電視是要用遙控器來控制，所以每一步的操作流程都很珍貴，如果界面跳轉(zhuǎn)太多，會給用戶一種煩躁的感覺，所以盡量同一層級的信息要在同一界面填寫完畢，避免二次跳轉(zhuǎn)。
第二點(diǎn)說的就是焦點(diǎn)問題，焦點(diǎn)不能層次不齊，跳動太大會引起視覺不適。以小米電視商城詳情為例，焦點(diǎn)盡量在同一水平線上，同行的焦點(diǎn)移動，視覺感受上會舒服很多。
智能電視的分辨率和大家平常在 app 看電影的時(shí)候差不多，如上圖所示，目前 1080p 最常見，2k 和 4k 基本都是資源類節(jié)目。設(shè)計(jì)尺寸以小米電視為例，通常做 1920*1080 的視覺稿就可以了，開發(fā)會適配比 1920*1080 小的電視屏幕，這樣下來，如果小分辨率的電視沒問題了，大的分辨率也就沒問題了。
我們知道在設(shè)計(jì) app 的時(shí)候，都有左右間距的控制，移動端一般常見的控制在 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)移動起來可以讓用戶足夠看到位置所在。電視端的交互也是很簡單的，基本屬于十字交互，即自上而下，從左到右的交互方式。紅色剪頭屬于禁區(qū)，所有的電視交互，沒有斜 45 度的交互，這樣是錯(cuò)誤的。
大家可以看到，在 app 里，常見的彈窗和浮窗可以壓蓋在可點(diǎn)擊功能上，比如美團(tuán)的紅包，愛奇藝的一鍵關(guān)注，即使是這樣，也不會影響功能的正常使用。但是電視端的設(shè)計(jì)，如果兩個(gè)可點(diǎn)擊功能壓蓋在一起，焦點(diǎn)是無法獲取的，因?yàn)樗鼪]法判斷你想要選的那個(gè)功能，所以在電視上，一定要將兩個(gè)功能分開來布局最為合適。
露出屏外的內(nèi)容，和移動端設(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)慎使用。因?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ì)的字體。
電視的設(shè)計(jì)只是其中的一部分，未來我們的電視可能比現(xiàn)在的體驗(yàn)更加好，比如會出現(xiàn)實(shí)景商城，單一的圖片形式已經(jī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ī)范肯定也有所差別。電視端的設(shè)計(jì)是個(gè)偏冷門的 UI 設(shè)計(jì)，多掌握一些另類項(xiàng)目經(jīng)驗(yàn)也是設(shè)計(jì)師必備的技能。
文章來源：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com