一种多级菜单导航界面实现方法

摘要

本发明公开了一种多级菜单导航界面实现方法，该方法包括：在选项区域内以图形区域显示同一维度菜单集合的部分或全部菜单；当所述菜单集合包含的菜单数目大于菜单数目阈值时，用数目等于菜单数目阈值的图形区域显示所述菜单集合的部分菜单，当检测到用户鼠标对所述选项区域向左或向右拖动时，各菜单的图形区域相应进行顺时针或逆时针轮换；当检测到用户鼠标对某一图形区域进行点击时，则在所述选项区域中显示所述下一级菜单或直接执行所述菜单所对应的操作。本发明通过直观的界面实现对同一维度中多选项的展示和不同维度的切换，具有界面展现直观、操作符合用户直觉、简单便捷的优点。

说明书

技术领域

本发明涉及计算机界面技术领域，尤其涉及一种多级菜单导航界面实现方 法。

背景技术

随着新一代计算机操作系统的普及特别是带有触控装置的终端设备的迅速 发展，图形化界面已是计算机应用中不可或缺的技术。常见的带有触控装置的 终端设备都提供了丰富的标准界面，在人机交互中，经常会用到层叠式菜单导 航的方式提供在系统中的游历。

然而现有的常见菜单界面基本上都是顺序排列的层叠形式，如图1所示， 菜单各级选项无区别排列，每个一级选项下还可能含有二、三级或更从级选项， 该菜单界面检测鼠标的动作，当检测到鼠标悬停或点击某一级选项时，会在该 一级选项侧面显示其下属的二级选项，且第二级选项的排列与一级选项排列方 式相同，即直线顺序排列，同样的，对于三级选项或更深层级选项也将以同样 的方式显示，供用户选择。

对于上述层叠式菜单方式，存在如下缺点：

1、展示方式单一；

2、每次都需要从主菜单逐级开始选择，当菜单层次较多时严重影响效率；

3、用户不能直观地了解自己在系统中目前所处位置。

因此有必要提供一种创新的界面和操作设计丰富多级菜单展示方式，提高 用户操作效率，并给用户提供关于当前系统位置的有意义的提示，并适用于采 用指点/触摸输入的各种图形界面终端，用于增强系统的易用性和改善用户体 验。

发明内容

为达此目的，本发明公开了一种多级菜单导航界面实现方法，该方法包括：

在选项区域内分别以图形区域显示同一维度菜单集合的部分或全部菜单；

当所述菜单集合包含的菜单数目不大于菜单数目阈值时，用数目等于所述 菜单集合包含的菜单数目的图形区域显示所述菜单集合的所有菜单；

当所述菜单集合包含的菜单数目大于菜单数目阈值时，用数目等于菜单数 目阈值的图形区域显示所述菜单集合的部分菜单，当检测到用户鼠标对所述选 项区域向左拖动时，各菜单的图形区域相应进行顺时针轮换，反之，当检测到 用户鼠标对所述选项区域向右拖动时，各菜单的图形区域相应进行逆时针轮换；

当检测到用户鼠标对某一图形区域进行点击时，若所述图形区域对应的菜 单存在下一级菜单，则所述菜单集合变更为所述下一级菜单并在所述选项区域 中显示所述下一级菜单；若所述图形区域对应的菜单不存在下一级菜单，则直 接执行所述图形区域对应的菜单所对应的操作。

进一步地，当所述菜单集合包含的菜单数目大于菜单数目阈值时，第一个 图形区域和/或最后一个图形区域用具有重叠省略意义的图形显示。

进一步地，各图形区域对应的菜单按照预设的动态效果自动进行顺时针或 逆时针转动变化。

进一步地，当检测到用户鼠标停于所述选项区域时，若所述图形区域对应 的菜单存在上一级菜单，则将所述上一级菜单在所述选项区域中显示出来。

进一步地，在所述选项区域内，将所述图形区域对应的菜单的上一级菜单 在所述选项区域中显示出来。

进一步地，在所述选项区域内，将所述图形区域对应的菜单的所有更高级 别菜单在所述选项区域中分层次显示出来。

进一步地，当检测到用户对某上一级菜单或更高级别菜单进行展示操作时， 则在所述选项区域中显示与所述更高级别菜单同一维度的菜单集合的内容，其 中所述上一级菜单展示操作包括单击、双击、触摸、滑动或快捷键。

进一步地，当检测到用户对某一上一级菜单或更高级别菜单进行切换操作 时，则在所述选项区域中显示与该菜单同一维度的下一个菜单的子菜单集合的 内容，其中所述上一级菜单切换操作包括单击、双击、触摸、滑动或快捷键。

进一步地，以缩略或完整方式同时显示多级别的菜单，初始状态下，用所 述选项区域内最中间的图形区域展示将所述菜单集合中第一个菜单，用所述选 项区域内所述最中间的图形区域右边的图形区域展示所述菜单集合中第二个菜 单，用所述选项区域内所述最中间的图形区域左边的图形区域展示所述菜单集 合中最后一个菜单。

进一步地，所述菜单数目阈等于预先设定置，或等于当前屏幕显示范围内 最多允许显示的菜单个数。

本发明的有益技术效果是：本发明通过直观的界面实现对同一维度中多选 项的展示和不同维度的切换，具有界面展现直观、操作符合用户直觉、简单便 捷的优点。

附图说明

图1是现有多级菜单导航界面实现方式示意图；

图2(a)是本发明实施例一所述多级菜单导航界面展示方式示意图；

图2(b)是对图2(a)进行变换相对水平面夹角后的所述多级菜单导航界面展 示方式示意图；

图3(a)是菜单项A的二级菜单展示方式示意图；

图3(b)是当用户鼠标对图3(a)所述二级菜单的选项区域向左拖动后的展示 方式示意图；

图4(a)是菜单项A的二级菜单展示方式示意图；

图4(b)是当用户对图4(a)所述二级菜单的A1菜单项选中后的展示方式示 意图；

图5是菜单项A的二级菜单A2的三级菜单展示方式示意图；

图6(a)是菜单项A的二级菜单展示方式示意图；

图6(b)是当用户对图6(a)所述二级菜单的上一级菜单A切换到上一级菜单 B后的展示方式示意图。

具体实施方式

下面结合附图并通过具体实施方式来进一步说明本发明的技术方案。

实施例一

图2(a)是本发明实施例一所述多级菜单导航界面展示方式示意图,如图2所 示，本实施例所述多级菜单导航界面实现方式为：

在选项区域内分别以图形区域显示同一维度菜单集合的部分或全部菜单； 当所述菜单集合包含的菜单数目不大于菜单数目阈值时，用数目等于所述菜单 集合包含的菜单数目的图形区域显示所述菜单集合的所有菜单；当所述菜单集 合包含的菜单数目大于菜单数目阈值时，未在屏幕上显示的菜单可通过用户操 作或本系统的逻辑控制而切换到屏幕上显示，已显示的菜单也可以通过类似的 方式进行隐藏。具体方法为，用数目等于菜单数目阈值的图形区域显示所述菜 单集合的部分菜单，当检测到用户鼠标对所述选项区域向左拖动时，各菜单的 图形区域相应进行顺时针轮换，反之，当检测到用户鼠标对所述选项区域向右 拖动时，各菜单的图形区域相应进行逆时针轮换。进一步地，可将各图形区域 对应的菜单按照预设动态效果自动进行顺时针或逆时针转动变化，动态地将隐 藏的菜单展示出来。

优选地，最末端一级菜单的各图标可采用圆角矩形图标，进一步地，为了 更美观，可设置为透明圆角矩形图标。

例如，若菜单数目阈值为5，当所述菜单集合包含的菜单数目小于等于5时， 以图标的形式将所有菜单项均显示在选项区域内，否则，当所述菜单集合包含 的菜单数目大于等于5时，仅显示所述菜单集合中的5个菜单项，例如，集合 中菜单数目为n，当n>5时，仅显示A₁、A₂、A₃、A_n-1和A_n。

进一步地，为了在图形上直观显示当所述菜单集合包含的菜单数目大于菜 单数目阈值时，第一个图形区域和/或最后一个图形区域用具有重叠省略意义的 图形显示。例如图2(a)中A₃和A_n-1的图标为两层重叠图标,并且A₃的图标向逆时 针方向重叠，A_n-1图标向顺时针方向重叠，使得A₁、A₂、A₃、A_n-1和A_n在视觉效果 上形成一个逆时针方向排列的环状；图2(b)中A₃和A_n-1的图标为四层重叠图标， 并且A₃的图标向逆时针方向重叠，A_n-1图标向顺时针方向重叠，使得A₁、A₂、A₃、 A_n-1和A_n在视觉效果上形成比图2(a)排列更紧密的一个逆时针方向排列的环状。

初始状态下，可以用所述选项区域内最中间的图形区域展示将所述菜单集 合中第一个菜单，用所述选项区域内所述最中间的图形区域右边的图形区域展 示所述菜单集合中第二个菜单，用所述选项区域内所述最中间的图形区域左边 的图形区域展示所述菜单集合中最后一个菜单。例如，A₁在最中间，A₁右边依次 为A₂和A₃，A₁左边依次为A_n-1和A_n。

当检测到用户鼠标对所述选项区域向左拖动时，各菜单的图形区域相应进 行顺时针轮换，反之，当检测到用户鼠标对所述选项区域向右拖动时，各菜单 的图形区域相应进行逆时针轮换。

例如，图3(a)是菜单项A的二级菜单展示方式示意图，当检测到用户鼠标 对所述选项区域向左拖动时，各菜单的图形区域相应进行顺时针轮换，轮换后 的展示方式示意图如图3(b)所示。

当检测到用户鼠标对某一图形区域进行点击时，若所述图形区域对应的菜 单存在下一级菜单，则所述菜单集合变更为所述下一级菜单并在所述选项区域 中显示所述下一级菜单；若所述图形区域对应的菜单不存在下一级菜单，则直 接执行所述图形区域对应的菜单所对应的操作。

例如，图4(a)是菜单项A的二级菜单展示方式示意图，以透明圆角矩形图 标显示最后一级菜单，用圆形图标显示其父菜单，进一步地，为了更好区分， 各圆形图标通过不同底纹或颜色来区分。当用户鼠标点击菜单项A₁所在的图形区 域时，若菜单A₁不存在下一级菜单，则直接执行菜单项A₁对应的操作，若菜单A₁存在下一级菜单，则在选项区域中显示A₁的下一级菜单，如A₁具有下级菜单A₁₁到 A_1n，则展示方式示意图如图4(b)所示。

为了使用户可以对视图中任一维度的选项进行浏览、切换、选取等操作， 可实现以缩略或完整方式同时显示多级别的菜单。本实施例可设置如下几种方 式方便地在菜单各维度间进行切换。

第一种方法，通过用户鼠标停提示的方式展示上一级菜单或所有更高级别 菜单。当检测到用户鼠标停于所述选项区域时，若所述图形区域对应的菜单存 在上一级菜单，则将所述上一级菜单在所述选项区域中显示出来，进一步地， 当鼠标停于所述上一级菜单的图形区域时，若所述上一级菜单存在更上一级菜 单，则将所述更上一级菜单在所述选项区域中显示出来，依次类推。反之，当 检测到鼠标离开所述上一级菜单或所述更高级别菜单时，将所述菜单的图形区 域隐藏起来。

第二种方法，选项区域直接显示二级菜单。若选项区域的图形区域对应菜 单存在上一级菜单，则将所述上一级菜单在所述选项区域中显示出来。可通过 对所述上一级菜单进行展示操作来将显示区域的显示内容切换为与所述上一级 菜单同一维度菜单集合，切换后，若所述上一级菜单还有更上一级菜单，则将 所述更上一级菜单在所述选项区域中显示出来，依此类推，达到直观方便地在 菜单各维度间进行切换。

第三种方法，选项区域直接显示所有更高级别的菜单。在选项区域中将若 选项区域的图形区域对应菜单的更高级别菜单分层次地依次显示出来。图5是 菜单项A的二级菜单A2的三级菜单展示方式示意图，如图5所示，选项区域的 图形区域对应菜单A_2,1、A_1,2、A_2,3……A_2,n-1和A_2,n，它们的上一级菜单为A₂，A₂的 上一级菜单为A,A没有上一级菜单，则将A_2，1、A_2,2、A_2,3……A_2,n-1、A_2,n、A₂和A 一起分层次地显示在选项区域中。

上述三种方法均可通过对所述上一级菜单进行展示操作来将显示区域的显 示内容切换为与所述上一级菜单同一维度菜单集合，以达到用户方便地对视图 中任一维度的选项进行浏览、切换、选取等操作。

当检测到用户对某一更高级别菜单进行如单击、双击、触摸、滑动或快捷 键等预设的切换展示操作时，则所述菜单集合变更为与所述更高级别菜单同一 维度菜单的子菜单集合并在所述选项区域中显示。

例如，图6(a)是菜单项A的二级菜单展示方式示意图，若预设双击操作为 展示操作，则检测到鼠标双击A的大圆圈形的图形区域时，在所述选项区域中 显示与菜单A同一级别的下一菜单B的子菜单集合，操作后的展示方式示意图 如图6(b)所示。

本发明通过直观的界面实现对同一维度中多选项的展示和不同维度的切 换，具有界面展现直观、操作符合用户直觉、简单便捷的优点。

本文档的所有图示中，表示控件、区域的外观形状可以为图示中的几何形 状，也可以为任何能容纳相应内容或进行操作的形状。即本系统和方法的各种 实现可能在外观上和本文档中列举的示意图存在差异，但形状/区域/显示位置 等外观上的差异不影响本系统和方法的实现原理和操作方式。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的 精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的 保护范围之内。