WO2022068778A1 - 一种页面切换的方法、系统、电子装置及存储介质 - Google Patents

一种页面切换的方法、系统、电子装置及存储介质 Download PDF

Info

Publication number
WO2022068778A1
WO2022068778A1 PCT/CN2021/121037 CN2021121037W WO2022068778A1 WO 2022068778 A1 WO2022068778 A1 WO 2022068778A1 CN 2021121037 W CN2021121037 W CN 2021121037W WO 2022068778 A1 WO2022068778 A1 WO 2022068778A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
bar
content
title bar
title
Prior art date
Application number
PCT/CN2021/121037
Other languages
English (en)
French (fr)
Inventor
刘昌荣
Original Assignee
深圳市万普拉斯科技有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 深圳市万普拉斯科技有限公司 filed Critical 深圳市万普拉斯科技有限公司
Publication of WO2022068778A1 publication Critical patent/WO2022068778A1/zh

Links

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

Definitions

  • the present application relates to the technical field of electronic devices, and in particular, to a method, system, electronic device and storage medium for page switching.
  • the electronic device In the process of being used by a user, the electronic device often feeds back the user's operation to switch between pages, so that the user can browse or operate different pages.
  • the existing method for switching between pages of electronic devices is to directly superimpose the second page on the first page, and the background of the second page is opaque, which can completely cover the old page (ie, the first page), thereby completing the page transition. switch between.
  • embodiments of the present application provide a method, system, electronic device, and storage medium for page switching.
  • a first aspect of the embodiments of the present application provides a method for page switching, including the following steps: when detecting a switching instruction to switch from displaying a first page to displaying a second page, acquiring the difference between the second page and the first page between the same display content elements and different display content elements at the corresponding positions between the second page and the first page; replace the different display content elements in the second page with the different display content elements at the corresponding positions on the first page The content element completes the switching display from the first page to the second page.
  • a second aspect of the embodiments of the present application provides a system for page switching, including: a detection and acquisition module, configured to acquire the second page and the selected page when a switching instruction is detected to switch from displaying a first page to displaying a second page. the same display content elements between the first pages and different display content elements at the corresponding positions between the second page and the first page; the element replacement module is configured to replace the different display content elements in the second page Different display content elements at the corresponding positions of the first page complete the switching display from the first page to the second page.
  • a third aspect of an embodiment of the present application provides an electronic device, including: a memory, a processor, and a computer program stored on the memory and executable on the processor, when the processor executes the computer program, The method for implementing any one of the above-mentioned page switching.
  • a fourth aspect of the embodiments of the present application provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a processor, implements any one of the above-mentioned methods for page switching.
  • FIG. 1 is a schematic flowchart of a method for page switching according to an embodiment of the present application
  • Fig. 2 is the concrete flow chart of S2 after S1 is executed in Fig. 1;
  • Fig. 3 is the specific flow chart of S11 after S1 is executed in Fig. 2;
  • Fig. 4 is the specific flow chart of S12 after S11 is executed in Fig. 2;
  • FIG. 5 is a page element distribution diagram of a non-first-level page of a method for page switching according to an embodiment of the present application
  • FIG. 6 is a page element distribution diagram of a first-level page of a method for page switching according to an embodiment of the present application
  • FIG. 7 is a schematic block diagram of the structure of an electronic device according to an embodiment of the present application.
  • FIG. 8A, FIG. 8B, FIG. 8C, and FIG. 8D are schematic diagrams of switching effects from a first-level page to a second-level page of a method for page switching according to an embodiment of the present application in turn;
  • FIG. 8D , FIG. 9A , FIG. 9B , and FIG. 9C are schematic diagrams of switching effects from a second-level page to a third-level page in a method for page switching according to an embodiment of the present application.
  • an embodiment of the present application provides a method for page switching, including: S1. When detecting a switching instruction to switch from displaying a first page to displaying a second page, acquiring the same display between the second page and the first page The content elements and the different display content elements at the corresponding positions between the second page and the first page; S2. Replace the different display content elements in the second page with the different display content elements at the corresponding positions of the first page, and complete the first page to the first page. Switch display of two pages.
  • the switching of display content between different pages can be completed, thereby completing the switching between different pages.
  • the same display elements show the visual effect that no replacement occurs when the pages are switched, so that the two pages are switched. are associated with the same display element.
  • the elements that make up the page include a title bar 1, a page content bar 2, and a common element bar 3 that has the same elements at the same position as the first page.
  • the second page is The page to be switched to, the first page is the page to be eliminated.
  • the same display content element may be the common element bar 3 in the above; different display content elements may be the title bar 1 and the content bar 2 in the above; when switching pages.
  • 8A to 8D 8A is the first page and is the first page, and 8D is the second page.
  • the title bar (Settings) of the first page 8A is blurred and reduced to FIG. 8B
  • the content bar of the first page is blurred to the state of FIG. 8B, until the title bar and content bar of the page of FIG. 8A are blurred to completely transparent, and then the second page gradually reduces the transparency from complete transparency to the semi-transparent state of FIG. 8C. state until the transparency is reduced to the fully opaque state shown in Figure 8D.
  • 8D to 9C 8D is used as the first page
  • 9C is used as the second page
  • neither the first page nor the second page is a first-level page, in the process of switching from the first page 8D to the second page 9C
  • the title bar (Wi-Fi & internet) and content bar of the first page 8D are gradually blurred to the state of 9A, and then gradually blurred to completely transparent, and then the second page gradually reduces the transparency from the completely transparent state to the state of FIG. 9B until the transparency is reduced. to the fully opaque state shown in Figure 9C.
  • the different elements between the second page and the first page include the title bar and/or the content bar; the common element is the common element bar of the second page and the first page at the same position and having the same elements.
  • the step of replacing different display content elements in the second page with different display content elements at the corresponding positions of the first page includes: S11. If the title bar of the second page is different from the title bar of the first page, use The first dynamic effect eliminates the title bar of the first page; S12, the second dynamic effect is used to replace the title bar of the second page at the title bar of the first page.
  • S11 of S2 is executed.
  • the switching between the title bar of the first page and the title bar of the second page can be dynamically changed.
  • the step of replacing the different display content elements in the second page with the different display content elements at the corresponding positions of the first page further includes: S13, using the third dynamic effect to eliminate the display content bar of the first page; S14, Using the fourth dynamic effect, the displayed content bar of the second page is replaced at the content bar of the first page.
  • using the first dynamic effect to eliminate the title bar of the first page includes: applying at least one dynamic effect of rotation, zooming, panning, and blur to the title bar of the first page, and eliminating the first page title bar.
  • the dynamic connection between the title bar of the first page and the title bar of the first page is more obvious, thereby enhancing the dynamic change relationship between the title bar of the first page and the title bar of the second page, making it easier for users to understand the content of the page. dynamic relationship between them.
  • the method for page switching further includes: judging whether the second page or the first page is a first-level page; if so, dividing the split column into a common element column; The column and function icons are divided into common element columns; the split column is used to divide the title column and the page content column; the function icon icon is used to realize a predetermined function after the user clicks.
  • the dividing bar is a solid dividing line or a blank dividing area; the function icon is a return icon, which is used to return to a higher-level page of the current page after the user clicks.
  • the first-level page is the initial page, it cannot return to a higher-level page; instead of a first-level page, you can return to a higher-level page, so there is no return icon on the first-level page, but there is a return icon on the non-first-level page. icon.
  • the dividing bar in the initial state of the primary page, the dividing bar is a blank dividing area, and in the non-initial state of the primary page, the dividing bar is the dividing line, and the primary page responds to the user's sliding operation.
  • the title in the title bar is gradually reduced to a predetermined size, and the dividing line gradually reduces the transparency from the transparent state to cover the blank dividing area, thereby dividing the title bar and content column.
  • the dividing bar of a non-first-level page is a dividing line, and the dividing bar set in this way can facilitate the user to distinguish whether the current page is a first-level page or not.
  • using the first dynamic effect to eliminate the title bar of the first page includes: S111, judging whether the first page is a first-level page; S112, if the first page is a first-level page, then determining whether the first page is a first-level page
  • the title bar uses the dynamic effect of shrinking or enlarging, and gradually blurs the title bar to be transparent, so as to eliminate the title bar of the first page; S113, if the first page is not a first-level page, use the title bar of the first page
  • S112 is: if the first page is a first-level page, use a reduced dynamic effect on the title bar of the first page, gradually blur the title bar to transparent, and eliminate the title bar of the first page.
  • the title bar of the non-level-1 page uses the dynamic effect of translation, which can further facilitate the user to distinguish whether the current page is a level-1 page.
  • the dynamic effect used by the title bar of the first page is the horizontal translation of the title in the title bar on the first page.
  • the visual effect that the title bar is gradually vacated can be reflected. Therefore, after the title bar of the second page is replaced with the title bar of the first page, it is reflected that The title bar on the current page is gradually emptied and filled with visual effects, thus enhancing the dynamic change relationship between the title bar of the first page and the title bar of the second page.
  • FIG. 8A is the first page and is the first page
  • 8D is the second page.
  • the page is switched, in addition to the change of the transparent state of the title bar and the content bar, there is also a title bar.
  • the title bar (Settings) of the first page 8A is reduced to that shown in the title bar (Settings) of 8B; the title bar (Wi-Fi & internet) of the second page changes from left to right while the transparency is changed (from left to right).
  • Figure 8C translates to the state of Figure 8D).
  • 8D is the first page
  • 9C is the second page
  • neither the first page nor the second page is a first-level page.
  • the transparent state changes.
  • the title bar (Wi-Fi & internet) of the first page 8D moves from right to left (panning from Fig. 8D to the state of Fig. 9A)
  • the second page's The title bar moves from right to left (moving from the state of FIG. 9B to FIG. 9C ).
  • using the second dynamic effect to replace the title bar of the second page at the title bar of the first page includes: using at least one of rotating, zooming, panning, and reducing transparency on the title bar of the second page A dynamic effect that replaces the title bar of the first page.
  • While replacing the title bar of the second page with the title bar of the first page, using at least one dynamic effect of rotation, zooming, panning and reducing transparency can make the dynamic effect more obvious in the process of removing the title bar , which can make the dynamic connection between the title bar of the second page and the title bar of the first page more obvious, thereby enhancing the dynamic relationship between the title bar of the first page and the title bar of the second page, making the user It is easier to understand the dynamic changing relationship between pages.
  • using the second dynamic effect to replace the title bar of the second page at the title bar of the first page includes: S121, judging whether the second page is a first-level page; S122, if the second page is a first-level page page, use the dynamic effect of shrinking or magnifying the title bar of the second page, and gradually reduce the transparency of the title bar from the transparent state to the normal display, replace the title bar of the first page, and display it normally as the completion of the first page to the second page.
  • the normal display replaces the title bar of the first page, and the normal display is the display form of the title bar of the second page after the switch from the first page to the second page is completed.
  • S122 is: if the second page is a first-level page, use the dynamic effect of reducing or enlarging the title bar of the second page, and gradually reduce the transparency of the title bar from the transparent state to the normal display, and replace the first page.
  • the title bar of a page further facilitates the user to distinguish whether the current page is a first-level page.
  • S121 of S11 is executed, and then S122 or S123 are executed.
  • the title bar of the second page uses a dynamic effect as the title
  • the title in the column is translated along the horizontal direction on the second page, and the translation direction is the same as the translation direction of the title bar of the first page on the first page.
  • FIGS. 8A to 9C taking FIGS. 8D to 9C as an example, 8D is used as the first page, 9C is used as the second page, and neither the first page nor the second page is a first-level page, and page switching is performed.
  • the title bar (Wi-Fi & internet) of the first page 8D moves from right to left (translated from FIG. 8D to the state of FIG. 9A )
  • the title bar (SIM & network settings) of the second page is moved from right to left (moved from the state of FIG. 9B to FIG. 9C ), so that the second page and the first page are displayed in the way of scrolling subtitles. Toggle between title bars.
  • using the third dynamic effect to eliminate the content bar of the first page includes: applying at least one dynamic effect of rotation, zooming, panning and blurring to the content bar of the first page, and eliminating the first dynamic effect.
  • the content bar of the page includes: applying at least one dynamic effect of rotation, zooming, panning and blurring to the content bar of the first page, and eliminating the first dynamic effect.
  • the effect is more obvious, which can make the dynamic connection between the content bar of the second page and the content bar of the first page more obvious, thereby enhancing the dynamic connection between the content bar of the first page and the content bar of the second page.
  • Changing the relationship makes it easier for users to understand the hierarchical relationship between pages.
  • using the third dynamic effect to eliminate the content bar of the first page includes: applying a translation dynamic effect to the content bar of the first page, gradually blurring the content bar to transparent, and eliminating the content of the first page column.
  • FIG. 8A to FIG. 9C shows the visual effect that the content bar on the current page is gradually emptied and filled again, thus enhancing the visual effect.
  • the dynamic change relationship existing between the content column of the first page and the content column of the second page is determined.
  • FIG. 8A to FIG. 9C taking FIG. 8D to FIG. 9C as an example, 8D is used as the first page, 9C is used as the second page, and neither the first page nor the second page is a first-level page.
  • the title bar (Wi-Fi & internet) of the first page 8D moves from right to left (panning from Fig. 8D to the state of Fig. 9A) , showing the visual effect that the content column is gradually emptied.
  • the content column is completely emptied, and the title bar (SIM&network settings) of the second page moves from right to left (from Fig. 9B moves to the state shown in FIG. 9C ), showing the effect of gradually filling in the blanks of the content column, thereby showing the way of scrolling subtitles to switch the title column between the second page and the first page.
  • the dynamic effect of using translation on the content bar of the first page is the vertical translation of the content in the content bar on the first page.
  • the vertical translation can not only distinguish the horizontal translation of the content of the title bar, but also increases the switching relationship between the second page and the first page, thereby further increasing the dynamic changes existing between the second page and the first page. relation.
  • using the fourth dynamic effect to replace the content bar of the second page at the content bar of the first page includes: using at least one of rotating, zooming, panning, and reducing transparency on the content bar of the second page A dynamic effect and replaces the content bar of the first page.
  • using at least one dynamic effect of rotation, zooming, panning and reducing transparency can make the dynamic effect of the content bar of the second page more obvious, so that the second page can be made more visible.
  • the dynamic connection between the content bar of the page and the content bar of the first page is more obvious, thereby enhancing the dynamic relationship between the content bar of the first page and the content bar of the second page, making it easier for users to understand the page hierarchical relationship between them.
  • using the fourth dynamic effect to replace the content bar of the second page at the content bar of the first page includes: applying a translation dynamic effect to the content bar of the second page, and gradually changing the content bar from a transparent state The transparency is reduced to normal display, and the content bar of the first page is replaced.
  • the above-mentioned normal display is the display form of the content bar of the second page after the switching from the first page to the second page is completed.
  • the dynamic effect of using translation on the content bar of the second page is the vertical translation of the content in the content bar on the first page, and the translation direction is opposite to the translation direction of the title bar of the first page on the first page.
  • FIG. 8A By using the dynamic effect of translation in the content column of the second page, and the translation direction of the content in the content column is opposite to the translation direction of the content in the content column of the first page, please refer to FIG. 8A to FIG.
  • the content bar draws out the current page, and the content bar of the second page slides into the visual effect of the current page, thus making it easier for users to understand the hierarchical relationship between pages.
  • An embodiment of the present application further provides a system for page switching, including: a detection and acquisition module, configured to acquire the information between the second page and the first page when detecting a switching instruction to switch from displaying the first page to displaying the second page.
  • a detection and acquisition module configured to acquire the information between the second page and the first page when detecting a switching instruction to switch from displaying the first page to displaying the second page.
  • the element replacement module is configured to replace the different display content elements in the second page with the different display content elements in the corresponding positions of the first page. to complete the switching display from the first page to the second page.
  • the different elements between the second page and the first page include a title bar and/or a content bar; the same display content element is a common element of the second page and the first page at the same position and having the same element element bar.
  • the element replacement module includes: a title bar removal unit and a title bar replacement unit; the title bar removal unit is configured to use the first dynamic effect to remove the title bar of the first page if the title bar of the second page is different from the title bar of the first page ; The title bar replacement unit is configured to use the second dynamic effect to replace the title bar of the second page at the title bar of the first page.
  • the element replacement module further includes: a content column elimination unit and a content column replacement unit; the content column elimination unit is configured to use a third dynamic effect to eliminate the content column of the first page; the content column replacement unit is configured as The content bar of the second page is replaced at the content bar of the first page by using the fourth dynamic effect.
  • the title bar removing unit includes: a dynamic title removing subunit, configured to use at least one dynamic effect of rotation, zoom-translation, and blur on the title bar of the first page, and remove the first page title bar.
  • the title bar removing unit further includes: a first judging subunit, a first zooming subunit, and a first translation subunit; the first judging subunit is configured to judge whether the first page is a first-level page; The first zooming subunit is configured to use a dynamic effect of reducing or enlarging the title bar of the first page when the first determining subunit determines that the first page is a first-level page, and gradually blur the title bar to be transparent.
  • the translation subunit is configured to use the dynamic effect of translation on the title bar of the first page when the first judgment subunit determines that the first page is not a first-level page, and the title bar
  • the column is gradually blurred to transparent, eliminating the title bar of the first page.
  • the first zoom sub-unit is a zoom-out sub-unit, and is configured to use a zoom-out dynamic effect on the title bar of the first page if the first page is a first-level page, and gradually blur the title bar to Transparent, the title bar of the first page is eliminated; and the dynamic effect used by the translation subunit is the horizontal translation of the title in the title bar on the first page.
  • the title bar replacement unit includes: a dynamic title replacement subunit, configured to use at least one dynamic effect of rotating, zooming, panning and reducing transparency on the title bar of the second page to replace the title bar of the first page. title.
  • the title bar replacement unit includes: a second judgment subunit, a second zoom subunit and a second translation subunit; the second judgment subunit is configured to judge whether the second page is a first-level page; The two-zoom subunit is configured to use a dynamic effect of reducing or enlarging the title bar of the second page when the second determining subunit determines that the second page is a first-level page, and gradually reduce the transparency of the title bar from the transparent state
  • the above-mentioned normal display is the display form of the title bar of the second page after the switch from the first page to the second page is completed, replacing the title bar of the first page; the second translation subunit is configured to be in the second judgment subunit When it is determined that the second page is not a first-level page, use the dynamic effect of translation on the title bar of the second page, and gradually reduce the transparency of the title bar from the transparent state to the normal display, and replace the title bar of the first page.
  • the above is normal. It is displayed as the display form
  • the second zooming sub-unit is a magnifying sub-unit, and is configured to use a zoom-in dynamic effect on the title bar of the second page if the second page is a first-level page, and gradually reduce the title bar from a transparent state When the transparency reaches normal display, the title bar of the first page is replaced; the dynamic effect of the second translation subunit using translation on the title bar of the second page is the horizontal translation of the title in the title bar on the second page.
  • the content bar removing unit includes: a dynamic content removing subunit, configured to use at least one dynamic effect of rotation, zooming, panning and blurring on the content bar of the first page, and remove the first page content column.
  • the content bar removing unit includes: a third panning subunit, configured to use a dynamic effect of panning on the content bar of the first page, and gradually blur the content bar to transparent, eliminating the content bar.
  • the dynamic effect of the third translation unit using translation on the content bar of the first page is the translation of the content in the content bar of the page along the vertical direction on the first page.
  • the content bar replacement unit includes: a dynamic content replacement subunit, configured to use at least one dynamic effect of rotation, zoom, translation and transparency reduction on the content bar of the second page, and replace the first page content column.
  • the content bar replacement unit includes: a fourth translation subunit, configured to use a translation dynamic effect on the content bar of the second page, and gradually reduce the transparency of the content bar from a transparent state to a normal display, replacing the first
  • the above-mentioned normal display is the display form of the content bar of the second page after the switching from the first page to the second page is completed;
  • the system for page switching further includes: a first-level page judgment module, configured to judge whether the second page or the first page is a first-level page; an element column division module, configured as a first-level page judgment module to determine whether the second page is a first-level page.
  • a first-level page judgment module configured to judge whether the second page or the first page is a first-level page
  • an element column division module configured as a first-level page judgment module to determine whether the second page is a first-level page.
  • the electronic device includes: a memory 601, a processor 602, and a computer program stored in the memory 601 and running on the processor 602, and the processor 602 executes the computer When the program is executed, the method of page switching described above is realized.
  • the electronic device further includes: at least one input device 603 and at least one output device 604 .
  • the above-mentioned memory 601 , processor 602 , input device 603 and output device 604 are connected through a bus 605 .
  • the input device 603 may specifically be a camera, a touch panel, a physical button, a mouse, or the like.
  • the output device 604 may specifically be a display screen.
  • the memory 601 may be a high-speed random access memory (RAM, Random Access Memory) memory, or may be a non-volatile memory (non-volatile memory), such as a disk memory.
  • RAM Random Access Memory
  • non-volatile memory such as a disk memory.
  • Memory 601 is used to store a set of executable program codes, and processor 602 is coupled to memory 601 .
  • the electronic devices described in this application can be, but are not limited to, such as mobile phones, tablet computers, notebook computers, PDAs, personal digital assistants (PDA, Personal Digital Assistant), portable media players (PMP, Portable Media Player), navigation devices , mobile terminals such as wearable devices, smart bracelets, and pedometers, as well as fixed terminals such as digital TVs and desktop computers.
  • PDA personal digital assistants
  • PMP Portable Media Player
  • navigation devices mobile terminals such as wearable devices, smart bracelets, and pedometers, as well as fixed terminals such as digital TVs and desktop computers.
  • Embodiments of the present application further provide a computer-readable storage medium, which may be provided in the electronic device in the foregoing embodiments, and the computer-readable storage medium may be the foregoing memory 601 .
  • a computer program is stored on the computer-readable storage medium, and when the program is executed by the processor 602, the method for page switching described in the foregoing embodiments is implemented.
  • the computer-storable medium may also be a USB flash drive, a removable hard disk, a read-only memory (ROM, Read-Only Memory), a RAM, a magnetic disk, or an optical disk, and other media that can store program codes.
  • first and second are only used for description purposes, and cannot be understood as indicating or implying relative importance or implying the number of indicated technical features. Thus, features defined as “first”, “second” may expressly or implicitly include one or more features. In the description of the present application, “plurality” means two or more, unless otherwise expressly and specifically defined.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本申请实施例公开了一种页面切换的方法、系统、电子装置及存储介质，页面切换的方法包括：检测到从展示第一页面切换到展示第二页面的切换指令时，获取所述第二页面与所述第一页面之间相同显示内容元素和所述第二页面与所述第一页面之间对应位置的不同显示内容元素；将所述第二页面中的不同显示内容元素替换所述第一页面对应位置的不同显示内容元素，完成第一页面至第二页面的切换展示。

Description

一种页面切换的方法、系统、电子装置及存储介质
相关申请的交叉引用
本申请基于申请号为202011070334.8、申请日为2020年09月30日的中国专利申请提出，并要求该中国专利申请的优先权，该中国专利申请的全部内容在此以引入方式并入本申请。
技术领域
本申请涉及电子设备技术领域，具体涉及一种页面切换的方法、系统、电子装置及存储介质。
背景技术
电子设备在被用户使用的过程中，经常会反馈用户的操作进行页面间的切换，以使达到用户浏览或操作不同的页面。
现有的电子设备页面之间的切换方法，是将第二页面直接叠加在第一页面上，第二页面的背景是不透明的，能够完全覆盖旧页面(即第一页面)，从而完成页面之间的切换。
发明内容
鉴于此，本申请实施例提供一种页面切换的方法、系统、电子装置及存储介质。
本申请实施例第一方面提供一种页面切换的方法，包括以下步骤：检测到从展示第一页面切换到展示第二页面的切换指令时，获取所述第二页面与所述第一页面之间相同显示内容元素和所述第二页面与所述第一页面之间对应位置的不同显示内容元素；将所述第二页面中的不同显示内容元 素替换所述第一页面对应位置的不同显示内容元素，完成第一页面至第二页面的切换展示。
本申请实施例第二方面提供一种页面切换的系统，包括：检测及获取模块，配置为检测到从展示第一页面切换到展示第二页面的切换指令时，获取所述第二页面与所述第一页面之间的相同显示内容元素和所述第二页面与所述第一页面之间对应位置的不同显示内容元素；元素替换模块，配置为将第二页面中的不同显示内容元素替换所述第一页面对应位置的不同显示内容元素，完成第一页面至第二页面的切换展示。
本申请实施例第三方面提供一种电子装置，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现上述中的任意一项所述页面切换的方法。
本申请实施例第四方面提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现上述中的任意一项所述页面切换的方法。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例页面切换的方法的流程示意图；
图2是图1中S1执行后S2的具体流程示意图；
图3是图2中S1执行后S11的具体流程示意图；
图4是图2中S11执行后S12的具体流程示意图；
图5为本申请实施例页面切换的方法的非一级页面的页面元素分布图；
图6为本申请实施例页面切换的方法的一级页面的页面元素分布图；
图7是本申请实施例电子装置的结构示意框图；
图8A、图8B、图8C及图8D依次为本申请实施例页面切换的方法一级页面至二级页面的切换效果示意图；
图8D、图9A、图9B及图9C依次为本申请实施例页面切换的方法二级页面至三级页面的切换效果示意图。
具体实施方式
下面结合附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而非全部实施例。基于本申请中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。在不冲突的情况下，下述各个实施例及其技术特征可以相互组合。
参照图1，本申请实施例提供一种页面切换的方法，包括：S1、检测到从展示第一页面切换到展示第二页面的切换指令时，获取第二页面与第一页面之间相同显示内容元素和第二页面与第一页面之间对应位置的不同显示内容元素；S2、将第二页面中的不同显示内容元素替换第一页面对应位置的不同显示内容元素，完成第一页面至第二页面的切换展示。
本实施例中，在进行页面切换时，通过将第二页面的不同显示内容元素替换第一页面对应位置的不同显示内容元素，能够完成不同页面之间显示内容的切换，从而完成不同页面之间的切换展示，同时，由于第二页面与第一页面之间的对应位置存在相同显示内容元素，使得在进行页面切换时，相同显示元素呈现出没有发生更换的视觉效果，从而使得两个页面切换时以相同显示元素作为关联。
请参阅图5及图6，在页面中，组成页面的元素包括标题栏1、页面内容栏2，及第二页面与第一页面在相同位置具有相同元素的共有元素栏3，第二页面为将要切换至的页面，第一页面为将要消除的页面。
在本实施例中，相同显示内容元素可以为上述中的共有元素栏3；不同显示内容元素可以为上述中的标题栏1及内容栏2；在进行页面切换时。
请参阅图8A至图9C，通过将第二页面的相同显示内容元素替换在第一页面的相同显示内容元素处，能够使得第二页面及第一页面切换时，体现出共有元素没有发生改变的视觉效果，从而通过相同显示内容元素在用户的视觉上保持了第二页面及第一页面之间的衔接关系，而又通过使用第二页面中的不同显示内容元素替换在第一页面对应位置的不同显示内容元素处，能够使得第二第一页面之间的切换存在了关联，以此使得用户易于理解和感知页面之间的关系，因此为用户提供了动效交互体验，增加了用户对电子设备的使用体验。
其中，在图8A至图8D中，8A为一级页面且作为第一页面，8D为第二页面，在进行页面切换时，第一页面8A的标题栏(Settings)虚化并缩小至图8B的状态，同时第一页面的内容栏虚化至图8B的状态，直至图8A页面的标题栏及内容栏虚化至完全透明，随后第二页面从完全透明逐渐降低透明度至图8C的半透明状态，直至降低透明度至图8D表现的完全不透明的状态。
在图8D至图9C中，8D作为第一页面，9C作为第二页面，且第一页面及第二页面均不是一级页面，在从第一页面8D切换至第二页面9C的过程中，第一页面8D的标题栏(Wi-Fi&internet)及内容栏逐渐虚化至9A状态，随后逐渐虚化至完全透明，随后第二页面从完全透明态逐渐降低透明度至图9B的状态，直至降低透明度至图9C表现的完全不透明状态。
第二页面与第一页面之间的不同元素包括标题栏和/或内容栏；共有元素为第二页面与第一页面在相同位置且具有相同元素的共有元素栏。
在本实施例中，将第二页面中的不同显示内容元素替换第一页面对应位置的不同显示内容元素的步骤包括：S11、若第二页面的标题栏与第一页 面的标题栏不同，利用第一动态效果将第一页面的标题栏消除；S12、利用第二动态效果将第二页面的标题栏替换在第一页面的标题栏处。
请参阅图1及图2，执行完S1即执行S2的S11，通过使用第一动态效果及第二动态效果，能够使得第一页面的标题栏及第二页面的标题栏之间的切换存在动态的变化关系，从而使得第二页面及第一页面之间的切换存在动态变化关系。
在本实施例中将第二页面中的不同显示内容元素替换第一页面对应位置的不同显示内容元素的步骤还包括：S13、利用第三动态效果将第一页面的显示内容栏消除；S14、利用第四动态效果将第二页面的显示内容栏替换在第一页面的内容栏处。
请参阅图1及图2，执行完S1，在执行S11的同时，执行S13，通过使用第三动态效果及第四动态效果，能够使得第二页面和第一页面的内容栏之间的切换存在动态的变化关系，从而进一步增加了第二页面和第一页面之间的切换存在的动态变化关系。
在另一实施例中，利用第一动态效果将第一页面的标题栏消除包括：对第一页面的标题栏使用旋转、缩放平移和虚化中的至少一种动态效果，并消除第一页面的标题栏。
在将第一页面的标题栏消除的同时，使用旋转、缩放、平移和虚化中的至少一种动态效果，能够使得标题栏在消除的过程中，动态效果更加的明显，能够使得第二页面的标题栏与第一页面的标题栏之间的动态衔接更加明显，从而增强了第一页面的标题栏及第二页面的标题栏之间存在动态的变化关系，使得用户能够更加易于理解页面之间具有的动态变化关系。
在本申请的一些可选实施例中，页面切换的方法还包括：判断第二页面或第一页面是否为一级页面；若是，则将分割栏划分为共有元素栏；若否，则将分割栏及功能图标划分为共有元素栏；分割栏用于分割标题栏及 页面内容栏；功能图标图标用于在用户点击后实现预定功能。
分割栏为实体的分割线或空白的分割区；功能图标为返回图标，用于在用户点击后从返回当前页面的更高一层级页面。
由于一级页面为初始页面，无法返回更高一层级的页面；而非一级页面，可以返回更高一层级的页面，因此在一级页面上没有返回图标，在非一级页面上具有返回图标。
在本实施例中，一级页面在初始状态下，分割栏为空白的分割区，一级页面在非初始状态下，分割栏为分割线，一级页面在响应于用户的上滑操作后，页面上滑，从初始状态转变为非初始状态的过程中，标题栏内的标题逐渐缩小至预定大小，分割线从透明态逐渐降低透明度将空白的分割区覆盖，从而将标题栏及内容栏分割；非一级页面的分割栏为分割线，这样设置的分割栏，能够便于用户区分当前页面是否为一级页面。
在本实施例中，使用第一动态效果将第一页面的标题栏消除包括：S111、判断第一页面是否为一级页面；S112、若第一页面为一级页面，则对第一页面的标题栏使用缩小或放大的动态效果，并将标题栏逐渐虚化至透明，以消除第一页面的标题栏；S113、若第一页面不为一级页面，则对第一页面的标题栏使用平移的动态效果，并将标题栏逐渐虚化至透明，以消除第一页面的标题栏。
在本实施例中，S112为：若第一页面为一级页面，则对第一页面的标题栏使用缩小的动态效果，并将标题栏逐渐虚化至透明，消除第一页面的标题栏。
请参阅图2及图3，在S1执行完后，即执行S11的S111，随后执行S113或S112，在第一页面为一级页面的情况下，通过将一级页面标题栏使用缩小或放大的动态效果，非一级页面的标题栏使用平移的动态效果，能够进一步便于用户区分当前页面是否为一级页面。
在第一页面为非一级页面的情况下，第一页面的标题栏使用的动态效果为标题栏内的标题在第一页面上沿水平方向的平移。
请参阅图8A至图9C，通过使用平移的动态效果，能够体现标题栏逐渐被空出来的视觉效果，因此在将第二页面的标题栏替换在第一页面的标题栏上后，体现的是当前页面上的标题栏逐渐被空出来，又被填充的视觉效果，因此增强了第一页面的标题栏及第二页面的标题栏之间存在的动态变化关系。
其中，在图8A至图8D中，图8A为一级页面且作为第一页面，8D为第二页面，在进行页面切换时，除了标题栏及内容栏的透明态改变，还有标题栏的动态效果，第一页面8A的标题栏(Settings)缩小至8B的标题栏(Settings)所示；第二页面的标题栏(Wi-Fi&internet)在透明度改变的同时，还从左向右平移(从图8C平移至图8D的状态)。
在图8D至图9C中，8D作为第一页面，9C作为第二页面，且第一页面及第二页面均不是一级页面，在进行页面切换时，除了标题栏及内容栏的透明态改变，还有标题栏的动态效果，第一页面8D的标题栏(Wi-Fi&internet)从右向左移动(从图8D平移至图9A的状态)，在第一页面被消除后，第二页面的标题栏(SIM&network settings)从右向左移动(从图9B移动至图9C的状态)。
在另一实施例中，利用第二动态效果将第二页面的标题栏替换在第一页面的标题栏处包括：对第二页面的标题栏使用旋转、缩放、平移和降低透明度中的至少一种动态效果，替换第一页面的标题栏。
在将第二页面的标题栏替换第一页面的标题栏的同时，使用旋转、缩放、平移和降低透明度中的至少一种动态效果，能够使得标题栏在消除的过程中，动态效果更加的明显，能够使得第二页面的标题栏与第一页面的标题栏之间的动态衔接更加明显，从而增强了第一页面的标题栏及第二页 面的标题栏之间存在动态的变化关系，使得用户能够更加易于理解页面之间具有的动态变化关系。
在本实施例中，使用第二动态效果将第二页面的标题栏替换在第一页面的标题栏处包括：S121、判断第二页面是否为一级页面；S122、若第二页面为一级页面，则对第二页面的标题栏使用缩小或放大的动态效果，并将标题栏从透明态逐渐降低透明度至正常显示，替换第一页面的标题栏，正常显示为完成第一页面至第二页面的切换后第二页面的标题栏的显示形态；S123、若第二页面不为一级页面，对第二页面的标题栏使用平移的动态效果，并将标题栏从透明态逐渐降低透明度至正常显示，替换第一页面的标题栏，正常显示为完成第一页面至第二页面的切换后第二页面的标题栏的显示形态。
在本实施例中，S122为：若第二页面为一级页面，则对第二页面的标题栏使用缩小或放大的动态效果，并将标题栏从透明态逐渐降低透明度至正常显示，替换第一页面的标题栏，从而进一步地方便了用户区分当前页面是否为一级页面。
请参阅图2及图4，在S11执行完后，即执行S11的S121，随后执行S122或S123，在第二页面为非一级页面的情况下，第二页面的标题栏使用动态效果为标题栏内的标题在第二页面上沿水平方向的平移，且平移方向与第一页面的标题栏在第一页面上的平移方向相同。
通过将第二页面标题栏使用平移的动态效果，且标题栏内标题的平移方向与第一页面的标题栏内标题的平移方向相同，请参阅图8A至图9C，体现的是呈滚动字幕的方式进行的第二页面与第一页面之间标题栏的切换，因此增强了第一页面的标题栏及第二页面的标题栏之间存在的动态变化关系。
具体地，在图8A至图9C中，以图8D至图9C为例，8D作为第一页 面，9C作为第二页面，且第一页面及第二页面均不是一级页面，在进行页面切换时，除了标题栏及内容栏的透明态改变，还有标题栏的动态效果，第一页面8D的标题栏(Wi-Fi&internet)从右向左移动(从图8D平移至图9A的状态)，在第一页面被消除后，第二页面的标题栏(SIM&network settings)从右向左移动(从图9B移动至图9C的状态)，从而体现出滚动字幕的方式进行第二页面与第一页面之间标题栏的切换。
在另一实施例中，利用第三动态效果将第一页面的内容栏消除包括：对第一页面的内容栏使用旋转、缩放、平移和虚化中的至少一种动态效果，并消除第一页面的内容栏。
在将第一页面的内容栏消除的同时，而使用旋转、缩放、平移和虚化中的至少一种动态效果，能够使得第二页面的内容栏替换第一页面的内容栏的过程中，动态效果更加的明显，从而能够使得第二页面的内容栏与第一页面的内容栏之间的动态衔接更加明显，从而增强了第一页面的内容栏及第二页面的内容栏之间存在动态的变化关系，使得用户能够更加易于理解页面之间具有的层级关系。
在本实施例中，使用第三动态效果将第一页面的内容栏消除包括：对第一页面的内容栏使用平移的动态效果，并将内容栏逐渐虚化至透明，消除第一页面的内容栏。
在将第一页面的内容栏虚化至透明后，第一页面的内容栏就已被消除，而在虚化的同时使用平移的动态效果，能够体现内容栏逐渐被空出来的视觉效果，因此在将第二页面的内容栏替换在第一页面的内容栏上后，请参阅图8A至图9C，体现的是当前页面上的内容栏逐渐被空出来，又被填充的视觉效果，因此增强了第一页面的内容栏及第二页面的内容栏之间存在的动态变化关系。
示例性的，在图8A至图9C中，以图8D至图9C为例，8D作为第一 页面，9C作为第二页面，且第一页面及第二页面均不是一级页面，在进行页面切换时，除了标题栏及内容栏的透明态改变，还有标题栏的动态效果，第一页面8D的标题栏(Wi-Fi&internet)从右向左移动(从图8D平移至图9A的状态)，呈现出逐渐将内容栏空出来的视觉效果，在第一页面被消除后，呈现出内容栏完全被空出来的效果，第二页面的标题栏(SIM&network settings)从右向左移动(从图9B移动至图9C的状态)，呈现逐渐填补内容栏的空白的效果，从而呈现出滚动字幕的方式进行第二页面与第一页面之间标题栏的切换。对第一页面的内容栏使用平移的动态效果为内容栏内的内容在第一页面上沿竖直方向的平移。
竖直方向的平移，不仅能够区别标题栏的内容水平方向的平移，增加了第二页面与第一页面之间的切换关系，从而进一步增加了第二页面与第一页面之间存在的动态变化关系。
在另一实施例中，使用第四动态效果将第二页面的内容栏替换在第一页面的内容栏处包括：对第二页面的内容栏使用旋转、缩放、平移和降低透明度中的至少一种动态效果，并替换第一页面的内容栏。
在第一页面的内容栏被消除的过程中，而使用旋转、缩放、平移和降低透明度中的至少一种动态效果，能够使得第二页面内容栏的动态效果更加的明显，从而能够使得第二页面的内容栏与第一页面的内容栏之间的动态衔接更加明显，从而增强了第一页面的内容栏及第二页面的内容栏之间存在动态的变化关系，使得用户能够更加易于理解页面之间具有的层级关系。
在本实施例中，使用第四动态效果将第二页面的内容栏替换在第一页面的内容栏处包括：对第二页面的内容栏使用平移的动态效果，并将内容栏从透明态逐渐降低透明度至正常显示，替换第一页面的内容栏，上述正常显示为完成第一页面至第二页面的切换后第二页面的内容栏的显示形 态。
对第二页面的内容栏使用平移的动态效果为内容栏内的内容在第一页面上沿竖直方向的平移，且平移方向与第一页面的标题栏在第一页面上的平移方向相反。
通过将第二页面内容栏使用平移的动态效果，且内容栏内内容的平移方向与第一页面的内容栏内内容的平移方向相反，请参阅图8A至图9C，体现的是第一页面的内容栏划出当前页面，而第二页面的内容栏滑入当前页面的视觉效果，因此使得用户能够更加易于理解页面之间具有的层级关系。
本申请实施例的页面切换方法，通过将第二页面的不同显示内容元素替换第一页面对应位置的不同显示内容元素，能够完成不同页面之间显示内容的切换，从而完成不同页面之间的切换展示，同时，由于第二页面与第一页面之间的对应位置存在相同显示内容元素，使得在进行页面切换时，相同显示元素呈现出没有发生更换的视觉效果，从而使得两个页面切换时以相同显示元素作为关联。相比于相关技术中，电子设备页面之间的切换时没有关联，导致用户难以理解页面相互之间的关系的问题，本申请实施例的技术方案便于用户理解页面相互之间的关系。
本申请实施例还提供一种页面切换的系统，包括：检测及获取模块，配置为检测到从展示第一页面切换到展示第二页面的切换指令时，获取第二页面与第一页面之间的相同显示内容元素和第二页面与第一页面之间对应位置的不同显示内容元素；元素替换模块，配置为将第二页面中的不同显示内容元素替换第一页面对应位置的不同显示内容元素，完成第一页面至第二页面的切换展示。
在一些可选实施例中，第二页面与第一页面之间的不同元素包括标题栏和/或内容栏；相同显示内容元素为第二页面与第一页面在相同位置且具 有相同元素的共有元素栏。
元素替换模块包括：标题栏消除单元及标题栏替换单元；标题栏消除单元配置为若第二页面的标题栏与第一页面的标题栏不同，利用第一动态效果将第一页面的标题栏消除；标题栏替换单元配置为利用第二动态效果将第二页面的标题栏替换在第一页面的标题栏处。
在一些可选实施例中，元素替换模块还包括：内容栏消除单元及内容栏替换单元；内容栏消除单元配置为利用第三动态效果将第一页面的内容栏消除；内容栏替换单元配置为利用第四动态效果将第二页面的内容栏替换在第一页面的内容栏处。
在另一实施例中，标题栏消除单元包括：动态标题消除子单元，配置为对第一页面的标题栏使用旋转、缩放平移、和虚化中的至少一种动态效果，并消除第一页面的标题栏。
在一些可选实施例中，标题栏消除单元还包括：第一判断子单元、第一缩放子单元及第一平移子单元；第一判断子单元配置为判断第一页面是否为一级页面；第一缩放子单元配置为在第一判断子单元判定第一页面为一级页面的情况下，则对第一页面的标题栏使用缩小或放大的动态效果，并将标题栏逐渐虚化至透明，消除第一页面的标题栏；平移子单元配置为在第一判断子单元判定第一页面不为一级页面的情况下，则对第一页面的标题栏使用平移的动态效果，并将标题栏逐渐虚化至透明，消除第一页面的标题栏。
在一些可选实施例中，第一缩放子单元为缩小子单元，配置为若第一页面为一级页面，则对第一页面的标题栏使用缩小动态效果，并将标题栏逐渐虚化至透明，消除第一页面的标题栏；且平移子单元使用的动态效果，为标题栏内的标题在第一页面上沿水平方向的平移。
在另一实施例中，标题栏替换单元包括：动态标题替换子单元，配置 为对第二页面的标题栏使用旋转、缩放、平移和降低透明度中的至少一种动态效果，替换第一页面的标题栏。
在一些可选实施例中，标题栏替换单元包括：第二判断子单元，第二缩放子单元及第二平移子单元；第二判断子单元配置为判断第二页面是否为一级页面；第二缩放子单元配置为在第二判断子单元判定第二页面为一级页面的情况下，则对第二页面的标题栏使用缩小或放大的动态效果，并将标题栏从透明态逐渐降低透明度至正常显示，上述正常显示为完成第一页面至第二页面的切换后第二页面的标题栏的显示形态，替换第一页面的标题栏；第二平移子单元配置为在第二判断子单元判定第二页面不为一级页面的情况下，对第二页面的标题栏使用平移的动态效果，并将标题栏从透明态逐渐降低透明度至正常显示，替换第一页面的标题栏，上述正常显示为完成第一页面至第二页面的切换后第二页面的标题栏的显示形态。
在本实施例中，第二缩放子单元为放大子单元，配置为若第二页面为一级页面，则对第二页面的标题栏使用放大的动态效果，并将标题栏从透明态逐渐降低透明度至正常显示，替换第一页面的标题栏；第二平移子单元对第二页面的标题栏使用平移的动态效果为标题栏内的标题在第二页面上沿水平方向的平移。
在另一实施例中，内容栏消除单元包括：动态内容消除子单元，配置为对第一页面的内容栏使用旋转、缩放、平移和虚化中的至少一种动态效果，并消除第一页面的内容栏。
在一些可选实施例中，内容栏消除单元包括：第三平移子单元，配置为对第一页面的内容栏使用平移的动态效果，并将内容栏逐渐虚化至透明，消除第一页面的内容栏。
可选地，第三平移单元对第一页面的内容栏使用平移的动态效果为页面内容栏内的内容在第一页面上沿竖直方向的平移。
在另一实施例中，内容栏替换单元包括：动态内容替换子单元，配置为对第二页面的内容栏使用旋转、缩放、平移和降低透明度中的至少一种动态效果，并替换第一页面的内容栏。
在本实施例中，内容栏替换单元包括：第四平移子单元，配置为对第二页面的内容栏使用平移的动态效果，并将内容栏从透明态逐渐降低透明度至正常显示，替换第一页面的内容栏，上述正常显示为完成第一页面至第二页面的切换后第二页面的内容栏的显示形态；第四平移子单元对第二页面的内容栏使用平移的动态效果为页面内容栏内的内容在第一页面上沿竖直方向的平移。
在本实施例中，页面切换的系统还包括：一级页面判断模块，配置为判断第二页面或第一页面是否为一级页面；元素栏划分模块，配置为一级页面判断模块判定第二页面或第一页面是一级页面的情况下，将分割栏划分为共有元素栏，还配置为第二页面或第一页面不是一级页面的情况下，将分割栏及功能图标划分为共有元素栏；分割栏用于分割标题栏及页面内容栏；功能图标图标用于在用户点击后实现预定功能。
本申请实施例提供一种电子装置，请参阅图7，该电子装置包括：存储器601、处理器602及存储在存储器601上并可在处理器602上运行的计算机程序，处理器602执行该计算机程序时，实现前述中描述的页面切换的方法。
进一步的，该电子装置还包括：至少一个输入设备603以及至少一个输出设备604。
上述存储器601、处理器602、输入设备603以及输出设备604，通过总线605连接。
其中，输入设备603具体可为摄像头、触控面板、物理按键或者鼠标等等。输出设备604具体可为显示屏。
存储器601可以是高速随机存取记忆体(RAM，Random Access Memory)存储器，也可为非不稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器601用于存储一组可执行程序代码，处理器602与存储器601耦合。
本申请中描述的电子设备可以但不限于为诸如手机、平板电脑、笔记本电脑、掌上电脑、个人数字助理(PDA，Personal Digital Assistant)、便捷式媒体播放器(PMP，Portable Media Player)、导航装置、可穿戴设备、智能手环、计步器等移动终端，以及诸如数字TV、台式计算机等固定终端中的任意一种。
本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质可以是设置于上述各实施例中的电子装置中，该计算机可读存储介质可以是前述中的存储器601。该计算机可读存储介质上存储有计算机程序，该程序被处理器602执行时实现前述实施例中描述的页面切换的方法。
示例性的，该计算机可存储介质还可以是U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
尽管已经相对于一个或多个实现方式示出并描述了本申请，但是本领域技术人员基于对本说明书和附图的阅读和理解将会想到等价变型和修改。本申请包括所有这样的修改和变型，并且仅由所附权利要求的范围限制。特别地关于由上述组件执行的各种功能，用于描述这样的组件的术语旨在对应于执行所述组件的指定功能(例如其在功能上是等价的)的任意组件(除非另外指示)，即使在结构上与执行本文所示的本说明书的示范性实现方式中的功能的公开结构不等同。
即，以上所述仅为本申请的实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，例如 各实施例之间技术特征的相互结合，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。
另外，在本申请的描述中，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个特征。在本申请的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。
为了使本领域任何技术人员能够实现和使用本申请，本申请给出了以上描述。在以上描述中，为了解释的目的而列出了各个细节。应当明白的是，本领域普通技术人员可以认识到，在不使用这些特定细节的情况下也可以实现本申请。在其它实施例中，不会对公知的结构和过程进行详细阐述，以避免不必要的细节使本申请的描述变得晦涩。因此，本申请并非旨在限于所示的实施例，而是与符合本申请所公开的原理和特征的最广范围相一致。

Claims (24)

  1. 一种页面切换的方法，所述方法包括：
    检测到从展示第一页面切换到展示第二页面的切换指令时，获取所述第二页面与所述第一页面之间相同显示内容元素和所述第二页面与所述第一页面之间对应位置的不同显示内容元素；
    将所述第二页面中的不同显示内容元素替换所述第一页面对应位置的不同显示内容元素，完成第一页面至第二页面的切换展示。
  2. 根据权利要求1所述的页面切换的方法，其中，
    所述第二页面与所述第一页面之间的所述不同显示内容元素包括标题栏和/或内容栏；所述相同显示内容元素为第二页面与所述第一页面在相同位置且具有相同显示内容元素的共有元素栏；
    所述将所述第二页面中的不同显示内容元素替换所述第一页面对应位置的不同显示内容元素，包括：
    若所述第二页面的标题栏与所述第一页面的标题栏不同，利用第一动态效果将所述第一页面的标题栏消除；
    利用第二动态效果将所述第二页面的标题栏替换在所述第一页面的标题栏处。
  3. 根据权利要求2所述的页面切换的方法，其中，所述将所述第二页面中的不同显示内容元素替换所述第一页面对应位置的不同显示内容元素，包括：
    利用第三动态效果将所述第一页面的显示内容栏消除；
    利用第四动态效果将所述第二页面的显示内容栏替换在所述第一页面的内容栏处。
  4. 根据权利要求2所述的页面切换的方法，其中，所述利用第一动态效果将所述第一页面的标题栏消除包括：
    对所述第一页面的所述标题栏使用旋转、缩放平移和虚化中的至少一种动态效果，并消除所述第一页面的标题栏。
  5. 根据权利要求4所述的页面切换的方法，其中，所述利用第一动态效果将所述第一页面的标题栏消除包括：
    若所述第一页面为一级页面，则对所述第一页面的所述标题栏使用缩小或放大的动态效果，并将所述标题栏逐渐虚化至透明，以消除所述第一页面的标题栏；
    若所述第一页面不为一级页面，则对所述第一页面的所述标题栏使用平移的动态效果，并将所述标题栏逐渐虚化至透明，以消除所述第一页面的标题栏。
  6. 根据权利要求2所述的页面切换的方法，其中，所述利用第二动态效果将所述第二页面的标题栏替换在所述第一页面的标题栏处，包括：
    若所述第二页面为一级页面，则对所述第二页面的所述标题栏使用缩小或放大的动态效果，并将所述标题栏从透明态逐渐降低透明度至正常显示，替换所述第一页面的标题栏，所述正常显示为完成第一页面至第二页面的切换后所述第二页面的标题栏的显示形态；
    若所述第二页面不为一级页面，对所述第二页面的所述标题栏使用平移的动态效果，并将所述标题栏从透明态逐渐降低透明度至正常显示，替换所述第一页面的标题栏，所述正常显示为完成第一页面至第二页面的切换后所述第二页面的标题栏的显示形态。
  7. 根据权利要求3所述的页面切换的方法，其中，所述利用第三动态效果将所述第一页面的内容栏消除，包括：
    对所述第一页面的所述内容栏使用平移的动态效果，并将所述内容栏逐渐虚化至透明，消除所述第一页面的内容栏。
  8. 根据权利要求7所述的页面切换的方法，其中，所述对所述第一页 面的所述内容栏使用平移的动态效果为页面内容栏内的内容在所述第一页面上沿竖直方向的平移。
  9. 根据权利要求3所述的页面切换的方法，其中，所述利用第四动态效果将第二页面的内容栏替换在所述第一页面的内容栏处，包括：
    对第二页面的所述内容栏使用旋转、缩放、平移和降低透明度中的至少一种动态效果，并替换所述第一页面的内容栏。
  10. 根据权利要求3所述的页面切换的方法，其中，所述利用第四动态效果将第二页面的内容栏替换在所述第一页面的内容栏处，包括：
    对第二页面的所述内容栏使用平移的动态效果，并将所述内容栏从透明态逐渐降低透明度至正常显示，替换所述第一页面的内容栏，所述正常显示为完成第一页面至第二页面的切换后所述第二页面的内容栏的显示形态。
  11. 根据权利要求2所述的页面切换的方法，其中，所述方法还包括：
    判断所述第二页面或所述第一页面是否为一级页面；
    若是，则将分割栏划分为相同显示内容元素栏；
    若否，则将分割栏及功能图标划分为相同显示内容元素栏；
    所述分割栏用于分割所述标题栏及页面内容栏；
    所述功能图标图标用于在用户点击后实现预定功能。
  12. 一种页面切换的系统，包括：
    检测及获取模块，配置为检测到从展示第一页面切换到展示第二页面的切换指令时，获取所述第二页面与所述第一页面之间的相同显示内容元素和所述第二页面与所述第一页面之间对应位置的不同显示内容元素；
    元素替换模块，配置为将第二页面中的不同显示内容元素替换所述第一页面对应位置的不同显示内容元素，完成第一页面至第二页面的切换展示。
  13. 根据权利要求12所述的页面切换的系统，其中，所述第二页面与所述第一页面之间的所述不同显示内容元素包括标题栏和/或内容栏；所述相同显示内容元素为第二页面与所述第一页面在相同位置且具有相同显示内容元素的共有元素栏；
    所述元素替换模块包括：标题栏消除单元及标题栏替换单元；
    所述标题栏消除单元，配置为若所述第二页面的标题栏与所述第一页面的标题栏不同，利用第一动态效果将所述第一页面的标题栏消除；
    所述标题栏替换单元，配置为利用第二动态效果将所述第二页面的标题栏替换在所述第一页面的标题栏处。
  14. 根据权利要求13所述的页面切换的系统，其中，所述元素替换模块还包括：内容栏消除单元及内容栏替换单元；
    所述内容栏消除单元，配置为利用第三动态效果将所述第一页面的显示内容栏消除；
    所述内容栏替换单元，配置为利用第四动态效果将所述第二页面的显示内容栏替换在所述第一页面的内容栏处。
  15. 根据权利要求13所述的页面切换的系统，其中，所述标题栏消除单元包括：动态标题消除子单元，配置为对所述第一页面的所述标题栏使用旋转、缩放平移和虚化中的至少一种动态效果，并消除所述第一页面的标题栏。
  16. 根据权利要求15所述的页面切换的系统，其中，所述标题栏消除单元还包括第一判断子单元、第一缩放子单元及第一平移子单元；
    所述第一判断子单元，配置为判断所述第一页面是否为一级页面；
    所述第一缩放子单元，配置为在所述第一判断子单元判定所述第一页面为一级页面的情况下，对所述第一页面的所述标题栏使用缩小或放大的动态效果，并将所述标题栏逐渐虚化至透明，以消除所述第一页面的标题 栏；
    所述第一平移子单元，配置为在所述第一判断子单元判定所述第一页面不为一级页面的情况下，对所述第一页面的所述标题栏使用平移的动态效果，并将所述标题栏逐渐虚化至透明，以消除所述第一页面的标题栏。
  17. 根据权利要求13所述的页面切换的系统，其中，所述标题栏替换单元包括：第二判断子单元，第二缩放子单元及第二平移子单元；
    所述第二判断子单元，配置为判断所述第二页面是否为一级页面
    所述第二缩放子单元，配置为在所述第二判断子单元判定所述第二页面为一级页面的情况下，对所述第二页面的所述标题栏使用缩小或放大的动态效果，并将所述标题栏从透明态逐渐降低透明度至正常显示，替换所述第一页面的标题栏，所述正常显示为完成第一页面至第二页面的切换后所述第二页面的标题栏的显示形态；
    所述第二平移子单元，配置为在所述第二判断子单元判定所述第二页面不为一级页面的情况下，对所述第二页面的所述标题栏使用平移的动态效果，并将所述标题栏从透明态逐渐降低透明度至正常显示，替换所述第一页面的标题栏，所述正常显示为完成第一页面至第二页面的切换后所述第二页面的标题栏的显示形态。
  18. 根据权利要求14所述的页面切换的系统，其中，所述内容栏消除单元包括：第三平移子单元，配置为对所述第一页面的所述内容栏使用平移的动态效果，并将所述内容栏逐渐虚化至透明，消除所述第一页面的内容栏。
  19. 根据权利要求18所述的页面切换的系统，其中，所述第三平移子单元对所述第一页面的所述内容栏使用平移的动态效果为页面内容栏内的内容在所述第一页面上沿竖直方向的平移。
  20. 根据权利要求14所述的页面切换的系统，其中，所述内容栏替换 单元包括：动态内容替换子单元，配置为对第二页面的所述内容栏使用旋转、缩放、平移和降低透明度中的至少一种动态效果，并替换所述第一页面的内容栏。
  21. 根据权利要求14所述的页面切换的系统，其中，所述内容栏替换单元包括：第四平移子单元，配置为对第二页面的所述内容栏使用平移的动态效果，并将所述内容栏从透明态逐渐降低透明度至正常显示，替换所述第一页面的内容栏，所述正常显示为完成第一页面至第二页面的切换后所述第二页面的内容栏的显示形态。
  22. 根据权利要求13所述的页面切换的系统，其中，所述装置还包括：
    一级页面判断模块，配置为判断所述第二页面或所述第一页面是否为一级页面；
    元素栏划分模块，配置为所述一级页面判断模块判定第二页面或第一页面是一级页面的情况下，将分割栏划分为相同显示内容元素栏；还配置为所述一级页面判断模块判定第二页面或第一页面不是一级页面的情况下，将分割栏及功能图标划分为相同显示内容元素栏；
    所述分割栏用于分割所述标题栏及页面内容栏；
    所述功能图标图标用于在用户点击后实现预定功能。
  23. 一种电子装置，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现权利要求1至11中的任意一项所述方法。
  24. 一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现权利要求1至11中的任意一项所述方法。
PCT/CN2021/121037 2020-09-30 2021-09-27 一种页面切换的方法、系统、电子装置及存储介质 WO2022068778A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202011070334.8A CN114327698B (zh) 2020-09-30 2020-09-30 一种页面切换的方法、系统、电子装置及存储介质
CN202011070334.8 2020-09-30

Publications (1)

Publication Number Publication Date
WO2022068778A1 true WO2022068778A1 (zh) 2022-04-07

Family

ID=80949700

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/121037 WO2022068778A1 (zh) 2020-09-30 2021-09-27 一种页面切换的方法、系统、电子装置及存储介质

Country Status (2)

Country Link
CN (1) CN114327698B (zh)
WO (1) WO2022068778A1 (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114722320A (zh) * 2022-04-20 2022-07-08 北京字跳网络技术有限公司 页面切换方法、装置以及终端设备的交互方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6177933B1 (en) * 1997-11-26 2001-01-23 Adobe Systems, Inc. Providing visual continuity when displaying related information
CN106156066A (zh) * 2015-03-30 2016-11-23 阿里巴巴集团控股有限公司 一种页面切换方法、装置及客户端
CN106649725A (zh) * 2016-12-22 2017-05-10 前海节事科技（深圳）有限公司 一种页面切换方法及装置
CN109710348A (zh) * 2018-11-14 2019-05-03 深圳壹账通智能科技有限公司 页面跳转的方法及装置、计算机设备、存储介质
CN111125576A (zh) * 2018-11-01 2020-05-08 北京奇虎科技有限公司 一种页面展示方法和装置

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110874166B (zh) * 2018-08-29 2022-05-03 腾讯科技（深圳）有限公司 页面切换方法、装置、存储介质及计算机设备
CN109597554B (zh) * 2018-12-04 2022-04-01 北京有限元科技有限公司 一种页面返回方法、计算机装置及可读存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6177933B1 (en) * 1997-11-26 2001-01-23 Adobe Systems, Inc. Providing visual continuity when displaying related information
CN106156066A (zh) * 2015-03-30 2016-11-23 阿里巴巴集团控股有限公司 一种页面切换方法、装置及客户端
CN106649725A (zh) * 2016-12-22 2017-05-10 前海节事科技（深圳）有限公司 一种页面切换方法及装置
CN111125576A (zh) * 2018-11-01 2020-05-08 北京奇虎科技有限公司 一种页面展示方法和装置
CN109710348A (zh) * 2018-11-14 2019-05-03 深圳壹账通智能科技有限公司 页面跳转的方法及装置、计算机设备、存储介质

Also Published As

Publication number Publication date
CN114327698A (zh) 2022-04-12
CN114327698B (zh) 2024-04-05

Similar Documents

Publication Publication Date Title
US10627990B2 (en) Map information display device, map information display method, and map information display program
US9699351B2 (en) Displaying image thumbnails in re-used screen real estate
US9063637B2 (en) Altering a view of a document on a display of a computing device
RU2602384C2 (ru) Мультипрограммная среда
US8739073B2 (en) User interface for document table of contents
JP5785015B2 (ja) 電子機器、電子文書制御プログラムおよび電子文書制御方法
US8788962B2 (en) Method and system for displaying, locating, and browsing data files
CN107015751B (zh) 文档中的对象和文本的最佳显示和缩放
US8413075B2 (en) Gesture movies
KR101814102B1 (ko) 검색 결과들에 대한 멀티포인트 핀치 제스처 제어
US9448719B2 (en) Touch sensitive device with pinch-based expand/collapse function
NL2007909C2 (en) Method and apparatus of scrolling a document displayed in a browser window.
US10706811B2 (en) Method and device for controlling display of a flexible display screen
KR20150103040A (ko) 공유된 웹 리소스 스냅샷의 맞춤화
EP2521025B1 (en) Component display processing method and user device
EP2703977A2 (en) Method and apparatus for controlling image display in an electronic device
US20140063070A1 (en) Selecting techniques for enhancing visual accessibility based on health of display
US20130141463A1 (en) Combined interactive map and list view
CN104615375A (zh) 一种手持式电子设备图片缩放及播放内容切换的方法及装置
US20140181737A1 (en) Method for processing contents and electronic device thereof
CN106897321B (zh) 显示地图数据的方法及装置
TW201222389A (en) An electronic apparatus having a touch-controlled interface and method of displaying figures related to files within certain time period
WO2022068778A1 (zh) 一种页面切换的方法、系统、电子装置及存储介质
US8902259B1 (en) Finger-friendly content selection interface
CN111506185B (zh) 对文档进行操作的方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21874438

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 030723)

122 Ep: pct application non-entry in european phase

Ref document number: 21874438

Country of ref document: EP

Kind code of ref document: A1