CN104657069A - 基于移动设备的树形控件及其展现方式和选取方式 - Google Patents

Abstract

本发明公开了一种基于移动设备的树形控件及其展现方式和选取方式，属于移动设备中数据的处理技术领域。该树形控件的任意一级子树在所述移动设备的屏幕上覆盖的区域包括一直处于显示状态，不会被覆盖的触摸操作区域，所述触摸操作区域用于用户在此进行触摸操作，所述任意一级子树的所述触摸操作区域的宽度至少为0.5-2cm，从而为用户手指触碰操作留下足够的空间，使用户手指触碰操作不会出现错误或降低错误率；另外，本发明通过设置多种树形控件的展现和选取方式，满足了在移动设备中利用树形控件对树形结构数据的不同的操作需求，进而增加了用户操作的便利性，提高了用户的体验度。

Description

基于移动设备的树形控件及其展现方式和选取方式

技术领域

本发明涉及移动设备中数据的处理技术领域，尤其涉及一种基于移动设备的树形控件及其展现方式和选取方式。

背景技术

由于树形控件具有层次分明、结构清楚的特点，而且用户既能快速地浏览整树的概况，也能方便地深入查看子树的内容，选取节点数据时，既能单选，也能复选，因此，用树形控件来展现树形结构的数据在计算机领域得到了广泛的应用。

目前，应用于计算机领域的树形控件，在节点数据前只有一个小小的“+”号或“-”号，用户可以通过鼠标指针式的点击这些小小的“+”号或“-”号，进行数据层叠式地展开和收起操作，由于计算机采用鼠标指针式的点击，可以十分精确的定位和操作，因此，用户使用该树形控件进行操作，方便且精确。

但是，用户使用移动设备时，不是进行鼠标指针式的点击，而是手指触摸的点击，与计算机的鼠标指针式的点击方式相比，手指触摸的点击方式，其操作区域会大大的增加。因此，在移动设备上，采用现有技术中应用于计算机领域中的树形控件，由于手指触摸的点击区域会超出小小的“+”号或“-”号的可操作区域范围，操作错误率会很高，进而就会带来操作不便和用户体验度的下降。

发明内容

本发明的目的在于提供一种基于移动设备的树形控件及其展现方式和选取方式，从而解决现有技术中存在的前述问题。

为了实现上述目的，本发明采用的技术方案如下：

基于移动设备的树形控件，包括树根和子树，每个所述树根包括至少一级子树，任意一级子树包括至少一个子节点，所述任意一级子树在所述移动设备的屏幕上覆盖的区域包括一直处于显示状态，不会被覆盖的触摸操作区域，所述触摸操作区域用于用户在此进行触摸操作，所述任意一级子树的所述触摸操作区域的宽度至少为0.5-2cm。

进一步地，所述触摸操作区域的宽度为0.5-2cm，且所述触摸操作区域位于所述任意一级子树在所述移动设备的屏幕上覆盖的区域的左侧，所述任意一级子树在所述移动设备的屏幕上覆盖的区域的右侧为该任意一级子树的下一级子树覆盖。

具体地，所述子树中的一级子树位于所述树根的下方，所有的所述子树中的下一级子树位于上一级子树的右侧。

进一步地，所述树根上设置用于提示用户可以进行展开或收起操作的按钮；和/或

所述任意一级子树上设置用于提示用户可以进行展开或收起操作的按钮。

具体地，所述按钮设置于所述树根的下方；和/或

所述按钮设置于所述任意一级子树的触摸操作区域的右侧。

上述基于移动设备的树形控件的展现方式，在所述移动设备的屏幕上，所述一级子树从所述树根处自上而下滑入；所述下一级子树从右侧滑入。

具体地，在所述移动设备的屏幕上，所有的所述子树采用动画的方式滑入。

进一步地，用户拖动所述任意一级子树的任意一个子节点时，该任意一个子节点的所有下级子树均滑出所述移动设备的屏幕。

具体地，所述所有下级子树均按照自左向右的方式滑出所述移动设备的屏幕。

上述基于移动设备的树形控件的选取方式，包括单选方式和多选方式。

本发明的有益效果是：与现有技术中的应用于计算机领域的树形控件，用户只能通过触碰节点数据前的小小的“+”号或“-”号进行数据的展现方式相比，本发明提供了一种基于移动设备的树形控件及其展现方式和选取方式，通过将任意一级子树的触摸操作区域的宽度设置为至少为0.5-2cm，为用户手指触碰操作留下足够的空间，使用户手指触碰操作不会出现错误或降低错误率；通过设置多种树形控件的展现和选取方式，满足了在移动设备中利用树形控件对树形结构数据的不同的操作需求，进而增加了用户操作的便利性，提高了用户的体验度。

附图说明

图1是本发明的实施例提供的基于移动设备的树形控件的结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不用于限定本发明。

如图1所示，本发明的一个实施例提供了一种基于移动设备的树形控件，包括树根和子树，每个所述树根包括至少一级子树，任意一级子树包括至少一个子节点，所述任意一级子树在所述移动设备的屏幕上覆盖的区域包括一直处于显示状态，不会被覆盖的触摸操作区域，所述触摸操作区域用于用户在此进行触摸操作，所述任意一级子树的所述触摸操作区域的宽度至少为0.5-2cm。

目前，移动设备的操作一般使用手指碰触，相当于计算机的鼠标指针式点击，而由于手指相对于鼠标指针尺寸比较大，因此，其操作区域相对于鼠标指针的操作区域也会变大，所以，在移动设备的屏幕上就需要预留比较大的手指操作区域，从而保证手指能够精确的触碰到目标，进行精准的操作，不会经常出现错误。为了适应移动设备的使用手指触碰操作，需要较大的操作空间的特点，本发明提供的树形控件，将任意一级子树的所述触摸操作区域的宽度设置为至少0.5-2cm，如本领域技术人员可以理解的，由于手指的宽度一般在1cm左右，而对于不同的人，其手指宽度有一些细微的差别，因此，对于移动设备的不同的使用对象，可以设置不同的触碰操作区域的宽度。

同时，对于不同尺寸的移动设备，所述触摸操作区域的宽度也可以设置成不同的值，比如，当移动设备的屏幕比较大时，则可以设置较宽的触摸操作区域，以提高触碰操作的便利性和用户体验度；而当移动设备的屏幕比较小时，则可以设置较窄的触摸操作区域，以保证该一级子树的下一级子树有足够的显示空间。这样，在移动设备上进行手指触碰操作时，就可以保证准确率和便利性，也可以提高用户使用移动设备的体验度。

在本发明的一个实施例中，所述触摸操作区域的宽度设置为0.5-2cm，且所述触摸操作区域位于所述任意一级子树在所述移动设备的屏幕上覆盖的区域的左侧，所述任意一级子树在所述移动设备的屏幕上覆盖的区域的右侧为该任意一级子树的下一级子树覆盖。

由于移动设备的屏幕尺寸比较小，因此，在本发明的提供的实施例中，为了在尺寸有限的屏幕上显示更多的内容，当展开下一级子树时，该下一级子树的内容覆盖其上一级子树在所述移动设备的屏幕上覆盖的区域的右侧(该覆盖区域的左侧为触摸操作区域，不能覆盖)。这样，利用左右遮盖式的UI将当前子树置于更多空间、更方便操作的屏幕右侧，就可以在当前页面上显示更多级的子树，使用户可以在当前页面上浏览或选取更多的数据内容。从而进一步提高用户的体验度和使用的便利性。

可见，本发明实施例提供的基于移动设备的树形控件，利用分层设计思路，每次只展示当前子树的所有节点，避免多层级节点的同时出现，清晰了层次结构，同时减少了非活动状态的子树的展示内容，使其更加符合移动设备的屏幕尺寸小，无法对所有展开的子树进行浏览的特点，使用户能够在有限的屏幕中，浏览到更多的内容。

在本发明的一个实施例中，所述子树中的一级子树位于所述树根的下方，所有的所述子树中的下一级子树位于上一级子树的右侧。树根和子树之间，各级子树之间设置成这样的位置关系，可以从视觉上显示树根与子树之间、各级子树之间的从属关系，让用户在使用的过程中，可以形成清晰而明显的概念，从而快速而准确的进行浏览操作，在最短的时间内找到自身需要的信息。

本发明的一个实施例提供的基于移动设备的树形控件，所述树根上设置用于提示用户可以进行展开或收起操作的按钮；和/或所述任意一级子树上设置用于提示用户可以进行展开或收起操作的按钮。

在实际使用过程中，如本领域技术人员可以理解的，本实施例中的按钮可以为，用户展开树根后，则按钮显示为提示用户可以进行收起操作的符号，当用户收起树根后，则按钮显示为提示用户可以进行展开操作的符号，这些符号可以为本领域中在执行展开或收起操作时的常用符号；用户展开任意一级子树后，则按钮显示为提示用户可以进行收起操作的符号，当用户收起任意一级子树后，则按钮显示为提示用户可以进行展开操作的符号，这些符号可以为本领域中在执行展开或收起操作时的常用符号。

采用上述的设置方式，可以使用户在使用的过程中，在按钮的提示作用下，进行快速而准确的展开或收起的操作，从而能够在最短的时间内找到自身需要的信息。

本发明提供的一个实施例中，所述按钮设置于所述树根的下方；和/或

所述按钮设置于所述任意一级子树的触摸操作区域的右侧。这样的设置，使得按钮的提示作用更加明显，且符合大多数用户的操作习惯，有利于提高用户操作的便利性。

本发明的一个实施例提供了一种基于移动设备的树形控件的展现方式，该方式为，在所述移动设备的屏幕上，所述一级子树从所述树根处自上而下滑入；所述下一级子树从右侧滑入。

被触碰操作后展开或收起的树根或子树，即处于当前操作状态下的控件会显示特效，以表示被选中的操作状态。

采用上述展现方式，更加符合树根以及各级子树之间的位置关系和用户的使用习惯，从而能够提高用户的体验度。

具体地，在所述移动设备的屏幕上，所有的所述子树均可以采用动画的方式滑入。使子树的进入屏幕时的效果更好，用户的体验度更高。

在本发明的另一个实施例中，一种基于移动设备的树形控件的展现方式，用户拖动所述任意一级子树的任意一个子节点时，该任意一个子节点的所有下级子树均滑出所述移动设备的屏幕。

在实际的使用过程中，由于移动设备的屏幕尺寸较小，当任意一级子树的内容比较多时，其展现的内容有可能超出屏幕的展示区域，当用户需要浏览屏幕展示区域之外的该级子树的内容时，可以通过使用手指在屏幕上拖拽的方式进行内容的滚动，以切换屏幕的显示内容；拖拽过程中，被拖拽的该级子树中的任意一个子节点的所有下级子树均滑出所述移动设备的屏幕，这样，在操作当前子树时自动收起下级所有子树，既可以为当前子树的内容展现提供了更多的屏幕资源，方便用户拖动过程中浏览，又可以为收起该子节点的所有下级子树提供了便捷操作。

为了使该任意子节点的所有的下级子树滑出移动设备的屏幕时的效果更好，也更加符合用户的视觉习惯，提高用户的体验度，本发明的实施例中，该任意子节点的所有的下级子树按照滑入屏幕的相反方向，自左向右滑出屏幕。

本发明的实施例还提供了一种基于移动设备的树形控件的选取方式，包括单选方式和多选方式。

其中单选方式可以采用如下两种。单选方式一：逐步展开每级子树并选取该级节点数据，直至最后一级时认为选取完成，此时关闭整棵树并返回数据。例如：点击树根->展开1级子树->选择item1->展开2级子树->选择item2->展开3级子树->选择item3...->展开最后子树->选择itemN->收起整棵树，而返回的数据可以为item1、item2、item3...itemN这样的数据路径，也可以为itemN这样的最终数据；单选方式二(可以单选整棵子树)：在每一级子树中增加“全部子节点”的单选框，逐步展开每一级子树并选取该级数据，直至选取最后一级的某个子节点或者选取任意一级的“全部子节点”，此时关闭整棵树并返回数据。例如：点击树根->展开1级子树->选择item1->展开2级子树->选择item2->展开3级子树->选择item3...->展开M级子树->选择“全部子节点”->收起整棵树，而返回的数据为item1、item2、item3...item(M-1)这样的数据路径，也可以为item(M-1)这样的最终数据。

其中多选方式可以为：在任意一级子树的每个子节点的左侧增加多选框，通过标志该多选框选择该子节点数据；在树形控件右上角设置并排半透悬浮按钮“清空”和“完成”，用于清空已选数据和完成数据的选取。

本发明的实施例中通过设置不同的选取方式，从而满足不同的数据选取需求。

本发明的实施例中，提供了多种展开和/或收起树根和子树的方式，以及数据选取方式，满足了移动设备中利用树形控件对树形结构数据的不同的操作需求，有利于在移动设备中利用树形控件对树形结构数据的操作，进而增加了用户操作的便利性，提高了用户的体验度。

通过采用本发明公开的上述技术方案，得到了如下有益的效果：本发明通过将任意一级子树的触摸操作区域的宽度设置为至少为0.5-2cm，为用户手指触碰操作留下足够的空间，使用户手指触碰操作不会出现错误或降低错误率；通过设置多种树形控件的展现和选取方式，满足了在移动设备中利用树形控件对树形结构数据的不同的操作需求，进而增加了用户操作的便利性，提高了用户的体验度。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。

Claims (10)

1.基于移动设备的树形控件，包括树根和子树，每个所述树根包括至少一级子树，任意一级子树包括至少一个子节点，其特征在于，所述任意一级子树在所述移动设备的屏幕上覆盖的区域包括一直处于显示状态，不会被覆盖的触摸操作区域，所述触摸操作区域用于用户在此进行触摸操作，所述任意一级子树的所述触摸操作区域的宽度至少为0.5-2cm。

2.根据权利要求1所述的树形控件，其特征在于，所述触摸操作区域的宽度为0.5-2cm，且所述触摸操作区域位于所述任意一级子树在所述移动设备的屏幕上覆盖的区域的左侧，所述任意一级子树在所述移动设备的屏幕上覆盖的区域的右侧为该任意一级子树的下一级子树覆盖。

3.根据权利要求1或2所述的树形控件，其特征在于，所述子树中的一级子树位于所述树根的下方，所有的所述子树中的下一级子树位于上一级子树的右侧。

4.根据权利要求1或2所述的树形控件，其特征在于，所述树根上设置用于提示用户可以进行展开或收起操作的按钮；和/或

所述任意一级子树上设置用于提示用户可以进行展开或收起操作的按钮。

5.根据权利要求4所述的树形控件，其特征在于，所述按钮设置于所述树根的下方；和/或

所述按钮设置于所述任意一级子树的触摸操作区域的右侧。

6.权利要求1或2所述的基于移动设备的树形控件的展现方式，其特征在于，在所述移动设备的屏幕上，所述一级子树从所述树根处自上而下滑入；所述下一级子树从右侧滑入。

7.根据权利要求6所述的展现方式，其特征在于，在所述移动设备的屏幕上，所有的所述子树采用动画的方式滑入。

8.根据权利要求6所述的展现方式，其特征在于，用户拖动所述任意一级子树的任意一个子节点时，该任意一个子节点的所有下级子树均滑出所述移动设备的屏幕。

9.根据权利要求8所述的展现方式，其特征在于，所述所有下级子树均按照自左向右的方式滑出所述移动设备的屏幕。

10.权利要求1或2所述的基于移动设备的树形控件的选取方式，其特征在于，包括单选方式和多选方式。