用户界面树形结构显示方法及系统技术方案

技术编号:10053642 阅读:279 留言:0更新日期:2014-05-16 02:21
本发明专利技术提供了一种用户界面树形结构显示方法及系统,包括:自动生成并显示根节点列表;根据接收到的用户指令,生成并显示相应根节点的各级子节点列表;其中,所述根节点列表和各级子节点列表均包括显示区域沿界面纵向依次排列的一个或多个节点,且所述各级子节点列表的显示区域沿界面横向依次排列。本发明专利技术不仅能够充分利用用户的界面纵向和横向空间,避免局部界面空白、显示效果不佳的问题,而且能够使树形结构的层次更加分明,从而能够迅速地找到需要的节点,提高用户的使用效率以及体验效果。

【技术实现步骤摘要】
用户界面树形结构显示方法及系统
本专利技术涉及人机交互
,更具体地说,涉及一种用户界面树形结构显示方法及系统。
技术介绍
软件设计可分为两个部分:编码设计与UI(UserInterface,用户界面)设计。UI设计,是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计的内容包括树形结构的设计。树形结构是一种可以分级显示项目列表的窗口,其所含项目以相互关联的方式显示在控件中,通过点击位于某一级的项目节点展开下一级中从属于该节点的所有项目。虽然树形结构控件非常适合管理那些层次较多且相互间隶属关系较为清晰的项目元素,但是,现有的树控件无法满足特殊的业务特性。现有的树形结构都是通过上下结构显示根节点以及子节点的,如图1所示,下一级节点的显示区域均位于上一级节点显示区域的下方。但是,当节点较多或节点的层级较多时,能够显示各层级节点的界面纵向空间有限,而其界面的横向空间并未完全利用,因此,会造成界面局部空间空白,显示效果不佳,用户体验不理想的问题。
技术实现思路
有鉴于此,本专利技术提供了一种用户界面显示系统及方法,以解决现有技术中采用上下结构显示树形结构时,造成的界面局部界面空白,显示效果不佳,用户体验不理想的问题。为实现上述目的,本专利技术提供如下技术方案:一种用户界面树形结构显示方法,包括:自动生成并显示根节点列表;根据接收到的用户指令,生成并显示相应根节点的各级子节点列表;其中,所述根节点列表和各级子节点列表均包括显示区域沿界面纵向依次排列的一个或多个节点,且所述各级子节点列表的显示区域沿界面横向依次排列。优选的,所述用户的指令为用户通过鼠标移入操作、键盘方向键操作或触屏触控操作输入的指令。优选的,接收到用户指令时,生成并显示所述节点的子节点列表,隐藏所述节点同一级的其他节点的子节点列表。优选的,子节点列表中排列在第一个的第一节点的显示区域与其对应的上一级节点的显示区域在同一条直线上。优选的,接收到用户指令时,如果生成的子节点列表的显示区域超出当前显示界面时,所述显示界面的滚动条自动移动,以显示所述子节点列表。优选的,当同一列表中的多个节点的子节点相同时,将所述多个节点沿界面纵向依次排列在同一显示区域内,并在接收到用户指令后,在所述显示区域右侧生成并显示对应所述多个节点的同一子节点列表。优选的,用于科目选择时,每一个节点对应一个科目,则所述方法还包括:根据显示的各级子科目列表,选择用户需要的科目。优选的,当用户选择的科目为单个的科目时,可以通过点击所述科目对应的显示区域来选中所述科目;当用户选择的科目为同一子科目列表中的全部科目时,可以通过选中所述子科目列表对应的上一级科目,来选中所述子科目列表中的全部科目。一种用户界面树形结构显示系统,包括:树形结构控制模块,用于自动生成根节点列表,并根据接收到的用户指令生成相应的根节点的各级子节点列表;显示控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列,以及控制所述各级子节点列表的显示区域沿界面横向依次排列。优选的,所述显示控制模块包括:第一显示区域控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列;第二显示区域控制模块,用于控制各级子节点列表的显示区域沿界面横向依次排列;第三显示区域控制模块,用于控制子节点列表中排列在第一个的第一节点的显示区域与其对应的上一级节点的显示区域在同一条直线上。优选的,所述显示控制模块还包括:界面显示控制模块,用于当生成的子节点列表的显示区域超出用户的当前显示界面时,移动显示界面的滚动条来显示所述子节点列表。优选的,所述显示控制模块还包括:合并显示模块,用于当同一列表中的多个节点的子节点相同时,将所述多个节点沿界面纵向依次排列在同一显示区域内,并在所述显示区域右侧显示对应所述多个节点的同一子节点列表。与现有技术相比,本专利技术所提供的技术方案具有以下优点:本专利技术所提供的用户界面树形结构显示方法及系统,由于根节点列表和各级子节点列表中节点的显示区域沿界面纵向依次排列,即从上往下依次排列,因此,充分利用了用户界面的纵向空间,又由于各级子节点列表沿界面横向依次排列,即从左往右依次排列,充分利用了用户界面的横向空间,因此,本专利技术不仅能够充分利用用户的界面空间,避免局部界面空白、显示效果不佳的问题,而且能够使树形结构的层次更加分明,从而能够迅速地找到需要的节点,提高用户的使用效率以及体验效果。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本专利技术的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。图1为本专利技术提供的现有的树形结构示意图;图2为本专利技术实施例一提供的用户界面树形结构显示方法流程图;图3为本专利技术实施例一提供的树形结构示意图;图4为本专利技术实施例一提供的节点显示区域合并后的树形结构图;图5为本专利技术实施例二提供的用于科目选择的用户界面树形结构显示方法流程图。具体实施方式正如
技术介绍
所述,现有的树形结构都是通过上下结构显示根节点以及子节点的,如图1所示,下一级节点的显示区域均位于上一级节点显示区域的下方。但是,当节点较多或节点的层级较多时,能够显示各层级节点的界面纵向空间有限,而其界面的横向空间并未完全利用,因此,会造成界面横向局部空间空白,显示效果不佳,用户体验不理想的问题。基于此,本专利技术提供了一种用户界面树形结构显示方法,以克服现有技术存在的上述问题,包括:自动生成并显示根节点列表;根据接收到的用户指令,生成并显示相应根节点的各级子节点列表;其中,所述根节点列表和各级子节点列表均包括显示区域沿界面纵向依次排列的一个或多个节点,且所述各级子节点列表的显示区域沿界面横向依次排列。本专利技术还提供了一种用户界面树形结构显示系统,包括:树形结构控制模块,用于自动生成根节点列表,并根据接收到的用户指令生成相应的根节点的各级子节点列表;显示控制模块,用于控制根节点列表和子节点列表中节点的显示区域沿界面纵向依次排列,以及控制所述各级子节点列表的显示区域沿界面横向依次排列。本专利技术所提供的用户界面树形结构显示方法及系统,由于根节点列表和各级子节点列表中节点的显示区域沿界面纵向依次排列,即从上往下依次排列,因此,充分利用了用户界面的纵向空间,又由于各级子节点列表沿界面横向依次排列,即从左往右依次排列,充分利用了用户界面的横向空间,因此,本专利技术不仅能够充分利用用户的界面空间,避免局部界面空白、显示效果不佳的问题,而且能够使树形结构的层次更加分明,从而能够迅速地找到需要的节点,提高用户的使用效率以及体验效果。以上是本专利技术的核心思想,为使本专利技术的上述目的、特征和优点能够更加明显易懂,下面结合附图对本专利技术的具体实施方式做详细的说明。在下面的描述中阐述了很多具体细节以便于充分理解本专利技术,但是本专利技术还可以采用其他不同于在此描述的其它方式来实施,本领域技术人员可以在不违背本专利技术内涵的情况下做类似推广,因此本专利技术不受下面公开的具体实施例的限制。其次,本专利技术结合示意图进行详细描述,在详述本专利技术实施例时,为便于说明,表示器件结构的剖面图会不依一般比例作局部放大,而且所述示本文档来自技高网
...
用户界面树形结构显示方法及系统

【技术保护点】

【技术特征摘要】
1.一种用户界面树形结构显示方法,其特征在于,包括:自动生成并显示根节点列表;根据接收到的用户指令,生成并显示相应根节点的各级子节点列表;其中,所述根节点列表和各级子节点列表均包括显示区域沿界面纵向依次排列的一个或多个节点,且所述各级子节点列表的显示区域沿界面横向依次排列;当同一列表中的多个节点的子节点列表相同时,将所述多个节点沿界面纵向依次排列在同一显示区域内,并在接收到用户指令后,在所述显示区域右侧生成并显示对应所述多个节点的同一子节点列表。2.根据权利要求1所述的方法,其特征在于,所述用户指令为用户通过鼠标移入操作、键盘方向键操作或触屏触控操作输入的指令。3.根据权利要求2所述的方法,其特征在于,接收到用户指令时,生成并显示所述节点的子节点列表,隐藏所述节点同一级的其他节点的子节点列表。4.根据权利要求3所述的方法,其特征在于,子节点列表中排列在第一个的第一节点的显示区域与其对应的上一级节点的显示区域在同一条直线上。5.根据权利要求4所述的方法,其特征在于,接收到用户指令时,如果生成的子节点列表的显示区域超出当前显示界面时,所述显示界面的滚动条自动移动,以显示所述子节点列表。6.根据权利要求5所述的方法,其特征在于,用于科目选择时,每一个节点对应一个科目,则所述方法还包括:根据显示的各级子科目列表,选择用户需要的科目。7.根据权利要求6所述的方法,其特征在于,当用户选择的科目为单个...

【专利技术属性】
技术研发人员:张庆梅张萌霞雷太原
申请(专利权)人:远光软件股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1