WO2018049907A1 - 界面的信息显示方法和装置 - Google Patents

界面的信息显示方法和装置 Download PDF

Info

Publication number
WO2018049907A1
WO2018049907A1 PCT/CN2017/092993 CN2017092993W WO2018049907A1 WO 2018049907 A1 WO2018049907 A1 WO 2018049907A1 CN 2017092993 W CN2017092993 W CN 2017092993W WO 2018049907 A1 WO2018049907 A1 WO 2018049907A1
Authority
WO
WIPO (PCT)
Prior art keywords
mask layer
layer
list
thumbnail
mask
Prior art date
Application number
PCT/CN2017/092993
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 北京京东尚科信息技术有限公司
Priority to US16/334,704 priority Critical patent/US11112946B2/en
Publication of WO2018049907A1 publication Critical patent/WO2018049907A1/zh

Links

Images

Classifications

    • 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/0482—Interaction with lists of selectable items, e.g. menus
    • 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
    • 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • 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
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04804—Transparency, e.g. transparent or translucent windows
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Definitions

  • the present application relates to the field of information display technologies, and in particular, to an interface information display method and apparatus.
  • the technical solution of displaying the page jump for detailed page display comprises: displaying the list item by using a list on the list page, and when an object in the list item is clicked, jumping to the specific page corresponding to the object to display the clicked object Details; there is a back button on the details page, and when you click the back button, you will jump back to the list page.
  • the list page and the detail page belong to two different pages. In the process of displaying the detail page and returning to the list page, it is necessary to jump between the two pages, and it is necessary to call too much underlying page call signaling, and the operation efficiency is low.
  • the detail page is a separate page, usually the return button is set in the upper left corner of the detail page, and for the handheld touch device, the finger is used to touch the back button It is very difficult, the user is very inconvenient to operate, resulting in user operation is not smooth, and the efficiency is low.
  • the main object of the present invention is to provide an information display method of an interface to improve operational efficiency.
  • An information display method for an interface comprising:
  • the display list state is returned.
  • the first mask layer is initially in a transparent state
  • the second mask layer is initially in a transparent state
  • when displaying the detailed information on the second mask reducing the transparency of the second layer to a second specified value
  • a specified value is greater than the second specified value
  • the second specified value is zero.
  • the displaying the thumbnail of the object in a predetermined position on the second layer according to a predetermined size specifically: using an animated gradation action, gradually moving the thumbnail of the object from the position when the list state is displayed to a predetermined position on the second smear layer, and the size is also gradually changed to the predetermined size;
  • the reducing the transparency of the first mask layer to a first specified value specifically, using an animated gradation action, grading the first mask layer from an initial transparent state to the transparency as a first specified value
  • the reducing the transparency of the second layer to a second specified value specifically, using an animated gradation action, grading the second layer from the initial transparent state to the transparency being the second specified value.
  • the status of the display list is returned, which specifically includes:
  • the reduced screen shot is enlarged to match the screen size and then hidden.
  • the first mask layer is a black mask layer and the second mask layer is a white mask layer.
  • the method further comprises:
  • step 1B determining whether the distance between the coordinates of the second layer and the top position of the page is zooming out and reaching the specified first threshold, if yes, go to step 1C, otherwise go to step 1D;
  • the thumbnail of the object is gradually reduced and displayed according to a scrolling operation, and finally hidden, and the current page title is set as an object name of the clicked list item;
  • Step 1D Determine whether the distance between the coordinates of the second layer and the top position of the page is enlarged and reach a specified second threshold. If yes, go to step 1E, otherwise return to step 1A.
  • Step 1E hiding the title bar, and gradually zooming in on the object thumbnail as the scrolling operation.
  • An interface information display device includes:
  • List display module for displaying the status of the list, if it is detected that a list item is clicked, then The object information and location of the clicked list item, screen capture of the current page, generate a screen capture image, and trigger the detail display module;
  • a detail display module configured to display the screen capture image in full screen, display a first mask layer on the screen capture image, and display a second mask layer on the first mask layer, the height of the second mask layer being less than the a mask layer; shrinking the screen capture image from a full screen to a specified scale of the original size, acquiring an object thumbnail from the object information, and displaying the thumbnail of the object on the second mask layer according to a predetermined size Positioning; obtaining detailed information from the object information, displaying the detailed information on a blank area on the second mask; when the non-overlapping area of the first and second masks is clicked
  • the trigger list display module displays the list status.
  • the first mask layer is initially in a transparent state, and the second mask layer is initially in a transparent state;
  • the detail display module is further configured to: reduce a transparency of the first mask to a first specified value when the thumbnail of the object is displayed on the second layer; when the detail information is displayed And decreasing the transparency of the second mask to a second specified value; the first specified value is greater than the second specified value.
  • the second specified value is zero.
  • the present invention utilizes an animation operation on the same page to implement detailed display of the clicked list item object, without jumping between pages, so that the operation is smoother, and the present invention utilizes two mask layers.
  • the non-overlapping area is used as the trigger area of the detail page return operation, and the trigger area is larger, which is very convenient for one-hand operation of the handheld touch device, which not only improves the smoothness of the operation, but also improves the operation efficiency.
  • 1a is a flow chart of an information display method of an interface according to the present invention.
  • 1b is a schematic diagram of the composition of an information display device of the interface according to the present invention.
  • FIG. 2 is a flowchart of a process of entering a detail page from a list page according to the method of the present invention
  • FIG. 3a is a schematic diagram of an interface of a real list state, that is, a list page
  • Figure 3b is a schematic diagram of an interface transitioning from a display list state to a detail page
  • Figure 3c is a schematic diagram of an interface transitioning from a detail page to a display list state
  • 4a is a schematic diagram of a detail page interface transitioning from a display list state to a detail page in an actual scenario
  • FIG. 4b is a schematic diagram of a display interface after the page of FIG. 4a scrolls up the page;
  • FIG. 5 is a flowchart of a process of entering a list page from a detail page according to the method of the present invention.
  • FIG. 1a is a flowchart of a method for displaying information of an interface according to the present invention. Referring to FIG. 1a, the method mainly includes:
  • Step 201 In the state of displaying the list, if a list item is detected to be clicked, the subsequent steps are performed:
  • Step 202 Obtain object information and location of the clicked list item.
  • Step 203 Perform a screen capture on the current page to generate a screen capture image.
  • Step 204 Display the screen capture image in full screen, display a first mask layer on the screen capture image, and display a second mask layer on the first mask layer, the height of the second mask layer being smaller than the first mask layer ;
  • Step 205 The screen capture image is reduced from a full screen to a specified scale of the original size, an object thumbnail is obtained from the object information, and the object thumbnail is displayed in a predetermined position on the second mask layer according to a predetermined size. Obtaining detailed information from the object information, and displaying the detailed information on a blank area on the second mask layer;
  • Step 206 When the non-overlapping regions of the first layer and the second layer are clicked, return to the display list state.
  • FIG. 1b is a schematic diagram of a composition of an information display device of the interface according to the present invention.
  • the information display device of the interface includes:
  • the list display module 100 is configured to display a list state. If a list item is detected, the object information and location of the clicked list item are obtained, the current page is screened, a screen capture image is generated, and the detail display module is triggered.
  • the detail display module 200 is configured to display the screen capture image in full screen, display a first mask layer on the screen capture image, and display a second mask layer on the first mask layer, the height of the second mask layer being less than the a first mask; shrinking the screen capture image from a full screen to a specified scale of the original size, acquiring an object thumbnail from the object information, and displaying the thumbnail of the object on the second mask layer according to a predetermined size a predetermined location; obtaining detailed information from the object information, displaying the detailed information on a blank area on the second mask; when the non-overlapping area of the first mask and the second layer is clicked
  • the trigger list display module displays the list status.
  • the first mask layer is a black mask layer and the second mask layer is a white mask layer.
  • the first mask layer is initially in a transparent state
  • the second mask layer is initially in a transparent state
  • the object thumbnail is displayed on the second mask layer Decreasing the transparency of the first mask to a first specified value
  • the initial transparency of the first mask is 100%
  • the first specified value may be 40%
  • the detailed information is displayed at And decreasing the transparency of the second layer to a second specified value
  • the first specified value is greater than the second specified value.
  • the initial transparency of the second mask layer is 100%, and the second specified value may be 0%, that is, opaque.
  • the animation operations described may include the following:
  • the displaying the thumbnail of the object in a predetermined position on the second layer according to a predetermined size specifically: using an animated gradation action, gradually moving the thumbnail of the object from the position when the list state is displayed to a predetermined position on the second smear layer, and the size is also gradually changed to the predetermined large small;
  • the reducing the transparency of the first mask layer to a first specified value specifically, using an animated gradation action, grading the first mask layer from an initial transparent state to the transparency as a first specified value
  • the reducing the transparency of the second layer to a second specified value specifically, using an animated gradation action, grading the second layer from the initial transparent state to the transparency being the second specified value.
  • the state of the display list is returned, which may also include an animation operation, which specifically includes:
  • the first mask is restored from the current transparency to the initial transparent state and then hidden.
  • the reduced screen shot is enlarged to match the screen size and then hidden.
  • the method of the present invention may further include a scrolling event issued according to a user's viewing needs to further adjust the display state of the detail page, so that the user views the user. It is more intuitive and more efficient.
  • the specific steps are when the details page is displayed, including:
  • step 1B determining whether the distance between the coordinates of the second layer and the top position of the page is zooming out and reaching the specified first threshold, if yes, go to step 1C, otherwise go to step 1D;
  • the thumbnail of the object is gradually reduced and displayed according to a scrolling operation, and finally hidden, and the current page title is set as an object name of the clicked list item;
  • step 1D Determine whether the distance between the coordinates of the second layer and the top position of the page is enlarged and reached.
  • the specified second threshold if yes, go to step 1E, otherwise return to step 1A.
  • the title bar is hidden, and the thumbnail of the object is gradually enlarged and displayed as the scroll operation is performed.
  • the present invention realizes the detailed display of the clicked list item object by using the animation operation on the same page, without performing the jump between the pages, so that the operation is smoother, and the present invention utilizes two Mongolian
  • the non-overlapping area between the layers serves as a trigger area for the detail page return operation, and the trigger area is larger, which is very convenient for one-hand operation of the handheld touch device, which not only improves the smoothness of the operation, but also improves the operation efficiency.
  • FIG. 2 is a flow chart showing the process of entering a detail page from a list page according to the method of the present invention. Referring to FIG. 2, the process specifically includes:
  • Step 201 The list display module displays a list, as shown in FIG. 3a, which is a schematic diagram of a real list state, that is, a list page.
  • the state at this time is a display list state, which includes multiple list items, such as the list item in FIG. 3a. 31 to 35, wherein each list item corresponds to an object, which contains an object thumbnail, and the cover in FIG. 3a is an object thumbnail.
  • Step 202 The list display module monitors the list item click event.
  • Step 203 The list display module proceeds to step 204 if it is detected that a list item is clicked. For example, suppose the list item is 31 times clicked.
  • Step 204 The list display module obtains object information of the clicked list item according to the click event object (for example, the object information of the list item 31, the object information of the clicked list item is marked as A in this document) and the clicked list item.
  • the coordinates of the location (labeled B in the text, which is usually the top-left coordinate of the clicked list item), holds A and B in the cache.
  • the object information may include, for example, an object thumbnail, an introduction text of the object, and the like. For example, if the object is a book, the thumbnail may be a cover of the book, and if the object is an item, the thumbnail may be a picture of the item or the like.
  • Step 205 The list display module takes a screenshot of the current page to generate a screen capture image (here The screenshot is marked as C).
  • Step 206 The detail display module acquires object information A and location information B of the clicked list item.
  • FIG. 3b is a schematic diagram of an interface transitioning from a display list state to a detail page, which is described below in conjunction with FIG. 3b.
  • Step 207 The detail display module is prepared for transition to the details page, and mainly includes:
  • the first mask layer that is, the black mask layer (denoted as D) is displayed on the upper layer of the screen image C, the transparency is 100%, and the size is consistent with C;
  • a white layer (denoted as E), is shown, the width being identical to C, and the height being a specified ratio k of the picture C, such as in a preferred embodiment the white layer
  • the height of E is four-fifths of the screenshot C, and the vertical coordinate of the white mask E is aligned with the bottom of the screen.
  • Step 208 The detail display module starts an animation, where the animation has two parts, and the two parts of the animation are simultaneously started. The following are introduced separately:
  • the first part of the animation includes:
  • the second part of the animation includes:
  • the transparency of the white mask E is from 100% to 0%, obscuring the image of the lower layer, and reading the detailed information of the object from the object information A, and displaying the details of the object on the upper layer of the white mask E
  • the information, the white mask E and the above detailed information constitute the detail page of the present invention, but in fact the detail page is not a page but a layer.
  • FIG. 4a is a schematic diagram of a detail page interface transitioning from a display list state to a detail page in an actual scenario.
  • the object thumbnail 401 of the clicked list item is displayed at the designated position of the detail page, and the detailed information of the clicked list item is displayed in the blank area 402 of the white mask.
  • the user clicks on the non-overlapping area 400 of the white and black masks it returns to the display list state. If the user clicks on a white montage or object thumbnail, it will not return to the display list state. Since the non-overlapping area 400 has a large area, when the user holds the touch device with a single hand, it is very convenient for the user to operate with one hand, thereby improving the operation efficiency.
  • Step 209 The detail display module monitors a page scrolling event, for example, the area where the user drags the white layer E or the object thumbnail with a finger to scroll up or down.
  • Step 2011 the detail display module obtains the distance between the coordinates of the white mask E and the top position of the page.
  • the coordinates of the white layer E are usually the coordinates of the upper left corner of the white layer E, and may of course be the coordinates of the upper right corner of the white layer E or the coordinates of other marker points.
  • Step 2012 The detail display module determines whether the distance between the coordinates of the white mask E and the top position of the page is decreasing and reaches a specified first threshold. If yes, the process proceeds to step 2013, otherwise, the process proceeds to step 2014.
  • Step 2013 The thumbnail of the object is gradually reduced and displayed along with the scrolling operation, and finally hidden, and the current page title is set as the object name of the clicked list item, as shown in FIG. 4b.
  • step 2014 it is determined whether the distance between the coordinates of the white mask E and the top position of the page is enlarged and reaches a specified second threshold. If yes, go to step 2015, otherwise return to step 2010.
  • Step 2015 hiding the title bar, and gradually zooming in on the object thumbnail as the scrolling operation.
  • the display method that can be realized in this way is: when the detail page is scrolled up, when the white mask E is near the top, the object thumbnail is gradually reduced and hidden.
  • the detail page scrolls down when the white mask E leaves the top down, the object thumbnail is slowly enlarged.
  • FIG. 5 is a flowchart of a process of entering a list page from a detail page according to the method of the present invention. Referring to FIG. 5, the process specifically includes:
  • Step 501 the detail page display module displays a detail page, for example as shown in FIG. 3b or FIG. 4a.
  • Step 502 The detail page display module monitors whether the non-overlapping area 400 of the black mask D and the white mask E is clicked or the button is clicked, and if it is clicked, proceeds to step 503.
  • Step 503 Perform an animation preparation operation, that is, obtain the object information A and the position B of the clicked list item from the cache.
  • Step 504 Start an animation step, as shown in FIG. 3c is a schematic diagram of an interface transitioning from a detail page to a display list state, the animation step mainly includes:
  • the black mask D gradually changes from the current transparency to 100% and then hides.
  • Step 505 the animation ends, and returns to the list state displayed by the list display module, as shown in FIG. 3a.
  • the user feels that although the details page is entered, the page has not actually left the list page, and the list page is more natural and smooth when transitioning to the detail page, and the return is a black mask and white.
  • the non-overlapping area of the mask, or by clicking the back button, is more obvious.
  • each functional module in each embodiment of the present invention may be integrated into one processing unit, or each module may exist physically separately, or two or more modules may be integrated into one unit.
  • the above integrated unit can be implemented in the form of hardware or in the form of a software functional unit.
  • the functional modules of the various embodiments may be located at one terminal or network node, or may be distributed to multiple terminals or network nodes.
  • each of the embodiments of the present invention can be implemented by a data processing program executed by a data processing device such as a computer.
  • the data processing program constitutes the present invention.
  • a data processing program usually stored in a storage medium is executed by directly reading a program out of a storage medium or by installing or copying the program to a storage device (such as a hard disk and or a memory) of the data processing device. Therefore, such a storage medium also constitutes the present invention.
  • the storage medium can use any type of recording method, such as paper storage medium (such as paper tape, etc.), magnetic storage medium (such as floppy disk, hard disk, flash memory, etc.), optical storage medium (such as CD-ROM, etc.), magneto-optical storage medium (such as MO, etc.).
  • paper storage medium such as paper tape, etc.
  • magnetic storage medium such as floppy disk, hard disk, flash memory, etc.
  • optical storage medium such as CD-ROM, etc.
  • magneto-optical storage medium Such as MO, etc.
  • the present invention therefore also discloses a storage medium in which is stored a data processing program for performing any of the above embodiments of the present invention.
  • the method steps of the present invention can be implemented by a data processing program, and can also be implemented by hardware, for example, by logic gates, switches, application specific integrated circuits (ASICs), programmable logic controllers, and embedded micro-controls. And so on.
  • ASICs application specific integrated circuits
  • programmable logic controllers programmable logic controllers
  • embedded micro-controls embedded micro-controls.

Abstract

一种界面的信息显示方法和装置，包括：在显示列表状态下，如果监测到有列表项被点击，则执行后续步骤：获取被点击的列表项的对象信息和位置；对当前页面进行截屏，生成截屏图片；全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表状态。该方法可以提高操作效率。

Description

界面的信息显示方法和装置
相关申请的交叉引用
本申请要求于2016年9月19日提交的中国专利申请号为“201610832163.5”的优先权，其全部内容作为整体并入本申请中。
技术领域
本申请涉及信息显示技术领域，尤其涉及一种界面的信息显示方法和装置。
背景技术
目前，在触摸设备应用软件上，经常需要展示信息对象的详情，尤其是从一个对象列表跳转到特定的信息对象详情。
现有技术中，主要是页面跳转进行详情页展示的技术方案。
所述页面跳转进行详细页展示的技术方案包括：在列表页采用列表的方式展示列表项，当列表项中的一个对象被点击，则跳转至该对象对应的详情页展示被点击对象的详情；该详情页中有一个返回按钮，点击返回按钮后，则会跳回到列表页。
但是，现有技术存在以下缺点：
列表页和详情页属于两个不同的页面，在显示详情页并返回列表页的过程中需要在两个页面之间跳转，期间需要调用过多底层的页面调用信令，操作效率较低。而且，通常在手持触摸设备上，所述详情页是一个单独存在的页面，通常所述的返回按钮被设置在详情页的左上角，对于手持触摸设备来说，用手指去触碰该返回按钮是很困难的，用户操作起来很不方便，导致用户操作不流畅，效率较低。
发明内容
有鉴于此，本发明的主要目的是提供一种界面的信息显示方法，以提高操作效率。
本发明的技术方案是这样实现的：
一种界面的信息显示方法，包括：
在显示列表状态下，如果监测到有列表项被点击，则执行后续步骤：
获取被点击的列表项的对象信息和位置；
对当前页面进行截屏，生成截屏图片；
全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；
将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；
当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表状态。
在一种优选实施例中，所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。
在一种优选实施例中，所述第二指定值为0。
在一种优选实施例中，
所述将截屏图片从全屏缩小到原尺寸的指定比例，具体为动画渐变动作；
和/或，所述将对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置，具体为：采用动画渐变动作，将对象缩略图从显示列表状态时的位置，逐渐移动到所述第二蒙层上的预定位置，且大小也逐渐变化为所述预定的大小；
和/或，所述将第一蒙层的透明度降低到第一指定值，具体为，采用动画渐变动作，将所述第一蒙层从初始透明状态渐变到所述透明度为第一指定值；
和/或，所述将第二蒙层的透明度降低到第二指定值，具体为，采用动画渐变动作，将所述第二蒙层从初始透明状态渐变到所述透明度为第二指定值。
在一种优选实施例中，当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表的状态，具体包括：
将所述第二蒙层中的详情信息隐藏，将所述第二蒙层的透明度恢复为初始的透明状态，之后隐藏；
将所述详情页中的对象缩略图的大小缩放成显示列表状态时的列表缩略图大小；将所述详情页中的缩略图的位置移动到显示列表状态时的对应的列表项的位置；
将所述第一蒙层从当前透明度恢复为初始的透明状态，然后隐藏，
将所述已经缩小的截屏图片，放大至与屏幕大小一致，然后隐藏。
在一种优选实施例中，所述第一蒙层为黑色蒙层，所述第二蒙层为白色蒙层。
在一种优选实施例中，该方法进一步包括：
1A、当所述第二蒙层或对象缩略图的区域发生滚动事件时，执行后续步骤；
1B、判断所述第二蒙层的坐标与页面顶部位置的距离是否在缩小且达到指定的第一阈值，如果是则转到步骤1C，否则转到步骤1D；
1C、将所述对象缩略图随着滚动操作而逐渐缩小显示，最后隐藏，设置当前页面标题为所述被点击列表项的对象名称；
步骤1D、判断所述第二蒙层的坐标与页面顶部位置的距离是否在放大且达到指定的第二阈值，如果是则转到步骤1E，否则返回步骤1A，
步骤1E、隐藏标题栏，且将所述对象缩略图随着滚动操作而逐渐放大显示。
一种界面的信息显示装置，包括：
列表展示模块，用于显示列表状态，如果监测到有列表项被点击，则获取 被点击的列表项的对象信息和位置，对当前页面进行截屏，生成截屏图片，触发详情展示模块；
详情展示模块，用于全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，触发列表展示模块显示列表状态。
在一种优选实施例中，所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；
所述详情展示模块进一步用于：当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。
在一种优选实施例中，所述第二指定值为0。
与现有技术相比，本发明在同一页面利用动画操作来实现对被点击列表项对象的详情显示，不用进行页面之间的跳转，使得操作更加流畅，并且本发明利用两个蒙层之间的非重叠区域作为详情页返回操作的触发区，触发面积更大，非常方便手持触摸设备的单手操作，不但提高操作的流畅度，而且提高了操作效率。
附图说明
图1a为本发明所述界面的信息显示方法的一种流程图；
图1b为本发明所述界面的信息显示装置的组成示意图；
图2为本发明所述方法的从列表页进入详情页的处理流程图；
图3a为一种现实列表状态即列表页的界面示意图；
图3b所示为从显示列表状态过渡到详情页的界面示意图；
图3c所示为从详情页过渡到显示列表状态的界面示意图；
图4a是一种实际场景中从显示列表状态过渡到详情页的一种详情页界面示意图；
图4b为图4a所述详情页在页面向上滚动后的一种显示界面示意图；
图5为本发明所述方法的从详情页进入列表页的处理流程图。
具体实施方式
下面结合附图及具体实施例对本发明再作进一步详细的说明。
图1a为本发明所述界面的信息显示方法的一种流程图，参见图1a，该方法主要包括：
步骤201、在显示列表状态下，如果监测到有列表项被点击，则执行后续步骤：
步骤202、获取被点击的列表项的对象信息和位置；
步骤203、对当前页面进行截屏，生成截屏图片；
步骤204、全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；
步骤205、将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；
步骤206、当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表状态。
与上述方法对应的，本发明还公开了一种界面的信息显示装置。如图1b为本发明所述界面的信息显示装置的组成示意图，该界面的信息显示装置包括：
列表展示模块100，用于显示列表状态，如果监测到有列表项被点击，则获取被点击的列表项的对象信息和位置，对当前页面进行截屏，生成截屏图片，触发详情展示模块；
详情展示模块200，用于全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，触发列表展示模块显示列表状态。
在本发明的一种优选实施例中，所述第一蒙层为黑色蒙层，所述第二蒙层为白色蒙层。
在本发明的一种优选实施例中，所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；例如所述第一蒙层初始的透明度为100％，所述第一指定值可以为40％；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。例如所述第二蒙层初始的透明度为100％，所述第二指定值可以为0％，即不透明。
为了增强本发明所述详情页面的显示效果，使得用户看起来更加直观，有利于用户提高相关操作的操作效率，在本发明的一种优选实施例中，还可以对详情页的显示过程中增加动画操作。例如所述的动画操作可以包括以下几种：
所述将截屏图片从全屏缩小到原尺寸的指定比例，具体为动画渐变动作；
和/或，所述将对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置，具体为：采用动画渐变动作，将对象缩略图从显示列表状态时的位置，逐渐移动到所述第二蒙层上的预定位置，且大小也逐渐变化为所述预定的大 小；
和/或，所述将第一蒙层的透明度降低到第一指定值，具体为，采用动画渐变动作，将所述第一蒙层从初始透明状态渐变到所述透明度为第一指定值；
和/或，所述将第二蒙层的透明度降低到第二指定值，具体为，采用动画渐变动作，将所述第二蒙层从初始透明状态渐变到所述透明度为第二指定值。
在进一步的优选实施例中，当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表的状态，也可以包括动画操作，具体包括：
将所述第二蒙层中的详情信息隐藏，将所述第二蒙层的透明度恢复为初始的透明状态，之后隐藏；
将所述详情页中的对象缩略图的大小缩放成显示列表状态时的列表缩略图大小；将所述详情页中的缩略图的位置移动到显示列表状态时的对应的列表项的位置；
将所述第一蒙层从当前透明度恢复为初始的透明状态，然后隐藏。
将所述已经缩小的截屏图片，放大至与屏幕大小一致，然后隐藏。
另外在又一种优选实施例中，本发明所述的方法在进行详情页显示时，还可以进一步包括根据用户观看需要而发出的滚动事件，来进一步调整详情页的显示状态，从而使得用户观看起来更加直观，操作效率更高。具体的步骤是在进行详情页显示时，包括：
1A、当所述第二蒙层或对象缩略图的区域发生滚动事件时，执行后续步骤；
1B、判断所述第二蒙层的坐标与页面顶部位置的距离是否在缩小且达到指定的第一阈值，如果是则转到步骤1C，否则转到步骤1D；
1C、将所述对象缩略图随着滚动操作而逐渐缩小显示，最后隐藏，设置当前页面标题为所述被点击列表项的对象名称；
1D、判断所述第二蒙层的坐标与页面顶部位置的距离是否在放大且达到 指定的第二阈值，如果是则转到步骤1E，否则返回步骤1A。
1E、隐藏标题栏，且将所述对象缩略图随着滚动操作而逐渐放大显示。
通过本发明的所述技术方案，本发明在同一页面利用动画操作来实现对被点击列表项对象的详情显示，不用进行页面之间的跳转，使得操作更加流畅，并且本发明利用两个蒙层之间的非重叠区域作为详情页返回操作的触发区，触发面积更大，非常方便手持触摸设备的单手操作，不但提高操作的流畅度，而且提高了操作效率。
下面再根据附图进一步对本发明的处理流程做详细说明。
图2为本发明所述方法的从列表页进入详情页的处理流程图。参见图2，该流程具体包括：
步骤201、列表展示模块显示列表，如图3a所示为一种现实列表状态即列表页的界面示意图，此时的状态为显示列表状态，其中含有多个列表项，如图3a中的列表项31～35，其中每一个列表项对应一个对象，其中含有对象缩略图，如图3a中的封面就是对象缩略图。
步骤202、列表展示模块监控列表项点击事件。
步骤203、列表展示模块如果监测到有列表项被点击，则转到步骤204。例如此处假设列表项31倍点击。
步骤204、列表展示模块根据点击事件对象得到被点击列表项的对象信息(例如此处为列表项31的对象信息，本文中将该被点击列表项的对象信息标记为A)以及被点击列表项所处位置的坐标(本文中将该坐标标记为B，所述坐标通常是该被点击列表项的左上角坐标)，保存A和B到缓存中。所述对象信息例如可以包括：对象缩略图以及对象的介绍文字等。例如如果所述对象为图书，则所述缩略图可以是图书的封面，如果所述对象为商品，则所述缩略图可以是商品的图片等。
步骤205、列表展示模块将当前页面进行截屏，生成截屏图片(此处将 该截屏图片标记为C)。
步骤206、详情展示模块获取被点击列表项的对象信息A和位置信息B。
如图3b所示为从显示列表状态过渡到详情页的界面示意图，下面结合图3b进行说明。
步骤207、详情展示模块为过渡到详情页前准备，主要包括：
01)全屏展示截屏图片C；
02)在截屏图片C上层展示第一蒙层即黑色蒙层(记为D)，透明度为100％，大小与C一致；
03)黑色蒙层D上，展示第二蒙层即白色蒙层(记为E)，宽度与C一致，高度为图片C的指定比例k，例如在一种优选实施例中所述白色蒙层E的高度为截屏图片C的五分之四，白色蒙层E的垂直坐标与屏幕底部对齐。
步骤208、详情展示模块启动动画，所述动画含两部分，该两部分动画同时启动。下面分别介绍：
第一部分动画包括：
11)截屏图片C从全屏缩小到原来的指定比例j，例如在一种优选实施例中，所述j＝4/5。
12)减小黑色蒙层D的透明度，例如可以将该黑色蒙层D的透明度从100％减小到40％，此减小的幅度可以根据实际情况设定。
第二部分动画包括：
21)从对象信息A中得到对象缩略图(记为F)，将该缩略图从所述被点击列表项的位置(即B)移动到详情页所设定的位置，大小也同时变为详情页所设定的大小。所述详情页所设定的位置和大小可以预先设定好。
22)白色蒙层E的透明度从100％到百分之0％，遮挡住下层的图像，并从对象信息A中读取对象的详情信息，在该白色蒙层E的上层显示该对象的详情信息，所述白色蒙层E和上面的详情信息构成了本发明所述的详情页，但是实际上该详情页不是一个页面，而只是一个图层。
到此为止，本发明所述点击某一个列表项所触发的详情信息显示方法已 经完成，如图3b所示，此时如果用户点击所述白色蒙层E或者对象缩略图F，则不会返回到之前的显示列表状态(如图3a所示的状态)，如果用户点击所述黑色蒙层D与所述白色蒙层E的非重叠区域301，或者点击返回按钮，则会返回到之前的显示列表状态(如图3a所示的状态)。
如图4a是一种实际场景中从显示列表状态过渡到详情页的一种详情页界面示意图。其中，被点击列表项的对象缩略图401显示在详情页的指定位置，被点击列表项的详情信息显示在白色蒙层的空白区域402中。此时如果用户点击了白色蒙层和黑色蒙层的非重叠区域400，则会返回到显示列表状态。如果用户点击白色蒙层或对象缩略图，则不会返回到显示列表状态。由于所述非重叠区域400面积较大，用户单手持拿触控设备时，非常方便用户单手操作，提高了操作效率。
如果当前详情页需要显示的详情信息较多，还可以通过在详情页上进行滚动操作，使得详情页上下滚动从而显示更多的内容。
当用户在所述白色蒙层和对象缩略图上进行滚动操作时，还会有进一步实施例的显示方式，如下步骤209～步骤2015所示。
步骤209、详情展示模块监控页面滚动事件，所述滚动事件例如是用户用手指拖动所述白色蒙层E或对象缩略图的区域向上或向下滚动。
步骤2010、详情展示模块判断是否发生了滚动事件，如果是，则转到步骤2011。
步骤2011、详情展示模块获取白色蒙层E的坐标与页面顶部位置的距离。所述白色蒙层E的坐标通常为该白色蒙层E的左上角的坐标，当然也可以是白色蒙层E的右上角坐标或其他标志点位的坐标。
步骤2012、详情展示模块判断白色蒙层E的坐标与页面顶部位置的距离是否在缩小且达到指定的第一阈值，如果是则转到步骤2013，否则转到步骤2014。
步骤2013、将所述对象缩略图随着滚动操作而逐渐缩小显示，最后隐藏，设置当前页面标题为所述被点击列表项的对象名称，如图4b所示。
步骤2014、判断白色蒙层E的坐标与页面顶部位置的距离是否在放大且达到指定的第二阈值，如果是则转到步骤2015，否则返回步骤2010。
步骤2015、隐藏标题栏，且将所述对象缩略图随着滚动操作而逐渐放大显示。
这样所能实现的显示方式是：当详情页向上滚动时，白色蒙层E在靠近顶部时，对象缩略图慢慢缩小隐藏。当详情页向下滚动时，白色蒙层E离开顶部往下时，对象缩略图慢慢放大显示出来。
图5为本发明所述方法的从详情页进入列表页的处理流程图。参见图5，该流程具体包括：
步骤501、详情页展示模块展示详情页，例如如图3b或图4a所示。
步骤502、详情页展示模块监控所述黑色蒙层D与白色蒙层E的非重叠区域400是否被点击或返回按钮是否被点击，如果被点击则转到步骤503。
步骤503、进行动画准备操作，即从缓存中获取对象信息A和被点击列表项的位置B。
步骤504、启动动画步骤，如图3c所示为从详情页过渡到显示列表状态的界面示意图，该动画步骤主要包括：
31)将所述白色蒙层D中的详情信息隐藏，所述白色蒙层D的透明度从0逐渐恢复为初始的100％，之后隐藏；
32)将所述详情页中的缩略图F的大小慢慢缩放成如图3a所示显示列表状态时的列表缩略图大小；将所述详情页中的缩略图的位置慢慢移动到如图3a所示显示列表状态时的对应的列表项的位置B。
33)所述黑色蒙层D从当前透明度慢慢变成100％，然后隐藏。
34)所述已经缩小的截屏图C，慢慢放大至与屏幕大小一致，最后隐藏。
步骤505、动画结束，又恢复成由列表展示模块所展示的列表状态，如图3a所示。
本发明中，由于使用了列表页的截屏图片，让用户感觉虽然进入了详情页，但是实际上还没有离开列表页，列表页向详情页过渡时更加自然顺畅，返回是点击黑色蒙层和白色蒙层的非重叠区域，或者点击返回按钮，意图更加明显。
另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。所述各实施例的功能模块可以位于一个终端或网络节点，或者也可以分布到多个终端或网络节点上。
另外，本发明的每一个实施例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本发明。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此，这样的存储介质也构成了本发明。存储介质可以使用任何类型的记录方式，例如纸张存储介质(如纸带等)、磁存储介质(如软盘、硬盘、闪存等)、光存储介质(如CD-ROM等)、磁光存储介质(如MO等)等。
因此本发明还公开了一种存储介质，其中存储有数据处理程序，该数据处理程序用于执行本发明上述方法的任何一种实施例。
另外，本发明所述的方法步骤除了可以用数据处理程序来实现，还可以由硬件来实现，例如，可以由逻辑门、开关、专用集成电路(ASIC)、可编程逻辑控制器和嵌入微控制器等来实现。因此这种可以实现本发明所述方法的硬件也可以构成本发明。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (12)

  1. 一种界面的信息显示方法，其特征在于，包括：
    在显示列表状态下，如果监测到有列表项被点击，则执行后续步骤：
    获取被点击的列表项的对象信息和位置；
    对当前页面进行截屏，生成截屏图片；
    全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；
    将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；
    当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表状态。
  2. 根据权利要求1所述的方法，其特征在于，
    所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；
    当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。
  3. 根据权利要求2所述的方法，其特征在于，所述第二指定值为0。
  4. 根据权利要求2所述的方法，其特征在于，
    所述将截屏图片从全屏缩小到原尺寸的指定比例，具体为动画渐变动作；
    和/或，所述将对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置，具体为：采用动画渐变动作，将对象缩略图从显示列表状态时的位置，逐渐移动到所述第二蒙层上的预定位置，且大小也逐渐变化为所述预定的大小；
    和/或，所述将第一蒙层的透明度降低到第一指定值，具体为，采用动画渐变动作，将所述第一蒙层从初始透明状态渐变到所述透明度为第一指定值；
    和/或，所述将第二蒙层的透明度降低到第二指定值，具体为，采用动画渐变动作，将所述第二蒙层从初始透明状态渐变到所述透明度为第二指定值。
  5. 根据权利要求2所述的方法，其特征在于，当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表的状态，具体包括：
    将所述第二蒙层中的详情信息隐藏，将所述第二蒙层的透明度恢复为初始的透明状态，之后隐藏；
    将所述详情页中的对象缩略图的大小缩放成显示列表状态时的列表缩略图大小；将所述详情页中的缩略图的位置移动到显示列表状态时的对应的列表项的位置；
    将所述第一蒙层从当前透明度恢复为初始的透明状态，然后隐藏，
    将所述已经缩小的截屏图片，放大至与屏幕大小一致，然后隐藏。
  6. 根据权利要求1-5任一项所述的方法，其特征在于，所述第一蒙层为黑色蒙层，所述第二蒙层为白色蒙层。
  7. 根据权利要求1-5任一项所述的方法，其特征在于，该方法进一步包括：
    1A、当所述第二蒙层或对象缩略图的区域发生滚动事件时，执行后续步骤；
    1B、判断所述第二蒙层的坐标与页面顶部位置的距离是否在缩小且达到指定的第一阈值，如果是则转到步骤1C，否则转到步骤1D；
    1C、将所述对象缩略图随着滚动操作而逐渐缩小显示，最后隐藏，设置当前页面标题为所述被点击列表项的对象名称；
    步骤1D、判断所述第二蒙层的坐标与页面顶部位置的距离是否在放大且达到指定的第二阈值，如果是则转到步骤1E，否则返回步骤1A，
    步骤1E、隐藏标题栏，且将所述对象缩略图随着滚动操作而逐渐放大显示。
  8. 一种界面的信息显示装置，其特征在于，包括：
    列表展示模块，用于显示列表状态，如果监测到有列表项被点击，则获取被点击的列表项的对象信息和位置，对当前页面进行截屏，生成截屏图片，触发详情展示模块；
    详情展示模块，用于全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，触发列表展示模块显示列表状态。
  9. 根据权利要求8所述的装置，其特征在于，所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；
    所述详情展示模块进一步用于：当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。
  10. 根据权利要求9所述的装置，其特征在于，所述第二指定值为0。
  11. 一种设备，包括：
    处理器；和
    存储器，
    所述存储器中存储有能够被所述处理器执行的计算机可读指令，在所述计算机可读指令被执行时，所述处理器执行如权利要求1-7中任一项所述的方法。
  12. 一种非易失性计算机存储介质，所述计算机存储介质存储有能够被处理器执行的计算机可读指令，当所述计算机可读指令被处理器执行时，所述处理器执行如权利要求1-7中任一项所述的方法。
PCT/CN2017/092993 2016-09-19 2017-07-14 界面的信息显示方法和装置 WO2018049907A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US16/334,704 US11112946B2 (en) 2016-09-19 2017-07-14 Interface information display method and apparatus

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201610832163.5 2016-09-19
CN201610832163.5A CN106484242B (zh) 2016-09-19 2016-09-19 界面的信息显示方法和装置

Publications (1)

Publication Number Publication Date
WO2018049907A1 true WO2018049907A1 (zh) 2018-03-22

Family

ID=58268735

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/092993 WO2018049907A1 (zh) 2016-09-19 2017-07-14 界面的信息显示方法和装置

Country Status (3)

Country Link
US (1) US11112946B2 (zh)
CN (1) CN106484242B (zh)
WO (1) WO2018049907A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110825993A (zh) * 2019-10-30 2020-02-21 北京字节跳动网络技术有限公司 图片的显示方法、装置和电子设备
CN116450276A (zh) * 2023-06-09 2023-07-18 北京达佳互联信息技术有限公司 事件响应方法、装置、电子设备及介质

Families Citing this family (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106484242B (zh) 2016-09-19 2019-09-20 北京京东尚科信息技术有限公司 界面的信息显示方法和装置
CN108694180A (zh) * 2017-04-06 2018-10-23 阿里巴巴集团控股有限公司 提供页面内容的方法、装置及计算机系统
CN107424136B (zh) * 2017-07-31 2022-06-28 北京酷我科技有限公司 一种Mac下图片高斯模糊的处理方法
CN107608592B (zh) * 2017-09-28 2020-12-25 Oppo广东移动通信有限公司 一种列表中的列表项的选择方法及装置
CN108255562B (zh) * 2018-01-15 2021-03-12 武汉斗鱼网络科技有限公司 页面跳转方法和装置
CN109388469A (zh) * 2018-10-11 2019-02-26 上海瀚之友信息技术服务有限公司 一种用户图片处理系统及其方法
CN110164551B (zh) * 2019-05-24 2022-03-29 山东大学齐鲁医院 血液病智能诊疗辅助系统
CN112650421B (zh) * 2019-10-12 2023-01-20 上海幻电信息科技有限公司 页面切换显示方法、装置及存储介质
CN110825286B (zh) * 2019-10-30 2021-09-03 北京字节跳动网络技术有限公司 图像处理方法、装置和电子设备
CN110888571B (zh) * 2019-10-31 2024-04-26 维沃移动通信有限公司 一种文件选中方法及电子设备
CN111161374A (zh) * 2019-12-17 2020-05-15 稿定（厦门）科技有限公司 圈点绘制的方法及装置
CN112051954A (zh) * 2020-10-12 2020-12-08 展讯通信(天津)有限公司 页面固定展示方法、装置、电子设备及存储介质
CN112651882B (zh) * 2021-01-15 2023-11-07 抖音视界有限公司 界面展示方法及装置、电子设备和计算机可读存储介质
CN115562558A (zh) * 2021-06-30 2023-01-03 华为技术有限公司 一种滚动截屏的方法及装置
CN113592872A (zh) * 2021-08-16 2021-11-02 北京字节跳动网络技术有限公司 一种图片展示的方法、装置以及计算机存储介质
CN114518832A (zh) * 2022-02-15 2022-05-20 网易（杭州）网络有限公司 触控终端的显示控制方法、装置及电子设备
CN115309300A (zh) * 2022-10-10 2022-11-08 荣耀终端有限公司 消息显示方法、电子设备及计算机可读存储介质
CN116737293A (zh) * 2022-11-04 2023-09-12 荣耀终端有限公司 一种电子设备切换页面的方法和电子设备

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101192230A (zh) * 2006-11-30 2008-06-04 重庆优腾信息技术有限公司 一种打开和关闭图片浏览窗口的方法及装置
US20100115398A1 (en) * 2008-10-31 2010-05-06 Samsung Electronics Co., Ltd. Apparatus and method for efficiently displaying web contents
CN102929557A (zh) * 2012-11-08 2013-02-13 东莞宇龙通信科技有限公司 终端和终端操控方法
CN104571813A (zh) * 2014-12-12 2015-04-29 百度在线网络技术（北京）有限公司 一种信息的显示方法及装置
CN105930489A (zh) * 2016-04-29 2016-09-07 广东小天才科技有限公司 一种应用于电子终端的试题搜索方法和装置
CN106484242A (zh) * 2016-09-19 2017-03-08 北京京东尚科信息技术有限公司 界面的信息显示方法和装置

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7765568B1 (en) * 1999-01-27 2010-07-27 The Directv Group, Inc. Graphical tuning bar
US20040054968A1 (en) * 2001-07-03 2004-03-18 Daniel Savage Web page with system for displaying miniature visual representations of search engine results
JP2004139440A (ja) * 2002-10-18 2004-05-13 Matsushita Electric Ind Co Ltd サービス提供システム及び、それに関する、装置または方法または記録媒体またはプログラム
US7792709B1 (en) * 2008-10-08 2010-09-07 Trandal David S Methods and systems for receipt management and price comparison
KR101775027B1 (ko) * 2010-07-21 2017-09-06 삼성전자주식회사 컨텐트 공유 방법 및 장치
CN105759946B (zh) * 2014-12-17 2018-11-16 阿里巴巴集团控股有限公司 移动终端的交互方法和装置
KR20160076857A (ko) * 2014-12-23 2016-07-01 엘지전자 주식회사 이동 단말기 및 그의 컨텐츠 제어방법
CN104616158B (zh) * 2015-02-13 2018-10-19 北京京东尚科信息技术有限公司 生成商品详情页面的方法和装置
CN105095374A (zh) * 2015-06-30 2015-11-25 北京奇虎科技有限公司 移动终端新闻浏览的方法及装置
CN105426347A (zh) * 2015-10-29 2016-03-23 北京京东尚科信息技术有限公司 提供对象信息的方法、显示终端和服务器

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101192230A (zh) * 2006-11-30 2008-06-04 重庆优腾信息技术有限公司 一种打开和关闭图片浏览窗口的方法及装置
US20100115398A1 (en) * 2008-10-31 2010-05-06 Samsung Electronics Co., Ltd. Apparatus and method for efficiently displaying web contents
CN102929557A (zh) * 2012-11-08 2013-02-13 东莞宇龙通信科技有限公司 终端和终端操控方法
CN104571813A (zh) * 2014-12-12 2015-04-29 百度在线网络技术（北京）有限公司 一种信息的显示方法及装置
CN105930489A (zh) * 2016-04-29 2016-09-07 广东小天才科技有限公司 一种应用于电子终端的试题搜索方法和装置
CN106484242A (zh) * 2016-09-19 2017-03-08 北京京东尚科信息技术有限公司 界面的信息显示方法和装置

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110825993A (zh) * 2019-10-30 2020-02-21 北京字节跳动网络技术有限公司 图片的显示方法、装置和电子设备
CN116450276A (zh) * 2023-06-09 2023-07-18 北京达佳互联信息技术有限公司 事件响应方法、装置、电子设备及介质
CN116450276B (zh) * 2023-06-09 2023-10-13 北京达佳互联信息技术有限公司 事件响应方法、装置、电子设备及介质

Also Published As

Publication number Publication date
US20190235711A1 (en) 2019-08-01
CN106484242A (zh) 2017-03-08
US11112946B2 (en) 2021-09-07
CN106484242B (zh) 2019-09-20

Similar Documents

Publication Publication Date Title
WO2018049907A1 (zh) 界面的信息显示方法和装置
US11592959B2 (en) Device, method, and graphical user interface for navigating and displaying content in context
US11681866B2 (en) Device, method, and graphical user interface for editing screenshot images
US11550471B2 (en) Touch input cursor manipulation
US11644966B2 (en) Coordination of static backgrounds and rubberbanding
US10996788B2 (en) Device, method, and graphical user interface for transitioning between display states in response to a gesture
AU2018101226A4 (en) Systems, methods, and graphical user interfaces for interacting with augmented and virtual reality environments
KR102476243B1 (ko) 터치 입력 커서 조작
US20190018562A1 (en) Device, Method, and Graphical User Interface for Scrolling Nested Regions
US10089056B2 (en) Device, method, and graphical user interface for collaborative editing in documents
US20230017201A1 (en) Device, Method, and Graphical User Interface for Annotating Content
US11947791B2 (en) Devices, methods, and systems for manipulating user interfaces
CN103052935B (zh) 用于对对象的前后位置进行重新排序的装置、方法和图形用户接口
DK180169B1 (en) Devices, procedures, and graphical messaging user interfaces
CN108363526A (zh) 用于在用户界面之间导航的设备和方法
US11822780B2 (en) Devices, methods, and systems for performing content manipulation operations
US9619912B2 (en) Animated transition from an application window to another application window
US20230393717A1 (en) User interfaces for displaying handwritten content on an electronic device

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: 17850110

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17850110

Country of ref document: EP

Kind code of ref document: A1