Information display method and device
By setting up card components with multi-area display and dynamic layout in the information page, the problem of cumbersome tab navigation on small mobile devices is solved, and the efficiency and experience of users obtaining information on large-screen devices are improved.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-23
- Publication Date
- 2026-03-27
AI Technical Summary
On small mobile devices, when users navigate to media files using tabs, they are limited by the screen size and need to perform multiple clicks, resulting in a poor user experience.
The information page is set up with a first area to display multiple sibling tags, and a second area to display the card components of the currently selected tag and the card components of adjacent unselected tags. The content of the unselected card components is partially obscured, and the tags are switched through various triggering methods. The layout attributes of the card components are dynamically adjusted based on the tag information and user behavior.
It improves the efficiency and experience of users obtaining information on large-screen devices, and enhances visual interactivity and convenience through dynamic layout and multiple switching methods, meeting users' behavioral habits and preferences.
Smart Images
Figure CN121742953A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of Internet application technology, and in particular to an information display method and apparatus. Background Technology
[0002] With the continuous development of mobile internet, users are increasingly playing media files on small mobile devices such as smartphones. To improve the efficiency of users finding media files, tab navigation is usually used to display media file information. However, the tab navigation used on small mobile devices such as smartphones currently displays information by arranging multiple tabs side by side. When a user clicks on a tab, the user's device can display the content corresponding to the selected tab. Due to the limitation of screen size, users may not be willing to click on tabs multiple times to obtain the content corresponding to other tabs, and the user experience needs to be improved. Summary of the Invention
[0003] This application provides an information display method and apparatus to improve the user experience.
[0004] This application provides the following solution: According to the first aspect, an information display method is provided, the method comprising: The information page includes at least a first area and a second area. The first area displays multiple peer-level tag information. When the screen size is greater than or equal to a size threshold, the second area displays a card component corresponding to the currently selected tag information and a card component corresponding to at least one unselected tag information adjacent to the currently selected tag information. Part of the content of the card component corresponding to the unselected tag information is obscured. The card component includes media content under the corresponding tag information. In response to the triggering of a tab switching operation, the selected tab information after the switch is used as the currently selected tab information, and the step of displaying the information page is executed.
[0005] According to one achievable method in an embodiment of this application, the layout attribute of the card component in the second area is determined based on the corresponding label information.
[0006] According to one achievable method in an embodiment of this application, the information page further includes a third area, which displays parent tag information of the tag information and sibling tag information of the parent tag information; wherein the parent tag information is in a selected state.
[0007] According to one achievable method in an embodiment of this application, the operation of triggering the tag switching includes at least one of the following: Trigger operations on unselected tag information; Trigger the operation of the card component corresponding to the unselected label information; The first swipe gesture applied to the first area; A second swipe gesture applied to the second area; This triggers the operation of the switching component displayed in the first area.
[0008] According to one achievable method in this application embodiment, if the operation triggering the tag switching is a second swipe gesture acting on the second area, then the step of using the selected tag information after switching as the currently selected tag information and displaying the information page includes: Based on the swiping distance of the second swipe gesture, card components corresponding to multiple adjacent label information are continuously displayed in the second area; Based on the proportion of card components corresponding to each tag information displayed on the information page when the second swipe gesture ends, the selected tag information after switching is determined; The selected tag information after switching is used as the currently selected tag information, and the step of displaying the information page is executed.
[0009] According to one achievable method in an embodiment of this application, the layout attributes of the card component in the second region are determined based on the corresponding label information, including: The layout attributes of the card component are determined based on the user's historical behavior information under the corresponding tag information.
[0010] According to one achievable method in this application embodiment, the layout attributes of the card component are determined based on the user's historical behavior information under the corresponding tag information, including at least one of the following: If the frequency of the user triggering the switching of card components under the corresponding tag information exceeds the first frequency threshold, then the card components of the corresponding tag information displayed in the second area adopt the dense layout attribute; otherwise, the card components of the corresponding tag information displayed in the second area adopt the normal layout attribute. The number of card components of the corresponding tag information in the second area under the dense layout attribute is greater than the number of card components of the corresponding tag information in the second area under the normal layout attribute. If the frequency of fast switching exceeds a second frequency threshold during the playback of media content under the corresponding tag information by the user, the card component of the corresponding tag information displayed in the second area adopts a dense layout attribute; otherwise, the card component of the corresponding tag information displayed in the second area adopts a normal layout attribute. The fast switching includes switching when the playback duration of the media content is less than a preset duration threshold.
[0011] According to one achievable method in the embodiments of this application, the method further includes: In response to the operation of triggering a tag switching, the selected tag information after switching is taken as the currently selected tag information. The currently selected tag information includes cartoon elements and / or animation effects, and the cartoon elements and / or animation effects are associated with the media content included in the card component corresponding to the currently selected tag information. Display the cartoon elements and / or animation effects.
[0012] According to one achievable method in an embodiment of this application, the media content includes a video cover, and the card component further includes a playback component corresponding to the video cover; the method further includes: In response to the operation that triggers the playback component, the video corresponding to the triggered playback component is played in the card component; In response to an operation that triggers an area other than the playback component on the card component, the user is redirected to the details page corresponding to the triggered card component, and the corresponding video is played on the details page.
[0013] According to one achievable method in an embodiment of this application, the media content includes an image from the image set; the method further includes: In response to a third swipe gesture applied to the card component, other images in the atlas are switched on the card component.
[0014] According to a second aspect, an information display device is provided, the device comprising: The display unit is configured to display an information page, which includes at least a first area and a second area. The first area displays multiple peer-level tag information. When the screen size is greater than or equal to a size threshold, the second area displays a card component corresponding to the currently selected tag information and a card component corresponding to at least one unselected tag information adjacent to the currently selected tag information. Part of the content of the card component corresponding to the unselected tag information is obscured. The card component includes media content under the corresponding tag information. The switching unit is configured to respond to an operation that triggers a tab switching, and to use the selected tab information after switching as the currently selected tab information to perform the step of displaying the information page.
[0015] According to a third aspect, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the steps of the method described in any one of the first aspects.
[0016] According to the fourth aspect, an electronic device is provided, comprising: One or more processors; and A memory associated with the one or more processors, the memory being used to store program instructions that, when read and executed by the one or more processors, perform the steps of the method described in any one of the first aspects above.
[0017] According to a fifth aspect, a computer program product is provided, comprising a computer program that, when executed by a processor, implements the steps of the method described in any of the first aspects above.
[0018] According to the specific embodiments provided in this application, the following technical effects are disclosed: 1) This application can display an information page on a screen. The information page includes at least a first area and a second area. The first area displays multiple peer-level tags. When the screen size is greater than or equal to a size threshold, the second area displays card components corresponding to the currently selected tag and card components corresponding to the unselected tags. Part of the content of the card components corresponding to the unselected tags is obscured. The card components include the media content under the corresponding tag. This method allows users to view the content under the selected tag while simultaneously viewing the content under the unselected tags on a screen with a size greater than or equal to the size threshold. This provides users with a reference for whether to switch to other tags, thereby improving the user experience in obtaining information.
[0019] 2) The layout attributes of the card component in the second area are determined based on the corresponding tag information. In other words, the layout attributes of the card component are different for different tag information, which makes the display effect of the card component more in line with the corresponding tag information, improves the visual effect, and thus improves the user experience.
[0020] 3) The information page also includes a third area, which can display the parent tag information and the sibling tag information of the parent tag information. This makes it convenient for users to quickly switch the parent tag information, and users can switch to the sibling tag information of the parent tag information at any time, thus improving the switching efficiency.
[0021] 4) This application provides multiple ways to trigger tag switching, meaning users can switch tags in different ways, which improves the convenience and comprehensiveness of the switching operation and thus enhances the user experience.
[0022] 5) Based on the swiping distance of the first or second swipe gesture, multiple adjacent tag information is continuously displayed in the first area and the card components corresponding to the multiple adjacent tag information are continuously displayed in the second area. Users can switch the displayed content to the tag information they want to know with a smoother swipe gesture, realizing an immersive information acquisition process, improving switching efficiency, and users can automatically determine the selected tag information after switching, further improving the user's switching experience.
[0023] 6) The layout attributes of the card component are determined based on the corresponding tag information and the user's behavior information on the information page. In other words, the layout attributes of the card component are dynamically variable, making the information page displayed in this application more in line with the user's behavior habits and improving the user experience.
[0024] 7) In response to users frequently switching card components or quickly switching media files under a certain tab on the information page, the layout attribute of the card component is changed to a dense layout attribute, so that users can quickly and efficiently browse the card components under that tab, reduce user operations under that tab, quickly find the media content they are interested in or need, further improve the adaptability of the layout attribute, and make the information page displayed in this application more in line with user preferences, thus improving the user experience.
[0025] 8) The user interface can also display cartoon elements and / or animation effects included in the currently selected tag information. This method can increase the user's interaction with the information page and improve the visual display effect.
[0026] 9) If the media content includes a video cover, the card component includes a playback component. Users can directly preview the video corresponding to the playback component on the information page without jumping to the details page, which improves the user's viewing efficiency and makes the process more convenient.
[0027] 10) If the media content includes an image from the image collection, in response to a third swipe gesture applied to the card component, other images in the image collection can be switched on the card component. Users can view all images in the image collection without having to jump to the details page, which improves the user's viewing efficiency and makes the process more convenient.
[0028] Of course, any product implementing this application does not necessarily need to achieve all of the advantages described above at the same time. Attached Figure Description
[0029] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0030] Figure 1 This is a system architecture diagram applicable to the embodiments of this application.
[0031] Figure 2 A flowchart illustrating the information display method provided in this application embodiment.
[0032] Figure 3 This is a schematic diagram of an information page in portrait mode provided in an embodiment of this application.
[0033] Figure 4 This is a schematic diagram of a landscape-style information page provided in an embodiment of this application.
[0034] Figure 5 A schematic diagram of the third region provided in an embodiment of this application.
[0035] Figure 6 This is a schematic diagram illustrating four layout attributes provided in the embodiments of this application.
[0036] Figure 7 A schematic diagram of a card component including a playback component provided in an embodiment of this application.
[0037] Figure 8 This is a schematic diagram of the image in the card switching component provided in the embodiments of this application.
[0038] Figure 9 This is a schematic diagram illustrating the triggering of unselected tag information provided in an embodiment of this application.
[0039] Figure 10 This is a schematic diagram illustrating the execution of a first swipe gesture or a second swipe gesture, provided in an embodiment of this application.
[0040] Figure 11 This is a schematic diagram of a switching component provided in an embodiment of this application.
[0041] Figure 12 A schematic block diagram of an information display device provided in an embodiment of this application.
[0042] Figure 13 A schematic block diagram of an electronic device provided in an embodiment of this application. Detailed Implementation
[0043] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of this application are within the scope of protection of this application.
[0044] The terminology used in the embodiments of this invention is for the purpose of describing particular embodiments only and is not intended to limit the invention. The singular forms “a,” “the,” and “the” as used in the embodiments of this invention and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise.
[0045] It should be understood that the term "and / or" used in this article is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Additionally, the character " / " in this article generally indicates that the preceding and following related objects have an "or" relationship.
[0046] Depending on the context, the word "if" as used here can be interpreted as "when," "when," "in response to determination," or "in response to detection." Similarly, depending on the context, the phrase "if determination" or "if detection (of the stated condition or event)" can be interpreted as "when determination," "in response to determination," "when detection (of the stated condition or event)," or "in response to detection (of the stated condition or event)."
[0047] To enhance user engagement and information retrieval experience, this application offers a novel approach. For ease of understanding, the system architecture upon which this application is based will first be described. Figure 1 An exemplary system architecture that can be applied to embodiments of this application is shown, such as Figure 1 As shown, the system architecture may include: a client and a server.
[0048] The server side and the client side are the two main components of an application service. The server side uses a server as its primary hardware infrastructure and may include one or more software service modules. The server side and the client side form a collaborative front-end and back-end.
[0049] The client can be set on the terminal device. In the embodiments of this application, the client can be a local application, a mini-program, or a web application running through a browser on the terminal device.
[0050] Terminal devices can include, but are not limited to, smart mobile terminals, wearable devices, PCs (Personal Computers), and smart home devices. Smart mobile devices can include devices such as mobile phones, tablets, laptops, PDAs (Personal Digital Assistants), and connected car terminals. Wearable devices can include devices such as smartwatches, smart glasses, smart bracelets, VR (Virtual Reality) devices, AR (Augmented Reality) devices, and mixed reality devices (devices that support both virtual and augmented reality). Smart home devices can include devices such as smart TVs and smart refrigerators with displays.
[0051] A server can be a single server, a server cluster consisting of multiple servers, or a cloud server. A cloud server, also known as a cloud computing server or cloud host, is a hosting product in the cloud computing service system, designed to address the shortcomings of traditional physical hosts and Virtual Private Servers (VPS) services, such as high management difficulty and weak service scalability.
[0052] It should be understood that Figure 1 The number of client and server components shown is merely illustrative. Depending on implementation needs, there can be any number of client and server components.
[0053] Figure 2 This is a flowchart illustrating an information display method provided in an embodiment of this application. The method can be... Figure 1 The user-side execution in the system shown is as follows. Figure 2 As shown, the method may include the following steps: Step 201: Display an information page on the screen. The information page includes at least a first area and a second area. The first area displays multiple peer-level tag information. If the screen size is greater than or equal to a size threshold, the second area displays a card component corresponding to the currently selected tag information and a card component corresponding to at least one unselected tag information adjacent to the currently selected tag information. Part of the content of the card component corresponding to the unselected tag information is obscured. The card component includes media content under the corresponding tag information.
[0054] Step 202: In response to the triggering of the tag switching operation, the selected tag information after switching is used as the currently selected tag information, and the steps of displaying the information page are executed.
[0055] As can be seen from the above process, this application can display an information page on the screen. The information page includes at least a first area and a second area. The first area displays multiple peer-level tag information. When the screen size is greater than or equal to a size threshold, the second area displays the card component corresponding to the currently selected tag information and the card components corresponding to the unselected tag information. Part of the content of the card components corresponding to the unselected tag information is obscured. The card components include the media content under the corresponding tag information. This method allows users to view the content under the selected tag information while viewing the content under the unselected tag information on a screen with a size greater than or equal to the size threshold. This provides users with a reference for whether to switch to other tag information, thereby improving the user's experience in obtaining information.
[0056] The following describes in detail each step of the above process and the effects that can be further produced, with reference to the embodiments. It should be noted that the terms "first" and "second" involved in this disclosure do not have limitations in terms of size, order, or quantity, but are only used to distinguish them in name. For example, "first region" and "second region" are used to distinguish two regions.
[0057] First, the above step 201, namely "displaying the information page on the screen", will be described in detail with reference to the embodiments.
[0058] Traditional mobile devices, such as smartphones, typically have relatively small screens. When displaying tag navigation information on these screens, multiple tags are usually arranged side-by-side. For example, if a user wants to learn about the content under a particular tag, they can click on that tag, and the corresponding content is displayed in a second area. To learn about the content under another tag, the user clicks on that tag, and the content is displayed in the second area. However, in other scenarios, users may be using larger-screen smartphones or tablets. If the traditional display method is still used, it will affect user efficiency and user experience. This application addresses this problem by revealing more content under tags on the information page displayed on the screen, allowing users to see the content under multiple tags simultaneously and increasing their desire to view other tags.
[0059] In this embodiment, in response to the operation of displaying tags, the user terminal displays an information page on the screen. The information page includes at least a first area and a second area. The first area displays multiple tag information of the same level (tag information can be text, static images, dynamic images, etc.). When the screen size is greater than or equal to a size threshold (e.g., the screen of a tablet or large-screen mobile phone), the second area displays the card component corresponding to the currently selected tag information and at least one card component corresponding to an unselected tag information adjacent to the currently selected tag information. The aforementioned size threshold can be a preset value, an empirical value, or an experimental value. For example, user behavior at different screen sizes can be collected for experiments to obtain the probability of users switching tags under different screen sizes, and the size threshold can be determined based on the experimental results. It should be noted that when initially navigating to the information page, the currently selected tag information can be pre-set, for example, the tag information ranked first or in the middle of multiple tag information of the same level can be used as the currently selected tag information.
[0060] Furthermore, the content of the card components corresponding to the unselected tag information is partially obscured. In other words, the information page mainly displays the card components corresponding to the selected tag information and displays a portion of the content of the card components corresponding to the unselected tag information, in order to increase users' interest in the content under other tag information and make users more willing to learn about the content under other tag information.
[0061] like Figure 3 As shown, Figure 3 A vertical information page is provided, which includes three tags: tag A, tag B, and tag C. Tag B is the currently selected tag, and the card component corresponding to tag B is fully displayed. Due to the limitation of screen width, part of the content of the card components corresponding to tags A and C is obscured.
[0062] The currently selected tag information can be highlighted in a different style than the unselected tag information, such as in size, color, and font. For example, Figure 3 The currently selected tag information is displayed in bold italic font.
[0063] It should be noted that during the display of the information page, it is not necessarily true that the content of the card component corresponding to the unselected tag information will be obscured. Figure 3 Due to screen width limitations, only the card component corresponding to the selected label information can be fully displayed. This application also provides a landscape-style information page, such as... Figure 4As shown, there are five tags: tag A, tag B, tag C, tag D, and tag E. Tag C is the currently selected tag. The card component corresponding to tag C is fully displayed. However, since the screen width is sufficient when the information page is displayed in landscape mode, the card components corresponding to tags B and D can also be fully displayed, while some content of the card components corresponding to tags A and E is obscured.
[0064] It should also be noted that when part of the content of the card component corresponding to an unselected label is obscured, the unselected label information can be partially obscured (e.g., Figure 3 As shown), of course, the information of unselected tags can also be fully displayed in the first area (as shown). Figure 4 (As shown). Furthermore, the information page typically displays the currently selected tag information and its corresponding card component as the central element.
[0065] In addition, the information page includes a third area, which displays the parent tag information and its sibling tags. The parent tag information is currently selected, and users can switch the parent tag information by triggering the sibling tags. For example... Figure 5 As shown, the parent tag is "Film & Television," and the sibling tags for "Film & Television" are "Animation" and "Short Drama." It should be noted that higher-level tags can exist above the parent tag; this application does not limit this.
[0066] The layout attributes of card components displayed in the second area under different tag information can be the same, but this display method is relatively simple. As a preferred method, the layout attributes of card components in the second area are determined based on the corresponding tag information. For example, each tag information corresponds to a preset layout attribute, where the layout attribute can be a single card (such as...). Figure 6 As shown in (a)), single-column cards (such as...) Figure 6 (b) shown in the image), double-column cards (as shown in the image) Figure 6 (c) shown in the middle), grid cards (such as Figure 6 As shown in (d) in the figure, etc., please note that Figure 6The layouts and quantities of card components shown in (a), (b), (c), and (d) are merely illustrative; in practical applications, card components can have other layouts and quantities. Different label information can have different layout attributes. Based on the category information to which the label information belongs, different layout attributes can be configured for its corresponding card components. For example, "Watch Movies" has a two-column card layout, "Watch Celebrities" has a single-column card layout, and "Play Games" has a grid card layout. Furthermore, due to screen length limitations, the number of card components corresponding to each label information is limited. In practical applications, more card components corresponding to a particular label information can be obtained through up-and-down swipe gestures.
[0067] The card component displays media content under the corresponding tag information. For example, if the tag information is "watch movies", and the layout property of the card component corresponding to "watch movies" is two-column cards, then "watch movies" corresponds to multiple card components, and each card component displays the poster and name of a movie.
[0068] The media content can include various forms, such as text, video covers, still images, animated images, and images from an image gallery. If the media content includes a video cover, this application can directly play the video corresponding to the video cover in the card component, or it can play the video corresponding to the video cover on the details page corresponding to the video cover. Specifically, the card component also includes a playback component corresponding to the video cover, such as... Figure 7 As shown, in response to the operation of triggering the playback component, the video corresponding to the triggered playback component can be played directly in the card component. In response to the operation of triggering an area other than the playback component on the card component, the user can jump to the details page corresponding to the triggered card component and play the corresponding video on the details page.
[0069] If the media content includes an image from the gallery, users can browse other images in the gallery using the card component. The image switching action can be triggered automatically at regular intervals (e.g., switching images every 5 seconds) or manually by the user. Figure 8 As shown, in response to a third swipe gesture applied to the card component, other images in the image gallery are switched on the card component. It's important to note that the third swipe gesture is applied to the area of the card component to be triggered; that is, the area of operation of the third swipe gesture cannot exceed the area of the card component to be triggered. This ensures that the image switching operation is performed correctly.
[0070] The following describes in detail step 202, namely, "in response to the operation of triggering the switching of tags, taking the selected tag information after switching as the currently selected tag information and executing the step of displaying the information page", with reference to the embodiments.
[0071] In response to the triggering of the tag switching operation, the selected tag information after switching is used as the currently selected tag information, and the steps of displaying the information page in step 201 are continued.
[0072] This application provides, but is not limited to, the following five operations for triggering tag switching, and tag switching can be performed through any of the following methods.
[0073] The first operation: triggering the action of the unselected tag information. Users can directly click on the unselected tag information displayed in the first area to switch to the selected tag information (e.g., click on...). Figure 9 In section (a), "Label C" is selected. Then, the selected label information after switching is used as the currently selected label information, and the step of displaying the information page is executed. That is to say, the user terminal displays the currently selected label information and its corresponding card component (such as...) in the information page with the currently selected label information as the center of the page. Figure 9 (as shown in (b)), or the user can display the currently selected tag information and its corresponding card component completely on the information page (e.g.) Figure 9 (as shown in (c)).
[0074] The second operation involves triggering the action of the card component corresponding to the unselected tag information. The user can click on the card component corresponding to the unselected tag information displayed in the second area, and the unselected tag information corresponding to that card component will become the selected tag information after switching. Then, the selected tag information will become the currently selected tag information, and the steps for displaying the information page will be executed. In other words, the user's device can display the currently selected tag information and its corresponding card component on the information page with the currently selected tag information as the center, or the user's device can display the currently selected tag information and its corresponding card component completely on the information page.
[0075] The third operation: a first swipe gesture applied to the first area. The user can perform a first swipe gesture in the first area, such as swiping left or right. Based on the swipe distance of the first swipe gesture in the first area, multiple adjacent label information items are continuously displayed in the first area, and the corresponding card components are continuously displayed in the second area. Based on the proportion of the card components corresponding to each label information displayed on the information page at the end of the first swipe gesture, the selected label information after switching is determined. That is, the label information corresponding to the card component with the largest proportion displayed on the information page is taken as the selected label information after switching. The selected label information after switching is then taken as the currently selected label information, and the steps of displaying the information page are executed.
[0076] The fourth operation: a second swipe gesture applied to the second area. Users can perform a second swipe gesture in the second area, such as swiping left or right. Based on the swipe distance in the second area, multiple adjacent label information items are continuously displayed in the first area, and the corresponding card components are continuously displayed in the second area. The selected label after switching is determined by the proportion of the card components corresponding to each label information displayed on the information page at the end of the second swipe gesture. That is, the label information corresponding to the card component with the largest proportion displayed on the information page is taken as the selected label information after switching. This selected label information is then used as the currently selected label information, and the steps for displaying the information page are executed. It should be noted that the second swipe gesture is a cross-card component swipe operation. For example, the second swipe gesture can move from the area where a card component is located to an area in the second area other than the area where the card component is located, or from an area in the second area other than the area where a card component is located to the area where a card component is located. This ensures that the label switching operation is performed correctly.
[0077] It should be noted that when performing the first swipe gesture in the third operation or the second swipe gesture in the fourth operation, the label information in the first area and the card component in the second area are displayed in conjunction, such as... Figure 10 As shown, Figure 10 (b) in the middle is... Figure 10 In (a) of the example, the information page displayed during the execution of the first or second swipe gesture shows that the label information and its corresponding card components are displayed in association during the swipe. Figure 10 In the diagram (c), the information page displayed at the end of the first or second swipe gesture is selected. At this point, the label C with the largest card component can be chosen as the currently selected label. Furthermore, after determining the currently selected label, this application can adjust the position of the currently selected label and its corresponding card component on the information page. That is, the currently selected label and its corresponding card component can be displayed centered on the currently selected label on the information page, such as... Figure 10 As shown in (d) in the figure.
[0078] The fifth operation: triggering the switching components displayed in the first area. Specifically, the currently selected tag information corresponds to two switching components, namely the first switching component and the second switching component. In response to triggering the first switching component, the unselected tag information adjacent to the currently selected tag information in the corresponding direction of the first switching component is used as the selected tag information after the switch (e.g., ...). Figure 11As shown, triggering the first switching component sets label B as the selected label after the switch. Similarly, in response to triggering the second switching component, the currently selected label is set as the adjacent unselected label in the corresponding direction of the second switching component (e.g., ...). Figure 11 As shown, the second switching component is triggered, and tag D is used as the selected tag information after the switch. The selected tag information after the switch is used as the currently selected tag information, and the steps to display the information page are executed.
[0079] Additionally, when switching tags using the above operations, if the currently selected tag information includes cartoon elements and / or animation effects, these elements and / or animation effects can also be displayed on the information page. Furthermore, the cartoon elements and / or animation effects are associated with the media content included in the card component corresponding to the currently selected tag information. For example, if the currently selected tag information is "play games," the cartoon elements and / or animation effects could be elements or animations related to game consoles, or elements or animations related to the media content included in a card component corresponding to "play games."
[0080] In step 201, the layout attributes of the card component can be determined based on the corresponding tag information. Furthermore, the layout attributes of the card component can also be determined based on the user's historical behavior information under the corresponding tag information.
[0081] As one possible approach, users can manually trigger the layout properties of the card component. Specifically, the information page can also include a layout switching component for the currently selected label information. In response to triggering the layout switching component, the layout properties of the card component corresponding to the currently selected label information are switched, for example, switching a two-column card to a single-column card.
[0082] As another feasible approach, the user can automatically trigger the layout attributes of the card components. Specifically, if the frequency with which a user switches between card components under a corresponding tag exceeds a first frequency threshold, the card components for that tag displayed in the second area will use a dense layout attribute; otherwise, they will use a normal layout attribute. In other words, when frequent switching of card components under a corresponding tag is detected on the information page, it can be assumed that the user is not interested in the currently displayed content, thus changing the normal layout attribute of the card components for that tag to a dense layout attribute.
[0083] Alternatively, if the frequency of fast-switching during the playback of media content under the corresponding tag exceeds a second frequency threshold, the card component for the corresponding tag displayed in the second area will use a dense layout attribute; otherwise, the card component for the corresponding tag displayed in the second area will use a normal layout attribute. Fast-switching includes switching when the playback duration of the media content is less than a preset duration threshold. In other words, for video-type media content, if the video is switched when the playback duration of the corresponding card component or the corresponding details page is less than the preset duration threshold, it can be assumed that the user does not want to finish watching the media content included in the card component, i.e., the user is not interested in the currently displayed content, thus changing the normal layout attribute of the card component for the corresponding tag to a dense layout attribute.
[0084] Among them, the normal layout attribute can refer to the preset layout attribute for each label information. Under the dense layout attribute, the number of card components corresponding to the label information in the second area is greater than the number of card components in the second area under the normal layout attribute. By changing the normal layout attribute of the card components corresponding to the label information to the dense layout attribute, users can obtain more information at the same time, thus improving the efficiency of information acquisition for users.
[0085] Furthermore, while changing the layout attributes of the card component to dense layout attributes, the media content included in the card component can also be updated to content related to the user's preferences, thereby improving the user experience.
[0086] The foregoing has described specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired result. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired result. In some embodiments, multitasking and parallel processing are possible or may be advantageous.
[0087] According to another embodiment, an information display device is provided. Figure 12 A schematic block diagram of an information display device according to one embodiment is shown, the information display device being disposed in... Figure 1 The user end in the illustrated architecture. For example... Figure 12 As shown, the information display device 1200 includes a display unit 1201 and a switching unit 1202. The main functions of each component are as follows: The display unit 1201 is configured to display an information page on the screen. The information page includes at least a first area and a second area. The first area displays multiple peer-level tag information. When the screen size is greater than or equal to a size threshold, the second area displays a card component corresponding to the currently selected tag information and a card component corresponding to at least one unselected tag information adjacent to the currently selected tag information. Part of the content of the card component corresponding to the unselected tag information is obscured. The card component includes media content under the corresponding tag information.
[0088] The switching unit 1202 is configured to respond to an operation that triggers a tab switching, and to use the selected tab information after switching as the currently selected tab information to execute the steps of displaying the information page.
[0089] As one possible approach, the layout attributes of the card component in the second area are determined based on the corresponding label information.
[0090] As one possible approach, the information page also includes a third area, which displays the parent tag information and the sibling tags of the parent tag information; the parent tag information is in a selected state.
[0091] As one possible implementation method, when the switching unit 1202 triggers the operation of switching labels, it can be specifically configured to at least one of the following: triggering the operation of unselected label information; triggering the operation of the card component corresponding to the unselected label information; performing a first swipe gesture on the first area; performing a second swipe gesture on the second area; or triggering the operation of the switching component displayed in the first area.
[0092] As one possible implementation method, if the operation that triggers the label switching is a second swipe gesture acting on the second area, the switching unit 1202, when executing the step of displaying the information page by taking the selected label information after switching as the currently selected label information, can be specifically configured as follows: based on the swiping distance of the second swipe gesture, continuously displaying card components corresponding to multiple adjacent label information in the second area; determining the selected label information after switching based on the proportion of card components corresponding to each label information displayed in the information page when the second swipe gesture ends; and executing the step of displaying the information page by taking the selected label information after switching as the currently selected label information.
[0093] As one possible approach, the layout attributes of the card component in the second area are determined based on the corresponding tag information, including: the layout attributes of the card component are determined based on the user's historical behavior information under the corresponding tag information.
[0094] As one possible approach, the layout attributes of the card components are determined based on the user's historical behavior information under the corresponding tag information, including at least one of the following: if the frequency of the user triggering the switching of card components under the corresponding tag information exceeds a first frequency threshold, then the card components of the corresponding tag information displayed in the second area adopt a dense layout attribute; otherwise, the card components of the corresponding tag information displayed in the second area adopt a normal layout attribute. The number of card components of the corresponding tag information in the second area under the dense layout attribute is greater than the number of card components of the corresponding tag information in the second area under the normal layout attribute. If the frequency of fast switching during the playback of media content under the corresponding tag information exceeds a second frequency threshold, then the card components of the corresponding tag information displayed in the second area adopt a dense layout attribute; otherwise, the card components of the corresponding tag information displayed in the second area adopt a normal layout attribute. Fast switching includes switching when the playback duration of the media content is less than a preset duration threshold.
[0095] As one possible implementation method, the switching unit 1202 can also be configured to: in response to the operation of triggering the switching label, use the selected label information after switching as the currently selected label information, the currently selected label information includes cartoon elements and / or animation effects, and the cartoon elements and / or animation effects are associated with the media content included in the card component corresponding to the currently selected label information; and display the cartoon elements and / or animation effects.
[0096] As one possible approach, the media content includes video covers, and the card component also includes a playback component corresponding to the video cover.
[0097] The display unit 1201 can also be configured to: play the video corresponding to the triggered playback component in the card component in response to the operation of triggering the playback component; and jump to the details page corresponding to the triggered card component and play the corresponding video in response to the operation of triggering an area other than the playback component on the card component.
[0098] One possible approach is for media content to include an image from a gallery.
[0099] The display unit 1201 can also be configured to switch between displaying other images in the atlas on the card component in response to a third swipe gesture applied to the card component.
[0100] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments. The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without creative effort.
[0101] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse.
[0102] In addition, embodiments of this application also provide a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the method described in any of the foregoing method embodiments.
[0103] And an electronic device, comprising: One or more processors; and A memory associated with the one or more processors, the memory being used to store program instructions that, when read and executed by the one or more processors, perform the steps of the method described in any of the foregoing method embodiments.
[0104] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the method described in any of the foregoing method embodiments.
[0105] in, Figure 13The architecture of an electronic device is illustrated, which may include a processor 1310, a video display adapter 1311, a disk drive 1312, an input / output interface 1313, a network interface 1314, and a memory 1320. The processor 1310, video display adapter 1311, disk drive 1312, input / output interface 1313, network interface 1314, and memory 1320 can communicate with each other via a communication bus 1330.
[0106] The processor 1310 can be implemented using a general-purpose CPU, microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits to execute relevant programs and implement the technical solution provided in this application.
[0107] The memory 1320 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1320 can store the operating system 1321 for controlling the operation of the electronic device 1300, and the basic input / output system (BIOS) 1322 for controlling the low-level operations of the electronic device 1300. Additionally, it can store a web browser 1323, a data storage management system 1324, and an information display device 1200, etc. The aforementioned information display device 1200 can be the application program that specifically implements the aforementioned steps in this embodiment. In summary, when the technical solution provided in this application is implemented through software or firmware, the relevant program code is stored in the memory 1320 and is called and executed by the processor 1310.
[0108] Input / output interface 1313 is used to connect input / output modules to realize information input and output. Input / output modules can be configured as components in the device (not shown in the figure) or externally connected to the device to provide corresponding functions. Input devices may include keyboards, mice, touch screens, microphones, various sensors, etc., and output devices may include displays, speakers, vibrators, indicator lights, etc.
[0109] Network interface 1314 is used to connect a communication module (not shown in the figure) to enable communication between this device and other devices. The communication module can communicate via wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).
[0110] Bus 1330 includes a pathway for transmitting information between various components of the device, such as processor 1310, video display adapter 1311, disk drive 1312, input / output interface 1313, network interface 1314, and memory 1320.
[0111] It should be noted that although the above-described device only shows the processor 1310, video display adapter 1311, disk drive 1312, input / output interface 1313, network interface 1314, memory 1320, bus 1330, etc., in specific implementations, the device may also include other components necessary for normal operation. Furthermore, those skilled in the art will understand that the above-described device may only include the components necessary for implementing the solution of this application, and does not necessarily include all the components shown in the figures.
[0112] As can be seen from the above description of the embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a computer program product. This computer program product can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in various embodiments or some parts of the embodiments of this application.
[0113] The technical solutions provided in this application have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the embodiments above are only for the purpose of helping to understand the methods and core ideas of this application. Furthermore, those skilled in the art will recognize that, based on the ideas of this application, there will be changes in the specific implementation methods and application scope. Therefore, the content of this specification should not be construed as a limitation of this application.
Claims
1. An information display method, characterized in that, The method includes: An information page is displayed on the screen. The information page includes at least a first area and a second area. The first area displays multiple peer-level tag information. When the screen size is greater than or equal to a size threshold, the second area displays a card component corresponding to the currently selected tag information and a card component corresponding to at least one unselected tag information adjacent to the currently selected tag information. Part of the content of the card component corresponding to the unselected tag information is obscured. The card component includes media content under the corresponding tag information. In response to the triggering of a tab switching operation, the selected tab information after the switch is used as the currently selected tab information, and the step of displaying the information page is executed.
2. The method according to claim 1, characterized in that, The layout attributes of the card component in the second area are determined based on the corresponding label information.
3. The method according to claim 1, characterized in that, The information page also includes a third area, which displays the parent tag information of the tag information and the sibling tag information of the parent tag information; wherein the parent tag information is selected.
4. The method according to claim 1, characterized in that, The operation that triggers the switching of tags includes at least one of the following: Trigger operations on unselected tag information; Trigger the operation of the card component corresponding to the unselected label information; The first swipe gesture applied to the first area; A second swipe gesture applied to the second area; This triggers the operation of the switching component displayed in the first area.
5. The method according to claim 4, characterized in that, If the operation that triggers the tag switching is a second swipe gesture applied to the second area, then the step of using the selected tag information after switching as the currently selected tag information and displaying the information page includes: Based on the swiping distance of the second swipe gesture, card components corresponding to multiple adjacent label information are continuously displayed in the second area; Based on the proportion of card components corresponding to each tag information displayed on the information page when the second swipe gesture ends, the selected tag information after switching is determined; The selected tag information after switching is used as the currently selected tag information, and the step of displaying the information page is executed.
6. The method according to claim 2, characterized in that, The layout attributes of the card component in the second area are determined based on the corresponding tag information, including: The layout attributes of the card component are determined based on the user's historical behavior information under the corresponding tag information.
7. The method according to claim 6, characterized in that, The layout attributes of the card component are determined based on the user's historical behavior information under the corresponding tag information, including at least one of the following: If the frequency of the user triggering the switching of card components under the corresponding tag information exceeds the first frequency threshold, then the card components of the corresponding tag information displayed in the second area adopt the dense layout attribute; otherwise, the card components of the corresponding tag information displayed in the second area adopt the normal layout attribute. The number of card components of the corresponding tag information in the second area under the dense layout attribute is greater than the number of card components of the corresponding tag information in the second area under the normal layout attribute. If the frequency of fast switching exceeds a second frequency threshold during the playback of media content under the corresponding tag information by the user, the card component of the corresponding tag information displayed in the second area adopts a dense layout attribute; otherwise, the card component of the corresponding tag information displayed in the second area adopts a normal layout attribute. The fast switching includes switching when the playback duration of the media content is less than a preset duration threshold.
8. The method according to claim 1, characterized in that, The method further includes: In response to the operation of triggering a tag switching, the selected tag information after switching is taken as the currently selected tag information. The currently selected tag information includes cartoon elements and / or animation effects, and the cartoon elements and / or animation effects are associated with the media content included in the card component corresponding to the currently selected tag information. Display the cartoon elements and / or animation effects.
9. The method according to any one of claims 1 to 8, characterized in that, The media content includes a video cover, and the card component further includes a playback component corresponding to the video cover; the method further includes: In response to the operation that triggers the playback component, the video corresponding to the triggered playback component is played in the card component; In response to an operation that triggers an area other than the playback component on the card component, the user is redirected to the details page corresponding to the triggered card component, and the corresponding video is played on the details page.
10. The method according to any one of claims 1 to 8, characterized in that, The media content includes an image from the image collection; the method further includes: In response to a third swipe gesture applied to the card component, other images in the atlas are switched on the card component.
11. An information display device, characterized in that, The device includes: The display unit is configured to display an information page on a screen. The information page includes at least a first area and a second area. The first area displays multiple peer-level tag information. When the screen size is greater than or equal to a size threshold, the second area displays a card component corresponding to the currently selected tag information and a card component corresponding to at least one unselected tag information adjacent to the currently selected tag information. Part of the content of the card component corresponding to the unselected tag information is obscured. The card component includes media content under the corresponding tag information. The switching unit is configured to respond to an operation that triggers a tab switching, and to use the selected tab information after switching as the currently selected tab information to perform the step of displaying the information page.
12. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps of the method according to any one of claims 1 to 10.
13. An electronic device, characterized in that, include: One or more processors; as well as A memory associated with the one or more processors, the memory being used to store program instructions that, when read and executed by the one or more processors, perform the steps of the method according to any one of claims 1 to 10.
14. A computer program product, comprising a computer program, characterized in that, When executed by a processor, the computer program implements the steps of the method according to any one of claims 1 to 10.