CN114385052A - 一种Tab栏的动态展示方法及三维显示设备 - Google Patents
一种Tab栏的动态展示方法及三维显示设备 Download PDFInfo
- Publication number
- CN114385052A CN114385052A CN202110324732.6A CN202110324732A CN114385052A CN 114385052 A CN114385052 A CN 114385052A CN 202110324732 A CN202110324732 A CN 202110324732A CN 114385052 A CN114385052 A CN 114385052A
- Authority
- CN
- China
- Prior art keywords
- tab
- displayed
- label
- bar
- width
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T19/00—Manipulating 3D models or images for computer graphics
- G06T19/006—Mixed reality
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9535—Search customisation based on user profiles and personalisation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Computer Graphics (AREA)
- Computer Hardware Design (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种Tab栏的动态展示方法及三维显示设备,在Tab栏中展示数个Tab标签时,按照Tab标签的标签宽度与Tab栏的待展示宽度的大小关系,将每个Tab标签以完全显示状态或未完全显示状态进行展示。在未完全显示的Tab标签获得控制焦点时,向第一方向移动Tab栏中的每个Tab标签,以将未完全显示的Tab标签以完全显示状态展示在Tab栏中。可见,该方法及三维显示设备,结合设备可以自由操作和每个Tab标签数据长度不确定性等特点,Tab栏中显示的Tab标签数量根据Tab标签本身内容动态计算,且在未完全显示的Tab标签获得控制焦点时,可以将该未完全显示的Tab标签完整地展示出来,以便用户查看。
Description
本申请要求于2020年10月19日提交国家知识产权局申请号为202011119774.8的中国专利申请的优先权。其全部内容通过结合引用结合在本申请中。
技术领域
本申请涉及智能设备制造技术领域,尤其涉及一种Tab栏的动态展示方法及三维显示设备。
背景技术
VR(Virtual Reality:虚拟现实)或AR(Augmented Reality:增强现实)是可以创建和体验虚拟世界的计算机仿真系统,它利用计算机生成一种模拟环境,使用户沉浸到该环境中。虚拟现实技术就是利用现实生活中的数据,通过计算机技术产生的电子信号,将其与各种输出设备结合使其转化为能够让人们感受到的现象,这些现象可以是现实中真切的物体,也可以是我们肉眼所看不到的物质,通过三维模型表现出来。因为这些现象不是我们直接所能看到的,而是通过计算机技术模拟出来现实中的世界,故称为虚拟现实。将VR设备和AR设备统称为三维显示设备。
在利用三维显示设备进行沉浸体验时,三维显示设备内配置虚拟现实应用,并在启动虚拟现实应用时在三维虚拟空间中呈现虚拟用户界面,虚拟用户界面中呈现可实现不同功能的应用。由于应用可根据不同的使用情况提供不同属性、类别或功能的内容,为便于对不同属性、类别或功能的内容进行展示和选择交互,通常利用Tab栏来展示上述内容。Tab栏中包括多个Tab标签,每个Tab标签对应一个属性、类别或功能,同一个Tab标签下的内容的属性、类别或功能相同。
在虚拟用户界面中展示Tab栏时,由于Tab栏中每个Tab标签的数据为互联网大数据自动推荐的数据,这些数据长度、格式存在不确定性,使得每个Tab标签的数据长度不规则,这会在Tab栏同时展示多个Tab标签时产生位于Tab栏左右两侧的Tab标签显示不全的情况。而Tab标签显示不全使得用户无法一次性查看到标签名称,导致用户无法理解该Tab标签的信息,影响用户体验。
发明内容
本申请提供了一种Tab栏的动态展示方法及三维显示设备,以解决现有的Tab栏的展示方式存在Tab标签显示不全影响用户体验的问题。
第一方面,本申请提供了一种三维显示设备,包括:
虚拟显示器,被配置为呈现展示有Tab栏的虚拟用户界面;
与所述虚拟显示器连接的控制器,所述控制器被配置为:
获取待展示的至少一个Tab标签;
如果所述Tab标签的标签宽度小于或等于Tab栏的待展示宽度,则将所述Tab标签以完全显示状态展示在所述Tab栏中;
如果所述Tab标签的标签宽度大于所述Tab栏的待展示宽度,则将所述Tab标签以未完全显示状态展示在所述Tab栏中;
在所述未完全显示的Tab标签获得控制焦点时,向第一方向移动所述Tab栏中的每个Tab标签,以将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏中,所述第一方向是指从未完全显示的Tab标签至相邻的完全显示的Tab标签的方向。
第二方面,本申请还提供了一种Tab栏的动态展示方法,所述方法包括:
获取待展示的至少一个Tab标签;
如果所述Tab标签的标签宽度小于或等于Tab栏的待展示宽度,则将所述Tab标签以完全显示状态展示在所述Tab栏中;
如果所述Tab标签的标签宽度大于所述Tab栏的待展示宽度,则将所述Tab标签以未完全显示状态展示在所述Tab栏中;
在所述未完全显示的Tab标签获得控制焦点时,向第一方向移动所述Tab栏中的每个Tab标签,以将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏中,所述第一方向是指从未完全显示的Tab标签至相邻的完全显示的Tab标签的方向。
第三方面,本申请还提供了一种存储介质,该计算机存储介质可存储有程序,该程序执行时可实现包括本申请提供的Tab栏的动态展示方法各实施例中的部分或全部步骤。
由以上技术方案可知,本发明实施例提供的一种Tab栏的动态展示方法及三维显示设备,在Tab栏中展示数个Tab标签时,按照Tab标签的标签宽度与Tab栏的待展示宽度的大小关系,将每个Tab标签以完全显示状态或未完全显示状态进行展示。在未完全显示的Tab标签获得控制焦点时,向第一方向移动Tab栏中的每个Tab标签,以将未完全显示的Tab标签以完全显示状态展示在Tab栏中,以便用户查看。可见,本发明实施例提供的方法及三维显示设备,结合三维显示设备可以自由操作和每个Tab标签数据长度的不确定性等特点,Tab栏中显示的Tab标签数量根据Tab标签本身内容动态计算,且在未完全显示的Tab标签获得控制焦点时,可以将该未完全显示的Tab标签完整地展示出来,以便用户查看。
附图说明
为了更清楚地说明本申请的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,对于本领域普通技术人员而言,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1示出了根据一些实施例的三维显示设备的虚拟用户界面的全局示意图;
图2示出了根据一些实施例的大数据信息组成的Tab栏的展示示意图;
图3示出了根据一些实施例的Tab栏的动态展示方法的流程图;
图4示出了根据一些实施例的Tab栏的区域示意图;
图5示出了根据一些实施例的Tab标签以完全显示状态进行展示的示意图;
图6示出了根据一些实施例的Tab标签以未完全显示状态进行展示的示意图;
图7示出了根据一些实施例的Tab栏展示数个Tab标签的示意图;
图8示出了根据一些实施例的计算未显示部分宽度的一种示意图;
图9示出了根据一些实施例的计算未显示部分宽度的另一种示意图;
图10(a)示出了根据一些实施例的Tab栏中存在未完全显示的Tab标签的效果示意图;
图10(b)示出了根据一些实施例的触发Tab栏中存在的未完全显示的Tab标签的效果示意图;
图11示出了根据一些实施例的基于Tab栏进行向左翻页的效果示意图;
图12示出了根据一些实施例的基于Tab栏进行向右翻页的效果示意图;
图13示出了根据一些实施例的在人物信息展示界面中展示Tab栏的效果示意图;
图14(a)示出了根据一些实施例的虚拟用户界面中呈现搜索历史界面的示意图;
图14(b)示出了根据一些实施例的在搜索历史界面中展示Tab栏的效果示意图;
图15示出了根据一些实施例的在Tab标签上添加遗留状态标识图案的效果示意图。
具体实施方式
三维显示设备包括VR(Virtual Reality:虚拟现实)设备或AR(AugmentedReality:增强现实)设备。
在利用三维显示设备进行沉浸体验时,三维显示设备内配置虚拟现实应用,并在启动虚拟现实应用时在虚拟空间中呈现虚拟用户界面,即在用户佩戴三维显示设备进行沉浸体验时,在用户的眼前呈现虚拟用户界面。虚拟用户界面中展示可实现不同业务需求的功能控件,每个业务需求对应一种功能,业务需求例如首页推荐、导航等;首页推荐页面中的2D影视、教育课程、旅游、3D、360度全景、直播、4K影视、程序应用、游戏、旅游等。
三维显示设备提供三维场景的沉浸式体验,使得三维显示设备的空间为三维空间,不同于传统的二维空间。因此,对于虚拟用户界面的布局和交互方式,不同于电视、手机等平面显示设备,三维显示设备具有控件立体布局的能力,不再局限于眼前的一张平面,而是可以在上下左右前后的360度空间内灵活布局,并随着人的头部转动看到不同的界面。
在对虚拟用户界面进行布局和交互时,为了避免将传统的二维空间布局方式简单移植到三维空间,导致的交互困难,布局不科学引发用户视角变化时与预期不符的不适感等问题,影响用户体验,可根据人的视觉特点提供不同的布局,从而提升用户体验。该布局方式旨在充分利用三维空间特点和人的视觉特点进行布局和交互,使得所有布局均在舒适体验范围内进行操作。
由于虚拟用户界面显示在三维虚拟空间内,为根据人眼的视觉特点可在三维空间内承载不同的内容,可将虚拟用户界面的全局界面整体布局围绕人眼主视角进行区域划分。其中,主视角是指用户人眼在未转动头部时可以看到的范围,三维显示设备的主视角可以理解为设备能够展示的图像范围。
根据空间布局的优势,可以在一个界面中展示更多的信息,因此,根据空间位置和人体工学特点划分功能区域,不同的功能区显示不同的内容,从而实现一次可以科学地显示更多内容。
图1示出了根据一些实施例的三维显示设备的虚拟用户界面的全局示意图。如图1所示,全局界面按照人眼主视角进行划分的区域包括:主视角区域、主视角顶部区域、主视角底部区域、主视角左侧区域和右侧区域。
主视角区域展示的是最为频繁使用的功能,即用户可使用的媒资、应用和游戏等。主视角左、右侧区域是次级方便操作的区域,用于主视角区域功能扩展。不同于二维空间内人眼视角有限的缺陷,难以在水平方向观看清楚超大视角范围内的内容。但是对于立体空间则不同,在主视角区域的两侧分别设置主视角左侧区域和右侧区域,可通过正交布局可以很方便地看到左右两侧的内容。
主视角顶部区域为常用提示信息展示区包括时间、网络、电量等信息,主视角底部区域为应用快捷入口,可实现应用切换启动。同时,在空间范围内,虚拟用户界面还支持三维模型动画展示,用于运营信息展示和入口。
在用户佩戴三维显示设备,并启动三维显示设备内配置的虚拟现实应用后,在虚拟空间中呈现虚拟用户界面。虚拟用户界面被划分为图1所示的各个区域,并在各个区域内分别展示对应的内容。
在一些实施例中,在图1所示的布局方式下,人眼正前方60度范围的视场角内是最为舒适也是最易操作的区域,所以显示的为用户最关心的内容。因此,可在虚拟用户界面的主视角区域展示最频繁使用的功能,便于用户查看。即将内容推荐区展示在主视角区域,内容推荐区如图1中(1)所示区域。
内容推荐区的顶部区域展示提示信息,包括时间、网络、电量等信息,内容推荐区的中间区域展示显示主页,内容推荐区的底部展示导航栏。显示主页用于展示包括虚拟现实应用提供不同业务需求的功能控件的页面,导航栏中显示数个导航按钮,导航按钮的设置数量可为7个或其他数值。导航栏如图1中(2)所示区域。
将提示信息、显示主页和导航栏均显示在人眼正前方60度范围内,可以更好地划分内容推荐区的内容层次关系,从而形成导航、页面集合的层级关系,支持用户更方便的浏览和查找感兴趣的内容。
在一些实施例中,在虚拟用户界面的主视角底部区域呈现包括不同属性应用的应用切换区,将应用切换区作为应用快捷入口,以快速启动应用在主页展示系统推荐的应用、热度较高、用户频繁使用的应用等,提高相应应用的更多曝光度,将上述应用推荐给用户进行使用或安装。应用切换区可展示系统为用户推荐的应用,还可展示本地安装应用,即不同属性的应用包括系统推荐应用和本地安装应用。系统推荐应用包括系统推荐安装应用和系统推荐使用应用,本地安装应用包括系统预置应用和用户安装的第三方应用。应用切换区如图1中(3)所示区域。
应用切换区位于虚拟用户界面的主页,以展示为用户推荐的应用。为了使应用切换区在展示应用时能够区分不同属性,以及,能够兼顾运营需求和用户需求,在展示虚拟用户界面时,将应用切换区进行划分,将同一属性的应用展示在同一区域内,便于用户有目的地选择交互,避免出现混乱,交互体验更好。
在一些实施例中,为便于用户在操作虚拟现实应用时,为用户提供特别推荐,例如,当前存在的活动、热映电影等信息,还可在虚拟用户界面中展示三维模型动画,三维模型动画即为消息推荐入口,UI状态可参见图1中的(4)部分所示内容。
消息推荐入口为可配置的三维动画,相比于二维图片形式,该三维动画可以灵活配置文字、图片、动画、声音等,根据运营活动需要配置,应用主动请求。
在一些实施例中,虚拟用户界面中呈现可实现不同功能的应用,通常利用Tab栏来展示不同属性、类别或功能的内容。Tab栏中包括多个Tab标签,一个Tab标签对应一个属性、类别或功能,同一个Tab标签下展示的内容的属性、类别或功能想相同。
在虚拟用户界面中展示Tab栏时,传统的Tab栏中每个Tab标签的数据长度是规则的,使得界面设计时按照规则布局,不会产生位于Tab栏的左右两头的Tab标签显示不全的问题。
但是,当前的应用都是基于互联网实现,界面数据不再是按照规则的形式定义,很多数据来自于大数据智能推荐,使得Tab栏中每个Tab标签的数据为互联网大数据自动推荐的数据,这些数据长度、格式存在不确定性,导致每个Tab标签的数据长度不规则。Tab标签的数据长度不规则会在Tab栏同时展示多个Tab标签时产生位于Tab栏左右两侧的Tab标签显示不全的情况。而Tab标签显示不全使得用户无法一次性查看到标签名称,导致用户无法理解该Tab标签的信息,影响用户体验。
图2示出了根据一些实施例的大数据信息组成的Tab栏的展示示意图。如图2所示,若在Tab栏中展示5个Tab标签时,分别为1“猜你喜欢喜剧电影”、2“猜你喜欢”、3“猜你喜欢”、4“猜你喜欢”、5“猜你喜欢刘德华的电影”。可见,每个Tab标签的数据长度并不相同,而Tab栏的预设展示宽度有限,使得第5个Tab标签在Tab栏的右侧出现显示不全的情况。用户可看到的第5个Tab标签内容为“猜你喜欢刘…”,导致用户无法具体了解该标签的实际内容,影响用户体验。
在一些实施例中,对于位于电视上的用户界面中的Tab栏,在进行交互时,通常需要持续触发遥控器方向键以将控制焦点移动到未完全显示的Tab标签上,触发该Tab标签以获知其具体信息。但是,对于三维显示设备,其交互方式不同于传统的电视、手机等,一般通过头触控点或者手柄进行交互,不再像遥控器方式进行顺序操作,而是类似鼠标一样可以自由地选择虚拟用户界面中呈现的任一UI控件进行操作。可以看出,三维显示设备的自有操作方式可以直接选中未完全显示的Tab标签来获得该标签的信息。因此,若采用传统的交互方式来获知某一Tab标签的具体信息,会从展示和交互方式角度对用户的体验带来新的问题。
在图2所示状态下,Tab栏最右侧实际上已经显示不开最后一个Tab标签,最后一个Tab标签超出的部分将不被显示。因此,为了对上述现象进行处理,传统的处理方法包括采用省略法展示Tab标签、采用跑马灯法展示Tab标签以及采用完全隐藏法展示Tab标签。
省略法是定义规则的Tab标签的显示长度,超出部分使用“…”表示。跑马灯法同样定义规则的Tab标签的显示长度,超出部分当获取焦点时以跑马灯的形式展示。完全隐藏法是对于不能完全展示Tab标签的全部隐藏不显示,但是这样Tab栏存在空白区域,不美观。可见,上述三种方法对用户的交互和体验来说,UI没关和查看信息都有一定的障碍,并不便于用户的操作,影响用户体验。
基于前述在展示Tab栏时存在的不允许显示不全的情况以及在允许显示不全时无法及时查看到具体信息的各种问题,本发明实施例提供一种三维显示设备,结合三维显示设备通过手柄或者头控触点可以自由操作的特点,结合每个Tab标签数据的不确定性,允许Tab栏显示一个或多个Tab标签,而不是固定数量的Tab标签。显示的Tab标签数量根据Tab标签本身内容动态计算,Tab栏左右两侧的Tab标签允许显示不全。
初始状态如图2所示,从Tab栏最左侧依次向右显示,只要Tab栏没有被Tab标签完全填充就显示下一个Tab标签,所以下一个Tab标签可能完全显示也可能只显示一部分。且在交互时,未完全显示的Tab标签在获得控制焦点时,可控制Tab栏的内容整体进行移动,以将该未完全显示的Tab标签完整地展示出来,以便用户查看。
在一些实施例中,可以定义TabMenuWidth:Tab栏宽度;FilledWidth:表示已经Tab栏中已经被填充的宽度;CurrentTabWidth:当前要展示的Tab宽度。在展示Tab标签时,根据Tab栏宽度和Tab栏中已经被填充的宽度的大小关系,判断是否需要渲染显示后续的Tab标签,如果Tab栏中已经被填充的宽度小于Tab栏宽度,则确定显示后续的Tab标签,在剩余宽度小于当前要展示的Tab标签宽度时,显示当前要展示的Tab标签的部分,在剩余宽度等于当前要展示的Tab标签宽度时,完全显示当前要展示的Tab标签,不再渲染显示后续的Tab标签,在剩余宽度大于当前要展示的Tab标签宽度时,完全显示当前要展示的Tab标签,并重新定义下一Tab标签作为当前要展示的Tab标签进行展示逻辑的判断。
在一些实施例中,Tab标签获得控制焦点的操作并非传统的触发遥控器方向键逐渐移动到该Tab标签的情况,而是通过与三维显示设备搭配使用的头触控点或者手柄进行交互,例如控制光标,用户可直接将控制焦点落在对应的Tab标签上,在该Tab标签获得控制焦点的过程中,无需经过其他Tab标签。因此,结合Tab栏的展示特点和三维显示设备的交互特点,相对于不能完全展示则不展示的逻辑,本申请通过Tab标签的部分展示可及时查看到未完全显示的Tab标签的具体信息,并进行光标焦点的获取,用户体验好。
图3示出了根据一些实施例的Tab栏的动态展示方法的流程图。本发明实施例提供的一种三维显示设备,包括:虚拟显示器,被配置为呈现展示有Tab栏的虚拟用户界面;与虚拟显示器连接的控制器,在执行图3所示的Tab栏的动态展示方法时,控制器被配置为执行下述步骤:
S1、获取待展示的至少一个Tab标签。
S2、如果Tab标签的标签宽度小于或等于Tab栏的待展示宽度,则将Tab标签以完全显示状态展示在Tab栏中。
S3、如果Tab标签的标签宽度大于Tab栏的待展示宽度,则将Tab标签以未完全显示状态展示在Tab栏中。
用户佩戴三维显示设备,并触发该三维显示设备中配置的虚拟现实应用,在虚拟的三维空间中生成虚拟用户界面。虚拟用户界面可参见图1所示内容,在需要进行应用的展示时,可在图1中(3)所示的应用切换区进行展示。
在启动虚拟现实应用时,在虚拟三维空间中呈现虚拟用户界面。在不同的交互场景下,虚拟用户界面中呈现适配不同交互场景的Tab栏。交互场景包括但不限于:(a)触发如图1中(2)处的导航栏中的任一个导航按钮时,在虚拟用户界面中展示对应的页面,例如,触发“教育”导航按钮时,在虚拟用户界面的内容推荐区展示“教育”功能对应的内容,上述功能对应的不同分类通过Tab标签的形式展示在顶部。(b)在搜索某个视频媒资时,对演员信息进行展示的场景,每个演员信息对应一个Tab标签,由多个表征演员信息的Tab标签组成的Tab栏显示在视频媒资名称的底部。(c)在基于某个搜索框进行信息搜索时,弹出的搜索历史界面中呈现不同的历史搜索信息,每个历史搜索信息对应一个Tab标签,数个Tab标签统一呈现在搜索历史界面中,历史搜索信息可以关键词的形式存在。
在不同的交互场景下,会存在不同的Tab标签。在进行展示时,将某一交互场景下对应的待展示的至少一个Tab标签,并在该交互场景下对应的虚拟用户界面中生成Tab栏,将至少一个Tab标签展示在Tab栏。
不同的Tab标签对应不同的属性名称、功能名称、分类名称、关键词名称等,使得每个Tab标签的数据长度不同,在视觉上,体现在每个Tab标签的标签宽度不同,标签宽度是指该Tab标签所占据位置的宽度。
在将Tab标签展示在Tab栏中时,将同一交互场景下的数个Tab标签按照既定顺序进行排列,并依次展示在Tab栏中。因虚拟用户界面的布局限制,Tab栏所能展示的内容有限,仅可在其预设展示宽度内展示Tab标签,预设展示宽度为Tab栏所能展示内容的最大宽度。可见,如果Tab标签的标签宽度较大时,Tab栏中所能展示的Tab标签的数量较少;如果Tab标签的标签宽度较小时,Tab栏中所能展示的Tab标签的数量较多。
在一些实施例中,由于Tab栏的预设展示宽度有限,且每个Tab标签的标签宽度不同,使得在展示时,会存在某个Tab标签展示不全的情况。因此,在展示某个Tab标签时,可根据Tab标签的标签宽度小于或等于Tab栏的待展示宽度的大小关系,来确定该Tab标签是否可被展示在Tab栏中,以及,若可以展示时,该Tab标签的展示形式。Tab栏的待展示宽度是指Tab栏的预设展示宽度与已经被填充的宽度的差值,即剩余宽度。
在某一交互场景下,获取对应的待展示的数个Tab标签,每个Tab标签的标签宽度不同。在进行Tab标签展示时,需判断该Tab标签是否可以展示在Tab栏的可展示范围内。因此,获取Tab栏的待展示宽度和待展示的具有不同标签宽度的至少一个Tab标签,Tab栏的待展示宽度是指Tab栏中可进行标签展示的剩余宽度。如果待展示的Tab标签的标签宽度小于或等于Tab栏的待展示宽度,说明该Tab标签可以被完全展示,则将Tab标签以完全显示状态展示在Tab栏中。如果待展示的Tab标签的标签宽度大于Tab栏的待展示宽度,说明该Tab标签无法被完全展示,仅可展示一部分,此时,将Tab标签以未完全显示状态展示在Tab栏中。
在Tab标签以未完全显示状态进行展示时,可先确定Tab标签的可展示宽度将Tab标签的可展示宽度对应的部分以未完全显示状态展示在Tab栏中,在这种情况下,Tab标签的可展示宽度与Tab栏的待展示宽度相等。
在一些实施例中,为对Tab栏的可展示范围进行限定,可以待展示宽度来表征Tab栏的可展示范围。待展示宽度对应的范围为Tab栏中未展示Tab标签的空闲区域,Tab栏的待展示宽度是指Tab栏中可进行标签展示的剩余宽度。
图4示出了根据一些实施例的Tab栏的区域示意图。参见图4中(a),在初始时刻,Tab栏中未展示任何Tab标签时,Tab栏的待展示宽度与其预设展示宽度相等,Tab栏的全部区域均为空闲区域(如图中虚线框位置),都可进行标签展示;Tab栏的待展示宽度即为空闲区域的宽度。参见图4中(b),在展示过程中,Tab栏的全部区域中的部分区域会被至少一个Tab标签填充,此时,未填充Tab标签的区域即为空闲区域,Tab栏的待展示宽度小于其预设展示宽度。若要填充下一个Tab标签,则将该Tab标签的标签宽度与该空闲区域进行对比,以确定该Tab标签的展示形式。
因此,在按照顺序依次展示每个Tab标签时,需要将指定Tab标签的标签宽度与Tab栏的待展示宽度进行对比。
图5示出了根据一些实施例的Tab标签以完全显示状态进行展示的示意图。参见图5中(a),在进行宽度对比时,可基于Tab栏建立二维坐标系,坐标原点位于Tab栏的左上角,或者位于虚拟用户界面的左上角,由左至右的方向为X轴正向,由上至下的方向为Y轴正向。
在二维坐标系中,获取Tab栏的空闲区域的左侧位置坐标A(x1,y0)和Tab栏的右侧边界的位置坐标B(x2,y0),基于空闲区域的左侧位置坐标和Tab栏的右侧边界的位置坐标,计算坐标差值L1=x2-x1,作为Tab栏的待展示宽度(空闲区域的宽度)L1。
其中,若Tab栏中原展示有Tab标签,且每个相邻Tab标签无缝隙展示时,则Tab栏的空闲区域的左侧位置坐标即为展示的最后一个Tab标签的右侧位置坐标;若Tab栏中未展示有Tab标签,则Tab栏的空闲区域的左侧位置坐标即为Tab栏的左侧边界的位置坐标。
在一些实施例中,若Tab栏为横向设置的状态,则可仅以X轴坐标值进行计算过程;若Tab栏为纵向设置的状态,则可仅以Y轴坐标值进行计算过程。若Tab栏为不规则设置的状态,则可以完整的X轴和Y轴坐标值进行计算过程。
在一些实施例中,参见图5中(b),若下一个待展示的指定Tab标签的标签宽度为H1,如果指定Tab标签的标签宽度H1小于或等于Tab栏的待展示宽度L1,说明Tab栏的空闲区域可展示得下该指定Tab标签,则将Tab标签以完全显示状态展示在Tab栏中。如果此时Tab栏中已经存在前一次展示的Tab标签,则将指定Tab标签展示在前一Tab标签的后方。参见图5中(c),如果此时Tab栏中未展示Tab标签,则将指定Tab标签展示在Tab栏的左侧初始位置。
图6示出了根据一些实施例的Tab标签以未完全显示状态进行展示的示意图。在一些实施例中,参见图6中(a),指定Tab标签的标签宽度为H2,基于前述方法获取Tab栏的空闲区域的左侧位置坐标C(x3,y0)和Tab栏的右侧边界的位置坐标D(x4,y0),计算出Tab栏的待展示宽度(空闲区域的宽度)L2=x4-x3。如果Tab标签的标签宽度H2大于Tab栏的待展示宽度L2,说明Tab栏的空闲区域无法展示得下该指定Tab标签,此时,Tab标签需以未完全显示状态展示在Tab栏中。
为确定指定Tab标签展示在Tab栏中的部分内容,需确定Tab标签的可展示宽度。在一些实施例中,Tab标签的可展示宽度与Tab栏的待展示宽度相等,即Tab标签的可展示宽度为L2。
参见图6中(b),将Tab标签的可展示宽度L2对应的部分展示在Tab栏中,此时,由于该Tab标签仅部分内容展示在Tab栏中,因此,该Tab标签的展示形式为未完全显示状态。而该Tab标签的其余部分则不显示在Tab栏中,此时,该Tab标签的其余部分H2’=H2-L2则隐藏在Tab栏的边界外侧。
在一些实施例中,Tab栏中各个Tab标签的展示顺序为从左到右的顺序进行展示,各个Tab标签之间可留存有缝隙进行区分,也可无缝隙首尾相连展示。每展示一个Tab标签均执行上述判断是否可进行展示的过程,即确定是否可展示,以及,在可展示时的展示形式(完全显示状态和未完全显示状态)。那么,在基于Tab栏的预设展示宽度进行展示时,位于Tab栏的右侧边界的Tab标签可为完全显示状态位于Tab栏中,也可为未完全显示状态位于Tab栏中(一半显示一半隐藏)。
S4、在未完全显示的Tab标签获得控制焦点时,向第一方向移动Tab栏中的每个Tab标签,以将未完全显示的Tab标签以完全显示状态展示在Tab栏中,第一方向是指从未完全显示的Tab标签至相邻的完全显示的Tab标签的方向。
在Tab栏中展示的所有Tab标签均为完全显示状态时,用户可一次性看到每个Tab标签的具体信息,用户可在展示的多个Tab标签中选择自己感兴趣的一个进行点击触发,交互体验好。
但是,若Tab栏中展示的所有Tab标签中存在未完全显示状态的Tab标签时,用户无法看到该Tab标签的具体信息。因此,为便于对每个Tab标签进行交互,可在控制焦点落在未完全显示的Tab标签上时,通过控制Tab栏中展示的所有Tab标签整体向第一方向移动,以将未完全显示的Tab标签以完全显示状态展示在Tab栏中。
如果未完全显示的Tab标签位于Tab栏的右侧,则第一方向为由右向左的方向;如果未完全显示的Tab标签位于Tab栏的左侧,则第一方向为由左向右的方向。
在一些实施例中,为确定Tab栏中的某个Tab标签获得控制焦点时,是否需要移动所有Tab标签的位置,需先判断Tab栏中是否存在未完全显示的Tab标签。判断方式可与在Tab栏中展示各个Tab标签时的方式相似,具体地,按照Tab标签的展示顺序,依次累积每个Tab标签的标签宽度,得到数个Tab标签对应的累积宽度。如果累积宽度大于预设展示宽度,则确定累积的最后一个Tab标签为未完全显示的Tab标签。
未完全显示的Tab标签为以未完全显示状态进行展示的Tab标签,即一部分内容展示在Tab栏中,另一部分内容则隐藏在Tab栏的边界外侧。因此,可根据Tab栏的预设展示宽度和Tab栏中展示的每个Tab标签的标签宽度来判断是否存在未完全显示的Tab标签。
以初始展示状态为例,Tab栏从左侧开始依次展示各个Tab标签,即位于Tab栏左侧的首位Tab标签通常为完全显示状态的标签。因此,从Tab栏的最左侧开始依次将每个Tab标签的标签宽度进行累积,累积顺序为各个Tab标签的展示顺序。
图7示出了根据一些实施例的Tab栏展示数个Tab标签的示意图。每执行一次累积过程,即判断得到的累积宽度是否超过Tab栏的预设展示宽度。参见图7,Tab栏的预设展示宽度为L0,第一次累积过程,计算第一个Tab标签对应的累积宽度D1=H1,D1<L0;第二次累积过程,计算前两个Tab标签对应的累积宽度D2=H1+H2,D2<L0;第三次累积过程,计算前三个Tab标签对应的累积宽度D3=H1+H2+H3,D3<L0;第四次累积过程,计算前四个Tab标签对应的累积宽度D4=H1+H2+H3+H4,D4<L0;第五次累积过程,计算前五个Tab标签对应的累积宽度D5=H1+H2+H3+H4+H5,D5>L0。
此时,在执行第五次累积过程时产生累积宽度大于预设展示宽度,说明最后一个累积的Tab标签并非完全显示在Tab栏中,则确定累积的最后一个Tab标签为未完全显示的Tab标签。
在一些实施例中,由于用户可以看到完全显示的Tab标签的具体信息,因此,可直接选择其中一个感兴趣的Tab标签触发。但是,如果用户想要查看未完全显示的Tab标签的具体信息,需要在未完全显示的Tab标签获得控制焦点时,移动该Tab标签的显示位置。
具体地,在查看未完全显示的Tab标签时,控制器在执行在未完全显示的Tab标签获得控制焦点时,向第一方向移动Tab栏中的每个Tab标签,被进一步配置为执行下述步骤:
步骤41、如果未完全显示的Tab标签位于Tab栏的右侧,则在未完全显示的Tab标签获得控制焦点时,将位于Tab栏左侧的Tab标签向左移动隐藏或以未完全显示状态展示,以及,将未完全显示的Tab标签向左移动以完全显示状态展示在Tab栏的右侧位置,第一方向为向左移动方向。
步骤42、如果未完全显示的Tab标签位于Tab栏的左侧,则在未完全显示的Tab标签获得控制焦点时,将位于Tab栏右侧的Tab标签向右移动隐藏或以未完全显示状态展示,以及,将未完全显示的Tab标签向右移动以完全显示状态展示在Tab栏的左侧位置,第一方向为向右移动方向。
在一些实施例中,在Tab栏的右侧存在未完全显示的Tab标签的场景下,如果用户通过手柄或头部触控点将控制焦点落在未完全显示的Tab标签上,则控制Tab栏中当前展示的所有Tab标签整体向左移动。此时,以将未完全显示的Tab标签以完全显示状态展示在Tab栏右侧位置为准,将位于Tab栏左侧的Tab标签向左移动进行隐藏或以未完全显示状态展示,需要被隐藏的Tab标签的数量可根据未完全显示的Tab标签的未显示部分宽度进行确定。
具体地,控制器在执行步骤41,即将位于Tab栏左侧的Tab标签向左移动隐藏或以未完全显示状态展示,被进一步配置为执行下述步骤:
步骤411、基于位于Tab栏右侧的未完全显示的Tab标签的左侧坐标位置和标签宽度,计算未完全显示的Tab标签的未显示部分宽度。
步骤412、在Tab栏中展示的所有Tab标签向左移动未显示部分宽度的距离时,从Tab栏左侧开始依次累积Tab栏中展示的每个Tab标签的标签宽度,得到数个Tab标签对应的累积宽度。
步骤413、如果累积宽度小于或等于未显示部分宽度,则将累积宽度对应的至少一个Tab标签隐藏。
步骤414、如果累积宽度大于未显示部分宽度,则将累积宽度对应的最后一个累积的Tab标签以未完全显示状态展示在Tab栏的左侧位置,最后一个累积的Tab标签的展示宽度为对应的标签宽度与未显示部分宽度的差值。
在触发Tab栏右侧展示的未完全显示的Tab标签时,Tab栏中的各个Tab标签整体向左移动。此时,为保证未完全显示的Tab标签能够完全显示在Tab栏中,需要将未完全显示的Tab标签的其余部分内容向左移动,因此,整体向左移动的距离即为未完全显示的Tab标签的其余部分的宽度,即未显示部分宽度。
图8示出了根据一些实施例的计算未显示部分宽度的一种示意图。参见图8中(a),Tab栏中展示的标签分别为Tab标签1、2、3、4、5,Tab标签5为未完全显示的标签,其余为完全显示的标签。此时,获取该未完全显示的Tab标签5的标签宽度H5和左侧位置坐标A(x1,y0),基于左侧位置坐标A(x1,y0)和Tab栏的右侧边界位置坐标B(x2,y0),确定出未完全显示的Tab标签5展示在Tab栏中的展示宽度H51=x2-x1,此时,确定未完全显示的Tab标签的未显示部分宽度H52=H5-H51。
可见,Tab栏中各个Tab标签向左移动的幅度均为H52。因此,在Tab栏中展示的所有Tab标签向左移动未显示部分宽度的距离H52时,从Tab栏左侧开始依次累积Tab栏中展示的每个Tab标签的标签宽度,得到数个Tab标签对应的累积宽度。累积宽度的计算方式可参照前述内容,此处不再赘述。累积方向为从左到右。
如果前n个Tab标签对应的累积宽度小于或等于未显示部分宽度,说明在移动距离H52时,该n个Tab标签将从左侧移出Tab栏的展示范围,此时,将累积宽度对应的n个Tab标签隐藏。
在此基础上,如果前n+1个Tab标签对应的累积宽度大于未显示部分宽度,说明在移动距离H52时,前n个Tab标签将移出Tab栏的展示范围,而第n+1个Tab标签未完全移出Tab栏的展示范围,此时,将累积宽度对应的第n+1个(最后一个)累积的Tab标签以未完全显示状态展示在Tab栏的左侧位置。第n+1个累积的Tab标签的标签宽度为Hn+1,且移动的距离为H52,因此,第n+1个累积的Tab标签的展示宽度Hn+1’=Hn+1-H52。
参见图8中(b),在Tab栏中展示的各个Tab标签整体向左移动时,位于最左侧的Tab标签1对应的累积宽度小于距离H52,则将Tab标签1隐藏。位于左侧前两个Tab标签1、2对应的累积宽度大于距离H52,则将Tab标签1隐藏,以及,将Tab标签2以未完全显示的状态展示在Tab栏中。Tab标签2的展示宽度H2’=H2-H52。
在一些实施例中,在触发Tab栏右侧未完全显示的Tab标签向左移动以完整展示的场景下,将位于Tab栏左侧的Tab标签向左移动隐藏或以未完全显示状态展示的方式,除采用上述计算累积宽度的方式,还可根据每个Tab标签的左右侧位置坐标与Tab栏的左侧位置坐标的大小关系进行判断。
向左移动时,如果某个Tab标签的左右侧位置坐标x左和x右均大于Tab栏的左侧位置坐标x栏左,则说明该Tab标签未移出Tab栏,可完全显示;如果x左<x栏左,x右>x栏左,则说明该Tab标签半移出Tab栏,则以未完全显示状态进行展示;如果x左<x栏左,x右<x栏左,则说明该Tab标签完全移出Tab栏,则将该Tab标签隐藏。
在一些实施例中,在Tab栏的左侧存在未完全显示的Tab标签的场景下,如果用户通过手柄或头部触控点将控制焦点落在未完全显示的Tab标签上,则控制Tab栏中当前展示的所有Tab标签整体向右移动。此时,以将未完全显示的Tab标签以完全显示状态展示在Tab栏左侧位置为准,将位于Tab栏左侧的Tab标签向右移动进行隐藏,需要被隐藏的Tab标签的数量可根据未完全显示的Tab标签的未显示部分宽度进行确定。
具体地,控制器在执行步骤42,即将位于Tab栏右侧的Tab标签向右移动隐藏或以未完全显示状态展示,被进一步配置为:
步骤421、基于位于Tab栏左侧的未完全显示的Tab标签的右侧坐标位置和标签宽度,计算未完全显示的Tab标签的未显示部分宽度。
步骤422、在Tab栏中展示的所有Tab标签向右移动未显示部分宽度的距离时,从Tab栏右侧开始依次累积Tab栏中展示的每个Tab标签的标签宽度,得到数个Tab标签对应的累积宽度。
步骤423、如果累积宽度小于或等于未显示部分宽度,则将累积宽度对应的至少一个Tab标签隐藏。
步骤424、如果累积宽度大于未显示部分宽度,则将累积宽度对应的最后一个累积的Tab标签以未完全显示状态展示在Tab栏的右侧位置,最后一个累积的Tab标签的展示宽度为对应的标签宽度与未显示部分宽度的差值。
在触发Tab栏左侧展示的未完全显示的Tab标签时,Tab栏中的各个Tab标签整体向右移动。此时,为保证未完全显示的Tab标签能够完全显示在Tab栏中,需要将未完全显示的Tab标签的其余部分内容向右移动,因此,整体向右移动的距离即为未完全显示的Tab标签的其余部分的宽度,即未显示部分宽度。
图9示出了根据一些实施例的计算未显示部分宽度的另一种示意图。参见图9中(a),Tab栏中展示的标签分别为Tab标签3、4、5、6,Tab标签3为未完全显示的标签,其余为完全显示的标签。此时,获取该未完全显示的Tab标签的标签宽度H3和右侧位置坐标C(x3,y0),基于右侧位置坐标(x3,y0)和Tab栏的左侧边界位置坐标D(x4,y0),确定出未完全显示的Tab标签展示在Tab栏中的展示宽度H31=x3-x4。最后,确定未完全显示的Tab标签的未显示部分宽度H32=H3-H31。
可见,Tab栏中各个Tab标签向右移动的幅度均为H32。因此,在Tab栏中展示的所有Tab标签向右移动未显示部分宽度的距离H32时,从Tab栏右侧开始依次累积Tab栏中展示的每个Tab标签的标签宽度,得到数个Tab标签对应的累积宽度。累积宽度的计算方式可参照前述内容,此处不再赘述。累积方向为从右到左。
如果前n个Tab标签对应的累积宽度小于或等于未显示部分宽度,说明在移动距离H32时,该n个Tab标签将从右侧移出Tab栏的展示范围,此时,将累积宽度对应的n个Tab标签隐藏。
在此基础上,如果前n+1个Tab标签对应的累积宽度大于未显示部分宽度,说明在移动距离H32时,前n个Tab标签将移出Tab栏的展示范围,而第n+1个Tab标签未完全移出Tab栏的展示范围,此时,将累积宽度对应的第n+1个(最后一个)累积的Tab标签以未完全显示状态展示在Tab栏的右侧位置。第n+1个累积的Tab标签的标签宽度为Hn+1,且移动的距离为H52,因此,第n+1个累积的Tab标签的展示宽度Hn+1’=Hn+1-H32。
参见图9中(b),在Tab栏中展示的各个Tab标签整体向右移动时,位于最右侧的Tab标签6对应的累积宽度小于距离H32,则将Tab标签6隐藏。位于右侧两个Tab标签5、6对应的累积宽度大于距离H32,则将Tab标签6隐藏,以及,将Tab标签5以未完全显示的状态展示在Tab栏中。Tab标签5的展示宽度H5’=H5-H32。
在一些实施例中,在触发Tab栏左侧未完全显示的Tab标签向右移动以完整展示的场景下,将位于Tab栏右侧的Tab标签向右移动隐藏或以未完全显示状态展示的方式,除采用上述计算累积宽度的方式,还可根据每个Tab标签的左右侧位置坐标与Tab栏的右侧位置坐标的大小关系进行判断。
向右移动时,如果某个Tab标签的左右侧位置坐标x左和x右均小于Tab栏的右侧位置坐标x栏右,则说明该Tab标签未移出Tab栏,可完全显示;如果x左<x栏右,x右>x栏右,则说明该Tab标签半移出Tab栏,则以未完全显示状态进行展示;如果x左>x栏左,x右>x栏右,则说明该Tab标签完全移出Tab栏,则将该Tab标签隐藏。
图10(a)示出了根据一些实施例的Tab栏中存在未完全显示的Tab标签的效果示意图;图10(b)示出了根据一些实施例的触发Tab栏中存在的未完全显示的Tab标签的效果示意图。在虚拟用户界面中导航栏的交互场景下,基于前述内容对Tab栏中的各个Tab标签进行交互。参见图10(a),用户触发导航栏中的“教育”按钮,在虚拟用户界面中生成“教育”展示界面,同时在该界面中存在包括多个Tab标签的Tab栏,Tab标签依次分别为“全部小学生课程”、“课前预习”、“古诗词赏析”、“期末复习”和“我爱学习一年级…”,可见,最右侧的Tab标签为未完全显示的标签。
参见图10(b),若在触发最右侧的未完全显示的“我爱学习一年级…”标签时,Tab栏中的内容整体向左移动,其中,Tab栏左侧超出部分不再显示,最右侧Tab标签获得控制焦点,并完整显示信息内容“我爱学习一年级语文”,而左侧的“全部小学生课程”标签不再完全显示,仅显示“…小学生课程”的部分内容。
可见,本发明实施例提供的三维显示设备,在对Tab栏中展示的各个Tab标签进行交互时,如果触发的是未完全显示的Tab标签,则在该Tab标签获得控制焦点时,将Tab栏中展示的各个Tab标签整体进行移动,移动方向与该Tab标签位于Tab栏的位置方向相反。移动的幅度为未完全显示的Tab标签的未显示部分宽度,在移动后,位于另一侧的Tab标签被隐藏或以未完全显示状态进行展示,而该侧的Tab标签则以完全显示状态展示在Tab栏中。因此,通过该交互过程,可使得用户在将控制焦点落在未完全显示的Tab标签上时,能够及时查看到该标签的具体信息,用户体验好。
在一些实施例中,如果待展示的Tab标签的数量较多时,无法一次性全部展示在Tab栏中,则Tab栏中可首次展示部分Tab标签,其余Tab标签可以翻页的形式进行展示。且在进行翻页时,如果当前展示的Tab标签中存在未完全显示的标签,为便于用户查看到该标签的具体信息,可在执行一次翻页时,将该未完全显示的Tab标签作为下一页展示的第一个Tab标签,即完全显示该Tab标签。
为此,为进行翻页操作,控制器被进一步配置为:
步骤51、获取待展示的Tab标签的标签数量和Tab栏中展示的Tab标签的当前展示数量,Tab栏中展示的Tab标签包括以完全显示状态展示的Tab标签和以未完全显示状态展示的Tab标签。
步骤52、如果标签数量大于当前展示数量,则在Tab栏的两侧展示翻页按钮,翻页按钮用于触发翻页操作。
由于Tab栏的展示区域有限,若需要展示的Tab标签的标签数量大于Tab标签的当前展示数量,则Tab栏无法同时展示上述数个Tab标签,此时,在Tab栏的两侧展示翻页按钮,翻页按钮用于触发翻页操作。
再次参见图10(a),如果Tab栏中当前展示的Tab标签的右侧,即按照展示顺序的后序还存在Tab标签,则在Tab的右侧展示翻页按钮。在触发右侧翻页按钮时,实现向左翻页,以查看后序待展示的Tab标签。
再次参见图10(b),如果Tab栏中当前展示的Tab标签的左侧,即按照展示顺序的前序还存在Tab标签,则在Tab的左侧展示翻页按钮。在触发左侧翻页按钮时,实现向右翻页,以查看前序待展示的Tab标签。
在一些实施例中,在执行翻页操作时,如果当前Tab栏中展示的Tab标签均为完全显示状态,则在进行翻页时,可直接获取下一标签展示页的内容并展示在Tab栏中。如果当前Tab栏中展示的Tab标签中存在未完全显示状态的标签,则在进行翻页时,将该未完全显示的Tab标签完整地展示在Tab栏的端部位置,端部位置是指Tab栏的最左侧或最右侧位置。
在一些实施例中,在操作翻页按钮对Tab栏中的内容进行翻页操作时,控制器被进一步配置为:
步骤53、接收对翻页按钮的操作,如果Tab栏中存在未完全显示的Tab标签,则将未完全显示的Tab标签以完全显示状态展示在Tab栏的端部位置。
步骤54、如果Tab栏中不存在未完全显示的Tab标签,则按照Tab栏的待展示宽度和未展示的Tab标签的标签宽度,将至少一个未展示的Tab标签展示在Tab栏中。
在对Tab栏中的内容进行翻页操作时,会存在两种应用场景。一种是Tab栏中展示的Tab标签均为完全显示状态的标签,此时,可直接按照顺序获取其他未展示的Tab标签展示在Tab栏中,以由新获取的内容替换原展示的内容,实现翻页。新获取的内容在进行展示时,按照Tab栏的待展示宽度和未展示的Tab标签的标签宽度,依次判断每个Tab标签是否可完全显示,具体实现过程可参照前述实施例的内容,此处不再赘述。
另一种是Tab栏中存在一个未完全显示的Tab标签时,此时,为便于用户能够查看到该Tab标签的完整信息,可在执行一次翻页时,将该未完全显示的Tab标签依然展示在Tab栏中,且以完全显示状态进行展示。为便于用户查看和保证每个Tab标签的展示顺序,可将未完全显示的Tab标签以完全显示状态展示在所述Tab栏的端部位置,端部位置可为Tab栏的左侧或右侧。
在一些实施例中,在执行向左翻页时,控制器在执行将未完全显示的Tab标签以完全显示状态展示在Tab栏的端部位置,被进一步配置为执行下述步骤:
步骤5311、响应于触发Tab栏右侧翻页按钮产生的向左翻页指令,将未完全显示的Tab标签以完全显示状态展示在Tab栏的左侧端部位置,以及,获取未展示的后序Tab标签。
步骤5312、将未展示的后序Tab标签按从左至右的顺序依次展示在完全显示的Tab标签的右侧。
在Tab栏展示的所有Tab标签中存在未完全显示的Tab标签的场景下,如果用户触发Tab栏右侧翻页按钮时,则产生向左翻页指令,执行向左翻页操作。
为便于用户能够在翻页的过程中获知未完全显示的Tab标签的具体信息,可将该未完全显示的Tab标签依然展示在Tab栏的左侧端部位置。
同时,获取未展示的后序Tab标签。后序Tab标签是指按照展示顺序位于当前展示的Tab标签之后的标签,后序Tab标签的获取数量以Tab栏的预设展示宽度为基准来确定,具体确定方法可参照前述实施例的内容,此处不再赘述。
在向左翻页时,各个Tab标签的展示顺序为从左至右依次排序,即未完全显示的Tab标签位于Tab栏的最左侧首位,其余后序Tab标签依次位于未完全显示的Tab标签的右侧。即执行一次向左翻页后,未完全显示的Tab标签展示在Tab栏的左侧端部位置,使得未完全显示的Tab标签左侧与Tab栏的左侧对齐,其余后序Tab标签依次向右排列展示。
在执行向左翻页时,无论未完全显示的Tab标签是位于Tab栏的右侧还是左侧,均在翻页时,将该未完全显示的Tab标签展示在Tab栏的最左侧,以在展示后序Tab标签的同时,完整地展示原未完全显示的Tab标签。
图11示出了根据一些实施例的基于Tab栏进行向左翻页的效果示意图。参见图11中(a),Tab栏中展示4个Tab标签2、3、4、5,Tab标签5为未完全显示的标签,且位于Tab栏的右侧。参见图11中(b),在触发右侧翻页按钮,执行向左翻页时,获取后序Tab标签6、7,将标签5、6、7按照由左至右的顺序展示在Tab栏中,此时,标签5位于Tab栏的最左侧,且完整显示。
在一些实施例中,在执行向右翻页时,控制器在执行将未完全显示的Tab标签以完全显示状态展示在Tab栏的端部位置,被进一步配置为执行下述步骤:
步骤5321、响应于触发Tab栏左侧翻页按钮产生的向右翻页指令,将未完全显示的Tab标签以完全显示状态展示在Tab栏的右侧端部位置,以及,获取未展示的前序Tab标签;
步骤5322、将未展示的前序Tab标签按从右至左的顺序依次展示在完全显示的Tab标签的左侧。
在Tab栏展示的所有Tab标签中存在未完全显示的Tab标签的场景下,如果用户触发Tab栏左侧翻页按钮时,则产生向右翻页指令,执行向右翻页操作。
为便于用户能够在翻页的过程中获知未完全显示的Tab标签的具体信息,可将该未完全显示的Tab标签依然展示在Tab栏的右侧端部位置。
同时,获取未展示的前序Tab标签。前序Tab标签是指按照展示顺序位于当前展示的Tab标签之前的标签,前序Tab标签的获取数量以Tab栏的预设展示宽度为基准来确定,具体确定方法可参照前述实施例的内容,区别在于展示的方向为由右至左(前述实施例的展示方向为由左至右),此处不再赘述。
在向右翻页时,各个Tab标签的展示顺序为从右至左依次排序,即未完全显示的Tab标签位于Tab栏的最右侧首位,其余后序Tab标签依次位于未完全显示的Tab标签的左侧。即执行一次向右翻页后,未完全显示的Tab标签展示在Tab栏的右侧端部位置,使得未完全显示的Tab标签右侧与Tab栏的右侧对齐,其余前序Tab标签依次向左排列展示。
在执行向右翻页时,无论未完全显示的Tab标签是位于Tab栏的右侧还是左侧,均在翻页时,将该未完全显示的Tab标签展示在Tab栏的下一标签展示页的最右侧,以在展示前序Tab标签的同时,完整地展示原未完全显示的Tab标签。
图12示出了根据一些实施例的基于Tab栏进行向右翻页的效果示意图。参见图12中(a),Tab栏中展示4个Tab标签10、11、12、13,Tab标签13为未完全显示的标签,且位于Tab栏的右侧。参见图12中(b),在触发左侧翻页按钮,执行向右翻页时,获取前序Tab标签7、8、9,将标签7、8、9、13按照由左至右的顺序展示在Tab栏中,此时,标签13依然位于Tab栏的最右侧,且完整显示。
可见,本发明实施例提供的一种三维显示设备,在基于Tab栏中展示的各个Tab标签进行翻页操作时,获取前序或后序的内容替换当前展示的内容。而如果当前展示的内容中存在未完全显示的Tab标签,则在翻页时,依然将该未完全显示的Tab标签以完全显示状态完整地展示在Tab栏的端部位置。因此,在进行翻页时,用户可在查看前序或后序Tab标签的同时,同步查看到当前页中未完全显示的Tab标签的具体信息,用户体验好。
在一些实施例中,由于在基于虚拟用户界面产生的不同交互场景下,虚拟用户界面中呈现适配不同交互场景的Tab栏。那么,在Tab栏中展示对应的Tab标签时,可采取的展示方式也会存在不同。
在一些实施例中,在搜索某个视频媒资时,对演员信息进行展示的场景,控制器在执行将至少一个Tab标签展示在Tab栏,被进一步配置为执行下述步骤:
步骤61、在展示媒资信息时,基于媒资信息包括的数个人物信息,生成具有不同标签宽度的数个Tab标签,以及,在虚拟用户界面中展示包括Tab栏的人物信息展示界面。
步骤62、基于每个人物信息的展示顺序,累积至少一个Tab标签的标签宽度,得到累积宽度。
步骤63、如果累积宽度小于或等于Tab栏的预设展示宽度,则将累积宽度对应的Tab标签展示在Tab栏中。
步骤64、如果累积宽度大于Tab栏的预设展示宽度,则将累积宽度对应的最后一个累积的Tab标签作为下一标签展示页的内容,以及,将累积宽度对应的除最后一个累积的Tab标签以外的其他Tab标签作为当前标签展示页的内容展示在Tab栏中。
在搜索某个视频媒资时,虚拟用户界面中展示媒资信息,媒资信息包括视频媒资名称、人物信息等,人物信息可为演员信息。同一个视频媒资中会存在多个演员,因此,可基于每个人物信息生成对应的Tab标签。
视频媒资名称通常展示在人物信息展示界面的顶部,而由多个表征演员信息的Tab标签组成的Tab栏显示在视频媒资名称的底部。
在一些实施例中,对于演员信息展示,只展示当前背景内可以显示完全的演员名字;左右翻页仍然保证显示出来的都是可以完全展示的。可见,在此场景下,Tab栏中只存在完全显示的Tab标签,而不存在未完全显示的Tab标签。
因此,为保证每个展示出来的Tab标签均为完全显示状态,则按照演员信息的顺序依次累积每个对应的Tab标签的标签宽度,得到对应的累积宽度。计算累积宽度的方法可参照前述实施例的内容,此处不再赘述。
如果n个Tab标签对应的累积宽度小于或等于Tab栏的预设展示宽度,说明Tab栏可完整展示该n个Tab标签,则将累积宽度对应的Tab标签展示在Tab栏中。
如果n+1个Tab标签对应的累积宽度大于Tab栏的预设展示宽度,说明Tab栏不可完整展示该n+1个Tab标签。此时,将累积宽度对应的除最后一个累积的Tab标签以外的其他Tab标签作为当前标签展示页的内容展示在Tab栏中,即将前n个Tab标签完整地展示在Tab栏中。以及,将累积宽度对应的最后一个累积的Tab标签作为下一标签展示页的内容,即将第n+1个Tab标签展示在下一标签展示页中。
图13示出了根据一些实施例的在人物信息展示界面中展示Tab栏的效果示意图。参见图13,当前Tab栏中仅完整展示两个演员的名称,而实际上还存在第三个演员“托马斯.简”。此时类似上述处理,通过整个Tab栏的预设展示宽度和计算已经显示的演员信息占据的累积宽度,判断是否还能完整显示第三个演员信息。
如不能完全显示,可以采用上述方式实现,即将第三个演员“托马斯.简”展示在下一标签展示页中。同时根据视觉效果也可以选择翻页显示,增加向右的箭头指示还有更多演员,而不会只显示第三个演员的一部分。在向左翻页时,可参照前述实施例提供的内容,以在下一标签展示页中呈现其余的完全显示的演员信息,此处不再赘述。
在一些实施例中,在基于某个搜索框进行信息搜索的场景下,搜索时弹出的搜索历史界面中呈现不同的历史搜索信息,每个历史搜索信息对应一个Tab标签,数个Tab标签统一呈现在搜索历史界面中,历史搜索信息可以关键词的形式存在。
具体地,在搜索历史界面展示Tab栏的场景下,控制器在执行将至少一个Tab标签展示在Tab栏,被进一步配置为执行下述步骤:
步骤71、接收对虚拟用户界面中呈现的搜索框的操作,获取历史搜索信息,生成具有不同标签宽度的数个Tab标签,以及,在虚拟用户界面中展示包括Tab栏的搜索历史界面,Tab栏包括数个标签展示行;
步骤72、基于每个Tab标签生成时间的时间顺序,累积至少一个Tab标签的标签宽度,得到累积宽度;
步骤73、如果累积宽度小于或等于Tab栏的预设展示宽度,则将累积宽度对应的Tab标签展示在Tab栏的底部标签展示行;
步骤74、如果累积宽度大于Tab栏的预设展示宽度,则将累积宽度对应的最后一个累积的Tab标签展示在底部标签展示行的上一标签展示行,以及,将累积宽度对应的除最后一个累积的Tab标签以外的其他Tab标签展示在底部标签展示行。
用户在利用虚拟用户界面中展示的搜索框来查询自己感兴趣的应用或媒资等时,用户可能会查询之前已经查询过的内容,因此,为便于用户的快捷搜索,可将历史搜索时使用的搜索关键词展示给用户。
图14(a)示出了根据一些实施例的虚拟用户界面中呈现搜索历史界面的示意图。参见图14(a),为此,用户将控制焦点落在搜索框上并进行点击触发,可在搜索用户界面中展示搜索历史界面,搜索历史界面中包括呈现数个标签展示行的Tab栏。同时,可获取用户在临近一段时间内进行搜索时产生的历史搜索信息,历史搜索信息可为用户每次搜索信息时使用的搜索关键词。搜索关键词的长度不同,使得在基于每个搜索关键词生成对应的Tab标签时,每个Tab标签的标签宽度不同。
在一些实施例中,历史搜索信息会同时展示给用户,便于用户快速选择一个之前使用的搜索关键词进行再次搜索。因此,需要将生成的各个Tab标签统一进行展示,且需保证每个展示出来的Tab标签均为完全显示状态。而Tab栏的预设展示宽度有限,在同一行中无法同时展示过多的Tab标签,因此,可在Tab栏中呈现多个标签展示行。
每个标签展示行由上至下依次排列,且每个标签展示行的展示宽度与Tab栏的预设展示宽度相等。位于底部的标签展示行用于展示最早产生的搜索关键词,位于顶部的标签展示行用于展示最晚(最新)产生的搜索关键词。
因此,从Tab栏的底部标签展示行开始先展示数个最早产生的历史搜索信息对应的Tab标签。展示时,按照每个Tab标签的生成时间的时间顺序,即按照从最早产生到最晚产生的时间顺序,依次累积至少一个Tab标签的标签宽度,得到累积宽度。计算累积宽度的具体实现过程可参照前述实施例的内容,此处不再赘述。Tab标签的生成时间即为对应的历史搜索信息的产生时间。
为保证每个展示出来的Tab标签均为完全显示状态,在最底部标签展示行展示多个Tab标签后,下一个Tab标签将展示在另一标签展示行中。
如果前n个Tab标签对应的累积宽度小于或等于Tab栏的预设展示宽度,说明Tab栏的底部标签展示行可完整展示该n个Tab标签,则将累积宽度对应的前n个Tab标签展示在Tab栏的底部标签展示行。
如果n+1个Tab标签对应的累积宽度大于Tab栏的预设展示宽度,说明Tab栏的底部标签展示行不可完整展示该n+1个Tab标签。此时,将累积宽度对应的除最后一个累积的Tab标签以外的其他Tab标签展示在底部标签展示行,即将前n个Tab标签完整地展示在Tab栏的底部标签展示行P1中。以及,将累积宽度对应的最后一个累积的Tab标签展示在底部标签展示行的上一标签展示行,即将第n+1个Tab标签展示在底部标签展示行的上一标签展示行P2。
在一些实施例中,位于同一标签展示行中的数个Tab标签,其展示顺序为从左至右的方向上按照Tab标签的生成时间由晚到早的顺序进行展示,即最早生成的Tab标签位于标签展示行的最右侧,最晚生成的Tab标签位于标签展示行的最左侧。
在一些实施例中,Tab栏中展示的Tab标签的总数量与标签展示行的数量、预设展示宽度和标签宽度有关,此处不具体进行限定。
在一些实施例中,由于搜索历史中的每一条历史搜索信息长度不一致,每个Tab标签的标签长度不同,使得具有相同预设展示宽度的数个标签展示行中展示的总标签宽度不同。为了展示更多的历史,采用多行显示方式,每一行都要求完整展示,展示不完整的自动切到下一样展示。
图14(b)示出了根据一些实施例的在搜索历史界面中展示Tab栏的效果示意图。参见图14(b),历史搜索信息“赌神”、“潜伏”、“心急吃不了热豆腐”是最早搜索的内容,根据标签展示行的预设展示宽度正好在一行完全显示,则显示为一行,展示在Tab栏底部标签展示行P1中。
接着搜索的“滚滚长江。。。”,由于累积宽度大于预设展示宽度,无法再在底部标签展示行P1中展示,所以另起一行展示。接着搜索的“情浓大地”、“大江东区”按照前述方法判断也需要另起一行,但是由于在一行范围内能够完全显示,所以这两条历史也会在一行显示。
按此逻辑,通过计算一行范围内能够显示的内容和已经显示的内容,来判断即将需要显示的内容是否还可以在这一行能够完全展示,如果能完全展示则现在该行;否则整体下移,在最上边起一新行进行显示。
可见,在不同的交互场景下,Tab栏中展示各个Tab标签时,部分场景下允许Tab标签以未完全显示状态进行展示,另一部分场景下只允许Tab标签完整显示。部分场景下可通过翻页操作展示Tab栏中未展示的Tab标签,另一部分场景下可同时将所有Tab标签完整展示出来。无论采用何种展示方式,均可便于用户交互,提高用户体验。
在一些实施例中,在用户基于Tab栏中的各个Tab标签进行交互时,为了更好地区分各个Tab标签的触发状态以及指示用户操作反馈,定义正常、获焦和遗留三个状态,并分别在对应的Tab标签上添加对应的标识图案,以指示用户该Tab标签已获焦。
在基于Tab栏中的各个Tab标签进行交互时,用户操作手柄或头部触控点将控制焦点移动至某个Tab标签上,则为该Tab标签添加表征获焦状态的标识图案,获焦状态的标识图案可为高亮形式。而其他Tab标签未获得控制焦点,则为每个Tab标签添加表征正常状态的标识图案,正常状态的标识图案可为透明形式。若获得控制焦点的Tab标签被触发之后,该控制焦点又移动到其他Tab标签上时,则为执行触发操作的Tab标签添加表征遗留状态的标识图案,遗留状态的标识图案可为颜色标识或带有边框的透明矩形。
在一些实施例中,在为Tab标签添加标识图案时,控制器被进一步配置为:
步骤81、在Tab栏中的任一个Tab标签获得控制焦点时,为Tab标签添加表征获焦状态的标识图案。
步骤82、如果获得控制焦点的Tab标签未进行触发操作后又丢失控制焦点,则为Tab标签添加表征正常状态的标识图案。
步骤83、如果获得控制焦点的Tab标签进行触发操作后又丢失控制焦点,则为Tab标签添加表征遗留状态的标识图案。
当用户操作控制焦点移动到某个Tab标签时高亮显示(获焦状态的标识图案),指示当前Tab标签获取焦点;而其余未获得控制焦点的Tab标签为正常状态的标识图案。例如,再次参见图10(b)所示,在用户将控制焦点移动到Tab栏最右侧的未完全显示的Tab标签“我爱学习一年级…”上时,该Tab标签高亮显示,其余Tab标签为正常状态。
由于未完全显示的Tab标签获得控制焦点后,Tab栏中展示的内容整体向左移动,此时,获焦状态的标识图案跟随该Tab标签进行移动。
若获得控制焦点的Tab标签,未执行点击操作即离开时恢复正常状态(正常状态的标识图案)。
图15示出了根据一些实施例的在Tab标签上添加遗留状态标识图案的效果示意图。参见图15,若获得控制焦点的Tab标签为“古诗词赏析”,触发该Tab标签后,切换虚拟用户界面中呈现与“古诗词赏析”对应的内容。在执行触发操作后,用户又将控制焦点从该Tab标签上离开,落在“我爱学习一年级语文”上,则为Tab标签“古诗词赏析”添加表征遗留状态的标识图案,以及,为Tab标签“我爱学习一年级语文”添加高亮显示,其余Tab标签为正常状态。
在一些实施例中,在判断某个Tab标签是否获得控制焦点时,可通过判断用户操作的手柄射出的光线是否与Tab标签相撞。相撞操作是指线的坐标是否与Tab标签的坐标相交,如果相交,则说明该光线与该Tab标签相撞,并确定该Tab标签获得控制焦点。此时,如果用户点击手柄的确定键,则可执行触发操作,以启动该Tab标签。
在一些实施例中,当用户选择Tab栏中的某个Tab标签时,即某个Tab标签获取焦点时,为展示更多的信息以便于用户可以对该Tab标签进行了解,可以同步展示标签简介等其它信息。
在一些实施例中,在展示标签信息时,控制器被进一步配置为执行下述步骤:
步骤91、在Tab栏中的任一个Tab标签获得控制焦点时,获取Tab标签的标签信息。
步骤92、基于标签信息生成浮层提示框,将浮层提示框展示在Tab标签所在位置的一侧。
Tab栏中展示有多个Tab标签,如果用户使用某个应用时对其对应的Tab标签不是很熟悉,例如不熟悉某个分类、属性、功能下对应的内容,则可将控制焦点落在该Tab标签上,将该Tab标签的标签信息生成浮层提示框,将浮层提示框展示在Tab标签所在位置的一侧。
浮层提示框中展示该Tab标签的标签信息,标签信息包括Tab标签对应的分类、属性或功能名称、简介信息等,用于对该应用进行简单的介绍,以便于用户无需触发该Tab标签即可获知其具体信息,提高用户体验。
可见,本发明实施例提供的一种三维显示设备,可根据不同的交互场景展示不同形式的Tab栏,实现Tab栏的动态展示,Tab栏按照不同展示方式展示Tab标签,可便于用户查看和交互,提高用户体验。
图3示出了根据一些实施例的Tab栏的动态展示方法的流程图。参见图3,本发明实施例提供的一种Tab栏的动态展示方法,由前述实施例提供的三维显示设备中的控制器执行,该方法包括:
S1、获取待展示的至少一个Tab标签。
S2、如果所述Tab标签的标签宽度小于或等于Tab栏的待展示宽度,则将所述Tab标签以完全显示状态展示在所述Tab栏中。
S3、如果所述Tab标签的标签宽度大于所述Tab栏的待展示宽度,则将所述Tab标签以未完全显示状态展示在所述Tab栏中。
S4、在所述未完全显示的Tab标签获得控制焦点时,向第一方向移动所述Tab栏中的每个Tab标签,以将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏中,所述第一方向是指从未完全显示的Tab标签至相邻的完全显示的Tab标签的方向。
由以上技术方案可知,本发明实施例提供的一种Tab栏的动态展示方法及三维显示设备,在Tab栏中展示数个Tab标签时,按照Tab标签的标签宽度与Tab栏的待展示宽度的大小关系,将每个Tab标签以完全显示状态或未完全显示状态进行展示。在未完全显示的Tab标签获得控制焦点时,向第一方向移动Tab栏中的每个Tab标签,以将未完全显示的Tab标签以完全显示状态展示在Tab栏中,以便用户查看。可见,本发明实施例提供的方法及三维显示设备,结合三维显示设备可以自由操作和每个Tab标签数据长度的不确定性等特点,Tab栏中显示的Tab标签数量根据Tab标签本身内容动态计算,且在未完全显示的Tab标签获得控制焦点时,可以将该未完全显示的Tab标签完整地展示出来,以便用户查看。
具体实现中,本发明还提供一种计算机存储介质,其中,该计算机存储介质可存储有程序,该程序执行时可包括本发明提供的Tab栏的动态展示方法的各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体(英文:read-only memory,简称:ROM)或随机存储记忆体(英文:random access memory,简称:RAM)等。
本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解,本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。
本说明书中各个实施例之间相同相似的部分互相参见即可。尤其,对于Tab栏的动态展示方法实施例而言,由于其基本相似于三维显示设备实施例,所以描述的比较简单,相关之处参见三维显示设备实施例中的说明即可。
最后应说明的是:以上各实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述各实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。
为了方便解释,已经结合具体的实施方式进行了上述说明。但是,上述示例性的讨论不是意图穷尽或者将实施方式限定到上述公开的具体形式。根据上述的教导,可以得到多种修改和变形。上述实施方式的选择和描述是为了更好的解释原理以及实际的应用,从而使得本领域技术人员更好的使用所述实施方式以及适于具体使用考虑的各种不同的变形的实施方式。
Claims (10)
1.一种三维显示设备,其特征在于,包括:
虚拟显示器,被配置为呈现展示有Tab栏的虚拟用户界面;
与所述虚拟显示器连接的控制器,所述控制器被配置为:
获取待展示的至少一个Tab标签;
如果所述Tab标签的标签宽度小于或等于Tab栏的待展示宽度,则将所述Tab标签以完全显示状态展示在所述Tab栏中;
如果所述Tab标签的标签宽度大于所述Tab栏的待展示宽度,则将所述Tab标签以未完全显示状态展示在所述Tab栏中;
在所述未完全显示的Tab标签获得控制焦点时,向第一方向移动所述Tab栏中的每个Tab标签,以将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏中,所述第一方向是指从未完全显示的Tab标签至相邻的完全显示的Tab标签的方向。
2.根据权利要求1所述的三维显示设备,其特征在于,所述控制器在执行所述在所述未完全显示的Tab标签获得控制焦点时,向第一方向移动所述Tab栏中的每个Tab标签,被进一步配置为:
如果所述未完全显示的Tab标签位于所述Tab栏的右侧,则在所述未完全显示的Tab标签获得控制焦点时,将位于所述Tab栏左侧的Tab标签向左移动隐藏或以未完全显示状态展示,以及,将所述未完全显示的Tab标签向左移动以完全显示状态展示在所述Tab栏的右侧位置,所述第一方向为向左移动方向;
如果所述未完全显示的Tab标签位于所述Tab栏的左侧,则在所述未完全显示的Tab标签获得控制焦点时,将位于所述Tab栏右侧的Tab标签向右移动隐藏或以未完全显示状态展示,以及,将所述未完全显示的Tab标签向右移动以完全显示状态展示在所述Tab栏的左侧位置,所述第一方向为向右移动方向。
3.根据权利要求2所述的三维显示设备,其特征在于,所述控制器在执行所述将位于所述Tab栏左侧的Tab标签向左移动隐藏或以未完全显示状态展示,被进一步配置为:
基于位于Tab栏右侧的所述未完全显示的Tab标签的左侧坐标位置和标签宽度,计算所述未完全显示的Tab标签的未显示部分宽度;
在所述Tab栏中展示的所有Tab标签向左移动所述未显示部分宽度的距离时,从所述Tab栏左侧开始依次累积Tab栏中展示的每个Tab标签的标签宽度,得到数个Tab标签对应的累积宽度;
如果所述累积宽度小于或等于未显示部分宽度,则将所述累积宽度对应的至少一个Tab标签隐藏;
如果所述累积宽度大于未显示部分宽度,则将所述累积宽度对应的最后一个累积的Tab标签以未完全显示状态展示在所述Tab栏的左侧位置,所述最后一个累积的Tab标签的展示宽度为对应的标签宽度与所述未显示部分宽度的差值。
4.根据权利要求2所述的三维显示设备,其特征在于,所述控制器在执行所述将位于所述Tab栏右侧的Tab标签向右移动隐藏或以未完全显示状态展示,被进一步配置为:
基于位于Tab栏左侧的所述未完全显示的Tab标签的右侧坐标位置和标签宽度,计算所述未完全显示的Tab标签的未显示部分宽度;
在所述Tab栏中展示的所有Tab标签向右移动所述未显示部分宽度的距离时,从所述Tab栏右侧开始依次累积Tab栏中展示的每个Tab标签的标签宽度,得到数个Tab标签对应的累积宽度;
如果所述累积宽度小于或等于未显示部分宽度,则将所述累积宽度对应的至少一个Tab标签隐藏;
如果所述累积宽度大于未显示部分宽度,则将所述累积宽度对应的最后一个累积的Tab标签以未完全显示状态展示在所述Tab栏的右侧位置,所述最后一个累积的Tab标签的展示宽度为对应的标签宽度与所述未显示部分宽度的差值。
5.根据权利要求1所述的三维显示设备,其特征在于,所述控制器被进一步配置为:
获取待展示的所述Tab标签的标签数量和所述Tab栏中展示的Tab标签的当前展示数量,所述Tab栏中展示的Tab标签包括以完全显示状态展示的Tab标签和以未完全显示状态展示的Tab标签;
如果所述标签数量大于所述当前展示数量,则在所述Tab栏的两侧展示翻页按钮,所述翻页按钮用于触发翻页操作。
6.根据权利要求5所述的三维显示设备,其特征在于,所述控制器被进一步配置为:
接收对所述翻页按钮的操作,如果所述Tab栏中存在未完全显示的Tab标签,则将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏的端部位置;
如果所述Tab栏中不存在未完全显示的Tab标签,则按照所述Tab栏的待展示宽度和未展示的Tab标签的标签宽度,将至少一个未展示的Tab标签展示在所述Tab栏中。
7.根据权利要求6所述的三维显示设备,其特征在于,所述控制器在执行所述将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏的端部位置,被进一步配置为:
响应于触发所述Tab栏右侧翻页按钮产生的向左翻页指令,将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏的左侧端部位置,以及,获取未展示的后序Tab标签;
将所述未展示的后序Tab标签按从左至右的顺序依次展示在完全显示的Tab标签的右侧。
8.根据权利要求6所述的三维显示设备,其特征在于,所述控制器在执行所述将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏的端部位置,被进一步配置为:
响应于触发所述Tab栏左侧翻页按钮产生的向右翻页指令,将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏的右侧端部位置,以及,获取未展示的前序Tab标签;
将所述未展示的前序Tab标签按从右至左的顺序依次展示在完全显示的Tab标签的左侧。
9.根据权利要求1所述的三维显示设备,其特征在于,所述控制器被进一步配置为:
在所述Tab栏中的任一个Tab标签获得控制焦点时,获取所述Tab标签的标签信息;
基于所述标签信息生成浮层提示框,将所述浮层提示框展示在所述Tab标签所在位置的一侧。
10.一种Tab栏的动态展示方法,其特征在于,所述方法包括:
获取待展示的至少一个Tab标签;
如果所述Tab标签的标签宽度小于或等于Tab栏的待展示宽度,则将所述Tab标签以完全显示状态展示在所述Tab栏中;
如果所述Tab标签的标签宽度大于所述Tab栏的待展示宽度,则将所述Tab标签以未完全显示状态展示在所述Tab栏中;
在所述未完全显示的Tab标签获得控制焦点时,向第一方向移动所述Tab栏中的每个Tab标签,以将所述未完全显示的Tab标签以完全显示状态展示在所述Tab栏中,所述第一方向是指从未完全显示的Tab标签至相邻的完全显示的Tab标签的方向。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
PCT/CN2021/124457 WO2022083554A1 (zh) | 2020-10-19 | 2021-10-18 | 用户界面的布局、交互方法及三维显示设备 |
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN2020111197748 | 2020-10-19 | ||
CN202011119774 | 2020-10-19 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN114385052A true CN114385052A (zh) | 2022-04-22 |
CN114385052B CN114385052B (zh) | 2023-10-20 |
Family
ID=77572931
Family Applications (5)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110324509.1A Active CN114442872B (zh) | 2020-10-19 | 2021-03-26 | 一种虚拟用户界面的布局、交互方法及三维显示设备 |
CN202110324732.6A Active CN114385052B (zh) | 2020-10-19 | 2021-03-26 | 一种Tab栏的动态展示方法及三维显示设备 |
CN202110361156.2A Pending CN114443945A (zh) | 2020-10-19 | 2021-04-02 | 一种虚拟用户界面中应用图标的展示方法及三维显示设备 |
CN202110360910.0A Pending CN114385886A (zh) | 2020-10-19 | 2021-04-02 | 一种内容搜索方法及三维显示设备 |
CN202110640803.3A Active CN113377472B (zh) | 2020-10-19 | 2021-06-09 | 一种账号登录方法及三维显示设备、服务器 |
Family Applications Before (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110324509.1A Active CN114442872B (zh) | 2020-10-19 | 2021-03-26 | 一种虚拟用户界面的布局、交互方法及三维显示设备 |
Family Applications After (3)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110361156.2A Pending CN114443945A (zh) | 2020-10-19 | 2021-04-02 | 一种虚拟用户界面中应用图标的展示方法及三维显示设备 |
CN202110360910.0A Pending CN114385886A (zh) | 2020-10-19 | 2021-04-02 | 一种内容搜索方法及三维显示设备 |
CN202110640803.3A Active CN113377472B (zh) | 2020-10-19 | 2021-06-09 | 一种账号登录方法及三维显示设备、服务器 |
Country Status (1)
Country | Link |
---|---|
CN (5) | CN114442872B (zh) |
Families Citing this family (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2022083554A1 (zh) * | 2020-10-19 | 2022-04-28 | 聚好看科技股份有限公司 | 用户界面的布局、交互方法及三维显示设备 |
CN114302242B (zh) * | 2022-01-25 | 2023-10-31 | 聚好看科技股份有限公司 | 一种媒资推荐方法、显示设备及服务器 |
CN115113780B (zh) * | 2022-06-13 | 2023-05-12 | 荣耀终端有限公司 | 一种页面切换方法、装置和终端设备 |
CN115202543A (zh) * | 2022-07-28 | 2022-10-18 | 京东方科技集团股份有限公司 | 书籍式导航栏的生成、切换方法、装置、设备及存储介质 |
Citations (20)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101060579A (zh) * | 2006-04-21 | 2007-10-24 | 株式会社东芝 | 显示控制装置、图像处理装置、显示控制方法 |
US20110138313A1 (en) * | 2009-12-03 | 2011-06-09 | Kevin Decker | Visually rich tab representation in user interface |
CN102929997A (zh) * | 2012-10-24 | 2013-02-13 | 北京奇虎科技有限公司 | 浏览器标签的显示方法及装置 |
CN103823631A (zh) * | 2014-02-27 | 2014-05-28 | 北京六间房科技有限公司 | 一种标签显示方法 |
CN103970894A (zh) * | 2014-05-27 | 2014-08-06 | 合一网络技术(北京)有限公司 | 自适应调整的界面流式布局显示的方法和系统 |
US20150277676A1 (en) * | 2014-03-31 | 2015-10-01 | International Business Machines Corporation | Creating an interaction area for listing user-selectable items |
US20160357357A1 (en) * | 2015-06-07 | 2016-12-08 | Apple Inc. | Device, Method, and Graphical User Interface for Manipulating Related Application Windows |
CN106599263A (zh) * | 2016-12-21 | 2017-04-26 | 广州阿里巴巴文学信息技术有限公司 | 一种内容筛选方法、系统及用户终端 |
WO2017118329A1 (zh) * | 2016-01-07 | 2017-07-13 | 阿里巴巴集团控股有限公司 | 标签栏的控制方法和装置 |
CN108363814A (zh) * | 2018-03-15 | 2018-08-03 | 上海哔哩哔哩科技有限公司 | 标签设置方法、服务器及标签设置系统 |
CN108810605A (zh) * | 2018-03-16 | 2018-11-13 | 青岛海信电器股份有限公司 | 系列标签中单个标签的位置调整方法及显示终端 |
EP3458942A1 (en) * | 2016-06-22 | 2019-03-27 | Siemens Aktiengesellschaft | Display of three-dimensional model information in virtual reality |
US20190156558A1 (en) * | 2016-08-31 | 2019-05-23 | Factualvr, Inc. | Virtual reality system |
CN109889649A (zh) * | 2018-11-12 | 2019-06-14 | 魏新成 | 通过左右划行切换手机通讯社交应用子窗口的方法和系统 |
CN110337034A (zh) * | 2019-07-12 | 2019-10-15 | 青岛海信传媒网络技术有限公司 | 用户界面显示方法及显示设备 |
CN110443083A (zh) * | 2018-05-04 | 2019-11-12 | 脸谱科技有限责任公司 | 虚拟现实环境中的用户界面安全性 |
CN110599899A (zh) * | 2019-09-19 | 2019-12-20 | Oppo广东移动通信有限公司 | 标签显示方法、装置、电子设备以及存储介质 |
CN111177499A (zh) * | 2019-12-27 | 2020-05-19 | 腾讯科技(深圳)有限公司 | 一种标签的添加方法、装置及计算机可读存储介质 |
CN111277907A (zh) * | 2020-01-16 | 2020-06-12 | 海信视像科技股份有限公司 | 显示设备以及用户界面的呈现方法 |
CN111757154A (zh) * | 2020-06-01 | 2020-10-09 | 海信电子科技(深圳)有限公司 | 一种遥控器控制网页光标的方法及显示设备 |
Family Cites Families (25)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN100514337C (zh) * | 2007-09-10 | 2009-07-15 | 腾讯科技(深圳)有限公司 | 关键词的联想信息生成系统和生成方法 |
US20120320080A1 (en) * | 2011-06-14 | 2012-12-20 | Microsoft Corporation | Motion based virtual object navigation |
US9122372B2 (en) * | 2012-06-18 | 2015-09-01 | Allen Learning Technologies | Event flow user interface |
CN104253784B (zh) * | 2013-06-25 | 2018-10-09 | 腾讯科技(深圳)有限公司 | 登录和授权的方法、系统、第三方终端及互联服务器 |
CN104320703A (zh) * | 2014-10-30 | 2015-01-28 | 深圳市同洲电子股份有限公司 | 一种智能电视终端登录的方法、装置及系统 |
CN106936803B (zh) * | 2015-12-31 | 2020-12-29 | 亿阳安全技术有限公司 | 二维码扫描认证登录方法及相关装置 |
CN105931077A (zh) * | 2016-04-20 | 2016-09-07 | 北京盛世光明软件股份有限公司 | 一种浏览器广告展示的方法、装置和终端 |
CN107332808B (zh) * | 2016-04-29 | 2021-06-29 | 中兴通讯股份有限公司 | 一种云桌面认证的方法、服务器及终端 |
CN109219795A (zh) * | 2016-07-05 | 2019-01-15 | 深圳脑穿越科技有限公司 | 页面切换方法、装置、终端以及存储介质 |
CN106293395A (zh) * | 2016-08-03 | 2017-01-04 | 深圳市金立通信设备有限公司 | 一种虚拟现实眼镜及其界面交互方法 |
US11032535B2 (en) * | 2016-09-19 | 2021-06-08 | Verizon Patent And Licensing Inc. | Generating a three-dimensional preview of a three-dimensional video |
CN106649508A (zh) * | 2016-10-12 | 2017-05-10 | 北京小米移动软件有限公司 | 页面显示方法及装置、电子设备 |
CN106774823A (zh) * | 2016-11-11 | 2017-05-31 | 奇酷互联网络科技(深圳)有限公司 | 虚拟现实设备及其输入方法 |
CN107045413A (zh) * | 2017-04-05 | 2017-08-15 | 珠海市魅族科技有限公司 | 应用程序图标的显示方法和装置 |
CN111279302A (zh) * | 2017-08-29 | 2020-06-12 | 深圳传音通讯有限公司 | 一种用于智能终端的图标显示方法及图标显示装置 |
CN109639622B (zh) * | 2017-10-09 | 2021-02-12 | 腾讯科技(深圳)有限公司 | 离线应用登录方法、终端及服务器 |
CN108845754B (zh) * | 2018-07-03 | 2022-09-30 | 西交利物浦大学 | 用于移动虚拟现实头戴显示器的无驻留文本输入方法 |
CN109407916A (zh) * | 2018-08-27 | 2019-03-01 | 华为技术有限公司 | 数据搜索的方法、终端、用户图像显示界面以及存储介质 |
CA3031479A1 (en) * | 2019-01-25 | 2020-07-25 | Jonathan Gagne | Computer animation methods and systems |
CN110209320B (zh) * | 2019-06-06 | 2021-04-02 | 掌阅科技股份有限公司 | 页面中有声书籍播放进度的联动展现方法及电子设备 |
CN110708343B (zh) * | 2019-11-19 | 2021-08-06 | 腾讯科技(深圳)有限公司 | 帐号登录的方法、装置、设备及存储介质 |
CN111142756A (zh) * | 2019-12-25 | 2020-05-12 | 上海传英信息技术有限公司 | 页面显示方法、设备及计算机可读存储介质 |
CN111460423B (zh) * | 2020-03-03 | 2023-02-28 | 深圳市思迪信息技术股份有限公司 | 一种二维码扫描登录的方法及装置 |
CN111475132A (zh) * | 2020-04-07 | 2020-07-31 | 捷开通讯(深圳)有限公司 | 虚拟或增强现实文字输入方法、系统及存储介质 |
CN112272182B (zh) * | 2020-10-28 | 2023-11-21 | 网易传媒科技(北京)有限公司 | 一种应用登录方法、服务器、设备、介质和计算设备 |
-
2021
- 2021-03-26 CN CN202110324509.1A patent/CN114442872B/zh active Active
- 2021-03-26 CN CN202110324732.6A patent/CN114385052B/zh active Active
- 2021-04-02 CN CN202110361156.2A patent/CN114443945A/zh active Pending
- 2021-04-02 CN CN202110360910.0A patent/CN114385886A/zh active Pending
- 2021-06-09 CN CN202110640803.3A patent/CN113377472B/zh active Active
Patent Citations (21)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101060579A (zh) * | 2006-04-21 | 2007-10-24 | 株式会社东芝 | 显示控制装置、图像处理装置、显示控制方法 |
US20110138313A1 (en) * | 2009-12-03 | 2011-06-09 | Kevin Decker | Visually rich tab representation in user interface |
CN102929997A (zh) * | 2012-10-24 | 2013-02-13 | 北京奇虎科技有限公司 | 浏览器标签的显示方法及装置 |
CN103823631A (zh) * | 2014-02-27 | 2014-05-28 | 北京六间房科技有限公司 | 一种标签显示方法 |
US20150277676A1 (en) * | 2014-03-31 | 2015-10-01 | International Business Machines Corporation | Creating an interaction area for listing user-selectable items |
CN103970894A (zh) * | 2014-05-27 | 2014-08-06 | 合一网络技术(北京)有限公司 | 自适应调整的界面流式布局显示的方法和系统 |
US20160357357A1 (en) * | 2015-06-07 | 2016-12-08 | Apple Inc. | Device, Method, and Graphical User Interface for Manipulating Related Application Windows |
WO2017118329A1 (zh) * | 2016-01-07 | 2017-07-13 | 阿里巴巴集团控股有限公司 | 标签栏的控制方法和装置 |
EP3458942A1 (en) * | 2016-06-22 | 2019-03-27 | Siemens Aktiengesellschaft | Display of three-dimensional model information in virtual reality |
US20190156558A1 (en) * | 2016-08-31 | 2019-05-23 | Factualvr, Inc. | Virtual reality system |
CN106599263A (zh) * | 2016-12-21 | 2017-04-26 | 广州阿里巴巴文学信息技术有限公司 | 一种内容筛选方法、系统及用户终端 |
CN108363814A (zh) * | 2018-03-15 | 2018-08-03 | 上海哔哩哔哩科技有限公司 | 标签设置方法、服务器及标签设置系统 |
CN108810605A (zh) * | 2018-03-16 | 2018-11-13 | 青岛海信电器股份有限公司 | 系列标签中单个标签的位置调整方法及显示终端 |
CN108810603A (zh) * | 2018-03-16 | 2018-11-13 | 青岛海信电器股份有限公司 | 多个对象之间排序时的编辑方法及显示终端 |
CN110443083A (zh) * | 2018-05-04 | 2019-11-12 | 脸谱科技有限责任公司 | 虚拟现实环境中的用户界面安全性 |
CN109889649A (zh) * | 2018-11-12 | 2019-06-14 | 魏新成 | 通过左右划行切换手机通讯社交应用子窗口的方法和系统 |
CN110337034A (zh) * | 2019-07-12 | 2019-10-15 | 青岛海信传媒网络技术有限公司 | 用户界面显示方法及显示设备 |
CN110599899A (zh) * | 2019-09-19 | 2019-12-20 | Oppo广东移动通信有限公司 | 标签显示方法、装置、电子设备以及存储介质 |
CN111177499A (zh) * | 2019-12-27 | 2020-05-19 | 腾讯科技(深圳)有限公司 | 一种标签的添加方法、装置及计算机可读存储介质 |
CN111277907A (zh) * | 2020-01-16 | 2020-06-12 | 海信视像科技股份有限公司 | 显示设备以及用户界面的呈现方法 |
CN111757154A (zh) * | 2020-06-01 | 2020-10-09 | 海信电子科技(深圳)有限公司 | 一种遥控器控制网页光标的方法及显示设备 |
Also Published As
Publication number | Publication date |
---|---|
CN114443945A (zh) | 2022-05-06 |
CN114442872A (zh) | 2022-05-06 |
CN114385052B (zh) | 2023-10-20 |
CN113377472A (zh) | 2021-09-10 |
CN113377472B (zh) | 2022-09-09 |
CN114385886A (zh) | 2022-04-22 |
CN114442872B (zh) | 2023-10-27 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN114385052B (zh) | 一种Tab栏的动态展示方法及三维显示设备 | |
AU2022271460B2 (en) | Matching content to a spatial 3D environment | |
US11645034B2 (en) | Matching content to a spatial 3D environment | |
US20110093889A1 (en) | User interface for interactive digital television | |
Francone et al. | Using the user's point of view for interaction on mobile devices | |
US20210042809A1 (en) | System and method for intuitive content browsing | |
US11039196B2 (en) | Method and device for displaying a screen shot | |
WO2022218146A1 (en) | Devices, methods, systems, and media for an extended screen distributed user interface in augmented reality | |
Grubert et al. | Exploring the design of hybrid interfaces for augmented posters in public spaces | |
KR102391719B1 (ko) | 다이나믹 디지털 콘텐츠의 디스플레이 방법, 그래픽 사용자 인터페이스 장치와 시스템 | |
JP3711025B2 (ja) | 仮想現実空間移動制御装置 | |
WO2020063095A1 (zh) | 一种截图显示方法及设备 | |
Bettio et al. | A novel approach for exploring annotated data with interactive lenses | |
JP2003317116A (ja) | 3次元仮想空間における情報提示装置及び情報提示方法、並びにコンピュータ・プログラム | |
Looser | Ar magic lenses: Addressing the challenge of focus and context in augmented reality | |
US11443652B2 (en) | Terminal and system for learning artist's style | |
CN113918011A (zh) | 虚拟环境下的可视化对象、扩展现实设备以及应用方法 | |
WO2023215637A1 (en) | Interactive reality computing experience using optical lenticular multi-perspective simulation | |
Zhang et al. | A study of animated transition in similarity-based tiled image layout | |
CN117788689A (zh) | 一种基于三维建模的可交互式虚拟云展厅构建方法及系统 | |
Jankowski | Hypertextualized Virtual Environments: Dual-Mode User Interface Design | |
Bladh | Towards an understanding of dynamics in information visualization | |
Counsell | Pointing the finger; a role for hybrid representations in VR and video? |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |