CN112463269B - 用户界面显示方法及显示设备 - Google Patents

Abstract

本申请提供了一种用户界面显示方法及显示设备，具体的，对于一些视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示，这样，可以使同一视图显示区内各项目按照同一高度显示，可以保证用户界面视觉上的美观，同时，根据各项目的原尺寸比例进行等比例缩放显示，有效防止该视图显示区内的项目出现被拉伸或被压缩变形的情况。进一步的，在移动用户界面中视图显示区内的焦点时，根据位于相应项目的显示宽度和项目之间的空隙，控制该视图显示区内的目标项目的移动距离，以使目标项目移动至焦点对象所在位置，进而可以实现移动焦点时的定焦展示效果，方便用户查看被选择的项目。

Description

用户界面显示方法及显示设备

技术领域

本申请实施例涉及显示技术。更具体地讲，涉及用户界面显示方法及显示设备。

背景技术

现有技术中，智能电视可提供数个不同的应用，例如电视、应用软件、视频点播(video on demand，VOD)、媒体中心等。并且随着技术的不断发展，智能电视所提供的应用也越来越多。

图1为现有技术中一种典型的电视主页界面示意图。如图1所示，为了向用户呈现各类应用，在智能电视的主页界面内，设置有一个导航栏和两个视图显示区。位于顶端的导航栏往往会用于设置一些非常用功能，如，搜索、时钟等等；两个视图显示区可以用于显示一些应用数据、设备系统相关数据。为了让电视显示画面整齐美观，在上述视图显示区的用户界面设计上，各视图显示区中每一个项目显示尺寸均为等宽和等高的，由一个页面模板统一控制显示样式。

进一步的，为给用户提供更多的媒体资源，在一种场景下，图1中两个视图显示区被用作显示来自不同媒资数据供应方推荐的媒资数据、如在线影片海报、电视剧海报等，这样上述两个视图显示区又可被称为运营媒资推荐行。但是，由于不同媒资数据供应方提供的海报尺寸比例并不完全相同，所以上述由一个页面模板统一控制视图显示区显示样式的方式，当媒资数据供应方提供的海报比例与该行的项目显示尺寸不一致时，就会出现海报被拉伸或要的情况，如图1中的第一行运营媒资推荐行，其内部的海报被严重拉伸，影响用户体验。另外，同一运营媒资推荐行中通常有多种来源的媒资数据，使得一行中的海报比例、以及海报类型(横海报或竖海报)往往不一致，所以即使页面模板设计的项目显示尺寸与某一个媒资数据供应方提供的海报比例一致，与其它媒资数据供应方提供的海报比例也通常不一致，这样便导致在同一运营媒资推荐行中，有一些海报也会出现被拉伸或压缩的情况。

综上所示，当电视主页中的视图显示区被用作显示尺寸不确定的媒资数据时，采用由一个页面模板统一控制视图显示区显示样式的方式，会出现若要保证显示效果就会对媒资数据来源有一定的限制的问题。

发明内容

本申请提供了一种用户界面显示方法及显示设备，使电视同一视图显示区内可以展示不同尺寸的项目，同时还可以保证显示效果。

根据本申请实施例的第一方面，提供了一种显示设备，该显示设备主要包括：显示器，该显示器被配置为显示用户界面，所述用户界面包括多个视图显示区，其中，各个视图显示区中布局有一个或多个不同项目，所述视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示，该用户界面中还包括指示所述项目被选择的焦点对象；

与所述显示器通信连接的控制器，所述控制器被配置为执行呈现用户界面：

接收移动所述视图显示区内的焦点对象以指示意图选择目标项目的用户输入；

控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，且保持所述焦点对象在所述视图显示区中位置顺序保持不变，以使目标项目移动至所述焦点对象所在位置；

其中，所述目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及位于所述目标项目和未移动前所述焦点对象所处项目之间的间隙宽度，二者宽度之和。

根据本申请实施例的第二方面，提供了另一种显示设备，该显示设备包括：

显示器，该显示器被配置为显示用户界面，所述用户界面包括多个视图显示区，其中，各个视图显示区中布局有一个或多个不同项目，所述视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示以及，该用户界面中还包括指示所述项目被选择的焦点对象；

与所述显示器通信连接的控制器，所述控制器被配置为执行呈现用户界面：

接收移动所述视图显示区内的焦点对象以指示意图选择目标项目的用户输入，其中，所述目标项目和未移动前所述焦点对象所处项目之间间隔至少一个项目；

控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，且保持所述焦点对象在所述视图显示区中位置顺序保持不变，以使目标项目移动至所述焦点对象所在位置；

其中，所述目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及所述目标项目和未移动前所述焦点对象所处项目之间各项目的显示宽度、以及所述目标项目和所述未移动前所述焦点对象所处项目之间各项目间的间隙宽度，三者宽度之和。

根据本申请实施例的第三方面，提供了一种用户界面显示方法，所述方法包括：

接收移动所述视图显示区内的焦点对象以指示意图选择目标项目的用户输入，其中，所述视图显示区中布局有一个或多个不同项目，所述视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示；

控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，且保持所述焦点对象在所述视图显示区中位置顺序保持不变，以使目标项目移动至所述焦点对象所在位置；

其中，所述目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及位于所述目标项目和未移动前所述焦点对象所处项目之间的间隙宽度，二者宽度之和。

根据本申请实施例的第四方面，提供了另一种用户界面显示方法，该方法包括：

接收移动所述视图显示区内的焦点对象以指示意图选择目标项目的用户输入；其中，所述视图显示区中布局有一个或多个不同项目，所述视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示，所述目标项目和未移动前所述焦点对象所处项目之间间隔至少一个项目；

控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，且保持所述焦点对象在所述视图显示区中位置顺序保持不变，以使目标项目移动至所述焦点对象所在位置；

其中，所述目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及所述目标项目和未移动前所述焦点对象所处项目之间各项目的显示宽度、以及所述目标项目和所述未移动前所述焦点对象所处项目之间各项目间的间隙宽度，三者宽度之和。

本实施例提供的一种用户界面显示方法及显示设备，对于视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示，这样，可以使同一视图显示区内各项目按照同一高度显示，可以保证用户界面视觉上的美观，同时，根据各项目的原尺寸比例进行等比例缩放显示，有效防止该视图显示区内的项目出现被拉伸或被压缩变形的情况，这样便可以在保证显示效果的同时还可以在同一视图显示区内展示不同尺寸的项目。进一步的，在移动用户界面中视图显示区内的焦点时，根据相应项目的显示宽度和各项目之间的空隙，控制该视图显示区内的目标项目移动距离，以使目标项目移动至焦点对象所在位置，进而可以实现移动焦点时的定焦展示效果，方便用户查看被选择的项目。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为现有技术中一种典型的电视主页界面示意图；

图2中示例性示出了根据实施例中显示设备与控制装置之间操作场景的示意图；

图3中示例性示出了根据实施例中显示设备200的硬件配置框图；

图4中示例性示出了根据实施例中控制设备100的硬件配置框图；

图5中示例性示出了根据实施例中显示设备200的功能配置示意图；

图6a中示例性示出了根据实施例中显示设备200中软件配置示意图；

图6b中示例性示出了根据实施例中显示设备200中应用程序的配置示意图；

图7中示例性示出了根据实施例中显示设备200中主页界面的示意图；

图8中示例性示出了根据实施例中显示设备200中对运营媒资推荐行的显示效果示意图；

图9中示例性示出了根据实施例中显示设备200中呈现用户界面的一种方法流程示意图；

图10a和10b中示例性示出了根据实施例中控制装置100与显示设备200之间操作示意图；

图11a中示例性示出了根据实施例中显示设备200中Linux系统整体层级构造示意图；

图11b中示例性示出了根据实施例中显示设备200中Linux系统按键响应流程示意图；

图11c中示例性示出了根据实施例中显示设备200中Linux系统数据交互示意图

图12中示例性示出了一种显示设备200中视图显示区内的项目展示方法的流程示意图；

图13中示例性示出了按照图12中的方法对应的实现效果示意图。

具体实施方式

为使本申请示例性实施例的目的、技术方案和优点更加清楚，下面将结合本申请示例性实施例中的附图，对本申请示例性实施例中的技术方案进行清楚、完整地描述，显然，所描述的示例性实施例仅是本申请一部分实施例，而不是全部的实施例。

针对现有技术中的电视主页显示方法，当项目数据供应方提供的项目尺寸比例与模板设计尺寸比例不一致时，存在该项目显示时被拉伸或压缩的情况。针对该问题，本实施例提供了用户界面显示方法及显示设备，对于主页中的视图显示区，做页面显示、动画和数据方面的修改，使其可以实现对于不同比例、不同尺寸项目，按照固定高度、对于宽度进行等比例缩放的方式显示，同时实现了在该种显示效果下，用户移动焦点时的定焦展示效果。需要说明的是，本实施例提供的方法不仅适用于电视主页面，还可以适用于电视的其它界面显示，另外，该方法不仅适用于电视，还适用于其它显示设备，如计算机、平板电脑等。

下面首先结合附图对本申请所涉及的概念进行说明。在此需要指出的是，以下对各个概念的说明，仅为了使本申请的内容更加容易理解，并不表示对本申请保护范围的限定。

本申请各实施例中使用的术语“模块”，可以是指任何已知或后来开发的硬件、软件、固件、人工智能、模糊逻辑或硬件或/和软件代码的组合，能够执行与该元件相关的功能。

本申请各实施例中使用的术语“遥控器”，是指电子设备(如本申请中公开的显示设备)的一个组件，该组件通常可在较短的距离范围内无线控制电子设备。该组件一般可以使用红外线和/或射频(RF)信号和/或蓝牙与电子设备连接，也可以包括WiFi、无线USB、蓝牙、动作传感器等功能模块。例如：手持式触摸遥控器，是以触摸屏中用户界面取代一般遥控装置中的大部分物理内置硬键。

本申请各实施例中使用的术语“手势”，是指用户通过一种手型的变化或手部运动等动作，用于表达预期想法、动作、目的/或结果的用户行为。

本申请各实施例中使用的术语“硬件系统”，可以是指由集成电路(IntegratedCircuit，IC)、印刷电路板(Printed circuit board，PCB)等机械、光、电、磁器件构成的具有计算、控制、存储、输入和输出功能的实体部件。在本申请各个实施例中，硬件系统通常也会被称为主板(motherboard)或芯片。

图2中示例性示出了根据实施例中显示设备与控制装置之间操作场景的示意图。如图2所示，用户可通过控制装置100来操作显示设备200。

其中，控制装置100可以是遥控器100A，其可与显示设备200之间通过红外协议通信、蓝牙协议通信、紫蜂(ZigBee)协议通信或其他短距离通信方式进行通信，用于通过无线或其他有线方式来控制显示设备200。用户可以通过遥控器上按键、语音输入、控制面板输入等输入用户指令，来控制显示设备200。如：用户可以通过遥控器上音量加减键、频道控制键、上/下/左/右的移动按键、语音输入按键、菜单键、开关机按键等输入相应控制指令，来实现控制显示设备200的功能。

控制装置100也可以是智能设备，如移动终端100B、平板电脑、计算机、笔记本电脑等，其可以通过本地网(LAN，Local Area Network)、广域网(WAN，Wide Area Network)、无线局域网((WLAN，Wireless Local Area Network)或其他网络与显示设备200之间通信，并通过与显示设备200相应的应用程序实现对显示设备200的控制。例如，使用在智能设备上运行的应用程序控制显示设备200。该应用程序可以在与智能设备关联的屏幕上通过直观的用户界面(UI，User Interface)为用户提供各种控制。

示例的，移动终端100B与显示设备200均可安装软件应用，从而可通过网络通信协议实现二者之间的连接通信，进而实现一对一控制操作的和数据通信的目的。如：可以使移动终端100B与显示设备200建立控制指令协议，将遥控控制键盘同步到移动终端100B上，通过控制移动终端100B上用户界面，实现控制显示设备200的功能；也可以将移动终端100B上显示的音视频内容传输到显示设备200上，实现同步显示功能。

如图2所示，显示设备200还可与服务器300通过多种通信方式进行数据通信。在本申请各个实施例中，可允许显示设备200通过局域网、无线局域网或其他网络与服务器300进行通信连接。服务器300可以向显示设备200提供各种内容和互动。

示例的，显示设备200通过发送和接收信息，以及电子节目指南(EPG，ElectronicProgram Guide)互动，接收软件程序更新，或访问远程储存的数字媒体库。服务器300可以是一组，也可以是多组，可以是一类或多类服务器。通过服务器300提供视频点播和广告服务等其他网络服务内容。

显示设备200，可以是液晶显示器、OLED(Organic Light Emitting Diode)显示器、投影显示设备、智能电视。具体显示设备类型，尺寸大小和分辨率等不作限定，本领技术人员可以理解的是，显示设备200可以根据需要做性能和配置上的一些改变。

显示设备200除了提供广播接收电视功能之外，还可以附加提供计算机支持功能的智能网络电视功能。示例的包括，网络电视、智能电视、互联网协议电视(IPTV)等。

图3中示例性示出了根据示例性实施例中显示设备200的硬件配置框图。如图3所示，显示设备200中可以包括调谐解调器220、通信器230、检测器240、外部装置接口250、控制器210、存储器290、用户输入接口、视频处理器260-1、音频处理器260-2、显示器280、音频输入接口272、供电电源。

调谐解调器220，通过有线或无线方式接收广播电视信号，可以进行放大、混频和谐振等调制解调处理，用于从多个无线或有线广播电视信号中解调出用户所选择电视频道的频率中所携带的音视频信号，以及附加信息(例如EPG数据信号)。

调谐解调器220，可根据用户选择，以及由控制器210控制，响应用户选择的电视频道频率以及该频率所携带的电视信号。

调谐解调器220，根据电视信号广播制式不同，可以接收信号的途径有很多种，诸如：地面广播、有线广播、卫星广播或互联网广播等；以及根据调制类型不同，可以数字调制方式，也可以模拟调制方式；以及根据接收电视信号种类不同，可以解调模拟信号和数字信号。

在其他一些示例性实施例中，调谐解调器220也可在外置设备中，如外置机顶盒等。这样，机顶盒通过调制解调后输出电视音视频信号，经过输入/输出接口输入至显示设备200中。

通信器230是用于根据各种通信协议类型与外部设备或外部服务器进行通信的组件。例如：通信器230可以包括WIFI模块231，蓝牙通信协议模块232，有线以太网通信协议模块233等其他网络通信协议模块或近场通信协议模块。

显示设备200可以通过通信器230与外部控制设备或内容提供设备之间建立控制信号和数据信号的连接。例如，通信器可根据控制器的控制接收遥控器100的控制信号。

检测器240，是显示设备200用于采集外部环境或与外部交互的信号的组件。检测器240可以包括光接收器242，用于采集环境光线强度的传感器，可以通过采集环境光来自适应显示参数变化等；还可以包括图像采集器241，如相机、摄像头等，可以用于采集外部环境场景，以及用于采集用户的属性或与用户交互手势，可以自适应变化显示参数，也可以识别用户手势，以实现与用户之间互动的功能。

在其他一些示例性实施例中，检测器240，还可包括温度传感器，如通过感测环境温度，显示设备200可自适应调整图像的显示色温。示例性的，当温度偏高的环境时，可调整显示设备200显示图像色温偏冷色调；当温度偏低的环境时，可以调整显示设备200显示图像色温偏暖色调。

在其他一些示例性实施例中，检测器240还可包括声音采集器，如麦克风，可以用于接收用户的声音，包括用户控制显示设备200的控制指令的语音信号，或采集环境声音，用于识别环境场景类型，显示设备200可以自适应环境噪声。

外部装置接口250，提供控制器210控制显示设备200与外部其他设备间数据传输的组件。外部装置接口可按照有线/无线方式与诸如机顶盒、游戏装置、笔记本电脑等的外部设备连接，可接收外部设备的诸如视频信号(例如运动图像)、音频信号(例如音乐)、附加信息(例如EPG)等数据。

其中，外部装置接口250可以包括：高清多媒体接口(HDMI)端子251、复合(AV)端子252、模拟或数字分量端子253、通用串行总线(USB)端子254、红绿蓝(RGB)端子(图中未示出)等任一个或多个。

控制器210，通过运行存储在存储器290上的各种软件控制程序(如操作系统和/或各种应用程序)，来控制显示设备200的工作和响应用户的操作。

如图3所示，控制器210包括只读存储器ROM213、随机存取存储器RAM214、图形处理器216、CPU处理器212、通信接口218、以及通信总线。其中，RAM214和ROM213以及图形处理器216、CPU处理器212、通信接口218通过总线相连接。

ROM213，用于存储各种系统启动的指令。如在收到开机信号时，显示设备200电源开始启动，CPU处理器212运行ROM中系统启动指令，将存储在存储器290的操作系统拷贝至RAM214中，以开始运行启动操作系统。当操作系统启动完成后，CPU处理器212再将存储器290中各种应用程序拷贝至RAM214中,然后，开始运行启动各种应用程序。

图形处理器216，用于产生各种图形对象，如：图标、操作菜单、以及用户输入指令显示图形等。包括运算器，通过接收用户输入各种交互指令进行运算，根据显示属性显示各种对象。以及包括渲染器，产生基于运算器得到的各种对象，进行渲染的结果显示在显示器280上。

CPU处理器212，用于执行存储在存储器290中操作系统和应用程序指令。以及根据接收外部输入的各种交互指令，来执行各种应用程序、数据和内容，以便最终显示和播放各种音视频内容。

在一些示例性实施例中，CPU处理器212，可以包括多个处理器。多个处理器可包括一个主处理器以及多个或一个子处理器。主处理器，用于在预加电模式中执行显示设备200一些操作，和/或在正常模式下显示画面的操作。多个或一个子处理器，用于执行在待机模式等状态下的一种操作。

通信接口，可包括第一接口218-1到第n接口218-n。这些接口可以是经由网络被连接到外部设备的网络接口。

控制器210可以控制显示设备200的整体操作。例如：响应于接收到用于选择在显示器280上显示UI对象的用户命令，控制器210便可以执行与由用户命令选择的对象有关的操作。

其中，所述对象可以是可选对象中的任何一个，例如超链接或图标。与所选择的对象有关操作，例如：显示连接到超链接页面、文档、图像等操作，或者执行与图标相对应程序的操作。用于选择UI对象用户命令，可以是通过连接到显示设备200的各种输入装置(例如，鼠标、键盘、触摸板等)输入命令或者与由用户说出语音相对应的语音命令。

存储器290，包括存储用于驱动和控制显示设备200的各种软件模块。如：存储器290中存储的各种软件模块，包括：基础模块、检测模块、通信模块、显示控制模块、浏览器模块、和各种服务模块等。

其中，基础模块是用于显示设备200中各个硬件之间信号通信、并向上层模块发送处理和控制信号的底层软件模块。检测模块是用于从各种传感器或用户输入接口中收集各种信息，并进行数模转换以及分析管理的管理模块。

例如：语音识别模块中包括语音解析模块和语音指令数据库模块。显示控制模块是用于控制显示器280进行显示图像内容的模块，可以用于播放多媒体图像内容和UI界面等信息。通信模块，是用于与外部设备之间进行控制和数据通信的模块。浏览器模块，是用于执行浏览服务器之间数据通信的模块。服务模块，是用于提供各种服务以及各类应用程序在内的模块。

同时，存储器290还用于存储接收外部数据和用户数据、各种用户界面中各个项目的图像以及焦点对象的视觉效果图等。

用户输入接口，用于将用户的输入信号发送给控制器210，或者，将从控制器输出的信号传送给用户。示例性的，控制装置(例如移动终端或遥控器)可将用户输入的诸如电源开关信号、频道选择信号、音量调节信号等输入信号发送至用户输入接口，再由用户输入接口转送至控制器；或者，控制装置可接收经控制器处理从用户输入接口输出的音频、视频或数据等输出信号，并且显示接收的输出信号或将接收的输出信号输出为音频或振动形式。

在一些实施例中，用户可在显示器280上显示的图形用户界面(Graphical UserInterface，GUI)输入用户命令，则用户输入接口通过图形用户界面接收用户输入命令。或者，用户可通过输入特定的声音或手势进行输入用户命令，则用户输入接口通过传感器识别出声音或手势，来接收用户输入命令。

视频处理器260-1，用于接收视频信号，根据输入信号的标准编解码协议，进行解压缩、解码、缩放、降噪、帧率转换、分辨率转换、图像合成等视频数据处理，可得到直接在显示器280上显示或播放的视频信号。

示例的，视频处理器260-1，包括解复用模块、视频解码模块、图像合成模块、帧率转换模块、显示格式化模块等。

其中，解复用模块，用于对输入音视频数据流进行解复用处理，如输入MPEG-2,则解复用模块进行解复用成视频信号和音频信号等。

视频解码模块，用于对解复用后的视频信号进行处理，包括解码和缩放处理等。

图像合成模块，如图像合成器，其用于将图形生成器根据用户输入或自身生成的GUI信号，与缩放处理后视频图像进行叠加混合处理，以生成可供显示的图像信号。

帧率转换模块，用于对输入视频的帧率进行转换，如将输入的24Hz、25Hz、30Hz、60Hz视频的帧率转换为60Hz、120Hz或240Hz的帧率，其中，输入帧率可以与源视频流有关，输出帧率可以与显示屏的更新率有关。输入有通常的格式采用如插帧方式实现。

显示格式化模块，用于将帧率转换模块输出的信号，改变为符合诸如显示器显示格式的信号，如将帧率转换模块输出的信号进行格式转换以输出RGB数据信号。

显示器280，用于接收源自视频处理器260-1输入的图像信号，进行显示视频内容和图像以及菜单操控界面。显示器280包括用于呈现画面的显示屏组件以及驱动图像显示的驱动组件。显示视频内容，可以来自调谐解调器220接收的广播信号中的视频，也可以来自通信器或外部设备接口输入的视频内容。显示器220，同时显示显示设备200中产生且用于控制显示设备200的用户操控界面UI。

以及，根据显示器280类型不同，还包括用于驱动显示的驱动组件。或者，倘若显示器280为一种投影显示器，还可以包括一种投影装置和投影屏幕。

音频处理器260-2，用于接收音频信号，根据输入信号的标准编解码协议，进行解压缩和解码，以及降噪、数模转换、和放大处理等音频数据处理，得到可以在扬声器272中播放的音频信号。

音频输出接口270，用于在控制器210的控制下接收音频处理器260-2输出的音频信号，音频输出接口可包括扬声器272，或输出至外接设备的发生装置的外接音响输出端子274，如：外接音响端子或耳机输出端子等。

在其他一些示例性实施例中，视频处理器260-1可以包括一个或多个芯片组成。音频处理器260-2，也可以包括一个或多个芯片组成。

以及，在其他一些示例性实施例中，视频处理器260-1和音频处理器260-2，可以为单独的芯片，也可以与控制器210一起集成在一个或多个芯片中。

供电电源，用于在控制器210控制下，将外部电源输入的电力为显示设备200提供电源供电支持。供电电源可以包括安装显示设备200内部的内置电源电路，也可以是安装在显示设备200外部的电源，如在显示设备200中提供外接电源的电源接口。

图4中示例性示出了根据示例性实施例中控制装置100的配置框图。如图4所示，控制装置100包括控制器110、通信器130、用户输入/输出接口140、存储器190、供电电源180。

控制装置100被配置为控制显示设备200，以及可接收用户的输入操作指令，且将操作指令转换为显示设备200可识别和响应的指令，起着用户与显示设备200之间交互中介作用。如：用户通过操作控制装置100上频道加减键，显示设备200响应频道加减的操作。

在一些实施例中，控制装置100可是一种智能设备。如：控制装置100可根据用户需求安装控制显示设备200的各种应用。

在一些实施例中，如图2所示，移动终端100B或其他智能电子设备，可在安装操控显示设备200的应用之后，可以起到控制装置100类似功能。如：用户可以通过安装应用，在移动终端100B或其他智能电子设备上可提供的图形用户界面的各种功能键或虚拟按钮，以实现控制装置100实体按键的功能。

控制器110包括处理器112、RAM113和ROM114、通信接口以及通信总线。控制器110用于控制控制装置100的运行和操作，以及内部各部件之间通信协作以及外部和内部的数据处理功能。

通信器130在控制器110的控制下，实现与显示设备200之间控制信号和数据信号的通信。如：将接收到的用户输入信号发送至显示设备200上。通信器130可包括WIFI模块131、蓝牙模块132、NFC模块133等通信模块中至少一种。

用户输入/输出接口140，其中，输入接口包括麦克风141、触摸板142、传感器143、按键144等输入接口中至少一者。如：用户可以通过语音、触摸、手势、按压等动作实现用户指令输入功能，输入接口通过将接收的模拟信号转换为数字信号，以及数字信号转换为相应指令信号，发送至显示设备200。

输出接口包括将接收的用户指令发送至显示设备200的接口。在一些实施例中，可以是红外接口，也可以是射频接口。如：红外信号接口时，需要将用户输入指令按照红外控制协议转化为红外控制信号，经红外发送模块进行发送至显示设备200。再如：射频信号接口时，需将用户输入指令转化为数字信号，然后按照射频控制信号调制协议进行调制后，由射频发送端子发送至显示设备200。

在一些实施例中，控制装置100包括通信器130和输出接口中至少一者。控制装置100中配置通信器130，如：WIFI、蓝牙、NFC等模块，可将用户输入指令通过WIFI协议、或蓝牙协议、或NFC协议编码，发送至显示设备200.

存储器190，用于在控制器110的控制下存储驱动和控制控制装置100的各种运行程序、数据和应用。存储器190，可以存储用户输入的各类控制信号指令。

供电电源180，用于在控制器110的控制下为控制装置100各元件提供运行电力支持。可以电池及相关控制电路。

图5中示例性示出了根据示例性实施例中显示设备200功能配置示意图。如图5所示，存储器290用于存储操作系统、应用程序、内容和用户数据等，在控制器210控制下执行驱动显示设备200的系统运行以及响应用户的各种操作。存储器290可以包括易失性和/或非易失性存储器。

存储器290，具体用于存储驱动显示设备200中控制器210的运行程序，以及存储显示设备200内置各种应用程序，以及用户从外部设备下载的各种应用程序、以及与应用程序相关的各种图形用户界面，以及与图形用户界面相关的各种对象，用户数据信息，以及各种支持应用程序的内部数据。存储器290用于存储操作系统(OS)内核、中间件和应用等系统软件，以及存储输入的视频数据和音频数据、及其他用户数据。

存储器290，具体用于存储视频处理器260-1和音频处理器260-2、显示器280、通信接口230、调谐解调器220、检测器240、输入/输出接口等驱动程序和相关数据。

在一些实施例中，存储器290可以存储软件和/或程序，用于表示操作系统(OS)的软件程序包括，例如：内核、中间件、应用编程接口(API)和/或应用程序。示例性的，内核可控制或管理系统资源，或其它程序所实施的功能(如所述中间件、API或应用程序)，以及内核可以提供接口，以允许中间件和API，或应用访问控制器，以实现控制或管理系统资源。

示例的，存储器290，包括广播接收模块2901、频道控制模块2902、音量控制模块2903、图像控制模块2904、显示控制模块2905、音频控制模块2906、外部指令识别模块2907(如图形识别模块2907-1、语音识别模块2907-2、按键指令识别模块2907-3)、通信控制模块2908、光接收模块2909、电力控制模块2910、操作系统2911、以及其他应用程序2912、浏览器模块等等。控制器210通过运行存储器290中各种软件程序，来执行诸如：广播电视信号接收解调功能、电视频道选择控制功能、音量选择控制功能、图像控制功能、显示控制功能、音频控制功能、外部指令识别功能、通信控制功能、光信号接收功能、电力控制功能、支持各种功能的软件操控平台、以及浏览器功能等其他应用。

图6a中示例性示出了根据示例性实施例中显示设备200中软件系统的配置框图。如图6a中所示，操作系统2911，包括用于处理各种基础系统服务和用于实施硬件相关任务的执行操作软件，充当应用程序和硬件组件之间完成数据处理的媒介。

一些实施例中，部分操作系统内核可以包含一系列软件，用以管理显示设备硬件资源，并为其他程序或软件代码提供服务。

其他一些实施例中，部分操作系统内核可包含一个或多个设备驱动器，设备驱动器可以是操作系统中的一组软件代码，帮助操作或控制显示设备关联的设备或硬件。驱动器可以包含操作视频、音频和/或其他多媒体组件的代码。示例的，包括显示屏、摄像头、Flash、WiFi和音频驱动器。

其中，可访问性模块2911-1，用于修改或访问应用程序，以实现应用程序的可访问性和对其显示内容的可操作性。

通信模块2911-2，用于经由相关通信接口和通信网络与其他外设的连接。

用户界面模块2911-3，用于提供显示用户界面的对象，以供各应用程序访问，可实现用户可操作性。

控制应用程序2911-4，用于控制进程管理，包括运行时间应用程序等。

事件传输系统2914，可在操作系统2911内或应用程序2912中实现。一些实施例中，一方面在在操作系统2911内实现，同时在应用程序2912中实现，用于监听各种用户输入事件，将根据各种事件指代响应各类事件或子事件的识别结果，而实施一组或多组预定义的操作的处理程序。

其中，事件监听模块2914-1，用于监听用户输入接口输入事件或子事件。

事件识别模块2914-2，用于对各种用户输入接口输入各类事件的定义，识别出各种事件或子事件，且将其传输给处理用以执行其相应一组或多组的处理程序。

其中，事件或子事件，是指显示设备200中一个或多个传感器检测的输入，以及外界控制设备(如控制装置100等)的输入。如：语音输入各种子事件，手势识别的手势输入子事件，以及控制装置的遥控按键指令输入的子事件等。示例的，遥控器中一个或多个子事件包括多种形式，包括但不限于按键按上/下/左右/、确定键、按键按住等中一个或组合。以及非实体按键的操作，如移动、按住、释放等操作。

界面管理模块2913，用于直接或间接接收来自于事件传输系统2914监听到各用户输入事件或子事件，更新主页界面中的项目显示效果，包括但不限于界面中各项目的定焦循环滚动显示、或者界面中各项目的定焦滚动显示。

如图6b中所示，应用程序层2912包含可在显示设备200执行的各种应用程序。应用程序可包含但不限于一个或多个应用程序，如：直播电视应用程序、视频点播应用程序、媒体中心应用程序、应用程序中心、游戏应用等。

直播电视应用程序，可以通过不同的信号源提供直播电视。例如，直播电视应用程可以使用来自有线电视、无线广播、卫星服务或其他类型的直播电视服务的输入提供电视信号。以及，直播电视应用程序可在显示设备200上显示直播电视信号的视频。

视频点播应用程序，可以提供来自不同存储源的视频。不同于直播电视应用程序，视频点播提供来自某些存储源的视频显示。例如，视频点播可以来自云存储的服务器端、来自包含已存视频节目的本地硬盘储存器。

媒体中心应用程序，可以提供各种多媒体内容播放的应用程序。例如，媒体中心，可以为不同于直播电视或视频点播，用户可通过媒体中心应用程序访问各种图像或音频所提供服务。

应用程序中心，可以提供储存各种应用程序。应用程序可以是一种游戏、应用程序，或某些和计算机系统或其他设备相关但可以在智能电视中运行的其他应用程序。应用程序中心可从不同来源获得这些应用程序，将它们储存在本地储存器中，然后在显示设备200上可运行。

图7中示例性示出了根据示例性实施例中显示设备200中主页界面的示意图。如图7所示，用户界面包括多个视图显示区，示例的，包括第一视图显示区201、第二视图显示区202和第三视图显示区203，各个视图显示区中布局一个或多个不同项目。以及，用户界面中还包括指示任一项目被选择的选择器，可通过用户输入，以改变选择不同的项目。

需要说明的是，多个视图显示区可以是可视的界线，也可以是不可视的界线。如：可通过各视图显示区的背景颜色不同标识不同视图显示区，还可以通过边界线等可视的标识，也可以有不可视的隐形边界。也可以不存在可视的或非可视的边界，而仅在屏幕上显示一定范围区域中相关联项目，具有尺寸和/或排布相同改变属性时，而该一定范围区域则被视同一种视图分区的边界的存在，如：第一视图显示区201中项目同时缩小或放大，而第二视图显示区202的变化不同。

其中，一些实施例中，上述视图显示区中的一个或多个视图显示区可以为可缩放视图显示。“可缩放”，可以表示视图显示区在屏幕上尺寸或占比是可缩放的，或视图显示中的项目在在屏幕上尺寸或占比是可缩放的。

“项目”是指在显示设备200中用户界面的各视图显示区中显示以表示，诸如图标、缩略图、视频剪辑等对应内容的视觉对象。例如：项目可以表示电影、电视剧的图像内容或视频剪辑、音乐的音频内容、应用程序，或其他用户访问内容历史信息。

一些实施例中，“项目”可显示图像缩略图。如：当项目为电影或电视剧时，项目可显示为电影或电视剧的海报。如项目为音乐时，可显示音乐专辑的海报。如项目为应用程序时，可显示为应用程序的图标，或当应用程序被执行最近执行时捕捉到应用程序的内容截图。如项目为用户访问历史时，可显示为最近执行过程中内容截图。“项目”可显示为视频剪辑。如：项目为电视或电视剧的预告片的视频剪辑动态画面。

此外，项目可以表示显示设备200与外接设备连接的接口或接口集合显示，或可表示连接至显示设备的外部设备名称等。如：信号源输入接口集合、或HDMI接口、USB接口、PC端子接口等。

示例的，如图8中，在第一视图显示区201中用于显示的项目主要为一些非常用功能、如时间、日期、天气等。在第二视图显示区202和第二视图显示区中均用于显示媒资数据，其中，第二视图显示区202用于显示一些热搜电影的海报，第二视图显示区202用于显示最新公映的新影片的海报。当然，在一些实施例中，还可以用于显示各种应用程序的文本和/或图标、系统相关的文本和/或图标；每个项目可以包括文本内容和/或用于显示与文本内容相关的缩略图的图像，或与文本相关的视频剪辑。

“选择器”用于指示其中任意项目已被选择，如:光标或焦点对象。根据用户通过控制装置100上输入，控制在显示设备200上光标移动来选择或控制项目。可根据用户通过控制装置100的输入，可使显示设备200中显示焦点对象的移动来选择控制项目，可选择或控制其中一个或多个项目。如：用户可通过控制装置100上方向键控制焦点对象在项目之间的移动来选择和控制项目。

焦点对象指根据用户输入在项目之间移动的对象。示例的，如图8中通过项目边缘绘制粗线来实现或标识焦点对象位置。在其他实施例中，焦点形式不限于示例，可以是光标等有形或无形可被用户识别的形态，如可以项目的3D变形等形式，也可以改变聚焦的项目的文本或图像的边框线、尺寸、颜色、透明度和轮廓和/或字体等标识。

一些实施例中，上述各视图显示区中各项目中分别关联有不同内容或链接。需要说明的是，本实施例中的视图显示区在屏幕中为横向排布，在实际应用过程中，还可以为纵向排布，或者其它任意角度排布。

事件传输系统2914，可监听到的各预定义的事件或子事件的用户输入，将识别出事件或子事件的控制直接或间接提供给界面管理模块2913。

界面管理模块2913，用于用户界面状态(包括视图分区、项目、焦点或光标对象等位置和/或大小、变化过程等)的监控，以及根据该事件或子事件，可执行界面中各视图显示区中各项目的定焦循环滚动显示、或者各项目的定焦滚动显示。

在其他一些实施例中，用户界面可包括一个或多个视图显示区，具体的，可以根据待显示不同分类内容量布局显示屏幕上的视图显示区数量。

进一步的，当上述视图显示区用于显示媒资数据时、即被作为媒资数据推荐行时，则按照固定高度、对于宽度进行等比例缩放的方式显示。具体的，其页面创建过程如下：

第一步，是数据准备的过程：

首先，UI向运营媒资数据提供方请求媒资数据，其中，该数据可以来源于一个或多个媒资数据供应方，例如，在电视开机获取到Token后，向云端请求媒资数据；然后，经过解析后得到页面构建数据数组，如利用UI-Model层的Store：Launcher Data Interface.js和Launcher.js对获取的媒资数据进行解析整合，得到Launcher-home页面展示的数据组。

本实施例以两个视图显示区用于显示电影海报为例，对应的数据组分别命名为：moviesTileListModel、luckyTileListModel，经解析后其数据结构可以包括如下内容：

根据上述海报宽度和高度，计算出在固定显示高度下，对应的显示宽度，具体如下：

widthshow＝width*(7.333/height)；//海报在电视上实际显示宽度，目前显示高度固定为220px

其中，需要注意的是，云端下发的媒资相关数据中必须有对应海报的width和height，目前launcher的设计是显示高度固定为220px，在Store中准备数据的时候，根据海报的高度和海报的尺寸比例，计算显示高度为220px时，显示宽度应该显示的值。

第二步，利用视图展示工具对上述页面构建数据数组进行布局显示。

例如，使用ListView组件创建媒资数据展示行展现上述两行数据，其中，在布局方面可以从模板(template)和ListView两个部分分别取页面构建数据数组中计算好的widthshow和固定高度进行页面布局。

具体的，在进行各项目的template绘制时，可以采用如下方式：

<hi-img:src＝"itemParas.icon":position＝"'absolute'"

class＝"TileIcon":style＝"tileItemStyle":top＝"0":width＝"itemParas.widthshow":height＝"7.

333":left＝"0"></hi-img>//template中的海报图片显示绘制

进一步的，本实施例还设置对当前焦点位置的项目标题进行显示、如海报名字进行显示，并且根据当前焦点位置的项目显示宽度和标题的长度，设置不同的项目标题显示方式。

例如，可以采用如下方式：

需要说明的是上述只是template绘制的举例，在具体实施过程中，可以根据实际需求在上述基础上进行其它改进和设计。

进一步的，在视图显示区(List)列表排列绘制时，可以采用如下方式：

首先，使用listView组件，需准备两个变量：

:DataPosition＝"moviesDataPosition"//第一行推荐媒资

:DataPosition＝"luckyDataPosition"//第二行推荐媒资

:TotalWidth＝"moviesTotalWidth"//第一行推荐媒资

:TotalWidth＝"luckyTotalWidth"//第二行推荐媒资

其中，DataPosition的具体数据结构如下：

设定某一个视图显示区内共有n个项目，对应的项目数组为[{item0}，{item1}，{item2}，…，{itemn-1}]。该项目数组中第一个项目的x方向位置为x0＝0，根据每个项目的widthShow，计算数据列表中每个项目的x方向坐标x1，x2，x3，…，xn-1，记为项目数据位置数组DataPosition＝[0,x0，x0+x1，x0+x1+x2，x0+x1+x2+x3，…，x0+x1+x2+…+xn-2],n为视图显示区中项目的总数、即数组的总长度。需要说明的是，本实施例将视图显示区内的项目排列的方向定义为横向或X轴方向。

TotalWidth：根据上述计算得到各视图显示区中所有项目显示宽度之和，记为TotalWidth。

然后，在计算list列表中每个项目的位置时，先计算外层盒子布局，再计算内层盒子(每个项目)的样式。对于各视图显示区所有的实现方式都分为两层，本实施例定义为项目队列容纳区(又可称其为外层盒子)和内层盒子。其中，外层盒子主要控制定焦显示，包含了整行的视图显示区中所有数据，在焦点对象切换动作中整行的数据会一起移动；内层盒子控制焦点对象显示样式，单指一个视图显示区中的某个项目，在焦点对象切换过程中，当前被选定的项目除了需要跟随外层盒子移动外还需要自己本身进行失焦的样式变换，同样的，将被选定的目标项目除了需要跟随外层盒子移动外还需要自己本身进行获焦的样式变换。

本实施例还提供了基于页面创建方法，所得到的页面显示效果示意图。图8中示例性示出了根据实施例中显示设备200中对运营媒资推荐行的显示效果示意图。如图8所示，在该主页中第二和第三视图显示区被用做运营媒资推荐行，来显示电影海报。虽然同一运营媒资推荐行中有不同尺寸比例和不同类型的海报，但是最终都可以按照显示高度固定、且显示宽度根据其高度缩放比例进行等比例缩放的方式显示，不仅可以保证用户界面视觉上的美观，同时还有效防止该视图显示区内的项目出现被拉伸或被压缩变形的情况。因此，本实施例提供的创建方法，可以在保证显示效果的同时还可以在同一视图显示区内展示不同尺寸的项目。

进一步的，针对上述页面创建方式，本实施例还提供了当在上述视图显示区内进行焦点对象切换时的画面展示方法。具体的，通过控制外层盒子的移动距离、内层盒子在外层盒子中的位置以及各项目的显示样式，使该视图显示区内的项目实现定焦展示。

图9中示例性示出了根据实施例中显示设备200中呈现用户界面的一种方法流程示意图。如图9所示，该方法具体包括如下步骤：

S801：接收移动所述视图显示区内的焦点对象以指示意图选择目标项目的用户输入。

接收用户输入，确定所述用户输入事件的类型，其中，显示设备200的控制器被配置为监控用户输入事件类型，如监控按键输入是否为左或者右按键指令。若监控用户输入事件是左或者右按键输入时，则进行选择器在用户界面中的位置检测，进一步，确定选择器是否位于视图显示区内的项目上，如果是，则说明该按键输入为更新该视图显示区内的焦点对象，即对应着焦点对象左移或者右移，进而响应该按键输入。

S802：控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，且保持所述焦点对象在所述视图显示区中位置顺序保持不变，以使目标项目移动至所述焦点对象所在位置。

例如，在用户按Left或Right键时，页面对于键值进行处理，做出修改当前焦点所在位置的currentIndex值的修改，即焦点对象所对应的的项目的修改，通过组件通信，将此currentIndex值传给listView组件，同时，重新计算外层盒子的位置，其中，每次外层盒子位置的变化值、即盒子移动的距离需要根据视图显示区内项目的显示宽度来定，而不是和以前一样、使用固定值，然后根据计算外层盒子结果以及更改后的焦点对应所对应的当前项目与目标项目的显示样式，驱动对view层对该视图显示区内的项目进行显示。

其中，如果未移动前所述焦点对象所处项目与目标项目为相邻的项目，则目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及位于所述目标项目和未移动前所述焦点对象所处项目之间的间隙宽度，二者宽度之和。如果所述目标项目和未移动前所述焦点对象所处项目之间间隔至少一个项目，则所述目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及所述目标项目和未移动前所述焦点对象所处项目之间各项目的显示宽度、以及所述目标项目和所述未移动前所述焦点对象所处项目之间各项目间的间隙宽度，三者宽度之和。

图10a和10b中示例性示出了根据实施例中控制装置100与显示设备200之间操作示意图。设第二视图显示区202内共有8个项目，其中，起初如在图10中，第8个项目、即项目7超出屏幕的显示范围，未在屏幕中显示出。本实施例中，第二视图显示区202中的项目，可以为媒资运营商提供的电影海报，并且该行项目采用高度固定、宽度根据其高度缩放比例进行等比例缩放的方式显示。如图10a所示，当前选择器位于第二视图显示区202中的第一个项目(项目0)、即index＝0的项目上，同时，被选中的项目，即焦点对象采用边缘绘制粗线和图标放大来进行标识。如果用户在控制装置100上输入的为右键操作，如按压一次遥控器上的右键，则说明焦点对象需要由当前的项目0切换至项目1，显示设备200响应用户输入后，呈现的界面如图10b所示，第二视图显示区202中的所有项目左移，左移距离为项目0的显示宽度，以保证切换后的焦点对象即项目1的位置仍处于图10a中焦点对象为项目0时所在的位置，实现了定焦展示，这样，用户可以方便查看被选择的项目，有效防止因在控制装置100上多次操作，不知当前焦点对象具体位置的情况。

需要说明的是，由于该视图显示区内各项目之间没有空隙，所以只移动项目0的显示宽度，如果在显示是各项目之间设置了一定的空隙，则上述移动距离还需要加上项目0和项目1之间的项目空隙。

进一步的，为方便用户查看视图显示区内的项目内容，尤其用户在进行首部、尾部之间的焦点对象的切换时，可以以更少的按键操作，快速选定所需项目，本实施例将上述视图显示区内的项目按照定焦循环方式展示，即随着项目的移动，被移出屏幕的项目可以重新在项目组的队尾出现，实现数据的循环显示。具体的，可以先判断所述视图显示区内的项目数量是否大于所述显示器的屏幕能够显示的最大项目数量。其中，如果所述视图显示区内的项目数量大于所述显示器的屏幕能够显示的最大项目数量，则控制所述视图显示区内的项目按照定焦循环方式展示；否则，则控制所述视图显示区内的项目按照定焦非循环方式展示。

然而，在目前致力于显示设备做到操作运行更流畅，且同时减少软件程序本身耗损内存量、降低生产成本的环境下，如何实现在电视上实现定焦展示的同时不影响电视性能，也是本实施例要解决的一个问题。

随着电视可以实现功能越来越多，目前电视系统通常采用具有良好的稳定性、丰富的软件支持等优点的Linux系统。图11a中示例性示出了根据实施例中显示设备200中Linux系统整体层级构造示意图。如图11a所示，该系统大体上可以分为底层驱动、中间件和上层UI三个大部分，其中，上层的UI层又可细化为数据层和视觉层，当数据层的变化时，便可以驱动视觉层的页面显示的变化。

基于上述该系统，对于用户界面的效果显示，其本质上是按键驱动页面的响应，再去执行页面上的每部分操作的过程，如下图中未Linux系统按键响应流程。图11b中示例性示出了根据实施例中显示设备200中Linux系统按键响应流程示意图。如图11b所示，其具体响应流程如下：

S1101:系统中底层驱动接收来自控制装置的按键信号。

例如，控制装置100为遥控器，当用户按遥控器右键时，遥控器发出红外线并发送至显示设备200中红外线接收接口，然后传出给底层驱动，底层驱动接收该红外线信号后，将其对应为按键码。

S1102:利用显示设备中的信号转换装置，将所述按键码转换为浏览器规则码后，发送给系统中浏览器。

例如，利用分布反馈式(DFB)半导体激光器映射所述按键码，将其转换为浏览器规则码，并将该浏览器规则码发送给显示设备系统中浏览器。

S1103:所述浏览器将所述浏览器规则码发送至给UI层。

所述浏览器接收到该浏览器规则码后，不进行按键处理，直接将其分发给UI层。

S1104:所述UI层判断其数据层中的数据是否有变化。

如果有变化，则执行步骤S1105：利用变化后的数据驱动视觉层显示的变化；否则，则执行步骤S1106:直接驱动视觉层的显示。

从上述驱动流程中可以看出，UI的展现主要基于浏览器，同在网页中一样，UI整体作为一个本地网址，例如，在电视开机过程中，驱动打开浏览器，浏览器默认打开UI的index.html以拉起UI。因此，浏览器作为UI的展现承载，起到了很重要的作用，为了减轻UI带给浏览器的压力，我们应该尽量减少加在浏览器的数据量，以及和浏览器相关的交互操作。

图11c中示例性示出了根据实施例中显示设备200中Linux系统数据交互示意图。如图11c所示，在电视上对UI进行操作，能影响到其响应速度的主要有以下几个原因：

1)数据量：数据量的多少会很明显的影响到浏览器拉起页面、页面操作的速度，数据越多，速度越慢；

2)UI视图层与其它部分的交互：UI运行过程中其视觉层基本上不涉及和底层的交互，能与底层驱动和浏览器有交互的部分是数据层，为了增加UI的操作速度，必须要减少其与UI的数据交互次数；从UI的方面讲，能够尽量减少交互次数的地方为UI的View层和Model层之间数据交互；

3)电视机本身内存、硬件的性能；

4)承载UI的浏览器本身的性能。

基于上述原因，从UI的角度能够增快运行速度的方向只有3个：减少驱动UI展现的数据量、减少UI的视觉层和数据层之间的数据交互次数；减少数据层和底层驱动之间的数据交互次数。因为电视本身的功能需求限制了第三方面的优化，所以上述前两方面进行优化。在此背景下，本实施例分别采用了以下方法去实现视图显示区内的项目按照定焦循环方式展示。

图12中示例性示出了一种显示设备200中视图显示区内的项目展示方法的流程示意图。如图12所示，该方法主要包括如下步骤：

S1201：根据所述用户输入以及所述焦点对象所对应的当前项目，确定目标项目在项目数组中的索引值。

例如，当用户按遥控器右键时，遥控器发出红外线并发送至显示设备200中红外线接收接口，然后传出给底层驱动，底层驱动接收该红外线信号后，将其对应为按键码；然后，利用显示设备200中的分布反馈式(DFB)半导体激光器映射所述按键码，将其转换为浏览器规则码，并将该浏览器规则码发送给显示设备系统中浏览器；所述浏览器接收到该浏览器规则码后，不进行按键处理，直接将其分发给UI层。UI层对该浏览器规则码进行处理，进行选择器在用户界面中的位置检测，当确定当选择器位于视图显示区内的项目上，则说明该按键输入为更新该视图显示区内的焦点对象。

进一步的，根据用户输入以及所述焦点对象所对应的当前项目在项目数组中的索引值、即currentIndex值，做出修改当前焦点所在位置currentIndex值的修改。例如焦点对象所选定的项目为图10a中的应用1、即第一个项目，则根据上述构建项目数组，其对应的currentIndex＝0，用户按了一次遥控器右键、即用户输入为焦点对象右移一个项目，则对应的新的currentIndex＝1。需要说明的是，本实施例在控制焦点对象移动时，以用户通过控制遥控器按键实现为例，在具体实施过程中，还可以采用其它方式、如通过语音控制。

S1202：根据所述索引值，确定所述视图显示区中项目队列容纳区的横向偏移量和各项目的横向偏移量。

其中，在根据所述目标项目的currentIndex值，可以通过下面的计算公式重新计算项目队列容纳区的横向偏移量、即外层盒子的translateX值：

transform:'translateX('+(-this.DataPosition[this.currentIndex]-this.listGap*this.curren tIndex)+'rem)'；

其中，this.listGap为每两项目之间的空隙；this.currentIndex：为目标项目在预设的项目数据位置数组中的位置；rem为单位；DataPosition为预先设置的项目数据位置数组，其具数据结构为[0,x₀，x₀₊x₁，x₀₊x₁₊x₂，x₀₊x₁₊x₂₊x₃，…，x₀₊x₁₊x_2+…+x_n-2],n为该视图显示区内的项目个数，x_n-1为第n个项目的显示宽度，需要说明的是，本实施例设第一个项目的初始坐标为0，当然，在具体实施过程，还可以为其它任意值。

这样，每一次相邻项目之间的焦点切换，外层盒子移动的距离根据原来焦点所在项目的实际显示宽度、以及两项目之间的空隙之和。若焦点所在位置的当前项目与目标项目之间还间隔其它项目，则外层盒子移动的距离还要加上其它项目的显示宽度以及对应项目之间的空隙。

由于我们之前已经将每个项目的位置记忆在项目数据位置数组this.DataPosition中，因此，在计算外层盒子位置的时候，可以直接从该数组中根据当前焦点所对应的currentIndex值直接取出对应的值，作为外层盒子的X轴坐标，该方式与每一次根据currentIndex值和各项目的显示宽度再做X轴位置的累加计算的方式相比，可以大大节省数据计算量。

例如，设一个视图显示区中共有8个项目，对应的项目数组为Data[{item0},{item1},{item2},...,{item7}]，每个item的宽度分别为x0,x1,x2…,x7，则此时得到的DataPosition＝[0,x0,x0+x1,x0+x1+x2,x0+x1+x2+x3,x0+x1+x2+x3+x4,x0+x1+x2+x3+x4+x5,x0+x1+x2+x3+x4+x5+x6]。

在上述数据结构下，以当前焦点从项目index＝0移动到index＝1、即从第一个项目移动到第二个项目为例：

原来外层盒子的横向偏移量：首尾留白left＝96px,currentIndex＝0，translateX＝0＝DataPosition[0]＝DataPosition[currentIndex]。

移焦点动后：currentIndex＝1，其left＝96px保持不变，translateX＝(index＝0位置的item显示宽度)，也即DataPosition[currentIndex]，显示效果如图中第二行。

综上，直接使用DataPosition，来改变外层盒子的translateX即可实现不同尺寸项目的定焦展示。

进一步的，在实现项目的循环展示时，需要依赖于内层盒子在外层盒子中的位置改变来实现。具体的，在根据所述currentIndex值，确定内层盒子的横向偏移量、即translateX值，可以采用如下计算方法：

transform:'translateX('+((this.currentIndex-index)>1？(this.TotalWidth+this.DataPosition[index]+this.listGap*index+this.firstMargin):(this.DataPosition[index]+this.listGap*index))+'rem)'；

其中，this.TotalWidth为该视图显示区内全部项目的显示宽度之和；this.DataPosition[index]为每个项目在项目数据位置数组中的位置；this.listGap*index为在该index位置之前全部缝隙之和；this.firstMargin为首尾留白。

通过上述公式可知，当根据currentIndex值，判定视图显示区内将有项目被移出屏幕，则使用下面的公式计算该将要被移出所述屏幕的项目对应的内层盒子translateX:

(this.TotalWidth+this.DataPosition[index]+this.listGap*index+

this.firstMargin)

否则，则使用下面的公式计算该视图显示区内的内层盒子translateX:

(this.DataPosition[index]+this.listGap*index))。

即通过上述公式，使将要被移出所述屏幕的项目translateX到焦点对象更新前所对应的项目队列尾部。同时，因为外层盒子同步在移动的原因，移动到队尾的项目的X轴位置，是比原来的位置增加了(this.TotalWidth+this.firstMargin)的宽度。另外，由于外层盒子需要在项目队尾放置移动过来的项目，所以其尾部宽度也会相应的增加相应的宽度，以保证更新后的焦点对象在屏幕上的显示位置固定。

S1203：根据所述项目队列容纳区的横向偏移量和各项目的横向偏移量，显示所述视图显示区内的项目。

其中，在控制外层盒子移动时，可以通过增加移动切换时间的方式，以展现定焦提供动画效果：例如，将transition:'all 180ms'；而在内层盒子移动的过程中，不添加动画。

利用本实施例中的方法，项目数组本身顺序结构不变，只是显示的时候控制了每个项目的显示位置。

图13中示例性示出了按照图12中的方法对应的实现效果示意图。需要说明的是，图13中的并不是电视屏幕中的实际显示效果图，只是代表其循环展示的示意图。如图13中的第二行，当焦点对象在index＝1位置、即第二个项目时，在此基础上若焦点对象右移一个项目，则index＝0的第一个项目将会被移出屏幕，所以需要将其移动到项目组队尾，并且将外层盒子左移第二个项目的显示宽度，以使各项目整体左移第二个项目的显示宽度，保证焦点位置固定；同时由于第一个项目被移动到队尾，所以外层盒子的尾部需要增加对应的宽度，进而可以得到如图13中的第三行的显示效果。按照上述方式继续移动，外层盒子继续左移，并且随着被移出屏幕的项目添加至队尾，其宽度也越来越宽，但是需要说明的是，外层盒子宽度的增加，只是显示区域的增加，其中并没有添加任何数据，也并不涉及其余动画，所以对于内存和性能的影响可以忽略不计。进一步的，如图13中最后一行所示，当焦点对象对应于最后一个项目时，如果用户继续按右键，则指示目标焦点对象对应于第一个项目，系统识别为该操作焦点对象左移，进而便返回到图13中第一行。

图13中示出的为用户按右键，使视觉上的焦点右移的情况，如果想要实现视觉上的焦点左移，则按照图13中箭头逆向的方式展示。

利用本实施例提供的方法，在移动用户界面中视图显示区内的焦点时，根据位于相应项目的显示宽度和项目之间的空隙，控制该视图显示区内的项目移动距离，以使目标项目移动至焦点对象所在位置，进而可以实现移动焦点时的定焦展示效果，方便用户查看被选择的项目。并且，该方法由于不涉及项目数组中数据的变化以及数据的增加，进而可以解决移动刷数据导致页面反应迟钝，以及增加虚拟数据，导致增加DOM数量浪费内存，导致启动慢的问题。

进一步的，为了方便用户识别当前焦点对应的项目，本实施例还设置在进行焦点切换实现定焦循的同时，还在预设标题显示位置、如项目的上方或者下方，显示所述目标项目对应的标题。其中，显示目标项目对应的标题时，首先判断目标项目对应的标题长度与目标项目的显示宽度的比值是否大于预设值。如果大于预设值，则将目标项目对应的标题按照跑马灯样式显示，其中，具体显示样式可以参考上述实施例；否则，则无需跑马灯样式，即将该目标项目对应的标题直接显示。

应当理解，本申请中说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，例如能够根据本申请实施例图示或描述中给出那些以外的顺序实施。本申请各实施例采用递进方式描述，各实施例之间可以相互参照。

此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖但不排他的包含，例如，包含了一系列组件的产品或设备不必限于清楚地列出的那些组件，而是可包括没有清楚地列出的或对于这些产品或设备固有的其它组件。

基于本申请中示出的示例性实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。此外，虽然本申请中公开内容按照示范性一个或几个实例来介绍，但应理解，可以就这些公开内容的各个方面也可以单独构成一个完整技术方案。

Claims (16)

1.一种显示设备，其特征在于，包括：

显示器，该显示器被配置为显示用户界面，所述用户界面包括多个视图显示区，其中，各个视图显示区中布局有一个或多个不同项目，所述视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示，该用户界面中还包括指示所述项目被选择的焦点对象；

与所述显示器通信连接的控制器，所述控制器被配置为执行呈现用户界面：

接收移动所述视图显示区内的焦点对象以指示意图选择目标项目的用户输入；

控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，且保持所述焦点对象在所述视图显示区中位置顺序保持不变，以使目标项目移动至所述焦点对象所在位置，所述视图显示区内的项目匹配有索引值，所述索引值用于指示显示所述视图显示区内的项目；

其中，所述目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及位于所述目标项目和未移动前所述焦点对象所处项目之间的间隙宽度，二者宽度之和。

2.根据权利要求1所述的显示设备，其特征在于，控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，包括：

根据所述用户输入以及所述焦点对象所对应的当前项目，确定目标项目在项目数组中的索引值；

根据所述索引值，确定所述视图显示区中项目队列容纳区的横向偏移量和各项目的横向偏移量；

根据所述项目队列容纳区的横向偏移量和各项目的横向偏移量，显示所述视图显示区内的项目。

3.根据权利要求2所述的显示设备，其特征在于，根据所述索引值，确定所述视图显示区内项目队列容纳区的横向偏移量，包括：

从预先建立好的项目数据位置数组中，查找所述索引值对应的横向坐标值；

将所述项目横向坐标值和位于所述当前项目与目标项目之间的各项目空隙值之和，作为所述视图显示区中的项目队列容纳区的横向偏移量；

其中，所述项目数据位置数组包括所述视图显示区内各项目的横向坐标值，所述各项目的横向坐标值根据各项目的显示宽度确定。

4.根据权利要求3所述的显示设备，其特征在于，所述项目数据位置数组为[0,x₀，x₀+x₁，x₀+x₁+x₂，x₀+x₁+x₂+x₃，…，x₀+x₁+x₂+…+x_n-2],其中，n为所述视图显示区内的项目个数，x_n-1为第n个项目的显示宽度。

5.根据权利要求2所述的显示设备，其特征在于，根据所述索引值，确定所述视图显示区中各项目的横向偏移量，包括：

根据所述索引值，判断所述视图显示区内是否将有项目被移出屏幕；

如果是，则所述将要被移出所述屏幕的项目对应的横向偏移量为所述视图显示区内所有项目的显示宽度、所述将要被移出所述屏幕的项目对应的横向坐标值、位于所述将要被移出所述屏幕的项目之前的各项目空隙、项目收尾留白距离之和；

其中，所述横向坐标值根据各项目的显示宽度确定。

6.根据权利要求1所述的显示设备，其特征在于，控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动之后，还包括：

判断所述视图显示区内的项目数量是否大于所述显示器的屏幕能够显示的最大项目数量；

如果所述视图显示区内的项目数量大于所述显示器的屏幕能够显示的最大项目数量，则控制所述视图显示区内的项目按照定焦循环方式展示；

如果所述视图显示区内的项目数量小于或等于所述显示器的屏幕能够显示的最大项目数量，则控制所述视图显示区内的项目按照定焦非循环方式展示。

7.根据权利要求1所述的显示设备，其特征在于，所述视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示的方法，包括

获取所述视图显示区内各项目的图像高度和宽度值；

分别根据各所述项目的图像高度和宽度比例值，计算各所述项目的显示高度为预设显示高度时对应的显示宽度；

根据所述预设显示高度和各所述项目的显示宽度，对所述视图显示区内的项目进行绘制。

8.根据权利要求7所述的显示设备，其特征在于，根据所述预设显示高度和各所述项目的显示宽度，对所述视图显示区内的项目进行绘制，包括：

根据各所述项目的显示宽度，构建项目数据位置数组，其中，所述项目数据位置数组为[0,x₀，x₀+x₁，x₀+x₁+x₂，x₀+x₁+x₂+x₃，…，x₀+x₁+x₂+…+x_n-2],其中，n为所述视图显示区内的项目个数，x_n-1为第n个项目的显示宽度；

利用总显示宽度值、所述预设显示高度以及所述项目数据位置数组，使用listView组件对所述视图显示区内的项目进行绘制，其中，所述总显示宽度值为各所述项目的显示宽度之和。

9.根据权利要求1所述的显示设备，其特征在于，所述视图显示区内的项目数据来源于一个或多个媒资数据供应方。

10.一种显示设备，其特征在于，包括：

显示器，该显示器被配置为显示用户界面，所述用户界面包括多个视图显示区，其中，各个视图显示区中布局有一个或多个不同项目，所述视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示以及，该用户界面中还包括指示所述项目被选择的焦点对象；

与所述显示器通信连接的控制器，所述控制器被配置为执行呈现用户界面：

接收移动所述视图显示区内的焦点对象以指示意图选择目标项目的用户输入，其中，所述目标项目和未移动前所述焦点对象所处项目之间间隔至少一个项目；

控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，且保持所述焦点对象在所述视图显示区中位置顺序保持不变，以使目标项目移动至所述焦点对象所在位置；

其中，所述目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及所述目标项目和未移动前所述焦点对象所处项目之间各项目的显示宽度、以及所述目标项目和所述未移动前所述焦点对象所处项目之间各项目间的间隙宽度，三者宽度之和。

11.一种用户界面显示方法，其特征在于，所述方法包括：

接收移动视图显示区内的焦点对象以指示意图选择目标项目的用户输入，其中，所述视图显示区中布局有一个或多个不同项目，所述视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示；

控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，且保持所述焦点对象在所述视图显示区中位置顺序保持不变，以使目标项目移动至所述焦点对象所在位置，所述视图显示区内的项目匹配有索引值，所述索引值用于指示显示所述视图显示区内的项目；

其中，所述目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及位于所述目标项目和未移动前所述焦点对象所处项目之间的间隙宽度，二者宽度之和。

12.根据权利要求11所述的方法，其特征在于，控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，包括：

根据所述用户输入以及所述焦点对象所对应的当前项目，确定目标项目在项目数组中的索引值；

根据所述索引值，确定所述视图显示区中项目队列容纳区的横向偏移量和各项目的横向偏移量；

根据所述项目队列容纳区的横向偏移量和各项目的横向偏移量，显示所述视图显示区内的项目。

13.根据权利要求12所述的方法，其特征在于，根据所述索引值，确定所述视图显示区内项目队列容纳区的横向偏移量，包括：

从预先建立好的项目数据位置数组中，查找所述索引值对应的横向坐标值；

将所述项目横向坐标值和位于所述当前项目与目标项目之间的各项目空隙值之和，作为所述视图显示区中的项目队列容纳区的横向偏移量；

其中，所述项目数据位置数组包括所述视图显示区内各项目的横向坐标值，所述各项目的横向坐标值根据各项目的显示宽度确定。

14.根据权利要求13所述的方法，其特征在于，所述项目数据位置数组为[0,x₀，x₀+x₁，x₀+x₁+x₂，x₀+x₁+x₂+x₃，…，x₀+x₁+x₂+…+x_n-2],其中，n为所述视图显示区内的项目个数，x_n-1为第n个项目的显示宽度。

15.根据权利要求12所述的方法，其特征在于，根据所述索引值，确定所述视图显示区中各项目的横向偏移量，包括：

根据所述索引值，判断所述视图显示区内是否将有项目被移出屏幕；

如果是，则所述将要被移出所述屏幕的项目对应的横向偏移量为所述视图显示区内所有项目的显示宽度、所述将要被移出所述屏幕的项目对应的横向坐标值、位于所述将要被移出所述屏幕的项目之前的各项目空隙、项目收尾留白距离之和；

其中，所述横向坐标值根据各项目的显示宽度确定。

16.一种用户界面显示方法，其特征在于，所述方法包括：

接收移动视图显示区内的焦点对象以指示意图选择目标项目的用户输入；其中，所述视图显示区中布局有一个或多个不同项目，所述视图显示区内的项目按照显示高度固定、显示宽度根据其高度缩放比例进行等比例缩放的方式显示，所述目标项目和未移动前所述焦点对象所处项目之间间隔至少一个项目；

控制所述视图显示区内的项目向所述焦点对象移动方向的反方向移动，且保持所述焦点对象在所述视图显示区中位置顺序保持不变，以使目标项目移动至所述焦点对象所在位置；

其中，所述目标项目移动的距离为：未移动前所述焦点对象所处项目的显示宽度、以及所述目标项目和未移动前所述焦点对象所处项目之间各项目的显示宽度、以及所述目标项目和所述未移动前所述焦点对象所处项目之间各项目间的间隙宽度，三者宽度之和。

Images