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

截至2010年，25%的電視已經(jīng)連接到網(wǎng)絡(luò)上，而現(xiàn)在這個(gè)數(shù)量已經(jīng)翻倍了。電視現(xiàn)在已經(jīng)成為互聯(lián)網(wǎng)內(nèi)容和社交媒體分發(fā)的重要組成部分，我們需要對(duì)電視端進(jìn)行重新審視和設(shè)計(jì)了。但是，就目前而言，構(gòu)建和設(shè)計(jì)智能電視端的Web內(nèi)容還存在許多設(shè)計(jì)上的障礙、衍生問(wèn)題，硬件碎片化的狀況則讓設(shè)計(jì)上的工作量增加了不少。

但是面對(duì)這個(gè)10英尺外的巨大屏幕，最主要的問(wèn)題還是易用性和輕量級(jí)的交互。

當(dāng)用戶(hù)坐在電視機(jī)前的時(shí)候，他們的思維和交互方式會(huì)逐步發(fā)生改變，這一切都是源自于他們內(nèi)心狀態(tài)的變化。根據(jù)Netflix 的研究，用戶(hù)會(huì)隨著內(nèi)容的轉(zhuǎn)變和信息展現(xiàn)方式的變化來(lái)進(jìn)行交互上的調(diào)整。Nielsen 的研究也表明，用戶(hù)的觀看習(xí)慣會(huì)隨著設(shè)備、場(chǎng)合和內(nèi)容類(lèi)型而轉(zhuǎn)變。而Youtube的靠椅模式、Vimeo的沙發(fā)模式都針對(duì)電視端的用戶(hù)進(jìn)行了界面和交互上的改變。

相互連接的不同數(shù)碼設(shè)備與社交媒體的加入，讓看電視成了一件交互性更強(qiáng)的事情，第二屏的加入讓電視內(nèi)容有了更多的外延和互動(dòng)的可能性，而社交媒體就是彌合電視內(nèi)容和社交媒體的天然媒介。

痛點(diǎn)：遙控器

由于電視遙控器缺乏鼠標(biāo)/鍵盤(pán)式的輸入體驗(yàn)，交互更多的是依賴(lài)方向鍵來(lái)進(jìn)行的。而我們?cè)诠P記本和桌面電腦上常用的鼠標(biāo)和觸控板中的垂直滾動(dòng)瀏覽方式，也很難直接適用于電視。雖然電腦手機(jī)同電視有著相似的交互和導(dǎo)航模式，但是它們兩者之間所存在的差異大到足以讓設(shè)計(jì)來(lái)重新思考這件事。三星曾經(jīng)在自家高清電視的視頻幫助當(dāng)中詳細(xì)介紹了電視遙控模式的差異，比如我們?cè)陔娨暽铣Ｓ玫膶?dǎo)航模式應(yīng)該是橫向，而非其他屏幕上所熟知的縱向的。的 Apple TV 在遙控器設(shè)計(jì)上加入了高精度的觸控板，它讓智能電視的交互更加便捷和可能性。

另外一個(gè)痛點(diǎn)是瀏覽器內(nèi)容加載，這個(gè)時(shí)候?yàn)g覽器加載的網(wǎng)頁(yè)樣式應(yīng)該是移動(dòng)端的而非桌面端的頁(yè)面，考慮到用戶(hù)并沒(méi)有在客廳準(zhǔn)備鍵盤(pán)鼠標(biāo)。這種情況多見(jiàn)于加載社交媒體內(nèi)容和郵件。

元素放大

作為一個(gè)常用的規(guī)則，文本內(nèi)容應(yīng)當(dāng)被分割到柵格中，并且盡量處理成小塊。一個(gè)真正對(duì)電視屏幕友好的網(wǎng)頁(yè)內(nèi)容，應(yīng)當(dāng)處理成小塊，這樣可以更容易被閱讀，提高可讀性。盡量在深色背景上展示淺色的內(nèi)容，保持較低的信息密度。不同于手機(jī)和平板，用戶(hù)和屏幕之間的長(zhǎng)距離會(huì)限制用戶(hù)處理信息的能力。參考菲茨定律，更大比例的元素會(huì)讓用戶(hù)更快識(shí)別，更好選定，也更快進(jìn)行交互。

Google TV 的信息密度

參考Opera 的電視界面設(shè)計(jì)指南，圖形和文本應(yīng)該不小于22px 的尺寸，并且盡量使用簡(jiǎn)短的文案（控制在10個(gè)字以?xún)?nèi)），并且保留足夠的字間距和行間距。采用模塊化的比例尺寸能讓版式和字體更容易設(shè)定，并且能夠提供可控且一致的視覺(jué)層次。

雖然電視的分辨率并沒(méi)有固定的規(guī)格，但是有可供參考的分辨率尺寸，以常規(guī)的分辨率為基準(zhǔn)，720p的放大1.5倍，1080p的則放大2倍，4K屏幕（2160p）則放大4倍。對(duì)于任何同電視屏幕相關(guān)的設(shè)計(jì)項(xiàng)目而言，在早期階段選用幾個(gè)不同類(lèi)型的電視用作測(cè)試，看看在不同電視和分辨率下圖像和文字的顯示尺寸和渲染效果，就可以很快決定相應(yīng)的尺寸構(gòu)成。

這些都是用來(lái)做設(shè)計(jì)決策的指南，而非硬性的規(guī)定。值得注意的是，我們所處理的屏幕比例基本都是16:9的。如果你在桌面端電腦上設(shè)計(jì)電視的UI的時(shí)候，會(huì)發(fā)現(xiàn)字體尺寸會(huì)大的令人難受，然而實(shí)際上在電視上顯示的時(shí)候，由于用戶(hù)和電視之間的實(shí)際距離，電視UI元素不夠大反而沒(méi)法觀看。

色域

正如前文所說(shuō)，為了增強(qiáng)可讀性，文字盡量使用明亮的色彩，而背景盡量使用深色。同時(shí)，要盡量避免使用高飽和度的色彩，尤其是紅色，使用較大的視覺(jué)元素的時(shí)候，盡量避免使用純白色，大范圍純白色會(huì)產(chǎn)生光暈，并且造成視覺(jué)干擾。過(guò)高的對(duì)比度同樣會(huì)產(chǎn)生光暈效果，所以色彩使用過(guò)程中盡量柔和一些。色彩對(duì)比度這種指標(biāo)只有在沒(méi)有光的房間里顯示的時(shí)候，才最重要。對(duì)于較大的文本，網(wǎng)頁(yè)設(shè)計(jì)可訪問(wèn)性規(guī)則當(dāng)中要求對(duì)比度至少為3:1。那么在實(shí)際的使用過(guò)程中，這種對(duì)比度是否要進(jìn)行調(diào)整呢？在客廳和房間里面使用，是否有差別呢？實(shí)際測(cè)試之后才能知道。

解決方案

使用響應(yīng)式設(shè)計(jì)常用的媒體查詢(xún)來(lái)管理電視顯示的話，本身其實(shí)是存在問(wèn)題的，不同于桌面顯示器的分辨率體系，電視更多是根據(jù)屏幕尺寸（英寸）來(lái)劃分的。我們所熟知的21英寸的iMac分辨率是1920x1080px，這和1080P的HDTV電視是一致的，而視網(wǎng)膜屏的iMac則是4096×2304，然而實(shí)際4K屏的Ultra HDTV 的實(shí)際分辨率是4096×2160，至于iPad，那又是一個(gè)不規(guī)則的分辨率：2048×1536。

簡(jiǎn)單說(shuō)來(lái)，1080P的HDTV的尺寸會(huì)從25英寸到75英寸之間來(lái)回變化，而這兩個(gè)極端尺寸的推薦觀看距離分別為3英尺和9英尺?？梢暯嵌群途嚯x會(huì)改變用戶(hù)對(duì)像素密度和圖片質(zhì)量的感知。下圖是屏幕尺寸和最佳觀看距離的對(duì)比表格。

智能電視的內(nèi)置瀏覽器正變得越來(lái)越強(qiáng)大，也越來(lái)越規(guī)范。你可以通過(guò)智能電視的瀏覽器訪問(wèn)HTML5Test.com 或者CSS Media Queries Overview 這兩個(gè)網(wǎng)站來(lái)測(cè)試智能電視的實(shí)際性能。相對(duì)更老更小的智能電視（2012之前）通常評(píng)分低于290，而目前的電視的評(píng)分大多高于410，三星內(nèi)置Tizen系統(tǒng)的智能電視的性能評(píng)分能到465分之多。

讓智能電視擁有優(yōu)秀用戶(hù)體驗(yàn)的核心關(guān)鍵，并不是使用更多的內(nèi)容來(lái)填補(bǔ)更大的屏幕。少即是多。不要將智能電視視作為一個(gè)更大的桌面屏幕，雖然它們有相似之處，但是電視在交互上的障礙和先天的存儲(chǔ)缺陷，使得它并適合進(jìn)行桌面式交互。至于同手機(jī)相比，兩者在性能上的差距對(duì)雙方操作的差異影響更大。

盡量避免使用JavaScript，盡管?chē)?yán)格意義上來(lái)說(shuō)智能電視也是某種形態(tài)上的電腦，但是最好不要將其當(dāng)作桌面端來(lái)使用。它的主要功能仍然是處理多媒體，而非腳本語(yǔ)言。不要折騰瀏覽器插件和Flash播放了，它們會(huì)對(duì)電視瀏覽器帶來(lái)過(guò)大的負(fù)荷。

當(dāng)你在設(shè)計(jì)移動(dòng)端/自適應(yīng)/響應(yīng)式內(nèi)容的時(shí)候，務(wù)必記得在早期電視上測(cè)試，并且足夠頻繁的進(jìn)行測(cè)試調(diào)整。即使是某個(gè)品牌旗下同一個(gè)產(chǎn)品線的電視，實(shí)際效果都可能存在巨大的差異。目前智能電視瀏覽器仍然處于較早的階段，實(shí)際效果可能仍然不夠理想。當(dāng)然，它會(huì)變得越來(lái)越好，只不過(guò)在此之前，我們需要盡量多花心思進(jìn)行調(diào)整。

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