论文部分内容阅读
摘要：在进行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-），男，山西沁源人，高级工程师，从事有线电视网络技术工作。
关键词：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-），男，山西沁源人，高级工程师，从事有线电视网络技术工作。