CN113722042A - 一种页面交互方法、系统、介质及电子终端 - Google Patents
一种页面交互方法、系统、介质及电子终端 Download PDFInfo
- Publication number
- CN113722042A CN113722042A CN202111081194.9A CN202111081194A CN113722042A CN 113722042 A CN113722042 A CN 113722042A CN 202111081194 A CN202111081194 A CN 202111081194A CN 113722042 A CN113722042 A CN 113722042A
- Authority
- CN
- China
- Prior art keywords
- page
- level
- interaction
- area
- information
- 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.)
- Pending
Links
- 230000003993 interaction Effects 0.000 title claims abstract description 167
- 238000000034 method Methods 0.000 title claims abstract description 43
- 230000001960 triggered effect Effects 0.000 claims abstract description 40
- 230000002452 interceptive effect Effects 0.000 claims description 52
- 238000013519 translation Methods 0.000 claims description 15
- 238000004590 computer program Methods 0.000 claims description 14
- 238000012545 processing Methods 0.000 abstract description 3
- 230000009467 reduction Effects 0.000 abstract description 3
- 230000006399 behavior Effects 0.000 description 9
- 238000004891 communication Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 5
- 230000008447 perception Effects 0.000 description 3
- 235000012813 breadcrumbs Nutrition 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000009825 accumulation Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000004080 punching Methods 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- 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/0483—Interaction with page-structured environments, e.g. book metaphor
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供一种页面交互方法、系统、介质及电子终端，方法包括：在一视图页面上对相应层级的页面元素进行平铺显示，相邻层级的页面元素相互关联；当用户触发任一页面元素时，则根据预先设置的显示规则，进行下一层级的视图页面的显示与交互；所述显示规则包括：确定与当前被触发的页面元素相关联的元素信息，根据所述元素信息，进行显示，所述元素信息至少包括以下之一：当前页面元素对应的元素详情信息、下一层级的页面元素，以及用于表示交互入口的交互触发区域信息；本发明中的方法，降低页面元素架构的繁杂程度，实现了对复杂度较高的信息框架的降维处理，较好地保证了各个层级的视图页面或用户界面的简洁性，提高交互效率与用户体验。
Description
技术领域
本发明涉及互联网技术领域，尤其涉及一种页面交互方法、系统、介质及电子终端。
背景技术
目前，通常通过菜单来完成对系统的多层级页面的重新梳理和收纳，以此来保证在单一页面中不会出现特别深入的层级；或者，通过面包屑组件或层级导航来对页面层级进行管理等方法，确保用户始终能够意识到自己当前所处的层级；又或，通过压缩页面空间，在有限的页面中显示相对更多的信息和交互操作入口，以此来保证对业务复杂性的支撑。
然而，上述方法存在一定问题，如：网页页面的菜单结构较复杂，用户需要付出过多的精力进行寻找目标应用，且仅支持单向的返回路径，存在较差的操作反馈和使用体验，页面过于拥挤和繁杂，无法快速地做出准确的交互行为，以及使用限制性较强，对设备限制与要求较高等。
发明内容
本发明提供一种页面交互方法、系统、介质及电子终端，以解决现有技术中网页页面的菜单结构较复杂、页面过于拥挤和繁杂，导致用户体验感较差的问题。
本发明提供的页面交互方法，包括：
在一视图页面上对相应层级的页面元素进行平铺显示，相邻层级的页面元素相互关联；
当用户触发任一页面元素时，则根据预先设置的显示规则，进行下一层级的视图页面的显示与交互；
所述显示规则包括：确定与当前被触发的页面元素相关联的元素信息，根据所述元素信息，进行显示，所述元素信息至少包括以下之一：当前页面元素对应的元素详情信息、下一层级的页面元素和用于表示交互入口的交互触发区域信息。
可选的，根据所述元素信息，进行显示的步骤包括：
根据所述元素信息，确定对应的交互显示区域，所述交互显示区域至少包括以下之一：当前被触发的页面元素的元素详情区域、下一层级的页面元素的显示区域和当前被触发的页面元素的交互触发区域；
根据预设的平移方向，控制当前的视图页面平移，对当前视图页面中的交互显示区域进行挤压与隐藏，获取当前视图页面中的剩余区域；
利用所述剩余区域，对与所述元素信息相对应的交互显示区域进行显示，完成交互。
可选的，所述页面元素包括：一级页面元素；
根据预先设置的分类规则，对多个所述一级页面元素进行分类，确定所述一级页面元素的类别；
根据所述一级页面元素的类别，对所述一级页面元素进行收纳与分组，获取一个或多个元素组以及对应的元素组图标；
利用所述元素组图标，对所述一级页面元素进行显示。
可选的，所述页面元素还包括：二级页面元素；
利用所述元素组图标，对所述元素组进行触发；
当所述元素组被触发时，则对所述元素组对应的一级页面元素进行显示；
当任一一级页面元素被触发时，则根据当前的一级页面元素，确定与当前的一级页面元素相关联的二级页面元素；
通过将下一层级的视图页面叠加至当前层级的视图页面，将所述二级页面元素在下一层级的视图页面进行平铺显示。
可选的，所述页面元素还包括：三级页面元素；
当任一二级页面元素被触发时，则根据所述当前的二级页面元素，确定与当前的二级页面元素相关联的元素信息；
与当前的二级页面元素相关联的元素信息包括：二级元素详情信息、下一层级的三级页面元素，以及用于表示二级页面元素与三级页面元素的交互入口的二级交互触发区域信息；
根据与当前的二级页面元素相关联的元素信息，确定二级交互显示区域，所述二级交互显示区域包括：二级元素详情区域、三级页面元素显示区域和二级元素交互触发区域，所述二级元素交互触发区域包括：一个或多个二级触发按钮，所述二级触发按钮与触发操作相对应；
根据预先设置的二级交互显示模板和所述二级交互显示区域，进行页面显示。
可选的，当所述页面元素不包括四级页面元素时，通过选择所述二级触发按钮，确定对应的触发操作；
根据所述触发操作，获取与三级页面元素相关联的元素信息；
与三级页面元素相关联的元素信息包括：与三级页面元素对应的三级元素详情信息，以及用于对三级页面元素进行交互触发的三级交互触发区域信息；
根据与三级页面元素相关联的元素信息，确定三级交互显示区域，并进行页面显示，所述三级交互显示区域包括：三级元素详情区域和用于作为三级页面元素的交互入口的三级元素交互触发区域，所述三级元素交互触发区域包括：一个或多个三级触发按钮，所述三级触发按钮与触发操作相对应；
通过选择所述三级触发按钮，进行交互反馈，完成页面交互。
可选的，当所述页面元素包括四级页面元素时，则判断所述三级页面元素是否被触发；
当任一所述三级页面元素被触发时，则根据预设的页面平移方向，控制当前的视图页面平移，对所述二级元素详情区域和二级元素交互触发区域进行挤压与隐藏；
根据所述三级页面元素，确定对应的四级元素详情信息与四级交互触发区域信息；
根据所述四级元素详情信息与所述四级交互触发区域信息，确定对应的四级元素详情区域和四级元素交互触发区域；
控制所述四级元素详情区域和所述四级元素交互触发区域沿所述页面平移方向出现，显示于当前的视图页面，所述四级元素详情区域和所述四级元素交互触发区域均位于所述三级页面元素显示区域远离所述二级元素详情区域的一侧。
本发明还提供一种页面交互系统，包括：
显示模块，用于在一视图页面上对相应层级的页面元素进行平铺显示，相邻层级的页面元素相互关联；
交互模块，用于当用户触发任一页面元素时，则根据预先设置的显示规则，进行下一层级的视图页面的显示与交互；
所述显示规则包括：确定与当前被触发的页面元素相关联的元素信息，根据所述元素信息，进行显示，所述元素信息至少包括以下之一：当前页面元素对应的元素详情信息、下一层级的页面元素和用于表示交互入口的交互触发区域信息。
本发明还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任一项所述方法。
本发明还提供一种电子终端，包括：处理器及存储器；
所述存储器用于存储计算机程序，所述处理器用于执行所述存储器存储的计算机程序，以使所述终端执行如上述任一项所述方法。
本发明的有益效果：本发明中的页面交互方法，通过在不同层级的视图页面上对相应层级的页面元素进行平铺展示，当用户触发任一页面元素时，则根据预先设置的显示规则，进行下一层级的视图页面的显示与交互，显示规则包括：确定与当前被触发的页面元素相关联的元素信息，根据所述元素信息，进行显示，所述元素信息至少包括以下之一：当前页面元素对应的元素详情信息、下一层级的页面元素和用于表示交互入口的交互触发区域信息，避免使用菜单结构，降低页面元素架构的繁杂程度，实现了对复杂度较高的信息框架的降维处理，较好地保证了各个层级的视图页面或用户界面的简洁性，将不同层级的页面元素之间的结构化关系通过交互行为来让用户直接感知，以此来降低用户的学习成本，提高交互效率与用户体验。
附图说明
图1是本发明实施例中页面交互方法的流程示意图。
图2是本发明实施例中页面交互方法中的一级页面元素之间的交互示意图。
图3是本发明实施例中页面交互方法中的二级页面元素与三级页面元素的交互示意图。
图4是本发明实施例中页面交互方法中的三级页面元素和四级页面元素的交互示意图。
图5是本发明实施例中页面交互方法中的四级页面元素和五级页面元素的交互示意图。
图6是本发明实施例中页面交互系统的结构示意图。
附图标识：
00 元素组图标； 01 一级页面元素； 02 二级页面元素；
021 二级元素详情区域； 022 二级元素交互触发区域；
03 三级页面元素； 031 三级元素详情区域；
032 三级元素交互触发区域； 041 四级元素详情区域；
042 四级元素交互触发区域； 051 五级元素详情区域；
052 五级元素交互触发区域； a 系统名称；
b 一级页面元素名称； c 二级页面元素名称；
d 三级页面元素名称
具体实施方式
以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。
需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图式中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。
发明人发现，对于网页(WEB)端的管理系统而言，由于业务逻辑的复杂性较高，多使用较为传统的表格、表单，并配合对话框来支持用户完成交互行为。随着互联网技术的发展，越来越多的线下流程被抽象成为某种业务逻辑，并且最终通过用户界面，让用户能够与系统完成交互，进而系统能够获取所需的信息，用户也能达成目标。但是随着需要抽象的线下流程越来越繁杂，业务逻辑的复杂性也越来越高。目前，通常通过菜单来完成对系统的多层级页面的重新梳理和收纳，以此来保证在单一页面中不会出现特别深入的层级；或者，通过面包屑组件或层级导航来对页面层级进行管理等方法，确保用户始终能够意识到自己当前所处的层级；又或，通过压缩页面空间，在有限的页面中显示相对更多的信息和交互操作入口，以此来保证对业务复杂性的支撑。然而，上述方法存在一定问题，如：网页页面的菜单结构较复杂，用户需要付出过多的精力进行寻找目标应用，且仅支持单向的返回路径，存在较差的操作反馈和使用体验，页面过于拥挤和繁杂，无法快速地做出准确的交互行为，以及使用限制性较强，对设备限制与要求较高，交互模式在PC(Personal Computer，个人计算机)端与移动端之间不可延续等。因此，发明人提出一种页面交互方法、系统、介质及电子终端，通过在不同层级的视图页面上对相应层级的页面元素进行平铺展示，当用户触发任一页面元素时，则根据预先设置的显示规则，进行下一层级的视图页面的显示与交互，显示规则包括：确定与当前被触发的页面元素相关联的元素信息，根据所述元素信息，进行显示，所述元素信息至少包括以下之一：当前页面元素对应的元素详情信息、下一层级的页面元素，以及用于表示交互入口的交互触发区域信息，避免使用菜单结构，降低页面元素架构的繁杂程度，实现了对复杂度较高的信息框架的降维处理，较好地保证了各个层级的视图页面或用户界面的简洁性，将不同层级的页面元素之间的结构化关系通过交互行为来让用户直接感知，以此来降低用户的学习成本，提高交互效率与用户体验，可实施性较强，成本较低。
如图1所示，本实施例中的页面交互方法，包括：
S101：在一视图页面上对相应层级的页面元素进行平铺显示，相邻层级的页面元素相互关联；通过在多个不同的层级的视图页面上，对相应层级的页面元素进行平铺显示，去除了现有技术中菜单在显示系统中的绝对地位，以实现扁平的信息架构与低耦合的层级关系，降低页面元素的信息架构的复杂程度，保证各个层级的视图页面的简洁性。
例如：根据多个页面元素的功能，对多个所述页面元素进行层级划分，获取多个不同层级的页面元素，页面元素的层级与视图页面的层级具有对应关系，利用多个不同层级的视图页面对相应层级的页面元素进行平铺显示，相邻层级的页面元素之间相关关联。
S102：当用户触发任一页面元素时，则根据预先设置的显示规则，进行下一层级的视图页面的显示与交互；用户触发页面元素的方式包括：点击或触摸。
所述显示规则包括：确定与当前被触发的页面元素相关联的元素信息，根据所述元素信息，进行显示，所述元素信息至少包括以下之一：当前页面元素对应的元素详情信息、下一层级的页面元素，以及用于表示交互入口的交互触发区域信息。所述元素详情信息为页面元素的详情信息，如页面元素对应的设备类型和设备型号等。通过根据预设的显示规则，进行下一层级的视图页面的显示与交互，确保了视图页面上的交互入口的拥有足够的面积来支持用户进行快速地触发操作，所述触发操作如点击或触摸等操作，将用户的核心交互行为暴露于视图页面中，视图页面的空间安排与设置较合理，便于用户通过交互行为，对不同层级的页面元素之间的结构化关系进行直接感知，降低用户对不同层级的页面元素之间的架构的学习成本与难度，提高系统与用户的交互效率，有效提升用户体验。
为了使PC端与移动端之间达成统一可延续的交互模式，发明人提出，根据所述元素信息，进行显示的步骤包括：根据所述元素信息，确定对应的交互显示区域，所述交互显示区域至少包括以下之一：当前被触发的页面元素的元素详情区域、下一层级的页面元素的显示区域和当前被触发的页面元素的交互触发区域；根据预设的页面平移方向，控制当前的视图页面平移，对当前视图页面中的部分或全部交互显示区域进行挤压与隐藏，获取当前视图页面中的剩余区域；利用所述剩余区域，对与所述元素信息相对应的交互显示区域进行显示，完成交互。通过对当前视图页面进行平移，充分利用了视图页面的整体空间，如通过控制当前视图页面进行左右移动等，对视图页面的横向空间进行充分利用，有助于PC端与移动端之间达成统一可延续的交互模式，降低对承载视图页面的设备的要求，提升用户体验。所述页面平移方向可以根据实际情况进行设置，此处不再赘述。
请参考图2，为了提高视图页面的简洁性，发明人提出，对同一层级的页面元素进行收纳，进一步地，对一级页面元素01进行收纳，收纳的步骤包括：
S201：根据预先设置的分类规则，对多个所述一级页面元素01进行分类，确定所述一级页面元素01的类别；如：根据一级页面元素01的功能，对多个一级页面元素01进行分类，确定所述第一页面元素的类别。
S202：根据所述一级页面元素01的类别，对所述一级页面元素01进行收纳与分组，获取一个或多个元素组以及对应的元素组图标00；
S203：利用所述元素组图标00，对所述一级页面元素01进行显示。通过对多个一级页面元素01进行分组收纳，有效提高了视图页面的简洁性。用户可以通过点击或触摸元素组图标00，获取与该元素组对应的一级页面元素01，提高交互效率。
为了便于用户体验不同层级的页面元素之间的交互，发明人提出，所述页面元素还包括：二级页面元素02；可以理解的，二级页面元素02为一级页面元素01的下一层级的页面元素，如：一级页面元素01可以为OA、行政等，OA对应的二级页面元素02则可以为考勤、打卡和请假等，依次类推，此处不再赘述。
S301：利用所述元素组图标00，对所述元素组进行触发；如：用户通过点击或触摸元素组图标00，对元素组进行触发。
S302：当所述元素组被触发时，则对所述元素组对应的一级页面元素01进行显示；即当元素组被触发时，则在当前视图页面对元素组中的一级页面元素01进行平铺显示，简洁度较高。
S303：当任一一级页面元素01被触发时，则根据当前的一级页面元素01，确定与当前的一级页面元素01相关联的二级页面元素02；即用户对平铺展示的多个一级页面元素01进行选择与触发，当任一一级页面元素01被触发时，则根据当前的一级页面元素01与二级页面元素02之间的关联关系，确定与当前的一级页面元素01相关联的二级页面元素02。
S304：通过将下一层级的视图页面叠加至当前层级的视图页面，将所述二级页面元素02在下一层级的视图页面进行平铺显示。提高了视图页面显示的简洁性，便于用户通过交互触发行为，对不同层级的页面元素的信息架构进行直接感知，提升用户的体验感。
如图3所示，所述页面元素还包括：三级页面元素03；
S401：当任一二级页面元素02被触发时，则根据所述当前的二级页面元素02，确定与当前的二级页面元素02相关联的元素信息；例如：当用户对二级页面元素02进行点击或触摸等触发操作时，则根据被点击或触摸的二级页面元素02，获取与当前的二级页面元素02相关联的元素信息。
与当前的二级页面元素02相关联的元素信息包括：二级元素详情信息、下一层级的三级页面元素03，以及用于表示二级页面元素02与三级页面元素03的交互入口的二级交互触发区域信息。
S402：根据与当前的二级页面元素02相关联的元素信息，确定二级交互显示区域，所述二级交互显示区域包括：二级元素详情区域021、三级页面元素03显示区域和二级元素交互触发区域022，所述二级元素交互触发区域022包括：一个或多个二级触发按钮，所述二级触发按钮与触发操作相对应；
S403：根据预先设置的二级交互显示模板和所述二级交互显示区域，进行页面显示。用户可以通过选择或触发二级交互显示区域中的二级触发按钮，进行二级页面元素02和三级页面元素03的交互。所述二级交互显示模板可以根据实际情况进行设置，例如：如图3所示，将二级元素详情区域021设置于视图页面的左上方，将二级元素交互触发区域022设置与视图页面的左下方，将三级页面元素03显示区域设置于视图页面的右方，使得用户对于不同层级之间的页面元素进行信息获取时，避免累加和叠加的窗口或对话框对用户带来的困扰，通过对视图页面进行精简化，提高视图页面显示的简洁度，便于用户通过交互行为，对不同层级的页面元素进行直接感知，提升用户体验感。
进一步地，S501：当所述页面元素不包括四级页面元素时，通过选择所述二级触发按钮，确定对应的触发操作；例如：用户通过触摸或点击所述二级触发按钮，确定对应的触发操作。
S502：根据所述触发操作，获取与三级页面元素03相关联的元素信息；
与三级页面元素03相关联的元素信息包括：与三级页面元素03对应的三级元素详情信息，以及用于对三级页面元素03进行交互触发的三级交互触发区域信息。
S503：根据与三级页面元素03相关联的元素信息，确定三级交互显示区域，并进行页面显示，所述三级交互显示区域包括：三级元素详情区域031和用于作为三级页面元素03的交互入口的三级元素交互触发区域032，所述三级元素交互触发区域032包括：一个或多个三级触发按钮，所述三级触发按钮与触发操作相对应。
S504：通过选择所述三级触发按钮，进行交互反馈，完成页面交互。通过上述步骤，完成用户与三级页面元素03的交互。完成交互后，点击或触摸视图页面左上角的返回箭头，返回至二级页面元素的平铺视图页面，或者，点击或触摸视图页面左上方的一级页面元素名称b的区域，直接返回一级页面元素的平铺视图页面。
请参考图4，S601：当所述页面元素包括四级页面元素时，则判断所述三级页面元素03是否被触发；即当所述页面元素包括有四级页面元素时，则监测所述三级页面元素03是否被触发，监测方式为：判断用户是否触摸或点击视图页面上的三级页面元素03。
S602：当任一所述三级页面元素03被触发时，则根据预设的页面平移方向，控制当前的视图页面平移，对所述二级元素详情区域021和二级元素交互触发区域022进行挤压与隐藏，并获取对应的页面平移方向；
S603：根据所述三级页面元素03，确定对应的四级元素详情信息与四级交互触发区域信息；
S604：根据所述四级元素详情信息与所述四级交互触发区域信息，确定对应的四级元素详情区域041和四级元素交互触发区域042；
S605：控制所述四级元素详情区域041和所述四级元素交互触发区域042沿所述页面平移方向出现，显示于当前的视图页面，所述四级元素详情区域041和所述四级元素交互触发区域042均位于所述三级页面元素03显示区域远离所述二级元素详情区域021的一侧。所述四级元素交互触发区域042包括：一个或多个四级触发按钮，所述四级触发按钮与触发操作相对应。
在一些实施例中，若不包括五级页面元素时，则通过点选视图页面左侧的展开图标向右挤压四级元素详情区域041和四级元素交互触发区域042，同时再还原视图页面左侧的二级元素详情区域021和二级元素交互触发区域022。统一考虑了PC端与移动端的不同交互方式和多种使用场景。在页面布局上，充分利用了视图页面的整体空间，如横向空间等，能够在PC端与移动端达成统一可延续的交互模式，有利于屏幕较小的移动端阅读信息，如：对视图页面进行左右平移或上下平移，对不同层级的页面元素进行显示，便于用户获取不同层级的页面元素的信息，且该交互模式在PC端与移动端可延续，降低了研发成本的同时，也为用户的移动办公提供了较好的支撑。
如图5所示，S701：当所述页面元素还包括五级页面元素时，通过选择所述四级触发按钮，确定对应的触发操作；
S702：根据所述触发操作，确定与所述四级页面元素相关联的元素信息；
S703：与所述四级页面元素相关联的元素信息包括：对应的五级元素详情信息和五级交互触发区域信息；
S704：根据所述五级元素详情信息和所述五级交互触发区域信息，确定对应的五级元素详情区域051和五级元素交互触发区域052；
S705：根据预设的五级交互显示模板、五级元素详情区域051和五级元素交互触发区域052，进行页面显示，并通过选择所述五级元素交互触发区域052中的五级触发按钮，进行交互反馈。五级页面元素作为最深的元素层级，可以以侧边栏的方式进行显示，在用户完成了特定的交互操作后给予相应的反馈信息，同时完成交互流程。
请参考图6，本实施例还提供一种页面交互系统，包括：
显示模块，用于在一视图页面上对相应层级的页面元素进行平铺显示，相邻层级的页面元素相互关联；
交互模块，用于当用户触发任一页面元素时，则根据预先设置的显示规则，进行下一层级的视图页面的显示与交互；
所述显示规则包括：确定与当前被触发的页面元素相关联的元素信息，根据所述元素信息，进行显示，所述元素信息至少包括以下之一：当前页面元素对应的元素详情信息、下一层级的页面元素，以及用于表示交互入口的交互触发区域信息；所述显示模块和交互模块连接。
在一些实施例中，根据所述元素信息，进行显示的步骤包括：
根据所述元素信息，确定对应的交互显示区域，所述交互显示区域至少包括以下之一：当前被触发的页面元素的元素详情区域、下一层级的页面元素的显示区域和当前被触发的页面元素的交互触发区域；
根据预设的平移方向，控制当前的视图页面平移，对当前视图页面中的交互显示区域进行挤压与隐藏，获取当前视图页面中的剩余区域；
利用所述剩余区域，对与所述元素信息相对应的交互显示区域进行显示，完成交互。
在一些实施例中，所述页面元素包括：一级页面元素01；
根据预先设置的分类规则，对多个所述一级页面元素01进行分类，确定所述一级页面元素01的类别；
根据所述一级页面元素01的类别，对所述一级页面元素01进行收纳与分组，获取一个或多个元素组以及对应的元素组图标00；
利用所述元素组图标00，对所述一级页面元素01进行显示。
在一些实施例中，所述页面元素还包括：二级页面元素02；
利用所述元素组图标00，对所述元素组进行触发；
当所述元素组被触发时，则对所述元素组对应的一级页面元素01进行显示；
当任一一级页面元素01被触发时，则根据当前的一级页面元素01，确定与当前的一级页面元素01相关联的二级页面元素02；
通过将下一层级的视图页面叠加至当前层级的视图页面，将所述二级页面元素02在下一层级的视图页面进行平铺显示。
在一些实施例中，所述页面元素还包括：三级页面元素03；
当任一二级页面元素02被触发时，则根据所述当前的二级页面元素02，确定与当前的二级页面元素02相关联的元素信息；
与当前的二级页面元素02相关联的元素信息包括：二级元素详情信息、下一层级的三级页面元素03，以及用于表示二级页面元素02与三级页面元素03的交互入口的二级交互触发区域信息；
根据与当前的二级页面元素02相关联的元素信息，确定二级交互显示区域，所述二级交互显示区域包括：二级元素详情区域021、三级页面元素03显示区域和二级元素交互触发区域022，所述二级元素交互触发区域022包括：一个或多个二级触发按钮，所述二级触发按钮与触发操作相对应；
根据预先设置的二级交互显示模板和所述二级交互显示区域，进行页面显示。
在一些实施例中，当所述页面元素不包括四级页面元素时，通过选择所述二级触发按钮，确定对应的触发操作；
根据所述触发操作，获取与三级页面元素03相关联的元素信息；
与三级页面元素03相关联的元素信息包括：与三级页面元素03对应的三级元素详情信息，以及用于对三级页面元素03进行交互触发的三级交互触发区域信息；
根据与三级页面元素03相关联的元素信息，确定三级交互显示区域，并进行页面显示，所述三级交互显示区域包括：三级元素详情区域031和用于作为三级页面元素03的交互入口的三级元素交互触发区域032，所述三级元素交互触发区域032包括：一个或多个三级触发按钮，所述三级触发按钮与触发操作相对应；
通过选择所述三级触发按钮，进行交互反馈，完成页面交互。
在一些实施例中，当所述页面元素包括四级页面元素时，则判断所述三级页面元素03是否被触发；
当任一所述三级页面元素03被触发时，则通过控制当前的视图页面平移，对所述二级元素详情区域021和二级元素交互触发区域022进行挤压与隐藏，并获取对应的页面平移方向；
根据所述三级页面元素03，确定对应的四级元素详情信息与四级交互触发区域信息；
根据所述四级元素详情信息与所述四级交互触发区域信息，确定对应的四级元素详情区域041和四级元素交互触发区域042；
控制所述四级元素详情区域041和所述四级元素交互触发区域042沿所述页面平移方向出现，显示于当前的视图页面，所述四级元素详情区域041和所述四级元素交互触发区域042均位于所述三级页面元素03显示区域远离所述二级元素详情区域021的一侧。
在一些实施例中，所述页面元素还包括：五级页面元素；
所述四级元素交互触发区域042包括：一个或多个四级触发按钮，所述四级触发按钮与触发操作相对应；
通过选择所述四级触发按钮，确定对应的触发操作；
根据所述触发操作，确定与所述四级页面元素相关联的元素信息；
与所述四级页面元素相关联的元素信息包括：对应的五级元素详情信息和五级交互触发区域信息；
根据所述五级元素详情信息和所述五级交互触发区域信息，确定对应的五级元素详情区域051和五级元素交互触发区域052；
根据预设的五级交互显示模板、五级元素详情区域051和五级元素交互触发区域052，进行页面显示，并通过选择所述五级元素交互触发区域052中的五级触发按钮，进行交互反馈。
本实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本实施例中的任一项方法。
本实施例还提供一种电子终端，包括：处理器及存储器；
所述存储器用于存储计算机程序，所述处理器用于执行所述存储器存储的计算机程序，以使所述终端执行本实施例中任一项方法。
本实施例中的计算机可读存储介质，本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过计算机程序相关的硬件来完成。前述的计算机程序可以存储于一计算机可读存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
本实施例提供的电子终端，包括处理器、存储器、收发器和通信接口，存储器和通信接口与处理器和收发器连接并完成相互间的通信，存储器用于存储计算机程序，通信接口用于进行通信，处理器和收发器用于运行计算机程序，使电子终端执行如上方法的各个步骤。
在本实施例中，存储器可能包含随机存取存储器(Random Access Memory，简称RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processing，简称DSP)、专用集成电路(Application SpecificIntegrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本发明的权利要求所涵盖。
Claims (10)
1.一种页面交互方法，其特征在于，包括：
在一视图页面上对相应层级的页面元素进行平铺显示，相邻层级的页面元素相互关联；
当用户触发任一页面元素时，则根据预先设置的显示规则，进行下一层级的视图页面的显示与交互；
所述显示规则包括：确定与当前被触发的页面元素相关联的元素信息，根据所述元素信息，进行显示，所述元素信息至少包括以下之一：当前页面元素对应的元素详情信息、下一层级的页面元素和用于表示交互入口的交互触发区域信息。
2.根据权利要求1所述的页面交互方法，其特征在于，根据所述元素信息，进行显示的步骤包括：
根据所述元素信息，确定对应的交互显示区域，所述交互显示区域至少包括以下之一：当前被触发的页面元素的元素详情区域、下一层级的页面元素的显示区域和当前被触发的页面元素的交互触发区域；
根据预设的平移方向，控制当前的视图页面平移，对当前视图页面中的交互显示区域进行挤压与隐藏，获取当前视图页面中的剩余区域；
利用所述剩余区域，对与所述元素信息相对应的交互显示区域进行显示，完成交互。
3.根据权利要求1所述的页面交互方法，其特征在于，所述页面元素包括：一级页面元素；
根据预先设置的分类规则，对多个所述一级页面元素进行分类，确定所述一级页面元素的类别；
根据所述一级页面元素的类别，对所述一级页面元素进行收纳与分组，获取一个或多个元素组以及对应的元素组图标；
利用所述元素组图标，对所述一级页面元素进行显示。
4.根据权利要求3所述的页面交互方法，其特征在于，所述页面元素还包括：二级页面元素；
利用所述元素组图标，对所述元素组进行触发；
当所述元素组被触发时，则对所述元素组对应的一级页面元素进行显示；
当任一一级页面元素被触发时，则根据当前的一级页面元素，确定与当前的一级页面元素相关联的二级页面元素；
通过将下一层级的视图页面叠加至当前层级的视图页面，将所述二级页面元素在下一层级的视图页面进行平铺显示。
5.根据权利要求1所述的页面交互方法，其特征在于，所述页面元素还包括：三级页面元素；
当任一二级页面元素被触发时，则根据所述当前的二级页面元素，确定与当前的二级页面元素相关联的元素信息；
与当前的二级页面元素相关联的元素信息包括：二级元素详情信息、下一层级的三级页面元素，以及用于表示二级页面元素与三级页面元素的交互入口的二级交互触发区域信息；
根据与当前的二级页面元素相关联的元素信息，确定二级交互显示区域，所述二级交互显示区域包括：二级元素详情区域、三级页面元素显示区域和二级元素交互触发区域，所述二级元素交互触发区域包括：一个或多个二级触发按钮，所述二级触发按钮与触发操作相对应；
根据预先设置的二级交互显示模板和所述二级交互显示区域，进行页面显示。
6.根据权利要求5所述的页面交互方法，其特征在于，当所述页面元素不包括四级页面元素时，通过选择所述二级触发按钮，确定对应的触发操作；
根据所述触发操作，获取与三级页面元素相关联的元素信息；
与三级页面元素相关联的元素信息包括：与三级页面元素对应的三级元素详情信息，以及用于对三级页面元素进行交互触发的三级交互触发区域信息；
根据与三级页面元素相关联的元素信息，确定三级交互显示区域，并进行页面显示，所述三级交互显示区域包括：三级元素详情区域和用于作为三级页面元素的交互入口的三级元素交互触发区域，所述三级元素交互触发区域包括：一个或多个三级触发按钮，所述三级触发按钮与触发操作相对应；
通过选择所述三级触发按钮，进行交互反馈，完成页面交互。
7.根据权利要求5所述的页面交互方法，其特征在于，当所述页面元素包括四级页面元素时，则判断所述三级页面元素是否被触发；
当任一所述三级页面元素被触发时，则根据预设的页面平移方向，控制当前的视图页面平移，对所述二级元素详情区域和二级元素交互触发区域进行挤压与隐藏；
根据所述三级页面元素，确定对应的四级元素详情信息与四级交互触发区域信息；
根据所述四级元素详情信息与所述四级交互触发区域信息，确定对应的四级元素详情区域和四级元素交互触发区域；
控制所述四级元素详情区域和所述四级元素交互触发区域沿所述页面平移方向出现，显示于当前的视图页面，所述四级元素详情区域和所述四级元素交互触发区域均位于所述三级页面元素显示区域远离所述二级元素详情区域的一侧。
8.一种页面交互系统，其特征在于，包括：
显示模块，用于在一视图页面上对相应层级的页面元素进行平铺显示，相邻层级的页面元素相互关联；
交互模块，用于当用户触发任一页面元素时，则根据预先设置的显示规则，进行下一层级的视图页面的显示与交互；
所述显示规则包括：确定与当前被触发的页面元素相关联的元素信息，根据所述元素信息，进行显示，所述元素信息至少包括以下之一：当前页面元素对应的元素详情信息、下一层级的页面元素和用于表示交互入口的交互触发区域信息。
9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述方法。
10.一种电子终端，其特征在于，包括：处理器及存储器；
所述存储器用于存储计算机程序，所述处理器用于执行所述存储器存储的计算机程序，以使所述终端执行如权利要求1至7中任一项所述方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111081194.9A CN113722042A (zh) | 2021-09-15 | 2021-09-15 | 一种页面交互方法、系统、介质及电子终端 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111081194.9A CN113722042A (zh) | 2021-09-15 | 2021-09-15 | 一种页面交互方法、系统、介质及电子终端 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113722042A true CN113722042A (zh) | 2021-11-30 |
Family
ID=78684028
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111081194.9A Pending CN113722042A (zh) | 2021-09-15 | 2021-09-15 | 一种页面交互方法、系统、介质及电子终端 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113722042A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114398574A (zh) * | 2022-01-17 | 2022-04-26 | 中国工商银行股份有限公司 | 差异化页面配置方法、系统、设备、介质、产品 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2687964A1 (en) * | 2012-07-20 | 2014-01-22 | Research In Motion TAT AB | Method and electronic device for facilitating user control of a menu |
| CN104166501A (zh) * | 2013-05-17 | 2014-11-26 | 华为技术有限公司 | 菜单显示方法及装置 |
| CN105187501A (zh) * | 2015-08-07 | 2015-12-23 | 北京思特奇信息技术股份有限公司 | 一种基于b/s构架的业务系统的菜单显示方法和系统 |
-
2021
- 2021-09-15 CN CN202111081194.9A patent/CN113722042A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2687964A1 (en) * | 2012-07-20 | 2014-01-22 | Research In Motion TAT AB | Method and electronic device for facilitating user control of a menu |
| CN104166501A (zh) * | 2013-05-17 | 2014-11-26 | 华为技术有限公司 | 菜单显示方法及装置 |
| CN105187501A (zh) * | 2015-08-07 | 2015-12-23 | 北京思特奇信息技术股份有限公司 | 一种基于b/s构架的业务系统的菜单显示方法和系统 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114398574A (zh) * | 2022-01-17 | 2022-04-26 | 中国工商银行股份有限公司 | 差异化页面配置方法、系统、设备、介质、产品 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10503255B2 (en) | Haptic feedback assisted text manipulation | |
| US8600967B2 (en) | Automatic organization of browsing histories | |
| CN104756064B (zh) | 用于管理触摸接口的技术和设备 | |
| CN109509056A (zh) | 基于对抗网络的商品推荐方法、电子装置及存储介质 | |
| CN109891374B (zh) | 用于与数字代理的基于力的交互的方法和计算设备 | |
| CN103105995A (zh) | 显示方法和电子设备 | |
| CN102750003B (zh) | 文本输入的方法和装置 | |
| CN104317395B (zh) | 信息处理方法和电子设备 | |
| CN104956301A (zh) | 显示设备和控制显示设备的方法 | |
| CN105144072A (zh) | 在多点触控装置上对压感进行模拟 | |
| CN110457105A (zh) | 界面操作方法、装置、设备及存储介质 | |
| US11256385B2 (en) | Application menu modification recommendations | |
| CN103414829A (zh) | 一种控制屏幕内容的方法、装置及终端设备 | |
| DE102014101026A1 (de) | Eingabestiftkurzschrift | |
| DE102014101042A1 (de) | Modifizieren einer Eingabestifteingabe oder -reaktion unter Verwendung einer gefolgerten Bewegung | |
| CN103294805A (zh) | 数据仓库个性化维度表的创建方法和装置 | |
| CN113722042A (zh) | 一种页面交互方法、系统、介质及电子终端 | |
| CN107430597A (zh) | 文本选择控件的增强 | |
| CN105824548A (zh) | 一种电子表格单元格合并、拆分方法及装置 | |
| CN108307044B (zh) | 一种终端操作方法及设备 | |
| CN104182115A (zh) | 一种阅读类应用中的翻页设置方法及装置、终端 | |
| CN109085983A (zh) | 操作控制方法、装置、存储介质及电子设备 | |
| CN103092615A (zh) | 一种任务预览的方法和装置 | |
| Brückner et al. | Learning GUI completions with user-defined constraints | |
| CN105389357B (zh) | 一种用于调整界面信息块排布的方法与设备 |
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 |