Social application interface display method and device, equipment, medium and product

Abstract

The invention discloses an interface display method and device for a social application, equipment, a medium and a product. The method comprises the following steps: displaying a user interface of the social application; displaying at least two components on the user interface, wherein the at least two components comprise a message session component of instant messaging and a functional component of other services; displaying a message session list of instant messaging in the message session component; and displaying the related content of the business corresponding to the functional component in the functional component. Through the at least two components, the message session list of instant messaging is displayed, and related contents of other businesses except the message session provided by the social application are also displayed, so that a user can obtain related contents of a plurality of businesses on one user interface; and switching among different interfaces of a plurality of businesses is not needed to acquire related contents of the plurality of businesses, so that the efficiency of acquiring various types of information by the user is improved.

Description

Technical Field

[0001] The present application relates to the field of user interface (UI) technology, and in particular to a method, device, equipment, medium and product for displaying an interface of a social application. Background Art

[0002] With the popularization of social media and instant messaging applications, interactions between users are becoming more and more frequent.

[0003] The user interface of the instant messaging application uses the bottom navigation to help users jump to the interface corresponding to each service. For example, in the instant messaging application, the bottom navigation bar is provided with controls corresponding to services such as conversation, address book, settings, and friend dynamics. By clicking different controls in the navigation bar, you can enter the service interface corresponding to different controls. For example, clicking the control corresponding to the conversation service will display the message conversation list in the instant messaging application; clicking the control corresponding to the friend dynamic service will display the friend dynamic display interface in the instant messaging application.

[0004] Therefore, if you need to obtain information about different services in the instant messaging application, you need to switch back and forth between service interfaces. Summary of the invention

[0005] The embodiment of the present application provides a method, device, equipment, medium and product for displaying the interface of a social application. The technical solution is as follows:

[0006] According to one aspect of the present application, a method for displaying an interface of a social application is provided, the method comprising:

[0007] Display the user interface of social applications;

[0008] Displaying at least two components on the user interface, the at least two components including an instant messaging message session component and a functional component of other services, the other services referring to services other than message sessions provided by the social application;

[0009] The message conversation list of the instant communication is displayed in the message conversation component; and the relevant content of the business corresponding to the functional component is displayed in the functional component.

[0010] According to another aspect of the present application, a device for displaying an interface of a social application is provided, the device comprising:

[0011] A display module, used to display the user interface of a social application;

[0012] The display module is used to display at least two components on the user interface, wherein the at least two components include an instant messaging message session component and a functional component of other services, wherein the other services refer to services other than message sessions provided by the social application;

[0013] The display module is used to display the message conversation list of the instant messaging in the message conversation component; and to display the relevant content of the business corresponding to the functional component in the functional component.

[0014] According to another aspect of the present application, a computer device is provided, comprising a processor and a memory, wherein the memory stores at least one program, and the at least one program is loaded and executed by the processor to implement an interface display method for a social application as provided in various aspects of the present application.

[0015] According to another aspect of the present application, a computer-readable storage medium is provided, in which at least one program is stored. The at least one program is loaded and executed by a processor to implement an interface display method for a social application as provided in various aspects of the present application.

[0016] According to another aspect of the present application, a computer program product or a computer program is provided, wherein the computer program product or the computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium; a processor of a computer device reads the computer instructions from the computer-readable storage medium, and when the processor executes the computer instructions, an interface display method for a social application as provided in various aspects of the present application is implemented.

[0017] According to another aspect of the present application, a chip is provided, which includes a programmable logic circuit and / or program instructions. When the chip is running, it is used to implement the interface display method of the social application provided in various aspects of the present application.

[0018] The beneficial effects brought by the technical solution provided by the embodiment of the present application include at least:

[0019] The interface display method of a social application provided by the present application displays at least two components on the user interface of the social application. The at least two components are used to display the message conversation list of instant messaging while also displaying the relevant content of other services provided by the social application in addition to the message conversation. This allows a user to obtain the relevant content of multiple services on one user interface without having to switch between different interfaces of multiple services to obtain the relevant content of multiple services. This improves the efficiency of users in obtaining various types of information and also improves the human-computer interaction efficiency of users in obtaining relevant information of multiple services. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0021] Figure 1 is a schematic diagram of the structure of a computer system provided by an exemplary embodiment of the present application;

[0022] Figure 2 is a schematic diagram of an interface layout of a social application provided by an exemplary embodiment of the present application;

[0023] Figure 3 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0024] Figure 4 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0025] Figure 5 It is a flowchart of a method for displaying an interface of a social application provided by an exemplary embodiment of the present application;

[0026] Figure 6 It is a flowchart of a method for displaying an interface of a social application provided by an exemplary embodiment of the present application;

[0027] Figure 7 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0028] Figure 8 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0029] Fig. 9 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0030] Fig.10 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0031] Fig.11 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0032] Fig.12 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0033] Fig.13This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0034] Fig.14 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0035] Fig.15 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0036] Fig.16 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0037] Fig.17 It is a flowchart of a method for displaying an interface of a social application provided by an exemplary embodiment of the present application;

[0038] Fig.18 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0039] Fig.19 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0040] Fig. 20 This is a schematic diagram of an interface of a social application provided by an exemplary embodiment of the present application;

[0041] Fig.21 It is a block diagram of an interface display device for a social application provided by an exemplary embodiment of the present application;

[0042] Fig. 22 It is a schematic diagram of the device structure of a computer device provided by an exemplary embodiment of the present application. DETAILED DESCRIPTION

[0043] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0044] The interface display method of the social application provided in this application can be applied to a computer system, such as Figure 1 , which shows a schematic diagram of a computer system 100 provided by an exemplary embodiment of the present application. The computer system 100 includes: a terminal 110 and a server 120.

[0045] The terminal 110 installs and runs a client of a social application. The above-mentioned social application bureau has an instant messaging function. Optionally, the social application includes but is not limited to at least one of the following: an instant messaging application, a forum application, a dating application, a blog application, and a live broadcast application. When the terminal 110 runs the client, the user interface of the client is displayed on the screen of the terminal 110, and the user interface includes multiple components, including an instant messaging message session component 11 and a functional component 12 of other services.

[0046] For example, Figure 1 As shown, a message conversation list is displayed on the instant messaging message conversation component 11, and the message conversation list includes a list control of multiple conversations. The list control of each conversation displays the contact name of the conversation (such as "Xiao XX", "Apple", "HEEE", "Little Bear", etc.), the contact avatar, a summary of the latest message, and the number of unread messages, etc.

[0047] Other services of social applications may also include address books, mini-programs, multiple services provided by social applications, and information flow push services. Figure 1 As shown, the user interface also displays components of the address book, components of the mini-program, components of multiple service integration, and information flow components recommended by the wonderful channels. For example, the address book component can also display controls for frequently used contacts, through which you can enter the dialogue interface with frequently used contacts; the components of multiple service integration also display controls for frequently used services, through which you can enter the service interface of frequently used services; the information flow component pushed by the wonderful channels can display the wonderful channels pushed in real time, and you can also enter the push interface of the wonderful channels through the information flow component; the mini-program component can display the push messages in the mini-program, or the execution progress of the tasks in the mini-program, for example, the game progress can be displayed on the component of the game mini-program.

[0048] The terminal 110 may generally refer to one of a plurality of terminals, and this embodiment is only illustrated by taking the terminal 110 as an example. The device types of the terminal 110 include: at least one of a smart phone, a tablet computer, a laptop computer, a wearable device, an augmented reality (AR) smart device, a virtual reality (VR) smart device, an e-book reader, a moving picture experts group audio layer III (MP3) player, a moving picture experts group IV (MP4) player, a laptop portable computer, and a desktop computer.

[0049] Figure 1 Only one terminal is shown in the figure, but in different embodiments, there are multiple other terminals 130 that can access the server 120. Optionally, there are one or more terminals 130 corresponding to the developer, and a development and editing platform of the client of the social application is installed on the terminal 130. The developer can edit and update the client on the terminal 130, and transmit the updated client installation package to the server 120 through a wired or wireless network. The terminal 110 can download the client installation package from the server 120 to update the client.

[0050] The terminal 110 and other terminals 130 are connected to the server 120 via a wireless network or a wired network.

[0051] The server 120 includes at least one of a single server, multiple servers, a cloud computing platform, and a virtualization center. The server 120 is used to provide background services for the client of the social application. Optionally, the server 120 undertakes the main computing work and the terminal 110 undertakes the secondary computing work; or, the server 120 undertakes the secondary computing work and the terminal 110 undertakes the main computing work; or, the server 120 and the terminal 110 adopt a distributed computing architecture for collaborative computing.

[0052] Those skilled in the art will appreciate that the number of the above terminals may be more or less. For example, the above terminal may be only one, or the above terminals may be dozens or hundreds, or more. The embodiment of the present application does not limit the number of terminals and device types.

[0053] The interface display method of the social application provided in the present application can switch the display style of the user interface of the social application. Exemplarily, the display style of the user interface includes a first display style and a second display style, and can be switched between the first display style and the second display style according to the user's choice. The user interface of the first display style includes a message conversation list and a navigation bar, such as Figure 2 As shown in the middle left figure. The user interface of the second display style includes at least two components, at least two components include a type of component that does not support addition and deletion; at least two components also include another type of component that supports addition and deletion. For example, the second display style can be as follows Figure 2 As shown in the middle right figure, the user interface includes 4 fixed components. The display positions of the fixed components on the user interface are fixed and fixed components do not support addition or deletion. The user interface also includes N information flow components. Information flow components support addition or deletion and the layout of the N information flow components can be adjusted, where N is a positive integer.

[0054] like Figure 3As shown, an example is given of the interface changes when the display style is switched. The display styles include "normal mode" and "exploration mode". First, the main interface is displayed as a user interface 21, a message conversation list is displayed in the user interface 21, and a navigation bar is displayed at the bottom of the user interface, and a "general" control is displayed in the navigation bar; in response to a trigger operation on the "general" control, a "general" service interface 22 is displayed; selection controls for "normal mode" and "exploration mode" are displayed on the service interface 22; when the service interface 22 is entered through the "general" control, the "normal mode" in the selected state is displayed; in response to a selection operation on the selection control of the "exploration mode", the selection of the "normal mode" is canceled. status, showing the "exploration mode" in the selected state, completing the switching of the display style; the service interface 22 also includes a return control, which is used to return to the main interface. In response to the return operation on the return control, the main interface is displayed as the user interface 23, and the user interface 23 is the interface under the "exploration mode". The user interface 23 includes relevant information of the user account logged in to the social application, such as the avatar corresponding to the user account, the nickname corresponding to the user account, etc.; the user interface 23 also displays instant messaging message session components, address book components, mini-program components, components integrating multiple services provided by social applications, and information flow components, etc. The layout of multiple components is shown in the figure.

[0055] The layout of multiple components can also be customized by the user. Figure 3 and 4 As shown, Figure 3 The message conversation component is located in the display position below the relevant information of the user account, the address book component is displayed below the message conversation component, two mini-program components are displayed side by side below the address book component, and multiple service integration components and exciting channel recommendation components are displayed in sequence below the two mini-program components; Figure 4 The message conversation component is located at the display position below the relevant information of the user account. A clock-in calendar component and a game component are sequentially arranged at the lower left of the message conversation component. A game live broadcast component is displayed at the lower right of the message conversation component. A component for recommendation of wonderful channels is displayed below the clock-in calendar component, the game component and the game live broadcast component. Figure 3 and 4 The component layouts in are different, and users can customize different component layouts.

[0056] The interface display method of the social application provided by the present application allows the user to choose to use the "exploration mode" user interface, and at least two components are displayed on this type of user interface. The at least two components are used to display the message conversation list of instant messaging while also displaying the relevant content of other services other than the message conversation provided by the social application. This allows the user to obtain the relevant content of multiple services on one user interface without having to switch between different interfaces of multiple services to obtain the relevant content of multiple services, thereby improving the efficiency of the user in obtaining various types of information, and also improving the human-computer interaction efficiency of the user when obtaining relevant information of multiple services.

[0057] Figure 5 A flowchart of a method for displaying an interface of a social application provided by an exemplary embodiment of the present application is shown. The method can be applied to Figure 1 The method comprises the following steps:

[0058] Step 501: Display the user interface of a social application.

[0059] Optionally, the social application includes an application with an instant messaging function. Exemplarily, the social application may include at least one of the following: an instant messaging application, a forum application, a dating application, a blog application, and a live broadcast application.

[0060] Exemplarily, the social application includes at least two display modes, and the layout of the user interface is different in different display modes. For example, the at least two display modes include: normal mode, youth mode and deep mode; the terminal displays the user interface of the social application in the deep mode.

[0061] Step 502: display at least two components on the user interface, wherein the at least two components include an instant messaging message session component and a functional component of other services.

[0062] Among them, other services refer to services other than message conversations provided by the social application.

[0063] Social applications provide at least two services, including instant messaging services and other services other than instant messaging services. Exemplarily, other services include but are not limited to at least one of the following: contact management services, payment services, financial services, live broadcast services, short video services, news services, tool services, game services, life service services, literature services, and real-time call services. For example, payment services can be the push of information such as daily summaries, monthly summaries, deduction messages, and repayment reminders of fee payments; financial services can be the push of relevant messages about stocks, funds and other financial products that you are interested in; live broadcast services can be reminders of the start of broadcasts of hosts of interest, hosts you are following, and competitions you are following; short video services can be the push of short videos posted by friends, or short videos posted by bloggers you are following, or short videos with high popularity; news services can be the push of international news, domestic news, etc.; tool services can be calendars, calculators, clocks, weather forecasts, etc.; game services can be game launches, game version updates, etc.; life service services can be reminders of discounts on daily necessities and event reminders; literary services can be the push of excellent articles, reminders of literary events, new book launches by authors you are following, and reminders of new book signing events by authors you are following; real-time call services can be the display of real-time call messages.

[0064] A component is a simple encapsulation of data and methods. In the embodiments of the present application, a component is an encapsulation of the data and methods of its associated business. On the user interface, a component is usually displayed as a local control of a square, rectangle or rounded rectangle. The size and form of the component are preset or support custom editing.

[0065] Optionally, at least two components are a first type component and a second type component; the display position of the first type component on the user interface is fixed, for example, the display position of the message conversation component is fixed below the relevant information of the user account, such as Figure 3 As shown in the user interface 23 shown in ; the display position of the second type of components on the user interface is sorted and displayed based on the update time of the relevant content corresponding to the second type of components, or sorted and displayed based on other sorting conditions, and the other sorting conditions include at least one of the user's attention to the service, the network popularity of the service, the priority of the service, and the frequency of use of the service. Among them, the user's attention to the service can be reflected based on the frequency of use of the service; or it can be reflected by the user's special attention to the service. The network popularity of the service is reflected based on the attention paid to the service on the network, such as the click-through rate of the service, and / or the number of searches for the service. The priority of the service can be divided according to the type of service, such as the priority of the tool class is higher than the priority of the game class; or it can be a priority customized by the user. The frequency of use of a service refers to the frequency of use of the service over a period of time.

[0066] Exemplarily, the terminal displays the components corresponding to the services in descending order based on the user's attention to the services. Alternatively, the terminal displays the components corresponding to the services in descending order based on the network popularity of the services. Alternatively, the terminal displays the components corresponding to the services in descending order based on the priority of the services.

[0067] Step 503: Display the message conversation list of the instant messaging in the message conversation component.

[0068] The message conversation component is a component used for instant messaging services. The terminal displays an instant messaging message conversation list in the message conversation component, and the message conversation list includes a list control of at least one contact.

[0069] Optionally, in response to a trigger operation on a list control of the first contact in the message conversation component, the terminal displays a conversation interface corresponding to the first contact in the message conversation component. Alternatively, in response to a trigger operation on a list control of the first contact in the message conversation component, the terminal switches from the user interface to a conversation interface corresponding to the first contact. The conversation interface corresponding to the first contact is used for real-time communication between a user account logged in to the social application and a user account of the first contact.

[0070] Step 504: Display the relevant content of the business corresponding to the functional component in the functional component.

[0071] Exemplarily, the relevant content of the first service is displayed in the functional component corresponding to the first service; and the relevant content of the second service is displayed in the functional component corresponding to the second service.

[0072] Optionally, the relevant content of the business corresponding to the functional component includes but is not limited to at least one of the following:

[0073] The message digest of the unread message may be the entire content of the latest unread message among the multiple unread messages, or part of the latest unread message, for example, the first M words of the latest unread message are used as the message digest of the unread message;

[0074] The number of unread messages is the number of unread messages in the business;

[0075] The updated content after the business update is the updated content within the business;

[0076] The summary of the updated content after the business update is part of the updated content within the business, such as pictures or titles in the updated content within the business;

[0077] Information content recommended within a business is content related to the business that is recommended within the business, such as recommended game videos, match clips, event posters, etc. displayed on the game component;

[0078] ·The recommended tasks within the business refer to the tasks that need to be completed within the business. For example, in the mini-game, the virtual plants need to be watered regularly, and the mini-game components will prompt the virtual plants to be watered;

[0079] The execution progress of a business refers to the execution progress of tasks within the business, such as the number of levels that have been cleared in a level-clearing mini-game;

[0080] ·The prompt message after the service update refers to the message used to prompt that the service has been updated;

[0081] The information summary of the task to be done within the business refers to the information summary related to the task that needs to be completed within the business, such as the name of the task, the completion progress of the task, etc.

[0082] Optionally, the terminal displays first relevant content of the first business corresponding to the first functional component in the first functional component; when the first business is updated, the first relevant content in the first functional component is updated to second relevant content, and the second relevant content is content related to the first business update.

[0083] That is, the terminal updates the relevant content displayed in the functional component of the first service according to the update of the first service. For example, the terminal receives the first news message in the news service, and displays the message summary of the first news message in the functional component of the news service; subsequently, the terminal receives the second news message in the news service, and switches the message summary of the first news message displayed in the functional component of the news service to the message summary of the second news message. For another example, after the first game event occurs in the game service, the terminal plays the video content of the first game event in the functional component of the game service; after the new second game event occurs in the game service, the video content played in the functional component of the game service is switched to the video content of the second game event.

[0084] Optionally, the terminal displays first related content of the first business corresponding to the first functional component within the first functional component; when the second business is updated, the first functional component is replaced by the second functional component, and the second functional component displays third related content, which is a content business related to the second business update.

[0085] That is, the terminal updates the relevant content displayed in the functional component of the second service according to the update of the second service, and updates the display position of the functional component of the second service according to the content update time. The closer the content update time is to the current time, the closer the display position of the functional component is to the top of the interface. For example, regarding the display position on the user interface, the display position of the functional component of the live broadcast service is located above the display position of the functional component of the news service; the terminal displays a reminder of the start of broadcasting of the followed anchor at the first moment in the functional component of the live broadcast service; subsequently, the terminal receives the latest news in the news service at the second moment, switches the functional component of the live broadcast service to the functional component of the news service, and displays the latest news in the functional component of the news service; wherein, the first moment is prior to the second moment.

[0086] Optionally, the terminal displays first related content of the first business corresponding to the first functional component within the first functional component; when the second business is updated, the second functional component is inserted and displayed before the display position of the first functional component, and the second functional component displays third related content, which is a content business related to the second business update.

[0087] That is, the terminal updates the relevant content displayed in the functional component of the second service according to the update of the second service, and updates the display order of the functional components of multiple services according to the content update time. The closer the content update time is to the current time, the closer the display position of the functional component of the service is, so that the functional component of the latest updated service is located in a relatively front position, so that the user can understand the information update in time. For example, with regard to the display position on the user interface, the display position of the functional component of the live broadcast service is located above the display position of the functional component of the news service; the terminal displays a reminder that the host has started broadcasting at the first moment in the functional component of the live broadcast service; subsequently, the terminal receives the latest news in the news service at the second moment, moves the display position of the functional component of the live broadcast service and other functional components below the functional component of the live broadcast service downward on the user interface, displays the functional component of the news service above the functional component of the live broadcast service, and displays the latest news in the functional component of the news service; wherein the first moment is prior to the second moment.

[0088] To summarize, the interface display method of a social application provided in this embodiment displays at least two components on the user interface of the social application. The at least two components are used to display the message conversation list of instant messaging while also displaying the relevant content of other services provided by the social application in addition to the message conversation. This allows a user to obtain the relevant content of multiple services on one user interface without having to switch between different interfaces of multiple services to obtain the relevant content of multiple services. This improves the efficiency of users in obtaining various types of information, and also improves the human-computer interaction efficiency of users in obtaining relevant information of multiple services.

[0089] Secondly, when the content of the service is updated, the terminal updates the content displayed in the component based on the updated content in the service, and displays the updated content or content summary on the component, so that the user can quickly know the updated content. The terminal can also update the display position of the component according to the update time of the relevant content, so that the component with the latest updated content is displayed in a relatively front position, so that it is easier for the user to know, and improve the success rate of conveying update information to the user.

[0090] Furthermore, in this method, the message conversation component on the user interface includes a contact list control, and the user can directly enter the conversation interface with the contact through the contact list control without affecting the real-time communication with the contact; the user can also enter the message conversation list interface through the message list component, and can enter the message conversation list interface displayed in full screen, so that it is easier for the user to perform operations on the interface.

[0091] Figure 6 A flowchart of a method for displaying an interface of a social application provided by an exemplary embodiment of the present application is shown. The method can be applied to Figure 1 The method comprises the following steps:

[0092] Step 601: Display the user interface of a social application.

[0093] Step 602: Display at least two components on the user interface, wherein the at least two components include an instant messaging message session component and a functional component of other services.

[0094] Step 603: Display the message conversation list of the instant messaging in the message conversation component.

[0095] Step 604: Display relevant content of the business corresponding to the functional component in the functional component.

[0096] For implementation details of step 601 to step 604, please refer to step 501 to step 504, which will not be described in detail here.

[0097] Step 605: In response to an expansion operation triggered on the interface of the message conversation list, the interface of the message conversation list is displayed.

[0098] Optionally, the message conversation component includes a list expansion control; in response to an expansion operation triggered on the list expansion control, an interface of the message conversation list is displayed. Figure 7 As shown, a message conversation component 32 is displayed on the user interface 31, and a message conversation list 33 is displayed in the message conversation component 32; a sliding operation on the message conversation list is triggered in the message conversation component 32, and the message conversation list can be switched to display the list control of the conversation in the message conversation component. For example, by sliding the message conversation list upward, the list control of the conversation with "Xiao XX" will gradually move out of the display range on the message conversation component, and the list control of the conversation with "Xiao Xiong" will gradually move into the display range on the message conversation component. A list expansion control 34 is also displayed on the message conversation component, and the total number of unread messages in the message conversation list is also marked on the list expansion control 34. In response to the expansion operation triggered on the list expansion control 34, the terminal switches the interface 35 displaying the message conversation list from the user interface 31.

[0099] On the interface of the message conversation list, the message conversation list includes a list control of at least one conversation; in response to a viewing operation on the list control of a third conversation in the at least one conversation, a conversation interface of the third conversation is displayed. Figure 7 As shown, the message conversation list interface 35 displays the message conversation list. Compared with the list control for displaying the conversations with the contacts in the message conversation component 32, the message conversation list interface 35 can display a greater number of list controls for the conversations with the contacts at the same time. For example, Figure 7 As shown, in response to a trigger operation on the list control 36 of the conversation with “Little Bear”, the interface 35 of the message conversation list jumps to the conversation interface 37 of the contact “Little Bear”.

[0100] Exemplarily, in response to a return operation on the dialogue interface of the third dialogue, the dialogue interface of the third dialogue returns to the interface of the message conversation list. Figure 7 As shown, the conversation interface 37 of the contact “Little Bear” includes a return control 38 ; in response to a return operation on the return control 38 , the conversation interface 37 of the contact “Little Bear” can be returned to the interface 35 of the message conversation list.

[0101] In a message conversation component, the message conversation list includes a list control of at least one conversation; in response to a viewing operation on the list control of a fourth conversation in the at least one conversation, a conversation interface of the fourth conversation is displayed in the message conversation component. Alternatively, in response to a viewing operation on the list control of the fourth conversation in the at least one conversation, a user interface is switched to a conversation interface of the fourth conversation, that is, the conversation interface of the fourth conversation is displayed on the entire screen. The fourth conversation and the third conversation may be the same conversation or different conversations.

[0102] Step 606: In response to the viewing operation on the related content on the functional component, a detail interface corresponding to the related content is displayed.

[0103] Exemplarily, in response to a viewing operation on related content on a functional component, the user interface jumps to a detail interface corresponding to the related content.

[0104] Optionally, the functional component includes a component of an address book; in response to a viewing operation on the component of the address book, an interface of the address book is displayed. Figure 8 As shown, a component 42 of the address book is displayed on the user interface 41; in response to a viewing operation on the address book on the component of the address book, the user interface 41 is adjusted to an interface 43 of the address book. For example, the component 42 of the address book includes an expansion control 44 of the address book, and in response to a trigger operation on the expansion control 44, the user interface 41 is adjusted to an interface 43 of the address book.

[0105] The terminal also displays a conversation control of at least one contact on the address book component, for example, Figure 8 As shown, the component 42 of the address book displays conversation controls of five contacts. In response to a trigger operation on the conversation control of the second contact among at least one contact, the terminal displays a conversation interface with the second contact, such as jumping from the user interface to the conversation interface with the second contact. When there are many conversation controls, some conversation controls can be hidden in the component of the address book and another part of the conversation controls can be displayed by sliding left and right or sliding up and down.

[0106] The at least one contact displayed on the above-mentioned address book component may be a contact with a recent call or a user's frequently used contact. The above-mentioned frequently used contact refers to a contact with a call frequency higher than a call frequency threshold and / or a frequently used contact set by the user.

[0107] Optionally, the functional component includes at least two service integration components; in response to a viewing operation on the at least two service integration components, a display interface of at least two functional controls corresponding to at least two services provided by the social application is displayed. Fig. 9As shown, the terminal displays a component 52 integrating multiple services on a user interface 51, and displays a viewing control 53 for at least two services on the component 52 integrating multiple services; in response to a viewing operation triggered on the viewing control 53, a display interface 54 of at least two functional controls corresponding to at least two services is displayed, and at least two functional controls corresponding to at least two services are displayed on the display interface 54.

[0108] The terminal also displays a function control corresponding to at least one service on the component integrating at least two services, where the at least one service is a recently used service or a frequently used service of the user. The frequently used service may be a service whose frequency of use by the user is higher than a frequency threshold and / or a frequently used service set by the user. Fig. 9 As shown, function controls corresponding to four commonly used services, namely, "Dynamics", "Wallet", "Game", and "Scan", are displayed on the component 52 integrating at least two services.

[0109] The display interface 54 includes a first area and a second area. The first area displays function controls corresponding to commonly used services, and the second area displays function controls corresponding to other services. Other services refer to services other than commonly used services provided by social applications. For example, Fig. 9 As shown, the function controls corresponding to the commonly used services "Dynamics", "Wallet", "Games", and "Scan" are displayed in the "My Services" area, and the function controls corresponding to services 01 to 16 are displayed in the "More Services" area.

[0110] Users can edit common services and other services, such as editing common services into other services, or editing other services into common services. Fig. 9 As shown, an edit control 55 is displayed on the display interface 54. In response to a trigger operation on the edit control 55, a display interface 56 in an editing state is displayed. A deletion control 57 corresponding to each commonly used service is displayed in the "common services" area (i.e., the first area) of the display interface 56. In response to a trigger operation on the deletion control 57 of the first commonly used service, the display of the function control corresponding to the first commonly used service in the "common services" area is canceled, and the first commonly used service is displayed in the "more services" area (i.e., the second area). An add control 58 corresponding to each other service is displayed in the "more services" area of ​​the display interface 56. In response to a trigger operation on the add control 58 of the first service, the display of the function control corresponding to the first service in the "more services" area is canceled, and the first service is displayed in the "common services" area. A completion control 59 is also displayed on the display interface 56 in the editing state. In response to a trigger operation on the completion control 59, the editing operation is completed, and the edited display interface is displayed.

[0111] On the display interface 54, in response to a trigger operation on a function control corresponding to a second service among the commonly used services and other services, a service interface of the second service is displayed, such as switching to the service interface of the second service from the display interface 54. The terminal can also respond to a trigger operation on a function control corresponding to a second commonly used service in a component integrating at least two services, and display a service interface of the second commonly used service, such as jumping from a user interface to a service interface of the second commonly used service.

[0112] Optionally, the functional component further includes an information flow component; in response to a viewing operation on the information flow component, a display interface of the pushed information flow is displayed. Fig.10 As shown, a component 62 of "wonderful channel recommendation" is displayed on the user interface 61, and the component 62 of "wonderful channel recommendation" can be used to recommend some content that users are interested in, such as pushing some game channels; in response to the trigger operation on the component 62 of "wonderful channel recommendation", a recommendation interface 63 of "wonderful channel recommendation" is displayed, and the recommended game channels are displayed on the recommendation interface 63 of "wonderful channel recommendation", which can be a recommendation for one or more channels, and the pushed information flow is updated in real time, that is, the pushed channels are updated in real time.

[0113] Exemplarily, the information flow component can also be used for short video push, and the terminal displays the short video that is pushed in real time on the information flow component; in response to the trigger operation on the information flow component, the interface for short video push is displayed. Fig.11 As shown, the information flow component 62 is displayed on the user interface 61, and the pushed short video is displayed in the information flow component 62; in response to the trigger operation on the information flow component 62, the short video push interface 63 is displayed, and the short video pushed on the information flow component 62 before the interface switching is displayed on the short video push interface 63. That is, the short video is pushed through the information flow component, and the user can click to enter the short video push program to view the short video if he is interested in the short video. The interface jump triggered on the information flow component can be a jump within the social application or a jump to other applications outside the social application.

[0114] In some embodiments, after switching from the user interface to the details interface corresponding to the component, a message viewing control for instant messaging is also displayed on the details interface; in response to a message viewing operation on the message viewing control, a message conversation list of a first size is displayed in a first local area of ​​the details interface, and the message conversation list of the first size includes a list control for conversations with unread messages; in response to a triggering operation on the list control of the first conversation in the message conversation list, a conversation interface of the first conversation is displayed in the first local area; in response to a message reply operation triggered on the conversation interface of the first conversation, the replied message is displayed on the conversation interface of the first conversation.

[0115] For example, Fig.12 As shown, an instant messaging message viewing control 72 is displayed on the short video recommendation details interface 71; in response to a message viewing operation on the message viewing control 72, a floating window 73 is displayed on a first local area of ​​the details interface 71, and a first-sized message conversation list 74 is displayed in the floating window 73, wherein the first-sized message conversation list 74 includes a list control for conversations with unread messages.

[0116] In response to a trigger operation on the list control for conversing with "Little Bear" in the message conversation list, a conversation interface 75 for conversing with "Little Bear" is displayed in a floating window 73; when editing a message on the conversation interface 75, the size of the floating window is changed to display a larger conversation interface 76 for conversing with "Little Bear" to support display of a soft keyboard on the conversation interface.

[0117] The size of the local area (or the size of the floating window) can be automatically adjusted according to the size of the displayed content; or, it can also be adjusted based on an operation triggered by the user. Optionally, after the terminal displays the conversation interface of the first conversation in the first local area, in response to a trigger operation on the first local area, a message conversation list of a second size is displayed in the second local area of ​​the details interface, and the second size is larger than the first size; in response to a trigger operation on the list control of the first conversation, the conversation interface of the first conversation is displayed in the second local area; in response to a message reply operation triggered on the conversation interface of the first conversation, the replied message is displayed on the conversation interface of the first conversation.

[0118] For example, Fig.13 As shown, in response to an upward sliding operation on the floating window 73 in the first partial area, a larger floating window 77 is displayed in the second partial area of ​​the detail interface 71, and a second-size message conversation list 78 is displayed in the floating window 77, where the second size is significantly larger than the first size. If a trigger operation is performed on the list control of the conversation with "Little Bear" in the second-size message conversation list 78, a conversation interface with "Little Bear" is displayed in the floating window 77.

[0119] Optionally, the conversation interface of the first conversation includes an interface switching control; in response to a switching operation on the interface switching control, the details interface is switched to the conversation interface of the first conversation.

[0120] The conversation interface of the first conversation displayed in the local area (the first local area or the second local area) includes a conversation expansion control (i.e., an interface switching control); in response to a trigger operation on the conversation expansion control, the conversation interface of the first conversation is switched from the user interface to the conversation interface of the first conversation. That is, the conversation interface of the first conversation is displayed in full screen through the conversation expansion control. Exemplarily, in the message conversation list 81 displayed in the local area, in response to a trigger operation on the list control corresponding to "Little Bear" in the message conversation list 81, a conversation interface 82 with "Little Bear" is displayed in the local area, and a conversation expansion control 83 is displayed on the conversation interface 82; in response to a trigger operation on the conversation expansion control 83, the conversation interface 84 with "Little Bear" is switched from the user interface.

[0121] Optionally, after the dialog interface is switched from the local area display to the full screen display, a return operation is performed to return to the interface displaying the message conversation list in the local area, for example, Fig.14 As shown, a return control 85 is also displayed on the conversation interface 84 with "Little Bear". In response to a trigger operation on the return control 85, a detail interface is displayed, and a message conversation list 81 is displayed in a local area of ​​the detail interface.

[0122] Optionally, a conversation control of at least one contact is displayed in a local area (a first local area or a second local area); and in response to a trigger operation on a conversation control of a first contact among the at least one contact, a conversation interface with the first contact is displayed.

[0123] Optionally, a viewing control of the address book is displayed in the local area (the first local area or the second local area); in response to a viewing operation on the viewing control of the address book, an interface of the address book is displayed.

[0124] For example, Figures 13 to 14 As shown, at the bottom of the local area, there are controls for frequently used contacts and controls for the address book marked as "Contacts". The control for frequently used contacts can be used to directly enter the conversation interface with frequently used contacts, or the control for the address book can be used to enter the address book.

[0125] In some embodiments, after the terminal displays the details interface corresponding to the relevant content, the real-time call message in the pushed second conversation is displayed on the details interface, where the second conversation is a conversation between a user account logged in to a social application and a contact account; in response to a viewing operation triggered on the real-time call message, the conversation interface of the second conversation is displayed in the third local area of ​​the details interface.

[0126] For example, Fig.15As shown, a real-time call message 87 within a pushed second conversation is displayed on the details interface, and the second conversation is a conversation between a user account logged in to a social application and a contact account; in response to a viewing operation triggered on the real-time call message 87, a conversation interface 88 of the second conversation is displayed in a third local area of ​​the details interface.

[0127] Optionally, a pushed friend adding request is displayed in the details interface, where the friend adding request is a request message from a non-friend account requesting to establish a friend relationship with a user account logged in in a social application; in response to a viewing operation triggered on the friend adding request, a friend adding interface is displayed in the fourth local area of ​​the details interface.

[0128] For example, Fig.16 As shown, a pushed friend adding request 92 is displayed on the detail interface 91, and in response to a viewing operation triggered on the friend adding request 92, a friend adding interface 93 is displayed in the fourth partial area of ​​the detail interface. The friend adding interface 93 also includes an interface expansion control 94, and in response to a triggering operation on the interface expansion control 94, the detail interface 91 is switched to the friend adding interface 95. A return operation can also be triggered on the friend adding interface 95 to return to the detail interface 91.

[0129] To summarize, the interface display method of a social application provided in this embodiment displays various types of content that users are concerned about through components on the user interface. Users can quickly find content that they are interested in, and then enter the details interface of the content of interest through trigger operations on the components. For example, when an information flow component is displayed on the user interface and some content that users are interested in is pushed through the information flow component, users can quickly obtain this type of information; or users can quickly find the information they need, such as displaying an address book component on the user interface, which facilitates users' search for contacts and improves user experience.

[0130] The method can also display the message conversation list and the conversation interface of the contacts in the list in the local area of ​​the detail interface of other services, so that the user can process some instant messages, comments, etc. without exiting the detail interface while browsing the relevant content of the service. The local area also displays the conversation control of the contact and the control of the address book, and the user can quickly find some contacts from the local area, such as the displayed conversation control of the frequently used contacts, and the user can quickly find the conversation control of the frequently used contacts from the local area, and enter the conversation interface with the frequently used contacts more efficiently; the user can also enter the address book through the address book control without returning to the main interface, which improves the efficiency of viewing the address book when browsing the content of interest.

[0131] Furthermore, the terminal can also display real-time call messages and friend adding requests in a local area of ​​the details interface. Users can quickly open the interface where the real-time call message or friend adding request is located to reply to the message in time or process the friend adding request in time to avoid missing important messages.

[0132] Fig.17 A flowchart of a method for displaying an interface of a social application provided by an exemplary embodiment of the present application is shown. The method can be applied to Figure 1 The method comprises the following steps:

[0133] Step 1701, displaying the user interface of the social application.

[0134] Step 1702: display at least two components on the user interface, wherein the at least two components include an instant messaging message session component and a functional component of other services.

[0135] Step 1703: Display the message conversation list of the instant messaging in the message conversation component.

[0136] Step 1704: Display the relevant content of the business corresponding to the functional component in the functional component.

[0137] For implementation details of steps 1701 to 1704 , please refer to steps 501 to 504 , which will not be described in detail here.

[0138] Step 1705: In response to a component editing operation triggered on the user interface, display the user interface in an editing state.

[0139] The user interface includes an editing control for component layout; in response to an editing operation on the editing control for component layout, the user interface in editing state is displayed. Optionally, the at least two components include two types of components, the first type of components are components that do not support addition and deletion, and the second type of components are components that support addition and deletion.

[0140] Exemplarily, a long press operation is triggered on any component on the user interface 96, an edit control 97 (i.e., editing homepage) of the component layout is displayed, a user interface 98 in an editing state is displayed, and a second type of component on the user interface 93 displays a shaking effect, such as Fig.18 Component 99 shown in .

[0141] Step 1706: In response to a component adding operation on the user interface in the editing state, display at least one candidate component.

[0142] Step 1707: In response to an adding operation of a first component in at least one candidate component, adding the first component to the user interface in an editing state.

[0143] For example, Fig.19 As shown, a component adding control 13 is displayed on the user interface 98 in the editing state; in response to a trigger operation on the component adding control 13, a plurality of candidate components are displayed on a local area of ​​the user interface 98, such as "Space", "Small World", "Check-in", "Online Status", etc.; in response to a selection operation on the "Small World", a component display interface 15 of the "Small World" is displayed in the local area, such as a display style of the component; the component display interface 15 of the "Small World" includes an "Add Widget" control, and in response to a trigger operation on the "Add Widget" control, a component 17 of the "Small World" is displayed on the user interface 98.

[0144] Optionally, the conversation interface with the contact can be added to the user interface as a widget.

[0145] Step 1708: In response to a deletion operation on the second component on the user interface in the editing state, the second component is deleted on the user interface in the editing state.

[0146] For example, Fig.19 As shown, a delete control is also displayed on the second type of component displayed on the user interface 98 in the editing state, which is used to delete the component corresponding to the control. In response to a trigger operation on the delete control, the corresponding component is deleted on the user interface 98 in the editing state.

[0147] Step 1709: In response to a size adjustment operation on the third component on the user interface in the editing state, display the third component after the size adjustment on the user interface in the editing state.

[0148] For example, Fig. 20 In the original size, the address book component can display 5 frequently used contacts. The user adjusts the size of the address book component so that the address book component can display up to 10 frequently used contacts.

[0149] Step 1710: In response to an edit completion operation on the user interface in the editing state, display the user interface in the non-editing state.

[0150] like Fig.19 and 20 As shown, a completion control is displayed on the user interface 98 in the editing state, and in response to a trigger operation on the completion control, the user interface in the non-editing state is displayed. In the non-editing state, components cannot be added, deleted, or resized.

[0151] The terminal can also control the movement of the component on the user interface from a first display position to a second display position in response to a drag operation on the component on the user interface in the editing state; and display the component at the second display position in response to the drag end operation.

[0152] To summarize, the interface display method of a social application provided in this embodiment allows users to edit small components on the user interface, such as deleting some unnecessary components, adding some components of businesses of interest, adjusting the size of components, and changing the display position of components on the user interface, thereby laying out components according to their own habits, thereby improving the user experience.

[0153] The component design in the embodiments of the present application is introduced.

[0154] The base class definition for each widget on the application home page (i.e. the user interface) is as follows:

[0155]

[0156] The corresponding class diagram is as follows:

[0157]

[0158] size refers to the size of the component, s represents small size (1x2); m represents medium size (2x2); l represents large size (2x4).

[0159] View represents the UI interface of the container and is implemented by specific components.

[0160] Position represents the coordinates of the upper left corner of the component, where the coordinates of the upper left corner of the application homepage component container are (0,0), x increases to the left, and y increases downward. For example, Figure 4 As shown:

[0161] The coordinates corresponding to the message session component are (0,0);

[0162] The coordinates corresponding to the punch card component are (0,2);

[0163] The coordinates corresponding to the live broadcast component are (2,2).

[0164] onTap represents the click event agent of the component container. In theory, a click can trigger any logic. This application mainly uses jump logic.

[0165] mode refers to the mode of the current component. display is the normal display mode, edit is the editing mode. If it is the editing mode, the component needs to display the shaking animation and allow the built-in drag function; setting is the setting mode, in which a pop-up bubble with relevant settings needs to pop up.

[0166] onDrag represents the drag function agent, and the input parameter is the coordinates of the upper left corner vertex after dragging.

[0167] The core of the logic implementation of jumping to any page within the terminal is to define the routing protocol. Each applet or page is defined as a unique routing string. The routing definitions of all pages in the final terminal form a routing table. The corresponding page can be opened by calling the system's push method and passing in the corresponding routing name.

[0168] For example, in the four redirect cases transmitted on the product side, we maintain the defined route names corresponding to each page in the routing table, and then call Navigator.push(route) (route is the route name, such as route_aio) to adjust to the corresponding page.

[0169]

[0170] ·Quick unread entry

[0171] The quick unread entry component class is defined as follows:

[0172]

[0173] Icon represents the icon address of the entry component, unread represents the number of unread red dots of the entry, if it is 0, no red dots will be displayed. It should be noted that this component needs to be placed under the global base container (the parent class of all other component containers) so that other containers can display the entry by default. The last one is onTap, which is also a click proxy. After clicking, it opens the 'route_miniaio' route, which corresponds to the MiniAIO component.

[0174] MiniAIO components

[0175]

[0176] MiniAIO is integrated from the AIO component. Because it is directly inherited, the initialization logic, click logic, and display logic all reuse the original logic of AIO. MiniAIO extends the attribute mode, which is an enumeration of several AIOMode types, including the following values, which determines the height of MiniAIO:

[0177] AIOModeMini: the shortest AIO display, the default state;

[0178] AIOModeLarge: Longer AIO display. In AIOModeMini state, MiniAIO binds to the onTouch event. If an upward drag event is received, it enters this state.

[0179] AIOModelFull: Full-screen AIO display, entered through the click event logic of the maximize icon in the upper right corner.

[0180] Push within the terminal

[0181] The PushMessage protocol is defined as follows:

[0182]

[0183] Type: MessageType represents the type of push message, and supports two types: IMMessage (IM message) and AddFriendEvent (add friend event).

[0184] Title: The content displayed in bold in the first line of the Push pop-up window.

[0185] content: The content displayed in the second line of text in the Push pop-up window.

[0186] Icon: Push the image on the left side of the pop-up window to display the content.

[0187] Time: The time when the Push pop-up window is triggered.

[0188] Extra: Push pop-up window additional data. The extra data of each type is different. For example, the additional data of IMMessage is the user uid and number of unread messages of the IM message; the additional data of AddFriendEvent is the uid of the added person.

[0189] onTap: Click the PushMessage event delegate.

[0190] It should be noted that the Footer part (on the right) of different types of PushMessage is different. There are two types of PushMessage, and the alienated UI is directly built into the component. If there are too many subsequent types, different types of PushMessage can be defined as subclasses to perform alienated Push.

[0191] Component Editing Mode

[0192] That is, the implementation of component custom layout capabilities.

[0193] Long press to enter editing mode: MainPageWidget needs to add an onLongTap event delegate. When long pressing, set the mode to the 'setting' state and pop up a setting pop-up window.

[0194] Edit mode shaking: When the mode is 'edit', each component plays a shaking animation.

[0195] Add component: When mode is 'edit', the Add component button is displayed in the upper left corner of the MainPage. When clicked, all components in the terminal are displayed. The components in the terminal are maintained using a global list, and the data structure is as follows:

[0196]

[0197] Drag component: When mode is 'edit', release the onDrag event proxy of MainPageWidget to allow the user to drag. When the event ends, the component obtains the coordinates of its upper left corner and converts them into logical coordinate values, and then sets position to this value to complete the logic of dragging to change the position.

[0198] The following is an embodiment of the device of the present application. For details not described in detail in the embodiment of the device, reference can be made to the corresponding records in the above method embodiment, and they will not be repeated herein.

[0199] Fig.21 A schematic diagram of the structure of an interface display device for a social application provided by an exemplary embodiment of the present application is shown. The device can be implemented as all or part of a terminal through software, hardware, or a combination of both. The device includes:

[0200] Display module 2101, used to display the user interface of social applications;

[0201] A display module, configured to display at least two components on a user interface, wherein the at least two components include an instant messaging message session component and a functional component of other services, wherein the other services refer to services other than message sessions provided by social applications;

[0202] The display module is used to display the message conversation list of instant messaging in the message conversation component; and to display the relevant content of the business corresponding to the functional component in the functional component.

[0203] In some embodiments, the display module 2101 is used to:

[0204] Displaying first related content of a first business corresponding to the first functional component in the first functional component;

[0205] When the first service is updated, the first related content in the first functional component is updated to the second related content, where the second related content is content related to the first service update.

[0206] In some embodiments, the display module 2101 is used to:

[0207] Displaying first related content of a first business corresponding to the first functional component in the first functional component;

[0208] When the second service is updated, the first functional component is replaced by the second functional component, and the second functional component is displayed with third related content, which is content service related to the second service update.

[0209] In some embodiments, the display module 2101 is used to display a detail interface corresponding to the relevant content in response to a viewing operation on the relevant content on the functional component.

[0210] In some embodiments, the details interface includes an instant messaging message viewing control;

[0211] Display module 2101 is used for:

[0212] In response to a message viewing operation on the message viewing control, displaying a message conversation list of a first size in a first partial area of ​​the details interface, wherein the message conversation list of the first size includes a list control of a conversation having unread messages;

[0213] In response to a trigger operation on a list control of a first conversation in the message conversation list, displaying a conversation interface of the first conversation in the first local area;

[0214] In response to a message reply operation triggered on the conversation interface of the first conversation, a replied message is displayed on the conversation interface of the first conversation.

[0215] In some embodiments, after displaying the dialog interface of the first dialog in the first local area, the display module 2101 is used to:

[0216] In response to a trigger operation on the first partial area, displaying a message conversation list of a second size in a second partial area of ​​the details interface, the second size being larger than the first size;

[0217] In response to a trigger operation on the list control of the first conversation, displaying the conversation interface of the first conversation in the second local area;

[0218] In response to a message reply operation triggered on the conversation interface of the first conversation, a replied message is displayed on the conversation interface of the first conversation.

[0219] In some embodiments, the display module 2101 is used to:

[0220] Displaying a conversation control of at least one contact in the first local area or the second local area;

[0221] In response to a trigger operation on a conversation control of a first contact among the at least one contact, a conversation interface with the first contact is displayed.

[0222] In some embodiments, the display module 2101 is used to:

[0223] Displaying a viewing control of the address book in the first partial area or the second partial area;

[0224] In response to a viewing operation on the viewing control of the address book, the interface of the address book is displayed.

[0225] In some embodiments, the conversation interface of the first conversation includes an interface switching control;

[0226] The display module 2101 is used to switch from the detail interface to the dialog interface of the first dialog in response to a switching operation on the interface switching control.

[0227] In some embodiments, after displaying the details interface corresponding to the relevant content, the display module 2101 is used to:

[0228] Displaying a real-time call message in a pushed second conversation on the details interface, where the second conversation is a conversation between a user account logged in to a social application and a contact account;

[0229] In response to a viewing operation triggered on the real-time call message, a conversation interface of the second conversation is displayed in a third partial area of ​​the details interface.

[0230] In some embodiments, the display module 2101 is used to:

[0231] Display the pushed friend adding request on the details interface. The friend adding request is a request message from a non-friend account to establish a friend relationship with the user account logged in in the social application;

[0232] In response to a viewing operation triggered on the friend adding request, a friend adding interface is displayed in a fourth partial area of ​​the details interface.

[0233] In some embodiments, the functional components include components of an address book;

[0234] The display module 2101 is used to display the interface of the address book in response to a viewing operation on the address book component.

[0235] In some embodiments, the functional components include at least two service-integrated components;

[0236] The display module 2101 is used to display, in response to a viewing operation on a component integrated with at least two services, a display interface of at least two function controls corresponding to at least two services provided by a social application.

[0237] In some embodiments, the functional components include an information flow component;

[0238] The display module 2101 is used to display the presentation interface of the pushed information flow in response to the viewing operation on the information flow component.

[0239] In some embodiments, the message conversation component includes a list expansion control;

[0240] The display module 2101 is used to display the interface of the message conversation list in response to an expansion operation triggered on the list expansion control.

[0241] In some embodiments, the message conversation list includes a list control for at least one conversation;

[0242] The display module 2101 is used to display the dialog interface of the third dialog in response to a viewing operation on the list control of the third dialog.

[0243] In some embodiments, the display module 2101 is used to return from the conversation interface of the third conversation to the interface of the message conversation list in response to a return operation on the conversation interface of the third conversation.

[0244] In some embodiments, the display module 2101 is used to:

[0245] In response to a component editing operation triggered on the user interface, displaying the user interface in an editing state;

[0246] In response to a component adding operation on the user interface in an editing state, displaying at least one candidate component;

[0247] In response to an adding operation of a first component in at least one candidate component, adding the first component to the user interface in an editing state;

[0248] In response to an edit completion operation on the user interface in the edit state, a user interface in the non-edit state is displayed.

[0249] In some embodiments, the display module 2101 is used to delete the second component on the user interface in the editing state in response to a deletion operation on the second component on the user interface in the editing state.

[0250] In some embodiments, the display module 2101 is used to display the resized third component on the user interface in the editing state in response to a resizing operation on the third component on the user interface in the editing state.

[0251] In some embodiments, the at least two components include a first type of component and a second type of component;

[0252] The display position of the first type of components on the user interface is fixed;

[0253] The display position of the second type of components on the user interface is displayed based on the update time of the related content corresponding to the second type of components.

[0254] Fig. 22The block diagram of a computer device 2200 provided by an exemplary embodiment of the present application is shown. The computer device 2200 may be a portable mobile terminal, such as a smart phone, a tablet computer, an MP3 player, or an MP4 player. The computer device 2200 may also be called a user device, a portable terminal, or other names.

[0255] Typically, the computer device 2200 includes a processor 2201 and a memory 2202 .

[0256] The processor 2201 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 2201 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). The processor 2201 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 2201 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 2201 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0257] The memory 2202 may include one or more computer-readable storage media, which may be tangible and non-transitory. The memory 2202 may also include a high-speed random access memory, and a non-volatile memory, such as one or more disk storage devices, flash memory storage devices. In some embodiments, the non-transitory computer-readable storage medium in the memory 2202 is used to store at least one instruction, which is used to be executed by the processor 2201 to implement the interface display method of the social application provided in this application.

[0258] In some embodiments, the computer device 2200 may further include: a peripheral device interface 2203 and at least one peripheral device. Specifically, the peripheral device includes: at least one of a radio frequency circuit 2204 , a touch display screen 2205 , and a power supply 2206 .

[0259] The peripheral device interface 2203 may be used to connect at least one peripheral device related to I / O (Input / Output) to the processor 2201 and the memory 2202. In some embodiments, the processor 2201, the memory 2202, and the peripheral device interface 2203 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 2201, the memory 2202, and the peripheral device interface 2203 may be implemented on a separate chip or circuit board, which is not limited in this embodiment.

[0260] The radio frequency circuit 2204 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The radio frequency circuit 2204 communicates with the communication network and other communication devices through electromagnetic signals. The radio frequency circuit 2204 converts the electrical signal into an electromagnetic signal for transmission, or converts the received electromagnetic signal into an electrical signal. Optionally, the radio frequency circuit 2204 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, and the like. The radio frequency circuit 2204 can communicate with other terminals through at least one wireless communication protocol. The wireless communication protocol includes, but is not limited to: the World Wide Web, a metropolitan area network, an intranet, various generations of mobile communication networks (2G, 3G, 4G and 5G), a wireless local area network and / or a WiFi (Wireless Fidelity) network. In some embodiments, the radio frequency circuit 2204 may also include circuits related to NFC (Near Field Communication), which is not limited in this application.

[0261] The touch display screen 2205 is used to display a UI (User Interface). The UI may include graphics, text, icons, videos, and any combination thereof. The touch display screen 2205 also has the ability to collect touch signals on the surface or above the surface of the touch display screen 2205. The touch signal may be input to the processor 2201 as a control signal for processing. The touch display screen 2205 is used to provide virtual buttons and / or virtual keyboards, also known as soft buttons and / or soft keyboards. In some embodiments, the touch display screen 2205 may be one, and the front panel of the computer device 2200 is set; in other embodiments, the touch display screen 2205 may be at least two, which are respectively set on different surfaces of the computer device 2200 or are folded; in still other embodiments, the touch display screen 2205 may be a flexible display screen, which is set on a curved surface or a folded surface of the computer device 2200. Even, the touch display screen 2205 may also be set to a non-rectangular irregular figure, i.e., a special-shaped screen. The touch display screen 2205 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

[0262] The power supply 2206 is used to power various components in the computer device 2200. The power supply 2206 can be an alternating current, a direct current, a disposable battery, or a rechargeable battery. When the power supply 2206 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged through a wired line, and a wireless rechargeable battery is a battery that is charged through a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0263] Those skilled in the art will understand that Fig. 22 The structure shown in the figure does not constitute a limitation on the computer device 2200, and the computer device 2200 may include more or fewer components than shown in the figure, or combine some components, or adopt a different component arrangement.

[0264] The present application also provides a computer device, which includes: a processor and a memory, wherein the storage medium stores at least one program, and the at least one program is loaded and executed by the processor to implement the interface display method of the social application provided by the above-mentioned method embodiments.

[0265] The present application also provides a computer-readable storage medium, in which at least one program is stored. The at least one program is loaded and executed by a processor to implement the interface display method of the social application provided by the above-mentioned method embodiments.

[0266] The present application also provides a computer program product. When the computer program product is run on a computer, the computer executes the interface display method of the social application provided by the above-mentioned method embodiments.

[0267] It should be understood that the "plurality" mentioned in this article refers to two or more. "And / or" describes the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the associated objects are in an "or" relationship.

[0268] A person skilled in the art will understand that all or part of the steps to implement the above embodiments may be accomplished by hardware or by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, and the above-mentioned storage medium may be a read-only memory, a disk or an optical disk, etc.

[0269] The above description is only an optional embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application shall be included in the protection scope of the present application.

Claims

1. A method for displaying an interface of a social application, characterized in that: The method comprises: Display the user interface of social applications; Displaying at least two components on the user interface, the at least two components including an instant messaging message session component and a functional component of other services, the other services referring to services other than message sessions provided by the social application; The message conversation list of the instant communication is displayed in the message conversation component; and the relevant content of the business corresponding to the functional component is displayed in the functional component.

2. The method according to claim 1, characterized in that The displaying, within the functional component, the content related to the business corresponding to the functional component includes: Displaying first related content of a first business corresponding to the first functional component in the first functional component; When the first service is updated, the first related content in the first functional component is updated to second related content, where the second related content is content related to the first service update.

3. The method according to claim 1, characterized in that The displaying, within the functional component, the content related to the business corresponding to the functional component includes: Displaying first related content of a first business corresponding to the first functional component in the first functional component; When the second service is updated, the first functional component is replaced by a second functional component, and the second functional component displays third related content, which is a content service related to the second service update.

4. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: In response to a viewing operation on the related content on the functional component, a detail interface corresponding to the related content is displayed.

5. The method according to claim 4, characterized in that The details interface includes a message viewing control for the instant messaging; The method further comprises: In response to a message viewing operation on the message viewing control, displaying a message conversation list of a first size in a first partial area of ​​the details interface, wherein the message conversation list of the first size includes a list control of conversations having unread messages; In response to a trigger operation on a list control of a first conversation in the message conversation list, displaying a conversation interface of the first conversation in the first local area; In response to a message reply operation triggered on the conversation interface of the first conversation, a reply message is displayed on the conversation interface of the first conversation.

6. The method according to claim 5, characterized in that After displaying the conversation interface of the first conversation in the first local area, the method further includes: In response to a trigger operation on the first partial area, displaying a message conversation list of a second size in a second partial area of ​​the details interface, the second size being larger than the first size; In response to a trigger operation on the list control of the first conversation, displaying a conversation interface of the first conversation in the second local area; In response to a message reply operation triggered on the conversation interface of the first conversation, a reply message is displayed on the conversation interface of the first conversation.

7. The method according to claim 5 or 6, characterized in that: The method further comprises: Displaying a conversation control of at least one contact in the first local area or the second local area; In response to a trigger operation on a conversation control of a first contact among the at least one contact, a conversation interface with the first contact is displayed.

8. The method according to claim 5 or 6, characterized in that: The method further comprises: Displaying a viewing control of the address book in the first local area or the second local area; In response to a viewing operation on a viewing control of the address book, an interface of the address book is displayed.

9. The method according to claim 4, characterized in that After displaying the details interface corresponding to the related content, the method further includes: Displaying a real-time call message in a pushed second conversation on the details interface, where the second conversation is a conversation between a user account logged in to the social application and a contact account; In response to a viewing operation triggered on the real-time call message, a conversation interface of the second conversation is displayed in a third local area of ​​the details interface.

10. The method according to claim 4, characterized in that The method further comprises: Displaying a pushed friend adding request on the details interface, wherein the friend adding request is a request message from a non-friend account to establish a friend relationship with a user account logged in in the social application; In response to a viewing operation triggered on the friend adding request, a friend adding interface is displayed in a fourth partial area of ​​the detail interface.

11. The method according to claim 4, characterized in that The functional components include components of the address book; The step of displaying a detail interface corresponding to the related content in response to the viewing operation of the related content on the functional component includes: In response to a viewing operation on a component of the address book, an interface of the address book is displayed.

12. The method according to claim 4, characterized in that The functional components include information flow components; The step of displaying a detail interface corresponding to the related content in response to the viewing operation of the related content on the functional component includes: In response to a viewing operation on the information stream component, a presentation interface of the pushed information stream is displayed.

13. The method according to any one of claims 1 to 3, characterized in that: The message conversation component includes a list expansion control; The method further comprises: In response to an expansion operation triggered on the list expansion control, an interface of the message conversation list is displayed.

14. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: In response to a component editing operation triggered on the user interface, displaying the user interface in an editing state; In response to a component adding operation on the user interface in the editing state, displaying at least one candidate component; In response to an adding operation of a first component in the at least one candidate component, adding the first component to the user interface in the editing state; In response to an edit completion operation on the user interface in the edit state, the user interface in the non-edit state is displayed.

15. The method according to claim 14, characterized in that The method further comprises: In response to a deletion operation on the second component on the user interface in the editing state, the second component is deleted on the user interface in the editing state.

16. The method according to claim 14, characterized in that The method further comprises: In response to a size adjustment operation on the third component on the user interface in the editing state, the third component after the size adjustment is displayed on the user interface in the editing state.

17. An interface display device for a social application, characterized in that: The device comprises: A display module, used to display the user interface of a social application; The display module is used to display at least two components on the user interface, wherein the at least two components include an instant messaging message session component and a functional component of other services, wherein the other services refer to services other than message sessions provided by the social application; The display module is used to display the message conversation list of the instant messaging in the message conversation component; and to display the relevant content of the business corresponding to the functional component in the functional component.

18. A computer device, characterized in that: The computer device includes a processor and a memory, wherein the memory stores at least one program, and the at least one program is loaded and executed by the processor to implement the interface display method of the social application as described in any one of claims 1 to 16.

19. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores at least one program, and the at least one program is loaded and executed by the processor to implement the interface display method of the social application as described in any one of claims 1 to 16.

20. A computer program product, characterized in that The computer program product includes computer instructions, which are stored in a computer-readable storage medium; a processor of a computer device reads the computer instructions from the computer-readable storage medium, and when the processor executes the computer instructions, the interface display method of a social application as described in any one of claims 1 to 16 is implemented.

Images