WO2016124100A1 - Method and device for displaying information - Google Patents

Method and device for displaying information Download PDF

Info

Publication number
WO2016124100A1
WO2016124100A1 PCT/CN2016/072464 CN2016072464W WO2016124100A1 WO 2016124100 A1 WO2016124100 A1 WO 2016124100A1 CN 2016072464 W CN2016072464 W CN 2016072464W WO 2016124100 A1 WO2016124100 A1 WO 2016124100A1
Authority
WO
WIPO (PCT)
Prior art keywords
information
area
displayed
display
product
Prior art date
Application number
PCT/CN2016/072464
Other languages
French (fr)
Chinese (zh)
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 WO2016124100A1 publication Critical patent/WO2016124100A1/en

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor

Definitions

  • the present invention relates to the field of Internet technologies, and in particular, to an information display method and apparatus.
  • the keyword can be input in the page search box, and the server can send the product to the client after the corresponding product is obtained according to the keyword, and the client displays the product in the form of a list.
  • the page may also include a Stock Keeping Unit (SKU) area, which is used to identify product attributes, such as color, size, price range, etc., and the user may perform product attributes in the SKU area. select.
  • SKU Stock Keeping Unit
  • the present invention aims to solve at least one of the technical problems in the related art to some extent.
  • an object of the present invention is to provide an information display method, which can effectively improve the display effect of information.
  • Another object of the present invention is to provide an information display apparatus.
  • the information display method provided by the embodiment of the first aspect of the present invention includes: acquiring information to be displayed; and displaying the information in the form of a particle stream.
  • the information display method proposed by the embodiment of the first aspect of the present invention can obtain the information to be displayed and display the information in the form of a particle stream, because the particle flow can improve the display effect; and, through the particle flow form, The updated information can be displayed without reloading the page, avoiding interruption of user operations and improving the user experience.
  • the information display apparatus of the second aspect of the present invention includes: a first obtaining module, configured to acquire information to be displayed; and a first display module, configured to display the information in a particle stream form.
  • the information display device can obtain the information to be displayed and display the information in the form of a particle stream, because the particle flow can improve the display effect; and, through the particle flow form, The updated information can be displayed without reloading the page, avoiding interruption of user operations and improving the user experience.
  • an electronic device includes: a display screen; a processor; a memory, configured to store a preset code, where the preset code is acquired by the processor, and is to be displayed. Information and The information is presented on the display screen in the form of a particle stream.
  • the electronic device can display the information to be displayed and display the information in the form of a particle stream, because the particle flow can improve the display effect; and, through the particle flow form, when the particle device is to be displayed
  • the updated information can be reloaded without the need to reload the user, thereby improving the user experience.
  • FIG. 1 is a schematic flow chart of an information display method according to an embodiment of the present invention.
  • FIG. 2 is a schematic structural diagram of an information area in an embodiment of the present invention.
  • FIG. 3 is a schematic view of a first area in an embodiment of the present invention.
  • FIG. 4 is a schematic view of a second area in an embodiment of the present invention.
  • Figure 5 is a schematic view of a third area in the embodiment of the present invention.
  • FIG. 6 is a schematic view of a fourth area in an embodiment of the present invention.
  • FIG. 7 is a schematic diagram of a speed control bar in an embodiment of the present invention.
  • Figure 8 is a schematic view of an animation switch button in an embodiment of the present invention.
  • FIG. 9 is a schematic diagram of a view switching button in an embodiment of the present invention.
  • FIG. 10 is a schematic flow chart of displaying information in the form of particle flow in an embodiment of the present invention.
  • FIG. 11 is a schematic flow chart of collecting product information in an embodiment of the present invention.
  • FIG. 12 is a schematic diagram of a control flow in an embodiment of the present invention.
  • FIG. 13 is a schematic diagram of another control flow in the embodiment of the present invention.
  • FIG. 15 is a schematic structural diagram of an information display apparatus according to another embodiment of the present invention.
  • FIG. 16 is a schematic structural diagram of an information display apparatus according to another embodiment of the present invention.
  • FIG. 1 is a schematic flowchart of an information display method according to an embodiment of the present invention, where the method includes:
  • the information to be displayed may be specific product information.
  • the client can send the keyword to the server, and after detecting the corresponding product information according to the keyword, the server sends the product information to the client, so that the client can Get product information from the server.
  • S12 Display the information in the form of a particle stream.
  • the product information is displayed in the form of a particle stream.
  • the particle flow form refers to the form in which information flows continuously and out of the page where the information is displayed.
  • the product information is displayed in a list form in the product list area of the page, and the method is a static mode.
  • the product information is displayed in the form of a particle stream on the page, because the particle stream form is information.
  • the form of continuous inflow and outflow therefore, can dynamically display the product information and enhance the display effect.
  • the current search results page can be referred to as the current page.
  • the client when the user inputs a new keyword or selects a new attribute value in the SKU area, the client needs to reload the new page and display the new item information in the new page.
  • the displaying the information in the form of a particle stream includes:
  • the method further includes:
  • the updated information is displayed in the current page in the form of a particle stream.
  • the information is product information
  • the current page may include a search area and a information area, where the search area includes a search box, the user may input a keyword in the search box to initiate a search, and the information area is used to display product information. .
  • the current page may further include a SKU area, and the user may select an item attribute in the SKU area, for example, selecting a color, a size, and the like.
  • the screening area may be subsequently formed, and the user may select the product attribute in the screening area. Therefore, the SKU area may not be set in the embodiment of the present invention.
  • the information area may also be referred to as a product list area, and the item information is displayed in the information area in a list form.
  • the item information is displayed in the information area in the form of a particle stream.
  • the information area 20 may include a first area 21, which may also be referred to as a canvas area, and the item information is specifically displayed in the first area 21.
  • the commodity information is displayed in the first region in the form of a particle stream.
  • the commodity information is displayed in the first region in the form of a particle stream.
  • three item information appear in the first area 21, and three pieces of item information are in a state of constant movement, for example, moving from top to bottom. It can be understood that the moving speed and the moving direction can be set in advance.
  • different moving speeds may be adopted according to the location of the product information.
  • the information to be displayed is moved from top to bottom in the first area, and the moving speed of the information to be displayed at the middle position of the first area is smaller than the current The speed at which the information to be displayed moves on the upper and lower ends of the first area.
  • the moving speed at different positions can be implemented according to a Bessel function, for example, the Bessel function is cubic-bezier (0, .3, .99, .3).
  • the information area 20 may include a second area 22, which may also be referred to as a collection area, and the user may collect the selected item information in the second area 22.
  • the selected information is added to the second area.
  • the product information can be stored in the second area.
  • the user can collect the product information into the second area after performing the collecting operation through the product information displayed in the first area. For example, after the user clicks on one item information in the first area, the item information that the user clicks is added to the second area. After the product information is added to the second area, in the second area, the user can delete the product information in the second area, and compare and enter one or more items in the product detail page.
  • the corresponding operation can be realized by setting a function button.
  • the information area 20 may include a third area 23, which may also be referred to as a screening area, and the user may select a label in the third area 23.
  • Tags are used to identify product attributes, such as the color of a product, or a brand.
  • the initial label can be preset by the system, after which the user can add a label or delete a label, or the system can automatically add a label according to the product information selected by the user.
  • one or more tags can be set by default, and the one or more tags can form a tag list, and the user can input the tag to be added at the position of the "enter tag" and click "Add". Adding a label to the label list; or, each label can be associated with a deletion identifier; when the user clicks the deletion identifier, the corresponding label can be deleted; or, after the user selects a product information in the first area, the product information has The tags can be automatically added to the tag list.
  • the user can select a favorite item attribute in the third area 23, for example, select dark blue.
  • the client sends the label to the server, and the server obtains the corresponding product information in a pre-established database according to the label, for example, sending the product information with dark blue color to the client, by the client.
  • the terminal is presented to the user in the first area.
  • the information area 20 may include a fourth area 24, which may also be referred to as a control area, and the user may control the display form of the information area in the fourth area 24.
  • the display shape of the information area may be determined according to an optional function item in the fourth area 24 And displaying the information area in the determined display form.
  • the optional functional items within the fourth area 24 include at least one of the following:
  • a speed control bar 61 configured to control a moving speed of the information in the first area
  • the speed control bar can be set to the normal speed by default.
  • acceleration can be performed, and when the shift to the left is initially, the control is located at the intermediate position.
  • marking you can decelerate.
  • the moving speed of the different positions of the product information may be different, for example, the moving speed of the intermediate position is slow, the moving speed of the upper and lower ends is fast, or the moving speed may be determined according to the heat value of the product information, for example, the product with high heat value
  • the movement speed of the information is slow, and the heat value is determined, for example, according to one or more of sales volume, price, evaluation, and the like.
  • the module for realizing the movement of the product information may be referred to as a product module, and the moving speed may be set by setting the animation-duration attribute of the Cascading Style Sheets (CSS) of the product module.
  • CSS Cascading Style Sheets
  • An animated switch button 62 is configured to control whether the first area is an animated display form; wherein, if it is an animated display form, the information continuously moves in a particle stream in the first area, if not an animated display form, the information It is stationary in the first area.
  • the animation switch button when the user clicks the animation switch button, the "ON” state can be changed to the "OFF” state, and when the "OFF” state animation switch button is clicked again, , can be changed from “OFF” state to "ON” state.
  • the animation switch can be realized by setting the animation-play-state property of the product module CSS to pause or running.
  • the view switching button 63 is configured to control the information area to be a list view or a particle view. Wherein, if it is a list view, the information is displayed in a list form in the first area, and if it is a particle view, the information is displayed in a particle stream in the first area.
  • the display effect can be improved by displaying information in the form of a particle stream.
  • FIG. 10 is a schematic flowchart of displaying information in the form of a particle stream in the embodiment of the present invention, including:
  • the emission timer is a timer for pushing product information, and the timing period can be set in advance.
  • the commodity information displayed in the form of a particle stream can be referred to as a commodity particle stream, and by changing the timing period of the emission timer, the frequency of the commodity particle stream emission can be controlled.
  • each product information may be referred to as a product particle
  • the transmitter for pushing the product information may calculate the maximum number of columns of the product particle flow in the canvas area according to the size of the user browser window, the size of the collection area, and the size of the product module. Set the interval time, which in turn rotates the product particles in different columns.
  • step S102 Determine whether the animation of the canvas area is paused, if yes, execute step S103, otherwise perform step S104 and subsequent steps.
  • S104 Determine the current column where the commodity information to be displayed is currently located, and determine the commodity information of the next column of the current column.
  • the product information may be saved in a column form, and the transmitter sequentially sends the product information of each column.
  • S105 Determine the moving speed of each item information and the duration of the animation.
  • the moving speed may be changed according to different positions of the commodity information, or the moving speed may also be determined according to the heat value of the commodity information.
  • the duration of the animation can be determined based on the speed of the movement and the length of the path through which the product information passes.
  • Each product information can generate a product module correspondingly, and each product module can be added to the document flow as a Document Object Model (DOM).
  • DOM Document Object Model
  • the item information When the item information is added to the document stream, the item information can be displayed in the form of a particle stream in the first area of the page.
  • the transmitter reads the product module containing the commodity information from the document stream according to the transmission period, and transmits the product module, and after being emitted, the product module moves in the first region according to the moving speed of the product module to form a product particle flow, and each Product modules correspond to product information.
  • the animationEnd event in the CSS code corresponding to the product module can be monitored.
  • the event is triggered.
  • the server removes the DOM of the product module from the document stream to ensure the memory. No overflow, you can push the product particle stream infinitely.
  • FIG. 11 is a schematic flowchart of collecting product information in an embodiment of the present invention, including:
  • S1101 Determine the operation of the user in the first area.
  • the user's operation in the first area for example, the user moves the mouse into the product module, or the user clicks on a product module in the first area.
  • step S1102 Determine whether the operation is that the user moves the mouse into the product module, and if yes, execute step S1103, otherwise perform step S1104.
  • S1104 Determine whether the operation is that the user moves the mouse out of the product module, and if yes, perform steps S1105-S1107, otherwise perform steps S1108-S1110.
  • step S1105 Determine whether the global animation in the first area is closed, if yes, execute step S1106, otherwise perform step S1107.
  • the global animation is turned on when it is detected that the animated switch button is in the "ON” state, and the global animation is turned off when it is detected that the animated switch button is in the "OFF” state.
  • the product module When the animation is turned on, the product module is restored from a stationary state to a moving state.
  • step S1108 Determine whether the user selects the product in the first area, and if yes, execute step S1109, otherwise perform step S1110.
  • Each product can be pre-set with a label. After the user clicks to select a product, the product can be added not only to the second area, but also the product information of the selected product can be displayed in the second area, and the product can also be labeled. Automatically added to the third area, for example, adding the brand of the product to the third area.
  • the user can also control the display effect of the product information.
  • a control flow proposed by the embodiment of the present invention may include:
  • the user can click on the animated switch button in the fourth area, or press the keyboard space bar.
  • the user can also control the animation speed.
  • the animation speed is fast, the movement speed of the product information is fast, otherwise the movement speed is slow.
  • another control flow proposed by the embodiment of the present invention includes :
  • step S132 Determine whether the slider value of the speed control bar changes, if yes, execute step S134, otherwise perform step S133.
  • the slider value changes.
  • S134 Acquire an updated moving speed of the product information after the slider value is changed.
  • the movement speed is updated to 1.1 times the original speed.
  • the transmitting frequency or the like of the transmitter may be reset according to the moving speed, so that the transmitter transmits the product module corresponding to the commodity information at a frequency corresponding to the updated moving speed.
  • the user may also update the selected tag to obtain the product information corresponding to the updated tag.
  • the update process may include:
  • the user enters the label to be added at the position of the "enter label", and clicks the "add” button to newly add a label, or the user can automatically add the label of the product information to the label after the user selects the item information in the first area.
  • the list of tags In the list of tags.
  • step S142 The client determines whether the newly added label is in the existing label list. If yes, step S143 is performed, otherwise step S144 is performed.
  • the tag list may also be referred to as a tag array.
  • the existing tag array includes the tag "Jordan”, and the newly added tag is "Jordan", and the result is that the newly added tag is in the existing tag list. .
  • S144 The client adds the newly added label to the label list and displays the label.
  • the existing tag list does not include the tag “Jordan”, and the newly added tag is “Jordan”, and the tag “Jordan” is added to the existing tag list.
  • S145 The client sends the updated tag list to the server, so that the server obtains the updated information to be displayed according to the tags included in the updated tag list.
  • the updated tag list is obtained by adding the newly added tag to the existing tag list, for example, adding a tag list after the tag "Jordan" to the existing tag list.
  • the server needs to obtain the updated information according to the updated tag list.
  • the updated information obtained needs to be related to “Jordan”.
  • the display effect can be improved in the form of a particle stream; and, by the particle stream form, the updated information can be displayed without reloading.
  • the page avoids interruption of user operations and enhances the user experience.
  • FIG. 15 is a schematic structural diagram of an information display apparatus according to another embodiment of the present invention.
  • the apparatus 150 includes a first obtaining module 151 and a first display module 152.
  • the first obtaining module 151 is configured to obtain information to be displayed.
  • the information to be displayed may be specific product information.
  • the client can send the keyword to the server, and after detecting the corresponding product information according to the keyword, the server sends the product information to the client, so that the client can Get product information from the server.
  • the information is displayed in a first area of the information area of the current page, and the information area further includes a third area, where the first obtaining module 151 is specifically configured to acquire a user to set in the third area.
  • the label; the information to be displayed is obtained according to the label.
  • the information area 20 may include a third area 23, which may also be referred to as a screening area, and the user may select a label in the third area 23.
  • Tags are used to identify product attributes, such as the color of a product, or a brand.
  • the initial label can be preset by the system, after which the user can add a label or delete a label, or the system can automatically add a label according to the product information selected by the user.
  • one or more tags can be set by default, and the one or more tags can form a tag list, and the user can input the tag to be added at the position of the "enter tag" and click "Add". Adding a label to the label list; or, each label can be associated with a deletion identifier; when the user clicks the deletion identifier, the corresponding label can be deleted; or, after the user selects a product information in the first area, the product information has The tags can be automatically added to the tag list.
  • the user can select a favorite item attribute in the third area 23, for example, select dark blue.
  • the client sends the label to the server, and the server obtains the corresponding product information in a pre-established database according to the label, for example, sending the product information with dark blue color to the client, by the client.
  • the terminal is presented to the user in the first area.
  • the first display module 152 is configured to display the information in the form of a particle stream.
  • the product information is displayed in the form of a particle stream.
  • the particle flow form refers to the form in which information flows continuously and out of the page where the information is displayed.
  • the product information is displayed in a list form in the product list area of the page, and the method is a static mode.
  • the product information is displayed in the form of a particle stream on the page, because the particle stream form is information.
  • the form of continuous inflow and outflow therefore, can dynamically display the product information and enhance the display effect.
  • the current search results page can be referred to as the current page.
  • the client when the user inputs a new keyword or selects a new attribute value in the SKU area, the client needs to reload the new page and display the new item information in the new page.
  • the first display module 152 is specifically configured to display the pre-update information in the current page in the form of a particle stream;
  • the apparatus 150 further includes:
  • the second obtaining module 153 is configured to obtain updated information.
  • the second display module 154 is configured to display the updated information in the current page in the form of a particle stream.
  • the information is product information
  • the current page may include a search area and a information area, where the search area includes a search box, the user may input a keyword in the search box to initiate a search, and the information area is used to display product information. .
  • the current page may further include a SKU area, and the user may select an item attribute in the SKU area, for example, selecting a color, a size, and the like.
  • the screening area may be subsequently formed, and the user may select the product attribute in the screening area. Therefore, the SKU area may not be set in the embodiment of the present invention.
  • the information area may also be referred to as a product list area, and the item information is displayed in the information area in a list form.
  • the item information is displayed in the information area in the form of a particle stream.
  • the information is displayed in a first area of the information area of the current page.
  • the first display module 152 includes:
  • the first unit 1521 is configured to determine whether the first area is an animated display form when a preset timer reaches a timing period.
  • the second unit 1522 is configured to: if the first area is an animated display form, obtain information currently to be displayed and an animation duration corresponding to the information.
  • the third unit 1523 is configured to control, according to the preset direction, that the information currently to be displayed moves into the first area and gradually moves out of the first area, and the appearance time in the first area is the The duration of the animation.
  • the information area 20 may include a first area 21, which may also be referred to as a canvas area, and the item information is specifically displayed in the first area 21.
  • the commodity information is displayed in the first region in the form of a particle stream.
  • the commodity information is displayed in the first region in the form of a particle stream.
  • three item information appear in the first area 21, and three pieces of item information are in a state of constant movement, for example, moving from top to bottom. It can be understood that the moving speed and the moving direction can be set in advance.
  • the information to be displayed is moved from top to bottom in the first area, and
  • the moving speed of the information to be displayed at the intermediate position of the first area is smaller than the moving speed of the information currently to be displayed on the upper and lower ends of the first area.
  • different moving speeds may be adopted according to the location of the product information.
  • the information to be displayed is moved from top to bottom in the first area, and the moving speed of the information to be displayed at the middle position of the first area is smaller than the current The speed at which the information to be displayed moves on the upper and lower ends of the first area.
  • the moving speed at different positions can be implemented according to a Bessel function, for example, the Bessel function is cubic-bezier (0, .3, .99, .3). or,
  • the information to be displayed currently includes information having different heat values, and the moving speed of the information having a high heat value is smaller than the moving speed of the information having a low heat value.
  • the moving speed of the product information having a high heat value is slow, and the heat value is determined, for example, based on one or more of sales, price, evaluation, and the like.
  • the information is displayed in a first area of the information area of the current page, and the information area further includes a second area.
  • the apparatus 150 further includes:
  • the adding module 155 is configured to add the selected information to the second area after selecting information in the first area.
  • the information area 20 may include a second area 22, which may also be referred to as a collection area, and the user may collect the selected item information in the second area 22.
  • the selected information is added to the second area.
  • the product information can be stored in the second area.
  • the user can collect the product information into the second area after performing the collecting operation through the product information displayed in the first area. For example, after the user clicks on one item information in the first area, the item information that the user clicks is added to the second area. After the product information is added to the second area, in the second area, the user can delete the product information in the second area, and compare and enter one or more items in the product detail page.
  • the corresponding operation can be realized by setting a function button.
  • the information is displayed in a first area of the information area of the current page, and the information area further includes a fourth area.
  • the apparatus 150 further includes:
  • the determining module 156 is configured to determine a display form of the information area according to an optional function item in the fourth area, and display the information area in the determined display form.
  • the information area 20 may include a fourth area 24, which may also be referred to as a control area, and the user may control the display form of the information area in the fourth area 24.
  • the display form of the information area may be determined according to an optional function item in the fourth area 24, and the information area is displayed in the determined display form.
  • the optional function item includes at least one of: a function item for controlling a moving speed of the information in the first area; and controlling the first area Is it an animated display? A function item; a function item for controlling the information area to be displayed in a list or animated.
  • the information area 20 may include a fourth area 24, which may also be referred to as a control area, and the user may control the display form of the information area in the fourth area 24.
  • the display form of the information area may be determined according to an optional function item in the fourth area 24, and the information area is displayed in the determined display form.
  • the optional functional items within the fourth area 24 include at least one of the following:
  • a speed control bar 61 configured to control a moving speed of the information in the first area
  • the speed control bar can be set to the normal speed by default.
  • acceleration can be performed, and when the shift to the left is initially, the control is located at the intermediate position.
  • marking you can decelerate.
  • the moving speed of the different positions of the product information may be different, for example, the moving speed of the intermediate position is slow, the moving speed of the upper and lower ends is fast, or the moving speed may be determined according to the heat value of the product information, for example, the product with high heat value
  • the movement speed of the information is slow, and the heat value is determined, for example, according to one or more of sales volume, price, evaluation, and the like.
  • the module for realizing the movement of the commodity information may be referred to as a product module, and the movement speed may be set by setting the animation-duration property of the CSS of the product module.
  • An animated switch button 62 is configured to control whether the first area is an animated display form; wherein, if it is an animated display form, the information continuously moves in a particle stream in the first area, if not an animated display form, the information It is stationary in the first area.
  • the animation switch button when the user clicks the animation switch button, the "ON” state can be changed to the "OFF” state, and when the "OFF” state animation switch button is clicked again, , can be changed from “OFF” state to "ON” state.
  • the animation switch can be realized by setting the animation-play-state property of the product module CSS to pause or running.
  • the view switching button 63 is configured to control the information area to be a list view or a particle view. Wherein, if it is a list view, the information is displayed in a list form in the first area, and if it is a particle view, the information is displayed in a particle stream in the first area.
  • the display effect can be improved in the form of a particle stream; and, by the particle stream form, the updated information can be displayed without reloading.
  • the page avoids interruption of user operations and enhances the user experience.
  • portions of the invention may be implemented in hardware, software, firmware or a combination thereof.
  • multiple steps or methods may be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system.
  • a suitable instruction execution system For example, if implemented in hardware, as in another embodiment, it can be implemented by any one or combination of the following techniques well known in the art: having logic gates for implementing logic functions on data signals. Discrete logic circuits, application specific integrated circuits with suitable combinational logic gates, programmable gate arrays (PGAs), field programmable gate arrays (FPGAs), etc.
  • each functional unit in each embodiment of the present invention may be integrated into one processing module, or each unit may exist physically separately, or two or more units may be integrated into one module.
  • the above integrated modules can be implemented in the form of hardware or in the form of software functional modules.
  • the integrated modules, if implemented in the form of software functional modules and sold or used as stand-alone products, may also be stored in a computer readable storage medium.
  • the above mentioned storage medium may be a read only memory, a magnetic disk or an optical disk or the like.

Abstract

Provided are a method and device for displaying information, said information display method comprising: obtaining information to be displayed (S11); displaying said information in the form of a particle stream (S12). The method effectively improves information display performance.

Description

信息展示方法和装置Information display method and device 技术领域Technical field
本发明涉及互联网技术领域,尤其涉及一种信息展示方法和装置。The present invention relates to the field of Internet technologies, and in particular, to an information display method and apparatus.
背景技术Background technique
用户采用电子商务网站内的搜索引擎进行商品搜索时,可以在页面搜索框中输入关键词,服务端根据关键词获取对应的商品后,将商品推送给客户端,客户端以列表形式将商品展示在页面的商品列表区,页面中还可以包括库存量单位(Stock Keeping Unit,SKU)区域,该区域用于标识商品属性,例如,颜色,尺码,价格区间等,用户可以在SKU区域进行商品属性选择。当用户重新输入关键词或者在SKU区域中选择新的属性,客户端都需要重新加载页面,并在新的页面上以列表形式展示新的商品。When a user searches for a product using a search engine in an e-commerce website, the keyword can be input in the page search box, and the server can send the product to the client after the corresponding product is obtained according to the keyword, and the client displays the product in the form of a list. In the product list area of the page, the page may also include a Stock Keeping Unit (SKU) area, which is used to identify product attributes, such as color, size, price range, etc., and the user may perform product attributes in the SKU area. select. When the user re-enters the keyword or selects a new attribute in the SKU area, the client needs to reload the page and display the new item as a list on the new page.
现有技术中以列表形式展示商品的方式,展示效果较差。In the prior art, the manner in which the products are displayed in the form of a list is poorly displayed.
发明内容Summary of the invention
本发明旨在至少在一定程度上解决相关技术中的技术问题之一。The present invention aims to solve at least one of the technical problems in the related art to some extent.
为此,本发明的一个目的在于提出一种信息展示方法,该方法可以有效提升信息的展示效果。To this end, an object of the present invention is to provide an information display method, which can effectively improve the display effect of information.
本发明的另一个目的在于提出一种信息展示装置。Another object of the present invention is to provide an information display apparatus.
为达到上述目的,本发明第一方面实施例提出的信息展示方法,包括:获取要展示的信息;以粒子流形式,展示所述信息。To achieve the above objective, the information display method provided by the embodiment of the first aspect of the present invention includes: acquiring information to be displayed; and displaying the information in the form of a particle stream.
本发明第一方面实施例提出的信息展示方法,通过获取要展示的信息,并以粒子流形式展示信息,由于是以粒子流的形式,可以提高展示效果;并且,通过粒子流形式,当要展示更新后的信息时可以无需重新加载页面,避免对用户操作的打断,提升用户体验。The information display method proposed by the embodiment of the first aspect of the present invention can obtain the information to be displayed and display the information in the form of a particle stream, because the particle flow can improve the display effect; and, through the particle flow form, The updated information can be displayed without reloading the page, avoiding interruption of user operations and improving the user experience.
为达到上述目的,本发明第二方面实施例提出的信息展示装置,包括:第一获取模块,用于获取要展示的信息;第一展示模块,用于以粒子流形式,展示所述信息。In order to achieve the above objective, the information display apparatus of the second aspect of the present invention includes: a first obtaining module, configured to acquire information to be displayed; and a first display module, configured to display the information in a particle stream form.
本发明第二方面实施例提出的信息展示装置,通过获取要展示的信息,并以粒子流形式展示信息,由于是以粒子流的形式,可以提高展示效果;并且,通过粒子流形式,当要展示更新后的信息时可以无需重新加载页面,避免对用户操作的打断,提升用户体验。The information display device according to the embodiment of the second aspect of the present invention can obtain the information to be displayed and display the information in the form of a particle stream, because the particle flow can improve the display effect; and, through the particle flow form, The updated information can be displayed without reloading the page, avoiding interruption of user operations and improving the user experience.
为达到上述目的,本发明第三方面实施例提出的电子设备,包括:显示屏;处理器;存储器,用于存储预设代码,所述预设代码被所述处理器执行时,获取要展示的信息,并 以粒子流形式,在所述显示屏上展示所述信息。In order to achieve the above object, an electronic device according to an embodiment of the present invention includes: a display screen; a processor; a memory, configured to store a preset code, where the preset code is acquired by the processor, and is to be displayed. Information and The information is presented on the display screen in the form of a particle stream.
本发明第三方面实施例提出的电子设备,通过获取要展示的信息,并以粒子流形式展示信息,由于是以粒子流的形式,可以提高展示效果;并且,通过粒子流形式,当要展示更新后的信息时可以无需重新加载页面,避免对用户操作的打断,提升用户体验。The electronic device according to the embodiment of the third aspect of the present invention can display the information to be displayed and display the information in the form of a particle stream, because the particle flow can improve the display effect; and, through the particle flow form, when the particle device is to be displayed The updated information can be reloaded without the need to reload the user, thereby improving the user experience.
本发明附加的方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本发明的实践了解到。The additional aspects and advantages of the invention will be set forth in part in the description which follows.
附图说明DRAWINGS
本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解,其中:The above and/or additional aspects and advantages of the present invention will become apparent and readily understood from
图1是本发明一实施例提出的信息展示方法的流程示意图;1 is a schematic flow chart of an information display method according to an embodiment of the present invention;
图2是本发明实施例中信息区的结构示意图;2 is a schematic structural diagram of an information area in an embodiment of the present invention;
图3是本发明实施例中第一区域示意图;3 is a schematic view of a first area in an embodiment of the present invention;
图4是本发明实施例中第二区域示意图;4 is a schematic view of a second area in an embodiment of the present invention;
图5是本发明实施例中第三区域示意图;Figure 5 is a schematic view of a third area in the embodiment of the present invention;
图6是本发明实施例中第四区域示意图;6 is a schematic view of a fourth area in an embodiment of the present invention;
图7是本发明实施例中速度控制条的示意图;7 is a schematic diagram of a speed control bar in an embodiment of the present invention;
图8是本发明实施例中动画开关按钮的示意图;Figure 8 is a schematic view of an animation switch button in an embodiment of the present invention;
图9是本发明实施例中视图切换按钮的示意图;9 is a schematic diagram of a view switching button in an embodiment of the present invention;
图10是本发明实施例中以粒子流形式展示信息的流程示意图;10 is a schematic flow chart of displaying information in the form of particle flow in an embodiment of the present invention;
图11是本发明实施例中收藏商品信息的流程示意图;11 is a schematic flow chart of collecting product information in an embodiment of the present invention;
图12是本发明实施例中一种控制流程示意图;12 is a schematic diagram of a control flow in an embodiment of the present invention;
图13是本发明实施例中另一种控制流程示意图;FIG. 13 is a schematic diagram of another control flow in the embodiment of the present invention; FIG.
图14是本发明实施例中更新流程示意图;14 is a schematic diagram of an update process in an embodiment of the present invention;
图15是本发明另一实施例提出的信息展示装置的结构示意图;15 is a schematic structural diagram of an information display apparatus according to another embodiment of the present invention;
图16是本发明另一实施例提出的信息展示装置的结构示意图。FIG. 16 is a schematic structural diagram of an information display apparatus according to another embodiment of the present invention.
具体实施方式detailed description
下面详细描述本发明的实施例,所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,仅用于解释本发明,而不能理解为对本发明的限制。相反,本发明的实施例包括落入所附加权利要求书的精神和内涵范围内的所有变化、修改和等同物。 The embodiments of the present invention are described in detail below, and the examples of the embodiments are illustrated in the drawings, wherein the same or similar reference numerals are used to refer to the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are intended to be illustrative of the invention and are not to be construed as limiting. Rather, the invention is to cover all modifications, modifications and equivalents within the spirit and scope of the appended claims.
图1是本发明一实施例提出的信息展示方法的流程示意图,该方法包括:1 is a schematic flowchart of an information display method according to an embodiment of the present invention, where the method includes:
S11:获取要展示的信息。S11: Get the information to be displayed.
其中,要展示的信息可以具体是商品信息。Among them, the information to be displayed may be specific product information.
例如,用户在客户端的搜索框中输入关键词后,客户端可以将关键词发送给服务端,服务端根据关键词检测到对应的商品信息后,将商品信息发送给客户端,从而客户端可以从服务端获取商品信息。For example, after the user inputs a keyword in the search box of the client, the client can send the keyword to the server, and after detecting the corresponding product information according to the keyword, the server sends the product information to the client, so that the client can Get product information from the server.
S12:以粒子流形式,展示所述信息。S12: Display the information in the form of a particle stream.
例如,客户端获取商品信息后,以粒子流形式展示商品信息。For example, after the client obtains the product information, the product information is displayed in the form of a particle stream.
粒子流形式是指信息在展示信息的页面内不断流入以及流出的展示形式。The particle flow form refers to the form in which information flows continuously and out of the page where the information is displayed.
现有技术中,商品信息是以列表形式展示在页面的商品列表区,该方式是一种静态方式,而本实施例中,在页面上以粒子流形式展示商品信息,由于粒子流形式是信息不断流入及流出的形式,因此,可以实现商品信息的动态展示,提升展示效果。In the prior art, the product information is displayed in a list form in the product list area of the page, and the method is a static mode. In this embodiment, the product information is displayed in the form of a particle stream on the page, because the particle stream form is information. The form of continuous inflow and outflow, therefore, can dynamically display the product information and enhance the display effect.
信息可以展示在搜索结果页,当前的搜索结果页可以称为当前页面。Information can be displayed on the search results page, and the current search results page can be referred to as the current page.
进一步的,现有技术中,当用户输入新的关键词或者在SKU区域选择新的属性值时,客户端都需要重新加载新的页面,并将新的商品信息展示在新的页面内。Further, in the prior art, when the user inputs a new keyword or selects a new attribute value in the SKU area, the client needs to reload the new page and display the new item information in the new page.
而本实施例中,可以不需要加载新的页面,依然在当前页面中展示新的商品信息。In this embodiment, it is not necessary to load a new page, and the new product information is still displayed on the current page.
具体的,当所述信息包括更新前的信息时,所述以粒子流形式,展示所述信息,包括:Specifically, when the information includes pre-update information, the displaying the information in the form of a particle stream includes:
以粒子流形式,在当前页面内展示所述更新前的信息;Displaying the pre-update information in the current page in the form of a particle stream;
所述方法还包括:The method further includes:
获取更新后的信息;Obtain updated information;
以粒子流形式,在所述当前页面内展示所述更新后的信息。The updated information is displayed in the current page in the form of a particle stream.
通过将更新后的信息展示在更新前的信息所在的当前页面,可以不需要加载新的页面,从而避免重新加载页面对用户操作的打断。By displaying the updated information on the current page where the information before the update is located, it is not necessary to load a new page, thereby avoiding interruption of the user operation by reloading the page.
可选的,以信息是商品信息为例,当前页面可以包括搜索区和信息区,其中,搜索区包括搜索框,用户可以在搜索框内输入关键词,发起搜索;信息区用于展示商品信息。Optionally, the information is product information, and the current page may include a search area and a information area, where the search area includes a search box, the user may input a keyword in the search box to initiate a search, and the information area is used to display product information. .
可选的,当前页面还可以包括SKU区域,用户可以在SKU区域选择商品属性,例如,选择颜色,尺码等。可以理解的是,由于本发明实施例中,后续会出现筛选区,用户可以在筛选区进行商品属性选择,因此本发明实施例中也可以不设置SKU区域。Optionally, the current page may further include a SKU area, and the user may select an item attribute in the SKU area, for example, selecting a color, a size, and the like. It is to be understood that, in the embodiment of the present invention, the screening area may be subsequently formed, and the user may select the product attribute in the screening area. Therefore, the SKU area may not be set in the embodiment of the present invention.
现有技术中,信息区也可以称为商品列表区,商品信息以列表形式展示在信息区,而本实施例中,商品信息以粒子流形式展示在信息区。In the prior art, the information area may also be referred to as a product list area, and the item information is displayed in the information area in a list form. In the embodiment, the item information is displayed in the information area in the form of a particle stream.
可选的,参见图2,信息区20可以包括第一区域21,第一区域21也可以称为画布区,商品信息具体展示在第一区域21。 Optionally, referring to FIG. 2, the information area 20 may include a first area 21, which may also be referred to as a canvas area, and the item information is specifically displayed in the first area 21.
具体的,商品信息以粒子流形式展示在第一区域内。例如,参见图3,第一区域21中出现了三个商品信息,且三个商品信息处于不断移动的状态,移动方向例如为从上向下移动。可以理解的是,移动速度以及移动方向可以预先设置。Specifically, the commodity information is displayed in the first region in the form of a particle stream. For example, referring to FIG. 3, three item information appear in the first area 21, and three pieces of item information are in a state of constant movement, for example, moving from top to bottom. It can be understood that the moving speed and the moving direction can be set in advance.
可选的,商品信息在移动时根据商品信息所在位置的不同可以采用不同的移动速度。例如,所述当前要展示的信息在所述第一区域内从上向下移动,且,所述当前要展示的信息在所述第一区域的中间位置上的移动速度,小于,所述当前要展示的信息在所述第一区域的上下两端上的移动速度。具体的,不同位置处的移动速度可以根据贝塞尔函数实现,例如,贝塞尔函数为cubic-bezier(0,.3,.99,.3)。Optionally, when the product information is moved, different moving speeds may be adopted according to the location of the product information. For example, the information to be displayed is moved from top to bottom in the first area, and the moving speed of the information to be displayed at the middle position of the first area is smaller than the current The speed at which the information to be displayed moves on the upper and lower ends of the first area. Specifically, the moving speed at different positions can be implemented according to a Bessel function, for example, the Bessel function is cubic-bezier (0, .3, .99, .3).
可选的,参见图2,信息区20可以包括第二区域22,第二区域22也可以称为收藏区,用户可以将选中的商品信息收藏在第二区域22。Alternatively, referring to FIG. 2, the information area 20 may include a second area 22, which may also be referred to as a collection area, and the user may collect the selected item information in the second area 22.
可选的,当在所述第一区域中选择信息后,将所述选择的信息添加到所述第二区域。Optionally, after the information is selected in the first area, the selected information is added to the second area.
具体的,商品信息可以收藏在第二区域内。例如,参见图4,用户可以通过第一区域中展示的商品信息进行收藏操作后,将商品信息收藏到第二区域中。例如,用户在第一区域中点击一个商品信息后,将用户点击的商品信息添加到第二区域。将商品信息添加到第二区域后,在第二区域内,用户可以对第二区域内的商品信息进行删除,比对,进入商品详情页中的一项或者多项。具体的,可以通过设置功能按钮,实现相应操作。Specifically, the product information can be stored in the second area. For example, referring to FIG. 4, the user can collect the product information into the second area after performing the collecting operation through the product information displayed in the first area. For example, after the user clicks on one item information in the first area, the item information that the user clicks is added to the second area. After the product information is added to the second area, in the second area, the user can delete the product information in the second area, and compare and enter one or more items in the product detail page. Specifically, the corresponding operation can be realized by setting a function button.
可选的,参见图2,信息区20可以包括第三区域23,第三区域23也可以称为筛选区,用户可以在第三区域23内选择标签。标签用于标识商品属性,例如商品的颜色,或者品牌等。初始的标签可以是系统预先设置的,之后,用户可以新增标签或者删除标签等,或者,也可以由系统根据用户选择的商品信息自动添加标签。Optionally, referring to FIG. 2, the information area 20 may include a third area 23, which may also be referred to as a screening area, and the user may select a label in the third area 23. Tags are used to identify product attributes, such as the color of a product, or a brand. The initial label can be preset by the system, after which the user can add a label or delete a label, or the system can automatically add a label according to the product information selected by the user.
例如,参见图5,初始时可以默认设置一个或多个标签,该一个或多个标签可以组成标签列表,用户可以在“输入标签”的位置处输入要添加的标签,并且点击“添加”后,在标签列表中新增标签;或者,每个标签可以对应设置删除标识,当用户点击删除标识后可以删除对应的标签;或者,用户在第一区域内选择一个商品信息后,该商品信息具有的标签可以自动添加到标签列表中。For example, referring to FIG. 5, one or more tags can be set by default, and the one or more tags can form a tag list, and the user can input the tag to be added at the position of the "enter tag" and click "Add". Adding a label to the label list; or, each label can be associated with a deletion identifier; when the user clicks the deletion identifier, the corresponding label can be deleted; or, after the user selects a product information in the first area, the product information has The tags can be automatically added to the tag list.
具体的,用户可以在第三区域23内选择喜好的商品属性,例如,选择深蓝。客户端获取到用户选择的标签后,将标签发送至服务端,服务端根据标签,在预先建立的数据库中获取对应的商品信息,例如,将颜色是深蓝的商品信息发回客户端,由客户端在第一区域内展示给用户。Specifically, the user can select a favorite item attribute in the third area 23, for example, select dark blue. After obtaining the label selected by the user, the client sends the label to the server, and the server obtains the corresponding product information in a pre-established database according to the label, for example, sending the product information with dark blue color to the client, by the client. The terminal is presented to the user in the first area.
可选的,参见图2,信息区20可以包括第四区域24,第四区域24也可以称为控制区,用户可以在第四区域24内控制信息区的展示形式。Optionally, referring to FIG. 2, the information area 20 may include a fourth area 24, which may also be referred to as a control area, and the user may control the display form of the information area in the fourth area 24.
可选的,可以根据所述第四区域24内的可供选择的功能项,确定所述信息区的展示形 式,并以所述确定的展示形式展示所述信息区。Optionally, the display shape of the information area may be determined according to an optional function item in the fourth area 24 And displaying the information area in the determined display form.
例如,参见图6,第四区域24内的可供选择的功能项包括如下项中的至少一项:For example, referring to FIG. 6, the optional functional items within the fourth area 24 include at least one of the following:
速度控制条61,用于控制所述信息在所述第一区域内移动速度;a speed control bar 61, configured to control a moving speed of the information in the first area;
例如,初始时可以默认将速度控制条设置在常速,如图7所示,当向右移动初始时位于中间位置的控制标识时,可以进行加速,当向左移动初始时位于中间位置的控制标识时,可以进行减速。For example, initially, the speed control bar can be set to the normal speed by default. As shown in FIG. 7, when the control flag located at the middle position at the initial position is moved to the right, acceleration can be performed, and when the shift to the left is initially, the control is located at the intermediate position. When marking, you can decelerate.
其中,商品信息的不同位置的移动速度可以不同,例如,中间位置的移动速度慢,上下两端的移动速度快,或者,还可以根据商品信息的热度值确定移动速度,例如,热度值高的商品信息的移动速度慢,热度值例如根据销量,价格,评价等中的一项或者多项确定。Wherein, the moving speed of the different positions of the product information may be different, for example, the moving speed of the intermediate position is slow, the moving speed of the upper and lower ends is fast, or the moving speed may be determined according to the heat value of the product information, for example, the product with high heat value The movement speed of the information is slow, and the heat value is determined, for example, according to one or more of sales volume, price, evaluation, and the like.
具体的,实现商品信息移动的模块可以称为产品模块,可以通过设置产品模块的层叠样式表(Cascading Style Sheets,CSS)的animation-duration属性,实现移动速度的设置。Specifically, the module for realizing the movement of the product information may be referred to as a product module, and the moving speed may be set by setting the animation-duration attribute of the Cascading Style Sheets (CSS) of the product module.
动画开关按钮62,用于控制所述第一区域内是否是动画展示形式;其中,如果是动画展示形式,则信息在第一区域内以粒子流形式不断移动,如果不是动画展示形式,则信息在第一区域内静止。An animated switch button 62 is configured to control whether the first area is an animated display form; wherein, if it is an animated display form, the information continuously moves in a particle stream in the first area, if not an animated display form, the information It is stationary in the first area.
例如,初始时可以处于“ON”状态,如图8所示,当用户点击动画开关按钮后,可以由“ON”状态转为“OFF”状态,当再点击“OFF”状态的动画开关按钮后,可以再由“OFF”状态转为“ON”状态。For example, initially, it can be in the "ON" state. As shown in FIG. 8, when the user clicks the animation switch button, the "ON" state can be changed to the "OFF" state, and when the "OFF" state animation switch button is clicked again, , can be changed from "OFF" state to "ON" state.
具体的,可以通过将产品模块CSS的animation-play-state属性设置为pause或者running,实现动画的开关。Specifically, the animation switch can be realized by setting the animation-play-state property of the product module CSS to pause or running.
视图切换按钮63,用于控制所述信息区是列表视图或者粒子视图。其中,如果是列表视图,则信息在第一区域内以列表形式进行展示,如果是粒子视图,则信息在第一区域内以粒子流形式展示。The view switching button 63 is configured to control the information area to be a list view or a particle view. Wherein, if it is a list view, the information is displayed in a list form in the first area, and if it is a particle view, the information is displayed in a particle stream in the first area.
例如,参见图9,初始时可以处于粒子视图,当点击视图切换按钮后,由粒子视图切换为列表视图。之后,通过再次点击,可以由列表视图切换为粒子视图。For example, referring to Figure 9, initially in the particle view, when the view toggle button is clicked, the particle view switches to the list view. Then, by clicking again, you can switch from the list view to the particle view.
本实施例中,通过以粒子流形式展示信息,可以提高展示效果。In this embodiment, the display effect can be improved by displaying information in the form of a particle stream.
以展示的信息是商品信息为例,图10是本发明实施例中以粒子流形式展示信息的流程示意图,包括:For example, the information displayed is the product information. FIG. 10 is a schematic flowchart of displaying information in the form of a particle stream in the embodiment of the present invention, including:
S101:发射计时器达到计时周期。S101: The transmission timer reaches a timing period.
其中,发射计时器是推送商品信息的计时器,计时周期可以预先设置。The emission timer is a timer for pushing product information, and the timing period can be set in advance.
以粒子流形式展示的商品信息可以称为商品粒子流,通过改变发射计时器的计时周期,可以控制商品粒子流发射的频率。 The commodity information displayed in the form of a particle stream can be referred to as a commodity particle stream, and by changing the timing period of the emission timer, the frequency of the commodity particle stream emission can be controlled.
具体的,每个商品信息可以称为一个产品粒子,用于推送商品信息的发射器可以根据用户浏览器窗口大小、收藏区大小、产品模块大小计算画布区能展示产品粒子流的最大列数,设置间隔时间,依次在不同列中循环发射产品粒子。Specifically, each product information may be referred to as a product particle, and the transmitter for pushing the product information may calculate the maximum number of columns of the product particle flow in the canvas area according to the size of the user browser window, the size of the collection area, and the size of the product module. Set the interval time, which in turn rotates the product particles in different columns.
S102:判断画布区的动画是否暂停,若是,执行步骤S103,否则执行步骤S104及其后续步骤。S102: Determine whether the animation of the canvas area is paused, if yes, execute step S103, otherwise perform step S104 and subsequent steps.
例如,当检测到用户点击到商品信息上,确定动画暂停,或者,检测到动画开关按钮处于关状态时,确定动画暂停。For example, when it is detected that the user clicks on the item information, it is determined that the animation is paused, or when it is detected that the animated switch button is in the off state, it is determined that the animation is paused.
S103:不执行任何操作。S103: No operation is performed.
S104:确定当前要展示的商品信息所在的当前列,以及确定当前列的下一列的商品信息。S104: Determine the current column where the commodity information to be displayed is currently located, and determine the commodity information of the next column of the current column.
其中,商品信息可以以列形式进行保存,发射器依次发送每列的商品信息。The product information may be saved in a column form, and the transmitter sequentially sends the product information of each column.
S105:确定每个商品信息的移动速度以及动画时长。S105: Determine the moving speed of each item information and the duration of the animation.
其中,移动速度可以根据商品信息位置的不同改变,或者,移动速度也可以根据商品信息的热度值确定。Wherein, the moving speed may be changed according to different positions of the commodity information, or the moving speed may also be determined according to the heat value of the commodity information.
动画时长可以根据移动速度以及商品信息要经过的路径的长度确定。The duration of the animation can be determined based on the speed of the movement and the length of the path through which the product information passes.
S106:生成产品模块,并添加到文档流中。S106: Generate a product module and add it to the document stream.
其中,每个商品信息可以对应生成一个产品模块,每个产品模块可以作为一个文档对象模型(Document Object Model,DOM)添加到文档流中。Each product information can generate a product module correspondingly, and each product module can be added to the document flow as a Document Object Model (DOM).
当将商品信息添加到文档流后,可以在页面的第一区域中以粒子流形式展示商品信息。例如,发射器按照发射周期从文档流中读取包含商品信息的产品模块,并进行发射,产品模块在被发射后,按照产品模块的移动速度在第一区域内移动,形成产品粒子流,每个产品模块对应展示商品信息。When the item information is added to the document stream, the item information can be displayed in the form of a particle stream in the first area of the page. For example, the transmitter reads the product module containing the commodity information from the document stream according to the transmission period, and transmits the product module, and after being emitted, the product module moves in the first region according to the moving speed of the product module to form a product particle flow, and each Product modules correspond to product information.
本实施例中,可以监听产品模块对应的CSS代码中的animationEnd事件,当产品粒子从页面下方流出时,触发该事件,此时服务端将该产品模块的DOM从文档流中移除,保证内存不会溢出,可以无限推送产品粒子流。In this embodiment, the animationEnd event in the CSS code corresponding to the product module can be monitored. When the product particle flows out from the bottom of the page, the event is triggered. At this time, the server removes the DOM of the product module from the document stream to ensure the memory. No overflow, you can push the product particle stream infinitely.
可选的,用户还可以将展示的商品信息进行收藏。参见图11,图11是本发明实施例中收藏商品信息的流程示意图,包括:Optionally, the user can also collect the displayed product information. Referring to FIG. 11, FIG. 11 is a schematic flowchart of collecting product information in an embodiment of the present invention, including:
S1101:确定用户在第一区域内的操作。S1101: Determine the operation of the user in the first area.
用户在第一区域内的操作例如用户将鼠标移入产品模块,或者用户在第一区域内点击某产品模块。The user's operation in the first area, for example, the user moves the mouse into the product module, or the user clicks on a product module in the first area.
S1102:判断该操作是否是用户将鼠标移入产品模块,若是,则执行步骤S1103,否则执行步骤S1104。 S1102: Determine whether the operation is that the user moves the mouse into the product module, and if yes, execute step S1103, otherwise perform step S1104.
通过检测鼠标的位置,以及产品模块的位置,可以确定鼠标是否移入产品模块。By detecting the position of the mouse and the location of the product module, you can determine if the mouse is moved into the product module.
S1103:暂停第一区域内的动画。S1103: Pause the animation in the first area.
当鼠标移入任一个产品模块时,第一区域内的动画暂停,所有产品模块保持静止。When the mouse is moved into any of the product modules, the animation in the first area is paused and all product modules remain stationary.
S1104:判断该操作是否是用户将鼠标移出产品模块,若是,则执行步骤S1105-S1107,否则执行步骤S1108-S1110。S1104: Determine whether the operation is that the user moves the mouse out of the product module, and if yes, perform steps S1105-S1107, otherwise perform steps S1108-S1110.
S1105:判断第一区域内的全局动画是否关闭,若是,则执行步骤S1106,否则执行步骤S1107。S1105: Determine whether the global animation in the first area is closed, if yes, execute step S1106, otherwise perform step S1107.
当检测到动画开关按钮处于“ON”状态时表明全局动画开启,当检测到动画开关按钮处于“OFF”状态时表明全局动画关闭。The global animation is turned on when it is detected that the animated switch button is in the "ON" state, and the global animation is turned off when it is detected that the animated switch button is in the "OFF" state.
S1106:不执行任何操作。S1106: No action is taken.
S1107:开启第一区域内的动画。S1107: Turn on the animation in the first area.
当开启动画后,产品模块从静止状态恢复为移动状态。When the animation is turned on, the product module is restored from a stationary state to a moving state.
S1108:判断用户在第一区域内是否选择了产品,若是,则执行步骤S1109,否则执行步骤S1110。S1108: Determine whether the user selects the product in the first area, and if yes, execute step S1109, otherwise perform step S1110.
当用户点击一个产品模块后,表明用户选择该点击的产品模块对应的产品。When the user clicks on a product module, it indicates that the user selects the product corresponding to the clicked product module.
S1109:将用户选择的产品添加到第二区域,并将选择的产品对应的标签,添加到第三区域。S1109: Add the product selected by the user to the second area, and add the label corresponding to the selected product to the third area.
其中,每个产品可以预先设置标签,在用户点击选择一个产品后,不仅可以将该产品添加到第二区域,从而在第二区域中展示选择的产品的商品信息,还可以将该产品的标签自动添加到第三区域,例如,将产品的品牌添加到第三区域。Each product can be pre-set with a label. After the user clicks to select a product, the product can be added not only to the second area, but also the product information of the selected product can be displayed in the second area, and the product can also be labeled. Automatically added to the third area, for example, adding the brand of the product to the third area.
S1110:不执行任何操作。S1110: No action is taken.
可选的,用户还可以对商品信息的展示效果进行控制操作。Optionally, the user can also control the display effect of the product information.
参见图12,以控制动画开关为例,本发明实施例提出的一种控制流程可以包括:Referring to FIG. 12, taking a control animation switch as an example, a control flow proposed by the embodiment of the present invention may include:
S121:用户按下动画开关按钮或者键盘空格键。S121: The user presses the animation switch button or the keyboard space bar.
例如,用户可以通过点击第四区域内动画开关按钮,或者,也可以按下键盘空格键。For example, the user can click on the animated switch button in the fourth area, or press the keyboard space bar.
S122:判断当前全局动画是否关闭,若是,则执行步骤S123,否则执行步骤S124。S122: Determine whether the current global animation is closed, if yes, execute step S123, otherwise execute step S124.
可以通过检测动画开关按钮的状态来判断当前全局动画是否关闭,例如,当前的动画开关按钮的状态是“ON”,则表明全局动画开启,当前的动画开关按钮的状态是“OFF”,则表明全局动画关闭。It is possible to determine whether the current global animation is off by detecting the state of the animation switch button. For example, if the state of the current animation switch button is "ON", it indicates that the global animation is on, and the state of the current animation switch button is "OFF", indicating The global animation is off.
S123:开启第一区域内的动画。S123: Turn on the animation in the first area.
例如,将动画开关按钮的状态从“OFF”切换为“ON”。For example, switch the state of the animated switch button from "OFF" to "ON".
S124:关闭第一区域内的动画。 S124: Close the animation in the first area.
例如,将动画开关按钮的状态从“ON”切换为“OFF”。For example, switch the state of the animated switch button from "ON" to "OFF".
另外,用户还可以控制动画速度,当动画速度快时,商品信息的移动速度快,否则移动速度慢,参见图13,以控制动画速度为例,本发明实施例提出的另一种控制流程包括:In addition, the user can also control the animation speed. When the animation speed is fast, the movement speed of the product information is fast, otherwise the movement speed is slow. Referring to FIG. 13 , taking the control animation speed as an example, another control flow proposed by the embodiment of the present invention includes :
S131:用户滑动第四区域内的速度控制条。S131: The user slides the speed control bar in the fourth area.
S132:判断速度控制条的滑块值是否改变,若是,则执行步骤S134,否则执行步骤S133。S132: Determine whether the slider value of the speed control bar changes, if yes, execute step S134, otherwise perform step S133.
例如,当用户向右或者向左移动滑块后,滑块值改变。For example, when the user moves the slider to the right or left, the slider value changes.
S133:不进行任何操作。S133: No operation is performed.
S134:获取滑块值改变后的商品信息的更新后的移动速度。S134: Acquire an updated moving speed of the product information after the slider value is changed.
例如,滑块值改变后,表明增速10%,则移动速度更新为原始速度的1.1倍。For example, if the slider value changes, indicating a 10% increase in speed, the movement speed is updated to 1.1 times the original speed.
S135:以更新后的移动速度移动商品信息。S135: Move the product information at the updated moving speed.
例如,可以根据移动速度重置发射器的发射频率等,使得发射器以更新后的移动速度对应的频率发射商品信息对应的产品模块。For example, the transmitting frequency or the like of the transmitter may be reset according to the moving speed, so that the transmitter transmits the product module corresponding to the commodity information at a frequency corresponding to the updated moving speed.
可选的,用户还可以更新选择的标签,以便获取与更新后的标签对应的商品信息。如图14所示,更新流程可以包括:Optionally, the user may also update the selected tag to obtain the product information corresponding to the updated tag. As shown in FIG. 14, the update process may include:
S141:新添标签。S141: New label.
例如,用户“输入标签”的位置处输入要添加的标签,并点击“添加”按钮后可以新添标签,或者,用户在第一区域选择商品信息后,可以将商品信息具有的标签自动添加到标签列表中。For example, the user enters the label to be added at the position of the "enter label", and clicks the "add" button to newly add a label, or the user can automatically add the label of the product information to the label after the user selects the item information in the first area. In the list of tags.
S142:客户端判断新添的标签是否在已有的标签列表中,若是,则执行步骤S143,否则执行步骤S144。S142: The client determines whether the newly added label is in the existing label list. If yes, step S143 is performed, otherwise step S144 is performed.
其中,标签列表也可以称为标签数组,例如,已有的标签数组中包括标签“乔丹”,而新添的标签是“乔丹”,则判断结果是新添的标签在已有的标签列表中。The tag list may also be referred to as a tag array. For example, the existing tag array includes the tag "Jordan", and the newly added tag is "Jordan", and the result is that the newly added tag is in the existing tag list. .
S143:不执行任何操作。S143: No operation is performed.
S144:客户端将该新添的标签添加到标签列表中,并显示该标签。S144: The client adds the newly added label to the label list and displays the label.
例如,已有的标签列表中不包括标签“乔丹”,而新添的标签是“乔丹”,则在已有的标签列表中增加标签“乔丹”。For example, the existing tag list does not include the tag "Jordan", and the newly added tag is "Jordan", and the tag "Jordan" is added to the existing tag list.
S145:客户端将更新后的标签列表发送到服务端,以使服务端根据更新后的标签列表中包括的标签,获取要展示的更新后的信息。S145: The client sends the updated tag list to the server, so that the server obtains the updated information to be displayed according to the tags included in the updated tag list.
更新后的标签列表是将新添的标签添加到已有的标签列表后得到的,例如,在已有的标签列表中增加标签“乔丹”后的标签列表。The updated tag list is obtained by adding the newly added tag to the existing tag list, for example, adding a tag list after the tag "Jordan" to the existing tag list.
服务端在获取更新后的信息时需要根据更新后的标签列表获取,例如,获取的更新后的信息还需要与“乔丹”相关。 The server needs to obtain the updated information according to the updated tag list. For example, the updated information obtained needs to be related to “Jordan”.
本实施例通过获取要展示的信息,并以粒子流形式展示信息,由于是以粒子流的形式,可以提高展示效果;并且,通过粒子流形式,当要展示更新后的信息时可以无需重新加载页面,避免对用户操作的打断,提升用户体验。In this embodiment, by acquiring the information to be displayed and displaying the information in the form of a particle stream, the display effect can be improved in the form of a particle stream; and, by the particle stream form, the updated information can be displayed without reloading. The page avoids interruption of user operations and enhances the user experience.
图15是本发明另一实施例提出的信息展示装置的结构示意图,该装置150包括第一获取模块151和第一展示模块152。FIG. 15 is a schematic structural diagram of an information display apparatus according to another embodiment of the present invention. The apparatus 150 includes a first obtaining module 151 and a first display module 152.
第一获取模块151,用于获取要展示的信息。The first obtaining module 151 is configured to obtain information to be displayed.
其中,要展示的信息可以具体是商品信息。Among them, the information to be displayed may be specific product information.
例如,用户在客户端的搜索框中输入关键词后,客户端可以将关键词发送给服务端,服务端根据关键词检测到对应的商品信息后,将商品信息发送给客户端,从而客户端可以从服务端获取商品信息。For example, after the user inputs a keyword in the search box of the client, the client can send the keyword to the server, and after detecting the corresponding product information according to the keyword, the server sends the product information to the client, so that the client can Get product information from the server.
一个实施例中,所述信息展示在当前页面的信息区的第一区域,所述信息区还包括第三区域,所述第一获取模块151具体用于获取用户在所述第三区域内设置的标签;根据所述标签获取要展示的信息。In an embodiment, the information is displayed in a first area of the information area of the current page, and the information area further includes a third area, where the first obtaining module 151 is specifically configured to acquire a user to set in the third area. The label; the information to be displayed is obtained according to the label.
可选的,参见图2,信息区20可以包括第三区域23,第三区域23也可以称为筛选区,用户可以在第三区域23内选择标签。标签用于标识商品属性,例如商品的颜色,或者品牌等。初始的标签可以是系统预先设置的,之后,用户可以新增标签或者删除标签等,或者,也可以由系统根据用户选择的商品信息自动添加标签。Optionally, referring to FIG. 2, the information area 20 may include a third area 23, which may also be referred to as a screening area, and the user may select a label in the third area 23. Tags are used to identify product attributes, such as the color of a product, or a brand. The initial label can be preset by the system, after which the user can add a label or delete a label, or the system can automatically add a label according to the product information selected by the user.
例如,参见图5,初始时可以默认设置一个或多个标签,该一个或多个标签可以组成标签列表,用户可以在“输入标签”的位置处输入要添加的标签,并且点击“添加”后,在标签列表中新增标签;或者,每个标签可以对应设置删除标识,当用户点击删除标识后可以删除对应的标签;或者,用户在第一区域内选择一个商品信息后,该商品信息具有的标签可以自动添加到标签列表中。For example, referring to FIG. 5, one or more tags can be set by default, and the one or more tags can form a tag list, and the user can input the tag to be added at the position of the "enter tag" and click "Add". Adding a label to the label list; or, each label can be associated with a deletion identifier; when the user clicks the deletion identifier, the corresponding label can be deleted; or, after the user selects a product information in the first area, the product information has The tags can be automatically added to the tag list.
具体的,用户可以在第三区域23内选择喜好的商品属性,例如,选择深蓝。客户端获取到用户选择的标签后,将标签发送至服务端,服务端根据标签,在预先建立的数据库中获取对应的商品信息,例如,将颜色是深蓝的商品信息发回客户端,由客户端在第一区域内展示给用户。Specifically, the user can select a favorite item attribute in the third area 23, for example, select dark blue. After obtaining the label selected by the user, the client sends the label to the server, and the server obtains the corresponding product information in a pre-established database according to the label, for example, sending the product information with dark blue color to the client, by the client. The terminal is presented to the user in the first area.
第一展示模块152,用于以粒子流形式,展示所述信息。The first display module 152 is configured to display the information in the form of a particle stream.
例如,客户端获取商品信息后,以粒子流形式展示商品信息。For example, after the client obtains the product information, the product information is displayed in the form of a particle stream.
粒子流形式是指信息在展示信息的页面内不断流入以及流出的展示形式。The particle flow form refers to the form in which information flows continuously and out of the page where the information is displayed.
现有技术中,商品信息是以列表形式展示在页面的商品列表区,该方式是一种静态方式,而本实施例中,在页面上以粒子流形式展示商品信息,由于粒子流形式是信息不断流入及流出的形式,因此,可以实现商品信息的动态展示,提升展示效果。 In the prior art, the product information is displayed in a list form in the product list area of the page, and the method is a static mode. In this embodiment, the product information is displayed in the form of a particle stream on the page, because the particle stream form is information. The form of continuous inflow and outflow, therefore, can dynamically display the product information and enhance the display effect.
信息可以展示在搜索结果页,当前的搜索结果页可以称为当前页面。Information can be displayed on the search results page, and the current search results page can be referred to as the current page.
进一步的,现有技术中,当用户输入新的关键词或者在SKU区域选择新的属性值时,客户端都需要重新加载新的页面,并将新的商品信息展示在新的页面内。Further, in the prior art, when the user inputs a new keyword or selects a new attribute value in the SKU area, the client needs to reload the new page and display the new item information in the new page.
而本实施例中,可以不需要加载新的页面,依然在当前页面中展示新的商品信息。In this embodiment, it is not necessary to load a new page, and the new product information is still displayed on the current page.
另一个实施例中,当所述信息包括更新前的信息时,所述第一展示模块152具体用于以粒子流形式,在当前页面内展示所述更新前的信息;In another embodiment, when the information includes the information before the update, the first display module 152 is specifically configured to display the pre-update information in the current page in the form of a particle stream;
参见图16,所述装置150还包括:Referring to Figure 16, the apparatus 150 further includes:
第二获取模块153,用于获取更新后的信息。The second obtaining module 153 is configured to obtain updated information.
第二展示模块154,用于以粒子流形式,在所述当前页面内展示所述更新后的信息。The second display module 154 is configured to display the updated information in the current page in the form of a particle stream.
通过将更新后的信息展示在更新前的信息所在的当前页面,可以不需要加载新的页面,从而避免重新加载页面对用户操作的打断。By displaying the updated information on the current page where the information before the update is located, it is not necessary to load a new page, thereby avoiding interruption of the user operation by reloading the page.
可选的,以信息是商品信息为例,当前页面可以包括搜索区和信息区,其中,搜索区包括搜索框,用户可以在搜索框内输入关键词,发起搜索;信息区用于展示商品信息。Optionally, the information is product information, and the current page may include a search area and a information area, where the search area includes a search box, the user may input a keyword in the search box to initiate a search, and the information area is used to display product information. .
可选的,当前页面还可以包括SKU区域,用户可以在SKU区域选择商品属性,例如,选择颜色,尺码等。可以理解的是,由于本发明实施例中,后续会出现筛选区,用户可以在筛选区进行商品属性选择,因此本发明实施例中也可以不设置SKU区域。Optionally, the current page may further include a SKU area, and the user may select an item attribute in the SKU area, for example, selecting a color, a size, and the like. It is to be understood that, in the embodiment of the present invention, the screening area may be subsequently formed, and the user may select the product attribute in the screening area. Therefore, the SKU area may not be set in the embodiment of the present invention.
现有技术中,信息区也可以称为商品列表区,商品信息以列表形式展示在信息区,而本实施例中,商品信息以粒子流形式展示在信息区。In the prior art, the information area may also be referred to as a product list area, and the item information is displayed in the information area in a list form. In the embodiment, the item information is displayed in the information area in the form of a particle stream.
另一个实施例中,所述信息展示在当前页面的信息区的第一区域内,参见图16,所述第一展示模块152包括:In another embodiment, the information is displayed in a first area of the information area of the current page. Referring to FIG. 16, the first display module 152 includes:
第一单元1521,用于在预设的定时器达到计时周期时,判断所述第一区域是否为动画展示形式。The first unit 1521 is configured to determine whether the first area is an animated display form when a preset timer reaches a timing period.
第二单元1522,用于如果所述第一区域是动画展示形式,获取当前要展示的信息以及所述信息对应的动画时长。The second unit 1522 is configured to: if the first area is an animated display form, obtain information currently to be displayed and an animation duration corresponding to the information.
第三单元1523,用于按照预设方向控制所述当前要展示的信息移动流入所述第一区域并逐渐移动流出所述第一区域,且在所述第一区域内的出现时长为所述动画时长。The third unit 1523 is configured to control, according to the preset direction, that the information currently to be displayed moves into the first area and gradually moves out of the first area, and the appearance time in the first area is the The duration of the animation.
可选的,参见图2,信息区20可以包括第一区域21,第一区域21也可以称为画布区,商品信息具体展示在第一区域21。Optionally, referring to FIG. 2, the information area 20 may include a first area 21, which may also be referred to as a canvas area, and the item information is specifically displayed in the first area 21.
具体的,商品信息以粒子流形式展示在第一区域内。例如,参见图3,第一区域21中出现了三个商品信息,且三个商品信息处于不断移动的状态,移动方向例如为从上向下移动。可以理解的是,移动速度以及移动方向可以预先设置。Specifically, the commodity information is displayed in the first region in the form of a particle stream. For example, referring to FIG. 3, three item information appear in the first area 21, and three pieces of item information are in a state of constant movement, for example, moving from top to bottom. It can be understood that the moving speed and the moving direction can be set in advance.
另一个实施例中,所述当前要展示的信息在所述第一区域内从上向下移动,且,所述 当前要展示的信息在所述第一区域的中间位置上的移动速度,小于,所述当前要展示的信息在所述第一区域的上下两端上的移动速度。In another embodiment, the information to be displayed is moved from top to bottom in the first area, and The moving speed of the information to be displayed at the intermediate position of the first area is smaller than the moving speed of the information currently to be displayed on the upper and lower ends of the first area.
可选的,商品信息在移动时根据商品信息所在位置的不同可以采用不同的移动速度。例如,所述当前要展示的信息在所述第一区域内从上向下移动,且,所述当前要展示的信息在所述第一区域的中间位置上的移动速度,小于,所述当前要展示的信息在所述第一区域的上下两端上的移动速度。具体的,不同位置处的移动速度可以根据贝塞尔函数实现,例如,贝塞尔函数为cubic-bezier(0,.3,.99,.3)。或者,Optionally, when the product information is moved, different moving speeds may be adopted according to the location of the product information. For example, the information to be displayed is moved from top to bottom in the first area, and the moving speed of the information to be displayed at the middle position of the first area is smaller than the current The speed at which the information to be displayed moves on the upper and lower ends of the first area. Specifically, the moving speed at different positions can be implemented according to a Bessel function, for example, the Bessel function is cubic-bezier (0, .3, .99, .3). or,
另一实施例中,所述当前要展示的信息包括具有不同热度值的信息,且热度值高的信息的移动速度小于热度值低的信息的移动速度。例如,当信息是商品信息时,热度值高的商品信息的移动速度慢,热度值例如根据销量,价格,评价等中的一项或者多项确定。In another embodiment, the information to be displayed currently includes information having different heat values, and the moving speed of the information having a high heat value is smaller than the moving speed of the information having a low heat value. For example, when the information is product information, the moving speed of the product information having a high heat value is slow, and the heat value is determined, for example, based on one or more of sales, price, evaluation, and the like.
另一个实施例中,所述信息展示在当前页面的信息区的第一区域,所述信息区还包括第二区域,参见图16,所述装置150还包括:In another embodiment, the information is displayed in a first area of the information area of the current page, and the information area further includes a second area. Referring to FIG. 16, the apparatus 150 further includes:
添加模块155,用于当在所述第一区域中选择信息后,将所述选择的信息添加到所述第二区域。The adding module 155 is configured to add the selected information to the second area after selecting information in the first area.
可选的,参见图2,信息区20可以包括第二区域22,第二区域22也可以称为收藏区,用户可以将选中的商品信息收藏在第二区域22。Alternatively, referring to FIG. 2, the information area 20 may include a second area 22, which may also be referred to as a collection area, and the user may collect the selected item information in the second area 22.
可选的,当在所述第一区域中选择信息后,将所述选择的信息添加到所述第二区域。Optionally, after the information is selected in the first area, the selected information is added to the second area.
具体的,商品信息可以收藏在第二区域内。例如,参见图4,用户可以通过第一区域中展示的商品信息进行收藏操作后,将商品信息收藏到第二区域中。例如,用户在第一区域中点击一个商品信息后,将用户点击的商品信息添加到第二区域。将商品信息添加到第二区域后,在第二区域内,用户可以对第二区域内的商品信息进行删除,比对,进入商品详情页中的一项或者多项。具体的,可以通过设置功能按钮,实现相应操作。Specifically, the product information can be stored in the second area. For example, referring to FIG. 4, the user can collect the product information into the second area after performing the collecting operation through the product information displayed in the first area. For example, after the user clicks on one item information in the first area, the item information that the user clicks is added to the second area. After the product information is added to the second area, in the second area, the user can delete the product information in the second area, and compare and enter one or more items in the product detail page. Specifically, the corresponding operation can be realized by setting a function button.
另一个实施例中,所述信息展示在当前页面的信息区的第一区域,所述信息区还包括第四区域,参见图16,所述装置150还包括:In another embodiment, the information is displayed in a first area of the information area of the current page, and the information area further includes a fourth area. Referring to FIG. 16, the apparatus 150 further includes:
确定模块156,用于根据所述第四区域内的可供选择的功能项,确定所述信息区的展示形式,并以所述确定的展示形式展示所述信息区。The determining module 156 is configured to determine a display form of the information area according to an optional function item in the fourth area, and display the information area in the determined display form.
可选的,参见图2,信息区20可以包括第四区域24,第四区域24也可以称为控制区,用户可以在第四区域24内控制信息区的展示形式。Optionally, referring to FIG. 2, the information area 20 may include a fourth area 24, which may also be referred to as a control area, and the user may control the display form of the information area in the fourth area 24.
可选的,可以根据所述第四区域24内的可供选择的功能项,确定所述信息区的展示形式,并以所述确定的展示形式展示所述信息区。Optionally, the display form of the information area may be determined according to an optional function item in the fourth area 24, and the information area is displayed in the determined display form.
另一个实施例中,所述可供选择的功能项包括如下项中的至少一项:用于控制所述信息在所述第一区域内移动速度的功能项;用于控制所述第一区域内是否是动画展示形式的 功能项;用于控制所述信息区是列表展示或者动画展示的功能项。In another embodiment, the optional function item includes at least one of: a function item for controlling a moving speed of the information in the first area; and controlling the first area Is it an animated display? A function item; a function item for controlling the information area to be displayed in a list or animated.
可选的,参见图2,信息区20可以包括第四区域24,第四区域24也可以称为控制区,用户可以在第四区域24内控制信息区的展示形式。Optionally, referring to FIG. 2, the information area 20 may include a fourth area 24, which may also be referred to as a control area, and the user may control the display form of the information area in the fourth area 24.
可选的,可以根据所述第四区域24内的可供选择的功能项,确定所述信息区的展示形式,并以所述确定的展示形式展示所述信息区。Optionally, the display form of the information area may be determined according to an optional function item in the fourth area 24, and the information area is displayed in the determined display form.
例如,参见图6,第四区域24内的可供选择的功能项包括如下项中的至少一项:For example, referring to FIG. 6, the optional functional items within the fourth area 24 include at least one of the following:
速度控制条61,用于控制所述信息在所述第一区域内移动速度;a speed control bar 61, configured to control a moving speed of the information in the first area;
例如,初始时可以默认将速度控制条设置在常速,如图7所示,当向右移动初始时位于中间位置的控制标识时,可以进行加速,当向左移动初始时位于中间位置的控制标识时,可以进行减速。For example, initially, the speed control bar can be set to the normal speed by default. As shown in FIG. 7, when the control flag located at the middle position at the initial position is moved to the right, acceleration can be performed, and when the shift to the left is initially, the control is located at the intermediate position. When marking, you can decelerate.
其中,商品信息的不同位置的移动速度可以不同,例如,中间位置的移动速度慢,上下两端的移动速度快,或者,还可以根据商品信息的热度值确定移动速度,例如,热度值高的商品信息的移动速度慢,热度值例如根据销量,价格,评价等中的一项或者多项确定。Wherein, the moving speed of the different positions of the product information may be different, for example, the moving speed of the intermediate position is slow, the moving speed of the upper and lower ends is fast, or the moving speed may be determined according to the heat value of the product information, for example, the product with high heat value The movement speed of the information is slow, and the heat value is determined, for example, according to one or more of sales volume, price, evaluation, and the like.
具体的,实现商品信息移动的模块可以称为产品模块,可以通过设置产品模块的CSS的animation-duration属性,实现移动速度的设置。Specifically, the module for realizing the movement of the commodity information may be referred to as a product module, and the movement speed may be set by setting the animation-duration property of the CSS of the product module.
动画开关按钮62,用于控制所述第一区域内是否是动画展示形式;其中,如果是动画展示形式,则信息在第一区域内以粒子流形式不断移动,如果不是动画展示形式,则信息在第一区域内静止。An animated switch button 62 is configured to control whether the first area is an animated display form; wherein, if it is an animated display form, the information continuously moves in a particle stream in the first area, if not an animated display form, the information It is stationary in the first area.
例如,初始时可以处于“ON”状态,如图8所示,当用户点击动画开关按钮后,可以由“ON”状态转为“OFF”状态,当再点击“OFF”状态的动画开关按钮后,可以再由“OFF”状态转为“ON”状态。For example, initially, it can be in the "ON" state. As shown in FIG. 8, when the user clicks the animation switch button, the "ON" state can be changed to the "OFF" state, and when the "OFF" state animation switch button is clicked again, , can be changed from "OFF" state to "ON" state.
具体的,可以通过将产品模块CSS的animation-play-state属性设置为pause或者running,实现动画的开关。Specifically, the animation switch can be realized by setting the animation-play-state property of the product module CSS to pause or running.
视图切换按钮63,用于控制所述信息区是列表视图或者粒子视图。其中,如果是列表视图,则信息在第一区域内以列表形式进行展示,如果是粒子视图,则信息在第一区域内以粒子流形式展示。The view switching button 63 is configured to control the information area to be a list view or a particle view. Wherein, if it is a list view, the information is displayed in a list form in the first area, and if it is a particle view, the information is displayed in a particle stream in the first area.
例如,参见图9,初始时可以处于粒子视图,当点击视图切换按钮后,由粒子视图切换为列表视图。之后,通过再次点击,可以由列表视图切换为粒子视图。For example, referring to Figure 9, initially in the particle view, when the view toggle button is clicked, the particle view switches to the list view. Then, by clicking again, you can switch from the list view to the particle view.
本实施例通过获取要展示的信息,并以粒子流形式展示信息,由于是以粒子流的形式,可以提高展示效果;并且,通过粒子流形式,当要展示更新后的信息时可以无需重新加载页面,避免对用户操作的打断,提升用户体验。In this embodiment, by acquiring the information to be displayed and displaying the information in the form of a particle stream, the display effect can be improved in the form of a particle stream; and, by the particle stream form, the updated information can be displayed without reloading. The page avoids interruption of user operations and enhances the user experience.
需要说明的是,在本发明的描述中,术语“第一”、“第二”等仅用于描述目的,而 不能理解为指示或暗示相对重要性。此外,在本发明的描述中,除非另有说明,“多个”的含义是两个或两个以上。It should be noted that in the description of the present invention, the terms "first", "second", etc. are used for descriptive purposes only, and It cannot be understood as indicating or implying relative importance. Further, in the description of the present invention, the meaning of "a plurality" is two or more unless otherwise specified.
流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为,表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分,并且本发明的优选实施方式的范围包括另外的实现,其中可以不按所示出或讨论的顺序,包括根据所涉及的功能按基本同时的方式或按相反的顺序,来执行功能,这应被本发明的实施例所属技术领域的技术人员所理解。Any process or method description in the flowcharts or otherwise described herein may be understood to represent a module, segment or portion of code that includes one or more executable instructions for implementing the steps of a particular logical function or process. And the scope of the preferred embodiments of the invention includes additional implementations, in which the functions may be performed in a substantially simultaneous manner or in an opposite order depending on the functions involved, in the order shown or discussed. It will be understood by those skilled in the art to which the embodiments of the present invention pertain.
应当理解,本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中,多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如,如果用硬件来实现,和在另一实施方式中一样,可用本领域公知的下列技术中的任一项或他们的组合来实现:具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路,具有合适的组合逻辑门电路的专用集成电路,可编程门阵列(PGA),现场可编程门阵列(FPGA)等。It should be understood that portions of the invention may be implemented in hardware, software, firmware or a combination thereof. In the above-described embodiments, multiple steps or methods may be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, it can be implemented by any one or combination of the following techniques well known in the art: having logic gates for implementing logic functions on data signals. Discrete logic circuits, application specific integrated circuits with suitable combinational logic gates, programmable gate arrays (PGAs), field programmable gate arrays (FPGAs), etc.
本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成,所述的程序可以存储于一种计算机可读存储介质中,该程序在执行时,包括方法实施例的步骤之一或其组合。One of ordinary skill in the art can understand that all or part of the steps carried by the method of implementing the above embodiments can be completed by a program to instruct related hardware, and the program can be stored in a computer readable storage medium. When executed, one or a combination of the steps of the method embodiments is included.
此外,在本发明各个实施例中的各功能单元可以集成在一个处理模块中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现,也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时,也可以存储在一个计算机可读取存储介质中。In addition, each functional unit in each embodiment of the present invention may be integrated into one processing module, or each unit may exist physically separately, or two or more units may be integrated into one module. The above integrated modules can be implemented in the form of hardware or in the form of software functional modules. The integrated modules, if implemented in the form of software functional modules and sold or used as stand-alone products, may also be stored in a computer readable storage medium.
上述提到的存储介质可以是只读存储器,磁盘或光盘等。The above mentioned storage medium may be a read only memory, a magnetic disk or an optical disk or the like.
在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不一定指的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。In the description of the present specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" and the like means a specific feature described in connection with the embodiment or example. A structure, material or feature is included in at least one embodiment or example of the invention. In the present specification, the schematic representation of the above terms does not necessarily mean the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in a suitable manner in any one or more embodiments or examples.
尽管上面已经示出和描述了本发明的实施例,可以理解的是,上述实施例是示例性的,不能理解为对本发明的限制,本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。 Although the embodiments of the present invention have been shown and described, it is understood that the above-described embodiments are illustrative and are not to be construed as limiting the scope of the invention. The embodiments are subject to variations, modifications, substitutions and variations.

Claims (16)

  1. 一种信息展示方法,其特征在于,包括:An information display method, comprising:
    获取要展示的信息;Get the information to display;
    以粒子流形式,展示所述信息。The information is presented in the form of a particle stream.
  2. 根据权利要求1所述的方法,其特征在于,当所述信息包括更新前的信息时,所述以粒子流形式,展示所述信息,包括:The method according to claim 1, wherein when the information includes pre-update information, the displaying the information in the form of a particle stream comprises:
    以粒子流形式,在当前页面内展示所述更新前的信息;Displaying the pre-update information in the current page in the form of a particle stream;
    所述方法还包括:The method further includes:
    获取更新后的信息;Obtain updated information;
    以粒子流形式,在所述当前页面内展示所述更新后的信息。The updated information is displayed in the current page in the form of a particle stream.
  3. 根据权利要求1所述的方法,其特征在于,所述信息展示在当前页面的信息区的第一区域内,所述以粒子流形式,展示所述信息,包括:The method according to claim 1, wherein the information is displayed in a first area of the information area of the current page, and the displaying the information in the form of a particle stream comprises:
    在预设的定时器达到计时周期时,判断所述第一区域是否为动画展示形式;Determining whether the first area is an animated display form when a preset timer reaches a timing period;
    如果所述第一区域是动画展示形式,获取当前要展示的信息以及所述信息对应的动画时长;If the first area is an animated display form, obtain information currently to be displayed and an animation duration corresponding to the information;
    按照预设方向控制所述当前要展示的信息移动流入所述第一区域并逐渐移动流出所述第一区域,且在所述第一区域内的出现时长为所述动画时长。Controlling, according to a preset direction, that the information currently to be displayed moves into the first area and gradually moves out of the first area, and the appearance time in the first area is the animation duration.
  4. 根据权利要求3所述的方法,其特征在于,所述当前要展示的信息在所述第一区域内从上向下移动,且,所述当前要展示的信息在所述第一区域的中间位置上的移动速度,小于,所述当前要展示的信息在所述第一区域的上下两端上的移动速度;或者,The method according to claim 3, wherein said information to be displayed is moved from top to bottom in said first area, and said information to be displayed is in the middle of said first area The moving speed in the position is less than the moving speed of the information to be displayed on the upper and lower ends of the first area; or
    所述当前要展示的信息包括具有不同热度值的信息,且热度值高的信息的移动速度小于热度值低的信息的移动速度。The information to be displayed currently includes information having different heat values, and the moving speed of the information having a high heat value is smaller than the moving speed of the information having a low heat value.
  5. 根据权利要求1所述的方法,其特征在于,所述信息展示在当前页面的信息区的第一区域,所述信息区还包括第二区域,所述方法还包括:The method according to claim 1, wherein the information is displayed in a first area of an information area of a current page, and the information area further includes a second area, the method further comprising:
    当在所述第一区域中选择信息后,将所述选择的信息添加到所述第二区域。The selected information is added to the second area after the information is selected in the first area.
  6. 根据权利要求1所述的方法,其特征在于,所述信息展示在当前页面的信息区的第一区域,所述信息区还包括第三区域,所述获取要展示的信息,包括:The method according to claim 1, wherein the information is displayed in a first area of the information area of the current page, the information area further includes a third area, and the obtaining information to be displayed includes:
    获取用户在所述第三区域内设置的标签;Obtaining a label set by the user in the third area;
    根据所述标签获取要展示的信息。Get the information to be displayed based on the tag.
  7. 根据权利要求1所述的方法,其特征在于,所述信息展示在当前页面的信息区的第一区域,所述信息区还包括第四区域,所述方法还包括: The method according to claim 1, wherein the information is displayed in a first area of the information area of the current page, and the information area further includes a fourth area, the method further comprising:
    根据所述第四区域内的可供选择的功能项,确定所述信息区的展示形式,并以所述确定的展示形式展示所述信息区。Determining a display form of the information area according to an optional function item in the fourth area, and displaying the information area in the determined display form.
  8. 根据权利要求7所述的方法,其特征在于,所述可供选择的功能项包括如下项中的至少一项:The method of claim 7, wherein the selectable functional item comprises at least one of the following:
    用于控制所述信息在所述第一区域内移动速度的功能项;a function item for controlling a speed of movement of the information within the first area;
    用于控制所述第一区域内是否是动画展示形式的功能项;a function item for controlling whether the first area is an animated display form;
    用于控制所述信息区是列表展示或者动画展示的功能项。A function item for controlling the information area to be displayed in a list or animated.
  9. 根据权利要求1-8任一项所述的方法,其特征在于,所述信息是检索后得到的商品信息。The method according to any one of claims 1-8, wherein the information is product information obtained after retrieval.
  10. 一种信息展示装置,其特征在于,包括:An information display device, comprising:
    第一获取模块,用于获取要展示的信息;a first obtaining module, configured to obtain information to be displayed;
    第一展示模块,用于以粒子流形式,展示所述信息。The first display module is configured to display the information in the form of a particle stream.
  11. 根据权利要求10所述的装置,其特征在于,当所述信息包括更新前的信息时,所述第一展示模块具体用于:The device according to claim 10, wherein when the information includes pre-update information, the first display module is specifically configured to:
    以粒子流形式,在当前页面内展示所述更新前的信息;Displaying the pre-update information in the current page in the form of a particle stream;
    所述方法还包括:The method further includes:
    第二获取模块,用于获取更新后的信息;a second obtaining module, configured to obtain updated information;
    第二展示模块,用于以粒子流形式,在所述当前页面内展示所述更新后的信息。a second display module, configured to display the updated information in the current page in the form of a particle stream.
  12. 根据权利要求10所述的装置,其特征在于,所述信息展示在当前页面的信息区的第一区域内,所述第一展示模块包括:The device according to claim 10, wherein the information is displayed in a first area of the information area of the current page, the first display module comprising:
    第一单元,用于在预设的定时器达到计时周期时,判断所述第一区域是否为动画展示形式;a first unit, configured to determine, when the preset timer reaches a timing period, whether the first area is an animated display form;
    第二单元,用于如果所述第一区域是动画展示形式,获取当前要展示的信息以及所述信息对应的动画时长;a second unit, configured to: if the first area is an animated display form, obtain information currently to be displayed and an animation duration corresponding to the information;
    第三单元,用于按照预设方向控制所述当前要展示的信息移动流入所述第一区域并逐渐移动流出所述第一区域,且在所述第一区域内的出现时长为所述动画时长。a third unit, configured to control, according to a preset direction, that the information currently to be displayed moves into the first area and gradually moves out of the first area, and the appearance time in the first area is the animation duration.
  13. 根据权利要求10所述的装置,其特征在于,所述信息展示在当前页面的信息区的第一区域,所述信息区还包括第二区域,所述装置还包括:The device according to claim 10, wherein the information is displayed in a first area of the information area of the current page, the information area further includes a second area, and the apparatus further comprises:
    添加模块,用于当在所述第一区域中选择信息后,将所述选择的信息添加到所述第三区域。And a adding module, configured to add the selected information to the third area after selecting information in the first area.
  14. 根据权利要求10所述的装置,其特征在于,所述信息展示在当前页面的信息区的第一区域,所述信息区还包括第三区域,所述第一获取模块具体用于: The device according to claim 10, wherein the information is displayed in a first area of the information area of the current page, and the information area further includes a third area, where the first acquiring module is specifically configured to:
    获取用户在所述第三区域内设置的标签;Obtaining a label set by the user in the third area;
    根据所述标签获取要展示的信息。Get the information to be displayed based on the tag.
  15. 根据权利要求10所述的装置,其特征在于,所述信息展示在当前页面的信息区的第一区域,所述信息区还包括第四区域,所述装置还包括:The device according to claim 10, wherein the information is displayed in a first area of the information area of the current page, the information area further includes a fourth area, and the apparatus further comprises:
    确定模块,用于根据所述第四区域内的可供选择的功能项,确定所述信息区的展示形式,并以所述确定的展示形式展示所述信息区。a determining module, configured to determine a display form of the information area according to an optional function item in the fourth area, and display the information area in the determined display form.
  16. 一种电子设备,其特征在于,包括:An electronic device, comprising:
    显示屏;Display screen
    处理器;processor;
    存储器,用于存储预设代码,所述预设代码被所述处理器执行时,获取要展示的信息,并以粒子流形式,在所述显示屏上展示所述信息。 And a memory for storing a preset code, when the preset code is executed by the processor, acquiring information to be displayed, and displaying the information on the display screen in the form of a particle stream.
PCT/CN2016/072464 2015-02-03 2016-01-28 Method and device for displaying information WO2016124100A1 (en)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201510056170.6 2015-02-03
CN201510056170.6A CN105989036A (en) 2015-02-03 2015-02-03 Information display method and device

Publications (1)

Publication Number Publication Date
WO2016124100A1 true WO2016124100A1 (en) 2016-08-11

Family

ID=56563447

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2016/072464 WO2016124100A1 (en) 2015-02-03 2016-01-28 Method and device for displaying information

Country Status (2)

Country Link
CN (1) CN105989036A (en)
WO (1) WO2016124100A1 (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107277633A (en) * 2017-06-30 2017-10-20 武汉斗鱼网络科技有限公司 A kind of method and device for showing direct broadcasting room present effect

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108255546B (en) * 2016-12-29 2021-09-24 腾讯科技(北京)有限公司 Method and device for realizing data loading animation
CN111489219B (en) * 2019-01-28 2023-08-01 阿里巴巴(江西)有限公司 Commodity object information processing method and device and electronic equipment

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101739645A (en) * 2009-12-08 2010-06-16 上海视惠信息科技有限公司 System and method for issuing interactive network advertisements
CN201707874U (en) * 2009-12-08 2011-01-12 上海视惠信息科技有限公司 Interactive device for network advertising release
CN101981987A (en) * 2008-01-30 2011-02-23 谷歌公司 Notification of mobile device events
CN102664832A (en) * 2012-05-21 2012-09-12 李艳平 Method and device for commenting and additionally modifying message

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104050579B (en) * 2013-03-12 2017-10-27 阿里巴巴集团控股有限公司 Method and device for realizing carousel animation

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101981987A (en) * 2008-01-30 2011-02-23 谷歌公司 Notification of mobile device events
CN101739645A (en) * 2009-12-08 2010-06-16 上海视惠信息科技有限公司 System and method for issuing interactive network advertisements
CN201707874U (en) * 2009-12-08 2011-01-12 上海视惠信息科技有限公司 Interactive device for network advertising release
CN102664832A (en) * 2012-05-21 2012-09-12 李艳平 Method and device for commenting and additionally modifying message

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107277633A (en) * 2017-06-30 2017-10-20 武汉斗鱼网络科技有限公司 A kind of method and device for showing direct broadcasting room present effect

Also Published As

Publication number Publication date
CN105989036A (en) 2016-10-05

Similar Documents

Publication Publication Date Title
US10282060B2 (en) Seamless pagination
JP5897715B2 (en) Processing method by computer
KR102050630B1 (en) Persistent media player
KR101911034B1 (en) Organizing graphical representations on computing devices
US10042537B2 (en) Video frame loupe
US9756140B2 (en) Tracking user behavior relative to a network page
US10739975B2 (en) Computer implemented method, client computing device and computer readable storage medium for data presentation
CN104657044A (en) Radial menus
US20240004927A1 (en) Providing a video preview of search results
WO2016124100A1 (en) Method and device for displaying information
US20220138265A1 (en) Providing efficient graphical user interfaces for visualizing large datasets
KR20180024200A (en) Method, apparatus and computer program for providing search information from video
US20190213211A1 (en) Media information display method and apparatus, and computer storage medium
CN104503995A (en) Realization method and device for input method
WO2022126664A1 (en) Video editing method, terminal device, and computer-readable storage medium
CN107239212B (en) Method and device for presenting segmentation selection view and user terminal
KR102044614B1 (en) Input method based website information providing method and device
US20160283075A1 (en) Information processing method, apparatus, and system
KR101871925B1 (en) Method, apparatus and computer program for providing search information from video
CN105468254A (en) Content searching apparatus and method for searching content
JP2008134575A (en) Multimedia screen division display system
CN105759946B (en) The exchange method and device of mobile terminal
US20140279255A1 (en) System and method for layered visualization of points of interest data
CN107544766B (en) Data display method and device
JP5873131B2 (en) Information search apparatus, information search program, and information search method

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

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

Country of ref document: EP

Kind code of ref document: A1