電視屏WEB界面設計的特點

摘要：在進行OTT平臺建設時，我們開發了基于機頂盒瀏覽器的WEB網站，用于提供一些本地化的服務。在進行WEB界面設計時發現，電視屏WEB界面的設計與電腦屏/手機屏WEB界面的設計存在較大的差異，在此與大家分享。

關鍵詞：WEB界面;電視屏;機頂盒瀏覽器

1前言

晉中廣電網絡在進行OTT平臺建設時，單獨增加了一臺WEB服務器，用于為機頂盒提供WEB服務;并在門戶界面增加了一個鏈接入口，從而實現了基于機頂盒瀏覽器的WEB網站，能夠提供一些本地化的服務。在進行WEB界面設計時發現，電視屏WEB界面的設計與電腦屏/手機屏WEB界面的設計存在較大的差異，在此就這些差異進行總結和分享。

2電視屏WEB服務的實現

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

用戶通過機頂盒遙控器的操作，點擊門戶界面的WEB服務入口鏈接（如圖1的“廣電+”）后，機頂盒瀏覽器便打開相應的WEB界面，通過HDMI線呈現在電視屏上。之后，通過遙控器的操作，界面中的焦點進行移動;當點擊遙控器上確定鍵后，便繼續打開相應的菜單或詳情界面，展示相應的文字、圖片和短視頻。如圖1所示。

3電視屏WEB界面與電腦/手機屏WEB界面設計的區別

3.1電視屏顯示時的圖像切邊問題

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

因此，在進行電視屏WEB界面設計時，上下左右一般要各留出50px的外邊距，以使計劃顯示的內容放在畫面安全區，來適應不同品牌和型號的電視機。在CSS文件中，可通過body{margin：50px;}來實現。

雖然越來越多4K電視已經出現，但用戶不會像更換手機那樣定期更換電視機。所以電視WEB仍然為主流的1080p市場服務。因此，界面的尺寸一般設計為1920px*1080px。

3.2界面結構問題

區別于鼠標在電腦屏上任意位置的移動，和手指在手機屏上任意位置的移動，電視屏上導航光標的移動只能通過遙控器的上下左右鍵來完成，并且是垂直或水平移動，這使得網格成為電視WEB界面最自然的結構。在頁面設計時，我們采用了矩形網格對界面進行整體布局。

3.3導航光標問題

由于沒有觸摸和鼠標，電視屏WEB界面上的導航光標必須進行一些特殊的處理，以提醒用戶焦點的位置。焦點的設計可以采用放大、夸張、帶邊框、高亮顯示等多種手段進行處理。

3.4色彩和文字的考慮

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

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

同時，考慮電視機的色域范圍，一是避免純白色，因為純白色在電視屏幕上會引起震動和圖像重影，同時明亮的光線對人眼也有所傷害;二是避免大面積使用色彩漸變，以防止色帶的出現，如果必須使用，則需要提前用PS處理一下水波后再使用;三是盡量使用一些柔和的色彩，避免使用高飽和、高明度的色彩。

電視主要是看視頻和圖片，用戶不會通過電視屏幕閱讀大量文本。因此，盡可能減少文本量，將長句改為短句，將長文本分成段落，文本描述盡可能簡短。通過實驗，我們發現，正文最小設置為24px;標題根據界面設計一般設置為34-50px，加粗后效果更好;一些不重要的標簽可以設置為20px。文字不能使用纖細的字體，并要使用系統字體。

3.5開發技術的考慮

機頂盒瀏覽器的性能要遠遠低于電腦和手機的瀏覽器，并且不能在線實時升級更新，因此在開發技術的選擇上局限性較大。為確保WEB界面的適應性，要選擇標準的、傳統的和原生的技術。

如果能用HTML和CSS呈現，就不要用JavaScript去動態控制;需要JS時要使用原生JS開發。焦點事件和失去焦點事件是高頻率的系統事件，要謹慎使用，盡量避免觸發相關事件，因為有時焦點是不受開發者絕對控制的。

在頁面加載和頁面跳轉時，或在頻繁切換圖片和視頻時，有時會出現卡頓，甚至瀏覽器崩潰，這時需要巧妙使用setTimeout（）函數，做一個延時，解決快速切換帶來的問題。

3.6調試的考慮

一定要盡可能多的使用機頂盒和電視機對頁面進行實際測試，因為電腦顯示器顯示的效果和電視機顯示的效果差異還是挺大的。同時，要了解不同電視顯示模式的效果，包括標準、銳利、劇場等等，并在一些低質量的顯示器上做色彩驗證試驗，這樣才能看到顯示出的最差效果。

4結束語

電視WEB網站的開發已告一段落，在整個界面風格的設計上還比較傳統，在焦點的顯示上還不夠明顯，這些都需要進一步完善。以上是在開發電視屏WEB界面時遇到的一些問題，在此進行分享。

作者簡介：冀永慶（1972-），男，山西沁源人，高級工程師，從事有線電視網絡技術工作。