一种多区域分栏导航交互方法、设备及介质与流程

1.本技术涉及计算机技术领域，具体涉及一种多区域分栏导航交互方法、设备及介质。


背景技术：

2.在现有的软件系统中，调用不同的系统功能比如增删改查、展示详情页等，常通过弹出窗口或是切换新页面的方式来实现。但是，该种方式会造成页面之间的多次切换，需要消耗的计算资源较多。并且，在弹出窗口或切换新页面之后，当前的操作页面若要与历史页面互通，便需要进行多次页面切换，降低了用户体验。


技术实现要素：

3.为了解决上述问题，本技术提出了一种多区域分栏导航交互方法，包括：确定主交互页面包含的多个交互功能区，以及所述多个交互功能区对应的页面路由关系；
4.接收针对所述主交互页面的主交互指令，根据所述主交互指令的类别，确定所述主交互页面对应的交互模式；
5.在所述交互模式下，从所述多个交互功能区中，选取用于响应所述主交互指令的指定交互功能区；
6.根据所述页面路由关系，加载指定的子交互页面至所述指定交互功能区；
7.根据针对于所述指定的子交互页面的第一触发操作，加载其他子交互页面至所述多个交互功能区中的其他交互功能区，并将所述指定子交互页面对应的操作参数传输至所述其他子交互页面中，以使所述其他交互功能区根据所述操作参数展示相应的页面内容。
8.在本技术的一种实现方式中，所述其他子交互页面包括第一子交互页面和第二子交互页面；
9.根据针对所述指定的子交互页面的第一触发操作，加载其他子交互页面至所述多个交互功能区中的其他交互功能区，具体包括：
10.响应于针对所述指定的子交互页面的第一触发操作，获取待加载页面资源；
11.从所述待加载页面资源中，确定所述指定的子交互页面关联的第一子交互页面；
12.确定所述第一子交互页面的交互状态，在所述交互状态为空闲的情况下，根据所述页面路由关系中包含的交互功能区标识，加载所述第一子交互页面至其对应的其他交互功能区；
13.响应于针对所述第一子交互页面的第二触发操作，根据所述页面路由关系，确定所述第二子交互页面的路由状态；
14.根据所述路由状态，确定是否加载所述第二子交互页至其对应的其他交互功能区。
15.在本技术的一种实现方式中，根据所述主交互指令的类别，确定所述主交互页面对应的交互模式，具体包括：
16.根据所述主交互指令的类别，确定所述主交互指令对应的交互流程，以及用于执行所述交互流程所需的多个子交互页面之间的流转逻辑；
17.根据所述流转逻辑，确定所述多个子交互页面对应的操作类型，以根据所述操作类型和所述流转逻辑，确定所述主交互页面对应的交互模式。
18.在本技术的一种实现方式中，根据所述页面路由关系，加载指定的子交互页面至所述指定交互功能区，具体包括：
19.生成所述多个子交互页面之间的地址树；所述地址树包括地址对应的多个子交互页面的交互功能区标识，以及所述多个子交互页面之间的流转逻辑；
20.根据所述页面路由关系中所述指定交互功能区对应的交互功能区标识，从所述地址树中，选取出指定的地址节点；
21.通过所述指定的地址节点，获取所述指定的子交互页面，并将其加载至所述指定交互功能区；
22.加载其他子交互页面至所述多个交互功能区中的其他交互功能区，具体包括：
23.以所述指定的地址节点为起点，正向遍历所述地址树，根据所述多个交互功能区中的其他交互功能区所对应的交互功能区标识，选取出其他子交互页面分别对应的目标地址节点；
24.按照所述流转逻辑，从所述目标地址节点中，依次加载所述其他子交互页面至所述其他交互功能区。
25.在本技术的一种实现方式中，所述路由状态包括隐式状态和显式状态，所述页面路由关系包括所述第二子交互界面的路由规则；
26.根据所述页面路由关系，确定所述第二子交互页面的路由状态，具体包括：
27.根据所述路由规则，在检测到所述第二触发操作的情况下，确定所述第二子交互页面为显式状态；
28.在预设时间段内未检测到针对所述第二子交互页面的第三触发操作的情况下，确定所述第二子交互页面为隐式状态。
29.在本技术的一种实现方式中，所述交互模式包括信息交互模式、系统设置模式和多级操作模式。
30.在本技术的一种实现方式中，所述方法还包括：
31.针对各交互功能区，响应于针对所述交互功能区的多个触发操作，将所述交互功能区划分为多个功能分区；
32.分别加载相应的子交互页面至所述多个功能分区；
33.对所述子交互页面进行特征提取，以获取所述子交互页面对应的分区特征；
34.根据所述分区特征，计算不同子交互页面对应的不同功能分区之间的功能关联度；
35.在所述功能相似度大于预设阈值的情况下，对所述不同功能分区进行融合，或将所述不同功能分区的位置调整至相似位置。
36.在本技术的一种实现方式中，根据所述操作类型和所述流转逻辑，确定所述主交互页面对应的交互模式，具体包括：
37.确定所述多个子交互页面对应的流转逻辑是否具备层级关系，若有，确定所述主
交互页面对应的交互模式为多级操作模式；
38.若无，确定所述指定的子交互页面对应的操作类型是否为可编辑操作；
39.在所述操作类型为可编辑操作的情况下，确定所述主交互页面为信息交互模式；
40.在所述操作类型不为可编辑操作的情况下，确定所述主交互页面为系统设置模式。
41.通过本技术提出的一种多区域分栏导航交互方法能够带来如下有益效果：
42.将主交互页面划分为多个交互功能区，根据页面路由关系，加载不同的子交互页面至对应的交互功能区内，各交互功能区用于实现不同的交互操作，这样，在一个主交互页面下便能实现不同页面之间的交互操作，无需再进行多次切换，有效提升了用户体验，且节省了计算资源。
附图说明
43.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
44.图1为本技术实施例提供的一种多区域分栏导航交互方法的流程示意图；
45.图2为本技术实施例提供的一种主交互页面示意图；
46.图3为本技术实施例提供的一种菜单栏折叠示意图；
47.图4为本技术实施例提供的一种底层扩展信息区折叠示意图；
48.图5为本技术实施例提供的一种交互功能区分区示意图；
49.图6-图8为本技术实施例提供的不同实现方式下多区域分栏导航交互方法的流程示意图；
50.图9为本技术实施例提供的一种多区域分栏导航交互设备的结构示意图。
具体实施方式
51.为使本技术的目的、技术方案和优点更加清楚，下面将结合本技术具体实施例及相应的附图对本技术技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
52.以下结合附图，详细说明本技术各实施例提供的技术方案。
53.如图1所示，本技术实施例提供的一种多区域分栏导航交互方法，包括：
54.s101：确定主交互页面包含的多个交互功能区，以及多个交互功能区对应的页面路由关系。
55.本技术实施例提供的多区域分栏导航交互方法可以应用于具体的软件系统中，比如图书管理系统、学生信息管理系统等。如图2所示，主交互页面包括菜单区和交互区，菜单区包括用于提供操作导航的菜单栏，菜单栏包括多个菜单命令，各菜单命令对应具体的应用操作，比如图书搜索、个人信息设置等，如图3所示，当菜单命令过多时，菜单栏可自动折叠，并在点击后重新展开。菜单栏下方设置的交互区包括多个交互功能区和底层扩展信息区，其中，交互功能区包括左侧操作区和右侧展示区，如图4所示，底层扩展信息区可选择性折叠，其用于网站或系统的整体信息以及其他公共信息的展示。子交互页面是预先编写的，
用于实现具体的功能操作，在调用系统功能时，需在主交互页面上加载相应的子交互页面。需要说明的是，交互功能区最终实现的功能需进一步根据交互模式指定，在此只是以某一应用场景举例，本技术对于交互功能区的位置和功能并不进行具体限定。
56.页面路由关系用于表示子交互页面之间的路由关系，各子交互页面携带有多个交互功能区分别对应的交互功能区标识。在调用系统功能时，服务器需确定主交互页面包含的多个交互功能区，以及多个交互功能区对应的页面路由关系。这样，在进行页面交互时，根据页面路由关系，可直接确定用于显示相应页面的交互功能区。
57.s102：接收针对主交互页面的主交互指令，根据主交互指令的类别，确定主交互页面对应的交互模式。
58.在调用系统功能时，服务器接收针对主交互页面的主交互指令，根据主交互指令可从主交互页面中的菜单栏中选取相应的交互功能，比如，简单检索、系统设备、组合查询等。为满足不同类别的交互功能，针对不同类别的交互功能适应设置了相应的交互模式，交互模式包括信息交互模式、系统设置模式和多级操作模式。
59.服务器在接收到主交互指令之后，需根据主交互指令的类别，选择相应的交互模式，以在选定的交互模式下进行功能交互。划定具体的交互模式能够有效提高系统功能调用的针对性。
60.具体地，根据主交互指令的类别，确定主交互指令对应的交互流程，以及用于执行交互流程所需的多个子交互页面之间的流转逻辑。然后，根据流转逻辑，确定多个子交互页面对应的操作类型，从而根据操作类型和流转逻辑，确定主交互页面对应的交互模式。比如，主交互指令为对数据列表类信息进行增删改查，根据该主交互指令，可确定具体的交互流程为设置查询条件、展示数据列表、对数据列表进行增删改查操作，相应的，子交互页面对应的操作类型为编辑、展示、操作。主交互指令为设置用户信息，具体的交互流程为选择设置类型、修改相应设置，在该种情况下，子交互页面对应的操作类型为选择、编辑。主交互指令为多级查询，具体的交互流程为设置一级查询条件、设置二级查询条件等，子交互页面对应的操作类型均为选择型。
61.根据操作类型和流转逻辑，确定主交互页面对应的交互模式，具体可通过以下步骤实现：
62.确定多个子交互页面对应的流转逻辑是否具备层级关系，若有，确定主交互页面对应的交互模式为多级操作模式。多级操作模式主要应用于多操作类的功能调用，比如，在进行复杂查询时，通常需要设置多级查询条件才能得到最终的查询结果，通过多级操作模式在多个子交互页面中实现上述功能，能够有效提高操作效率，且更为便利。
63.若多个子交互页面对应的流转逻辑不具备层级关系，则需进一步确定指定的子交互页面对应的操作类型是否为可编辑操作。指定的子交互页面为进行页面交互时加载的第一个子交互页面，若其对应的操作类型为可编辑操作，那么主交互页面所采用的交互模式为信息交互模式；若其对应的操作类型不是可编辑操作，那么主交互页面所采用的交互模式为系统设置模式。比如，信息交互模式通常用于实现简单的信息检索功能，在信息交互模式下，指定的子交互页面用于设置查询条件或筛选条件。系统设置模式常用于实现静态信息设置功能，在系统设置模式下，指定的子交互页面可用于设置二级菜单，用户在该页面下能够选择具体的设置类型。
64.s103：在交互模式下，从多个交互功能区中，选取用于响应主交互指令的指定交互功能区。
65.在选定交互模式的情况下，用户选定菜单栏中的某一功能之后，服务器便能够接收到相应的主交互指令，并根据该主交互指令，从多个交互功能区中，选取用于响应主交互指令的指定交互功能区。指定交互功能区大小不限，用于加载子交互页面。
66.s104：根据页面路由关系，加载指定的子交互页面至指定交互功能区。
67.在选定指定交互功能区之后，根据页面路由关系中包含的指定交互功能区的交互功能区标识，可从预先编写的多个子交互页面中，选取出与指定交互功能区的交互功能区标识相匹配的指定子交互页面。
68.具体地，确定多个子交互页面的链接地址，并生成地址树。地址树包括地址对应的多个子交互页面的交互功能区标识，以及多个子交互页面之间的流转逻辑。根据页面路由关系中指定交互功能区对应的交互功能区标识，从地址树中，选取出指定的地址节点。通过指定的地址节点，获取指定的子交互页面，并将其加载至指定交互功能区中。
69.s105：根据针对于指定的子交互页面的第一触发操作，加载其他子交互页面至多个交互功能区中的其他交互功能区，并将指定子交互页面对应的操作参数传输至其他子交互页面中，以使其他交互功能区根据操作参数展示相应的页面内容。
70.在指定的子交互页面加载完毕后，服务器可根据当前所在交互模式下不同子交互页面之间的流转逻辑，继续加载其他子交互页面至主交互页面中，以完成主交互指令对应的系统功能。其他子交互页面包括第一子交互页面和第二子交互页面，第一子交互页面对应主交互页面的展示区，第二子交互页面对应折叠展示区。
71.具体地，服务器响应于针对指定的子交互页面的第一触发操作，获取待加载页面资源，待加载页面资源是预先编写的子交互页面中，除去指定子交互页面中的其他子交互页面。获取到待加载页面资源之后，从待加载页面资源中，确定指定的子交互页面关联的第一子交互页面。然后确定第一子交互页面的交互状态，如果交互状态为空闲，此时，根据页面路由关系中包含的交互功能区标识，加载第一子交互页面至其对应的其他交互功能区。待第一子交互页面加载完毕后，响应于针对第一子交互页面的第二触发操作，根据页面路由关系，确定第二子交互页面的路由状态，从而根据路由状态，确定是否需要加载第二子交互页至其对应的其他交互功能区。
72.其中，路由状态用于表示第二子交互页面的显示状态，包括隐式状态和显式状态。页面路由关系包括第二子交互界面的路由规则，路由规则用于根据第二子交互页面的触发操作情况确定其路由状态。服务器可以根据路由规则，在检测到第二触发操作的情况下，确定第二子交互页面为显式状态。如果在预设时间段内未检测到针对第二子交互页面的第三触发操作，说明当前第二子交互页面未进行功能交互，处于隐式状态。
73.加载其他子交互页面至多个交互功能区中的其他交互功能区，具体可通过以下步骤实现：
74.以指定的子交互页面对应的指定地址节点为起点，正向遍历地址树，根据多个交互功能区中的其他交互功能区所对应的交互功能区标识，选取出其他子交互页面分别对应的目标地址节点。选取出目标地址节点之后，按照流转逻辑，从目标地址节点中，依次加载其他子交互页面至其他交互功能区。
75.待其他子交互页面加载完毕后，指定子交互页面中的操作参数可传递至其他子交互页面中，从而根据接收到操作参数展示相应的页面内容，以便进行下一步操作。
76.本技术通过页面路由关系加载子交互页面至其对应的交互功能区，并在加载完毕后，再通过传递操作参数进行相应页面内容的展示，在页面布局发生变化的情况下，无需对页面进行相应修改，只需按照原本的页面路由关系进行页面加载即可，适用范围更广。
77.需要说明的是，如图5所示，各交互功能区能够响应于针对其的多个触发操作，划分为多个功能分区，每个功能分区用于响应某一触发操作。在划分功能分区之后，分别加载相应的子交互页面至多个功能分区。对子交互页面进行特征提取，以获取子交互页面对应的分区特征，获取到分区特征之后，根据分区特征，计算不同子交互页面对应的不同功能分区之间的功能关联度。如果功能相似度大于预设阈值，则说明上述多个功能分区彼此之间所执行的操作类似，为进一步提高页面资源的利用率，此时需将不同功能分区进行融合，或是将不同功能分区的位置调整至相似位置，对操作相似的功能分区调整位置，能够最大限度上提高操作便利性。
78.在一个实施例中，本技术提供的多区域分栏导航交互方法，除通过页面路由关系实现页面交互外，还可通过页面强制实现的方式实现。在定义主交互页面的布局之后，服务器接收针对主交互页面的主交互指令，根据主交互指令的类别，确定主交互页面对应的交互模式。根据该交互模式，响应于针对于第一子交互页面的第一触发操作，将操作参数传递至第二子交互页面中。第二子交互页面显示相关的页面内容，且响应于针对于第二子交互页面的第二触发操作，将操作参数传递至第三子交互页面中。第三子交互页面在接收到操作参数后，自行判断是否需要展示页面内容。在该种实现方式中，子交互页面无需进行加载，而是根据具体的操作参数进行页面显示的，实现过程更为简单。需要说明的是，该种实现方式的操作参数与前面提到的路由实现方式中的操作参数并不相同，在路由实现方式中，操作参数用于加载子交互页面以及子交互页面的展示内容，而在该种实现方式中，操作参数用于加载子交互页面的展示内容。
79.在另一个实施例中，除去前面提到的两种实现方式，本技术实施例还可通过调用预先定义的js函数，加载展示内容。
80.图6-图8为本技术实施例提供的不同实现方式下多区域分栏导航交互方法的流程示意图。如图6所示的路由实现方式中，定义主交互页面，以及主交互页面包含的各交互功能区的布局情况以及页面路由关系，进而根据路由关系和相应的触发操作，选择对应的页面布局方法进行页面内容的展示和交互。如图7所示的页面强制实现方式中，定义主交互页面以及主交互页面包含的各交互功能区的布局情况后，根据触发操作，选择对应的页面布局方法进行页面内容的展示和交互。如图8所示的框架调用方式中，定义主交互页面以及加载主交互页面完毕后，调用js函数将子交互页面加载到相应交互功能区后，根据触发操作，选择对应的页面布局方法进行页面内容的展示和交互。
81.以上为本技术提出的方法实施例。基于同样的思路，本技术的一些实施例还提供了上述方法对应的设备和非易失性计算机存储介质。
82.图9为本技术实施例提供的一种多区域分栏导航交互设备的结构示意图。如图9所示，包括：
83.至少一个处理器；以及，
84.至少一个处理器通信连接的存储器；其中，
85.存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够：
86.确定主交互页面包含的多个交互功能区，以及多个交互功能区对应的页面路由关系；
87.接收针对主交互页面的主交互指令，根据主交互指令的类别，确定主交互页面对应的交互模式；
88.在交互模式下，从多个交互功能区中，选取用于响应主交互指令的指定交互功能区；
89.根据页面路由关系，加载指定的子交互页面至指定交互功能区；
90.根据针对于指定的子交互页面的第一触发操作，加载其他子交互页面至多个交互功能区中的其他交互功能区，并将指定子交互页面对应的操作参数传输至其他子交互页面中，以使其他交互功能区根据操作参数展示相应的页面内容。
91.本技术实施例提供了一种非易失性计算机存储介质，存储有计算机可执行指令，计算机可执行指令设置为：
92.确定主交互页面包含的多个交互功能区，以及多个交互功能区对应的页面路由关系；
93.接收针对主交互页面的主交互指令，根据主交互指令的类别，确定主交互页面对应的交互模式；
94.在交互模式下，从多个交互功能区中，选取用于响应主交互指令的指定交互功能区；
95.根据页面路由关系，加载指定的子交互页面至指定交互功能区；
96.根据针对于指定的子交互页面的第一触发操作，加载其他子交互页面至多个交互功能区中的其他交互功能区，并将指定子交互页面对应的操作参数传输至其他子交互页面中，以使其他交互功能区根据操作参数展示相应的页面内容。
97.本技术中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
98.本技术实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。
99.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
100.本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流
程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
101.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
102.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
103.在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
104.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
105.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
106.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
107.以上所述仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。