摘要：在進(jìn)行OTT平臺(tái)建設(shè)時(shí)，我們開(kāi)發(fā)了基于機(jī)頂盒瀏覽器的WEB網(wǎng)站，用于提供一些本地化的服務(wù)。在進(jìn)行WEB界面設(shè)計(jì)時(shí)發(fā)現(xiàn)，電視屏WEB界面的設(shè)計(jì)與電腦屏/手機(jī)屏WEB界面的設(shè)計(jì)存在較大的差異，在此與大家分享。

關(guān)鍵詞：WEB界面;電視屏;機(jī)頂盒瀏覽器

1前言

晉中廣電網(wǎng)絡(luò)在進(jìn)行OTT平臺(tái)建設(shè)時(shí)，單獨(dú)增加了一臺(tái)WEB服務(wù)器，用于為機(jī)頂盒提供WEB服務(wù);并在門戶界面增加了一個(gè)鏈接入口，從而實(shí)現(xiàn)了基于機(jī)頂盒瀏覽器的WEB網(wǎng)站，能夠提供一些本地化的服務(wù)。在進(jìn)行WEB界面設(shè)計(jì)時(shí)發(fā)現(xiàn)，電視屏WEB界面的設(shè)計(jì)與電腦屏/手機(jī)屏WEB界面的設(shè)計(jì)存在較大的差異，在此就這些差異進(jìn)行總結(jié)和分享。

2電視屏WEB服務(wù)的實(shí)現(xiàn)

WEB服務(wù)主要展示一些文字、圖片和視頻。由于WEB服務(wù)器不是視頻推流服務(wù)器，因此只能播放一些短視頻，以減輕對(duì)服務(wù)器的壓力。

用戶通過(guò)機(jī)頂盒遙控器的操作，點(diǎn)擊門戶界面的WEB服務(wù)入口鏈接（如圖1的“廣電+”）后，機(jī)頂盒瀏覽器便打開(kāi)相應(yīng)的WEB界面，通過(guò)HDMI線呈現(xiàn)在電視屏上。之后，通過(guò)遙控器的操作，界面中的焦點(diǎn)進(jìn)行移動(dòng);當(dāng)點(diǎn)擊遙控器上確定鍵后，便繼續(xù)打開(kāi)相應(yīng)的菜單或詳情界面，展示相應(yīng)的文字、圖片和短視頻。如圖1所示。

3電視屏WEB界面與電腦/手機(jī)屏WEB界面設(shè)計(jì)的區(qū)別

3.1電視屏顯示時(shí)的圖像切邊問(wèn)題

由于電視信號(hào)源設(shè)備的不同、電視機(jī)信號(hào)接口的不同、電視機(jī)種類和品牌的不同，以及電視機(jī)顯示模式的不同，電視機(jī)廠商在生產(chǎn)電視機(jī)時(shí)一般都會(huì)將顯示圖像放大一點(diǎn)再顯示在電視機(jī)屏幕上，以解決圖像四周可能出現(xiàn)的彩邊現(xiàn)象，于是就產(chǎn)生了圖像的切邊。這一點(diǎn)是有別于電腦屏和手機(jī)屏的。

因此，在進(jìn)行電視屏WEB界面設(shè)計(jì)時(shí)，上下左右一般要各留出50px的外邊距，以使計(jì)劃顯示的內(nèi)容放在畫(huà)面安全區(qū)，來(lái)適應(yīng)不同品牌和型號(hào)的電視機(jī)。在CSS文件中，可通過(guò)body{margin：50px;}來(lái)實(shí)現(xiàn)。

雖然越來(lái)越多4K電視已經(jīng)出現(xiàn)，但用戶不會(huì)像更換手機(jī)那樣定期更換電視機(jī)。所以電視WEB仍然為主流的1080p市場(chǎng)服務(wù)。因此，界面的尺寸一般設(shè)計(jì)為1920px*1080px。

3.2界面結(jié)構(gòu)問(wèn)題

區(qū)別于鼠標(biāo)在電腦屏上任意位置的移動(dòng)，和手指在手機(jī)屏上任意位置的移動(dòng)，電視屏上導(dǎo)航光標(biāo)的移動(dòng)只能通過(guò)遙控器的上下左右鍵來(lái)完成，并且是垂直或水平移動(dòng)，這使得網(wǎng)格成為電視WEB界面最自然的結(jié)構(gòu)。在頁(yè)面設(shè)計(jì)時(shí)，我們采用了矩形網(wǎng)格對(duì)界面進(jìn)行整體布局。

3.3導(dǎo)航光標(biāo)問(wèn)題

由于沒(méi)有觸摸和鼠標(biāo)，電視屏WEB界面上的導(dǎo)航光標(biāo)必須進(jìn)行一些特殊的處理，以提醒用戶焦點(diǎn)的位置。焦點(diǎn)的設(shè)計(jì)可以采用放大、夸張、帶邊框、高亮顯示等多種手段進(jìn)行處理。

3.4色彩和文字的考慮

人眼離電腦屏和手機(jī)屏的距離一般在0.2-0.6米之間，因此電腦屏和手機(jī)屏WEB界面的背景多以淺色為主，內(nèi)容色彩豐富，且頁(yè)面中的文字字號(hào)較小，字體也可以選用纖細(xì)的小字體。

而不同尺寸的電視機(jī)、不同清晰度的畫(huà)面都有其對(duì)應(yīng)的最佳觀看距離，一般在3米左右，因此電視應(yīng)用又被稱為10英尺體驗(yàn)。在進(jìn)行電視屏WEB界面設(shè)計(jì)時(shí)，一般選用暗色背景和明亮些的文字，界面布局稀疏，以增加觀看的舒適度。文字的字號(hào)要加大，文字的間距要加大，按鈕尺寸也要加大;同時(shí)避免使用纖細(xì)的字體，文字和背景的顏色盡量使用對(duì)比色，以增加閱讀體驗(yàn)效果;圖片、文字、表格、行間距的像素值最好是2的倍數(shù)，以防止抖動(dòng)。

同時(shí)，考慮電視機(jī)的色域范圍，一是避免純白色，因?yàn)榧儼咨陔娨暺聊簧蠒?huì)引起震動(dòng)和圖像重影，同時(shí)明亮的光線對(duì)人眼也有所傷害;二是避免大面積使用色彩漸變，以防止色帶的出現(xiàn)，如果必須使用，則需要提前用PS處理一下水波后再使用;三是盡量使用一些柔和的色彩，避免使用高飽和、高明度的色彩。

電視主要是看視頻和圖片，用戶不會(huì)通過(guò)電視屏幕閱讀大量文本。因此，盡可能減少文本量，將長(zhǎng)句改為短句，將長(zhǎng)文本分成段落，文本描述盡可能簡(jiǎn)短。通過(guò)實(shí)驗(yàn)，我們發(fā)現(xiàn)，正文最小設(shè)置為24px;標(biāo)題根據(jù)界面設(shè)計(jì)一般設(shè)置為34-50px，加粗后效果更好;一些不重要的標(biāo)簽可以設(shè)置為20px。文字不能使用纖細(xì)的字體，并要使用系統(tǒng)字體。

3.5開(kāi)發(fā)技術(shù)的考慮

機(jī)頂盒瀏覽器的性能要遠(yuǎn)遠(yuǎn)低于電腦和手機(jī)的瀏覽器，并且不能在線實(shí)時(shí)升級(jí)更新，因此在開(kāi)發(fā)技術(shù)的選擇上局限性較大。為確保WEB界面的適應(yīng)性，要選擇標(biāo)準(zhǔn)的、傳統(tǒng)的和原生的技術(shù)。

如果能用HTML和CSS呈現(xiàn)，就不要用JavaScript去動(dòng)態(tài)控制;需要JS時(shí)要使用原生JS開(kāi)發(fā)。焦點(diǎn)事件和失去焦點(diǎn)事件是高頻率的系統(tǒng)事件，要謹(jǐn)慎使用，盡量避免觸發(fā)相關(guān)事件，因?yàn)橛袝r(shí)焦點(diǎn)是不受開(kāi)發(fā)者絕對(duì)控制的。

在頁(yè)面加載和頁(yè)面跳轉(zhuǎn)時(shí)，或在頻繁切換圖片和視頻時(shí)，有時(shí)會(huì)出現(xiàn)卡頓，甚至瀏覽器崩潰，這時(shí)需要巧妙使用setTimeout（）函數(shù)，做一個(gè)延時(shí)，解決快速切換帶來(lái)的問(wèn)題。

3.6調(diào)試的考慮

一定要盡可能多的使用機(jī)頂盒和電視機(jī)對(duì)頁(yè)面進(jìn)行實(shí)際測(cè)試，因?yàn)殡娔X顯示器顯示的效果和電視機(jī)顯示的效果差異還是挺大的。同時(shí)，要了解不同電視顯示模式的效果，包括標(biāo)準(zhǔn)、銳利、劇場(chǎng)等等，并在一些低質(zhì)量的顯示器上做色彩驗(yàn)證試驗(yàn)，這樣才能看到顯示出的最差效果。

4結(jié)束語(yǔ)

電視WEB網(wǎng)站的開(kāi)發(fā)已告一段落，在整個(gè)界面風(fēng)格的設(shè)計(jì)上還比較傳統(tǒng)，在焦點(diǎn)的顯示上還不夠明顯，這些都需要進(jìn)一步完善。以上是在開(kāi)發(fā)電視屏WEB界面時(shí)遇到的一些問(wèn)題，在此進(jìn)行分享。

作者簡(jiǎn)介：冀永慶（1972-），男，山西沁源人，高級(jí)工程師，從事有線電視網(wǎng)絡(luò)技術(shù)工作。