CN112492104B - Interface display method and device and mobile terminal - Google Patents
Interface display method and device and mobile terminal Download PDFInfo
- Publication number
- CN112492104B CN112492104B CN202011354236.7A CN202011354236A CN112492104B CN 112492104 B CN112492104 B CN 112492104B CN 202011354236 A CN202011354236 A CN 202011354236A CN 112492104 B CN112492104 B CN 112492104B
- Authority
- CN
- China
- Prior art keywords
- background image
- picture
- interface
- background
- target
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q50/00—Systems or methods specially adapted for specific business sectors, e.g. utilities or tourism
- G06Q50/01—Social networking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
- G06F2203/048—Indexing scheme relating to G06F3/048
- G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
Abstract
The invention discloses an interface display method which is suitable for being executed in a mobile terminal, and the method comprises the following steps: displaying a target interface on an application of the mobile terminal, wherein the target page comprises an upper background picture and a text area below the background picture; responding to the gliding operation of the background image, and judging whether the aspect ratio of the target interface is smaller than that of the background image; if so, displaying a partial image which is not displayed in the background image along with the sliding operation; otherwise, the height-width ratio of the background image is kept unchanged, and the background image with the corresponding width is cut out according to the height of the background image after being pulled down for amplified display. The invention also discloses a corresponding interface display device and a mobile terminal.
Description
Technical Field
The invention relates to the field of mobile internet, in particular to the field of mobile interaction for user interaction on a mobile terminal.
Background
With the development of the mobile internet, more and more community mobile applications, such as knowledge star mobile applications, come into play. A social mobile application refers to a platform that allows users to post content, ask questions to other users, etc., within which the users can conduct chat, posting, praise, comment, forward, etc. activities. With the progress of network technology and the development of user experience theory, besides the basic interaction function, the customized community head portrait and the community background map function which can additionally improve the entertainment and the richness of the product are added to many products. Multiple sets of pictures can be replaced in different scenes, head portraits and background pictures of products can be used, and the users can also freely select the pictures. However, in the display process of the sliding operation, the current interface picture always has the phenomenon of inconsistent proportion, and the user experience is influenced. Therefore, it is desirable to provide a picture display method with better experience.
Disclosure of Invention
To this end, the present invention provides an interface display method, apparatus and mobile terminal in an effort to solve or at least alleviate the above-existing problems.
According to an aspect of the present invention, there is provided an interface display method adapted to be executed in a mobile terminal, the method including: displaying a target interface on an application of the mobile terminal, wherein the target page comprises an upper background picture and a text area below the background picture; responding to the gliding operation of the background image, and judging whether the aspect ratio of the target interface is smaller than that of the background image; if so, displaying a partial image which is not displayed in the background image along with the sliding operation; otherwise, the height-width ratio of the background image is kept unchanged, and the background image with the corresponding width is cut out according to the height of the background image after being pulled down for amplified display.
Optionally, the interface interaction method according to the present invention further includes: and in response to the finger releasing operation of the user, restoring the current background image to the state of the background image when the target interface is displayed for the first time.
Optionally, the interface interaction method according to the present invention further includes: and responding to the upglide operation of the user, gradually covering the text area upwards on the background image, and performing fuzzy processing on the current background image and displaying the background image when the text area touches the navigation bar of the application.
Optionally, in the interface interaction method according to the present invention, the text area touches the navigation bar of the application, and is determined according to the following steps: monitoring the upward sliding operation of the page, calculating the distance between the top of the text area and the bottom of the navigation bar, and determining that the text area touches the applied navigation bar when the distance is 0.
Optionally, in the interface interaction method according to the present invention, the blurring process is a gaussian blurring process, the gaussian blurring process uses a background color with a white transparency of a in the background image, and the blurring radius is b.
Optionally, the interface interaction method according to the present invention further includes: and acquiring the head portrait picture uploaded by the user, and updating the target community head portrait displayed on the search page and the background picture in the target interface into the uploaded head portrait picture.
Optionally, in the interface interaction method according to the present invention, the step of updating both the community avatar displayed on the search page and the background image in the target interface to the uploaded avatar image includes: determining a subscriber of a target community to which the head portrait picture belongs according to a preset subscriber list; and sending an update notification to the determined subscriber, wherein the update notification comprises the uploaded picture, so that the subscriber updates the picture according to the picture in the update notification.
Optionally, in the interface interaction method according to the present invention, the update notification includes a community identifier where the update occurs, and the step of the subscriber updating the picture according to the picture in the update notification includes: and when the subscriber judges that the community identification of the subscriber is consistent with the community identification in the updating notice, updating the picture according to the picture in the updating notice.
Optionally, in the interface interaction method according to the present invention, the target interface includes a background interface after the user joins in the target community and a preview interface when the user does not join in the target community, and the avatar of the target community is a thumbnail of the background map.
Optionally, in the interface interaction method according to the present invention, for the target community avatar, a is 10%, and b is 5 mm; for the background plot, a is 12% and b is 15 mm.
According to another aspect of the present invention, there is provided an interface display apparatus adapted to reside in a mobile terminal, the apparatus comprising: the first display module is suitable for displaying a target interface on an application of the mobile terminal, and a target page comprises an upper background picture and a text area below the background picture; the judging module is suitable for responding to the gliding operation of the background image and judging whether the aspect ratio of the target interface is smaller than that of the background image to obtain a judging result; and the second display module is suitable for displaying a partial image which is not displayed in the background image along with the sliding operation when the judgment result is yes, keeping the aspect ratio of the background image unchanged when the judgment result is no, and cutting out the background image with the corresponding width according to the height of the background image after being pulled down for amplifying and displaying.
According to still another aspect of the present invention, there is provided a mobile terminal including: at least one processor; and a memory storing program instructions, wherein the program instructions are configured to be executed by the at least one processor, the program instructions comprising instructions for performing the interface display method as described above.
According to still another aspect of the present invention, there is provided a readable storage medium storing program instructions that, when read and executed by a mobile terminal, cause the mobile terminal to perform the interface display method as described above.
According to the technical scheme of the invention, the background pictures of the home page in the application are always fully displayed in a normal proportion, and each picture has a corresponding normal size and a corresponding aspect ratio. When the home page is slid downwards, the height of the picture can be continuously increased along with the sliding, if the aspect ratio of the home page interface is smaller than the aspect ratio of the picture, namely, the height and the width of the current background picture are not enough to completely display the picture, the picture can not be enlarged by the sliding operation at the moment, and the picture can be continuously and fully displayed along with the sliding operation. When the image slides down to a certain critical point, the height and width of the background display area are the same as the height and width ratio of the normal size of the image, and the image is completely displayed at the moment. If the picture slides downwards continuously, the picture can be amplified and displayed according to the current height, so that the picture is kept full and displayed in a normal proportion all the time, and the user experience is improved.
Drawings
To the accomplishment of the foregoing and related ends, certain illustrative aspects are described herein in connection with the following description and the annexed drawings, which are indicative of various ways in which the principles disclosed herein may be practiced, and all aspects and equivalents thereof are intended to be within the scope of the claimed subject matter. The above and other objects, features and advantages of the present disclosure will become more apparent from the following detailed description read in conjunction with the accompanying drawings. Throughout this disclosure, like reference numerals generally refer to like parts or elements.
Fig. 1 shows a schematic diagram of a mobile communication system 100 according to an embodiment of the invention;
FIG. 2 shows a schematic diagram of a mobile terminal 200 according to one embodiment of the invention;
FIG. 3 illustrates a flow diagram of an interface display method 300 according to one embodiment of the invention;
4A-4C illustrate schematic diagrams of a search interface, a background interface, and a preview interface, respectively, according to one embodiment of the invention;
FIGS. 5A-5C respectively illustrate interface diagrams at different glide positions according to one embodiment of the present invention;
FIGS. 6A-6C are diagrams illustrating a background map magnified display, a text area overlaid display, and a Gaussian blur, respectively, in accordance with one embodiment of the present invention;
FIGS. 7A and 7B show schematic views of a quiz button and quiz card, respectively, according to one embodiment of the invention; and
fig. 8 illustrates a block diagram of an interface display apparatus 800 according to an embodiment of the present invention.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
Fig. 1 shows a schematic diagram of a mobile communication system 100 according to an embodiment of the invention. As shown in fig. 1, the mobile communication system 100 includes a plurality of mobile terminals 200 and a server 120. One or more mobile applications 110 are installed on the mobile terminal 200. The owner of mobile terminal 200 will typically register as a user of mobile application 110. The mobile application 110 may be coupled to the server 120 using mobile communication functions provided by the mobile terminal 200 and communicate with the mobile application 110 on other mobile terminals 200 via the server 120.
The mobile application 110 may be various applications. For example, social or social applications for two or more users to communicate with each other, for one user to view information posted by other users. The present invention is not limited to the specific use of the mobile application 110, and all applications that allow a user to view static or dynamic content published by himself or by other users via the mobile application 110 are within the scope of the present invention.
According to one embodiment of the invention, the mobile application 110 may be a non-instant messaging application. In the non-instant messaging application, one user can approve, share, collect and enjoy static content or dynamic content released by another user through the application. The user may share the content of various forms published by another user to other mobile applications 110 that the user has downloaded and registered, or the user may share the content of various forms published by another user to another user who has added as a friend, or the user may share the content of various forms published by another user to a group that the user has joined. In addition, optionally, whether the other party is added as a friend or not between the users, the static content or the dynamic content of the other party can be checked with each other. The multiple users can also form a community, the content released by the users in one community can be received by other users in the same community, and the content can be viewed, approved, shared and the like, so that the point-to-many content sharing is formed.
For example, in a knowledge star mobile application, a user may apply for creating a star round table, which may be referred to as a group, each group including a plurality of members, such as star masters, partners, guests, and the like. The users who create the celestial sphere round table are the star masters, each celestial sphere round table corresponds to one theme, other users interested in the theme can add the celestial sphere round table corresponding to the theme, and content and questions corresponding to the theme are published in the celestial sphere round table. The content released by the user on the planet round table can be received by other users on the planet round table, and the content can be viewed, praised, shared and the like. The star owner can issue contents and questions to the subject of the round table, and also has the authority of issuing work to the user of the round table.
After being installed in the mobile terminal 200, the mobile application 110 is executed on the mobile terminal 200 using a processing unit provided in the mobile terminal 200, and provides an interface for interaction with a user using a touch and display screen, an audio and video playing unit, and the like provided in the mobile terminal 200, to present corresponding contents to the user.
The mobile application 110 may be installed on the mobile terminal 200 by the user after the user purchases the mobile terminal 200, or may be included in the mobile terminal 200 by default at the time of factory shipment by the mobile terminal 200. The present invention is not limited to the specific form in which the mobile application 110 is deployed on the mobile terminal 200, and all ways in which the mobile application 110 can be deployed on the mobile terminal 200 and the claimed method can be implemented by using the components provided by the mobile terminal 200 are within the scope of the present invention.
Fig. 2 shows a block diagram of a mobile terminal 200 according to an embodiment of the present invention. The mobile terminal 200 may include a memory interface 202, one or more data processors, image processors and/or central processing units 204, and a peripheral interface 206.
The memory interface 202, the one or more processors 204, and/or the peripherals interface 206 can be discrete components or can be integrated in one or more integrated circuits. In the mobile terminal 200, the various elements may be coupled by one or more communication buses or signal lines. Sensors, devices, and subsystems can be coupled to peripheral interface 206 to facilitate a variety of functions.
For example, a motion sensor 210, a light sensor 212, and a distance sensor 214 may be coupled to the peripheral interface 206 to facilitate directional, lighting, and ranging functions. Other sensors 216 may also be coupled to the peripheral interface 206, such as a positioning system (e.g., a GPS receiver), an acceleration sensor, a temperature sensor, a biometric sensor, or other sensing device, to facilitate related functions.
The audio subsystem 226 may be coupled with a speaker 228 and a microphone 230 to facilitate voice-enabled functions, such as voice recognition, voice replication, digital recording, and telephony functions. The I/O subsystem 240 may include a touchscreen controller 242 and/or one or more other input controllers 244. The touch screen controller 242 may be coupled to a touch screen 246. For example, the touch screen 246 and touch screen controller 242 may detect contact and movement or pauses made therewith using any of a variety of touch sensing technologies, including but not limited to capacitive, resistive, infrared, and surface acoustic wave technologies.
One or more other input controllers 244 can be coupled to other input/control devices 248, such as one or more buttons, rocker switches, thumbwheels, infrared ports, USB ports, and/or pointing devices such as styluses. The one or more buttons (not shown) may include up/down buttons for controlling the volume of the speaker 228 and/or the microphone 230.
The memory interface 202 may be coupled with a memory 250. The memory 250 may include high-speed random access memory and/or non-volatile memory, such as one or more magnetic disk storage devices, one or more optical storage devices, and/or flash memory (e.g., NAND, NOR). The memory 250 may store an operating system 252, such as an operating system like Android, iOS, Linux, or Windows Phone. The operating system 252 may include instructions for handling basic system services and for performing hardware dependent tasks. The memory 250 may also store an application 254 (i.e., an application program, hereinafter referred to as an application). While the mobile terminal is running, the operating system 252 is loaded from memory 250 and executed by the processor 204. The application 254, when running, is also loaded from the memory 250 and executed by the processor 204. The application 254 runs on top of an operating system and utilizes the operating system and interfaces provided by the underlying hardware to implement various user-desired functions, such as instant messaging, web browsing, picture management, video playback, and the like. The application 254 may be provided independently of the operating system, or may be provided by the operating system itself, and includes various application software, such as a community application software knowledge star, a social application software microblog, a tremble, and the like, and also includes various application software for playing a video, playing a game, and the like, and may also include system-owned application programs such as a photo album, a calculator, a recording pen, and the like. In addition, a driver module may also be added to the operating system when the application 254 is installed in the mobile terminal 200.
The program for executing the interface display method 300 provided by the embodiment of the invention is one of the applications 254. In some embodiments, the mobile terminal 200 is configured to perform the interface display method 300 according to the present invention.
FIG. 3 shows a schematic flow diagram of an interface display method 300 according to one embodiment of the invention. As shown in fig. 3, the method begins at step S310.
In step S310, a target interface is displayed on an application of the mobile terminal, where the target page includes an upper background image and a text area below the background image, and the text area includes text content.
The target interface comprises a background interface after the user joins the target community and a preview interface when the user does not join the target community.
FIG. 4A is a diagram illustrating a target interface after a user joins a target community, where a "go to ask" button facilitates the user asking questions of the target community members. Fig. 4B is a schematic diagram of a preview interface when the user does not join the target community interface, which is mainly convenient for the user to preview the main content of the community in advance. The target interface is a home page display page of a 'learning camp' group, a background image area is arranged above the target interface, text content is arranged below the target interface, and an area below a lower boundary of a default background image is a text area. In addition, there is also a target community avatar displayed on the search page, and as shown in fig. 4C, the target community avatar is actually a picture displayed when the community is contracted, that is, a thumbnail of the background image.
Subsequently, in step S320, in response to the slide-down operation on the background map, it is determined whether the aspect ratio of the target interface is smaller than the aspect ratio of the background map, that is, the aspect ratio of the attribute of the background map itself.
If yes, it means that the height and width of the current background image are not enough to complete the picture display, so in step S330, a partial image not displayed in the background image is displayed along with the sliding down operation. As shown in fig. 5A, when the picture is not completely displayed, the background picture representing the complete picture overlaps with the text area, and the picture is not enlarged by the sliding down operation, so that the picture is continuously displayed more fully. As the background image area continuously slides down, the height displayed by the background image becomes higher and higher, and when the critical point is reached, the aspect ratio of the background display area is the same as the aspect ratio of the normal size of the picture, and the picture is completely displayed at this time, as shown in fig. 5B.
Otherwise, in step S340, the height-to-width ratio of the background image is kept unchanged, and the background image with the corresponding width is cut out according to the height of the background image after being pulled down for enlarged display. Here, when the image continues to slide down from the critical point, the aspect ratio of the display area of the background image is rather smaller than the aspect ratio of the size of the image itself, and at this time, if the image is displayed in a normal size, a gap may appear in the display area, which affects the user experience. Therefore, in order to keep the picture full and keep normal size display, the slide-down operation after the critical point starts to enlarge and display the picture, as shown in fig. 5C, although parts of two sides of the picture are blocked and cannot be displayed, the full and normal size display of the picture can be ensured, and the user experience is improved.
The core code is as follows:
v/Picture keeping Normal size display
self.contentMode＝UIViewContentModeScaleAspectFill；
Monitoring the sliding of the interface and constantly changing the display area of the background image according to the sliding
[_groupBackgroundImageView mas_updateConstraints:^(MASConstraintMaker*make){
make.height.mas_equalTo(Group_Background_Image_View_Height +_groupBackgroundViewHeightOffset)；
According to one embodiment of the invention, the method 300 further comprises the steps of: after the user slides down, the current background image is restored upwards to the state of the background image when the target interface is displayed for the first time in response to the finger releasing operation of the user. That is, the background map after the pull-down is restored to the state shown in fig. 4A or 4B.
According to one embodiment of the invention, the method 300 further comprises the steps of: and responding to the upglide operation of the user, gradually covering the text content upwards to the background image, and performing fuzzy processing on the current background image and displaying the background image when the text area touches the navigation bar of the application. Here, the upward sliding operation of the page may be monitored, and the distance between the top of the text area and the bottom of the navigation bar may be calculated, and when the distance is 0, it is determined that the text area touches the navigation bar of the application.
Fig. 6A shows an effect diagram in which the background diagram is displayed in an enlarged manner during the sliding down process, fig. 6B shows an effect diagram in which the text area covers the background diagram above when the user slides up, and fig. 6C shows an effect diagram in which the background diagram is displayed in a blurred manner when the text area touches the navigation bar. In general, the blurring process is a gaussian blurring process that takes a background color with white transparency of a in the background image and a blur radius of b. Namely, the background color with white transparency of a is utilized to carry out Gaussian blur processing with a blur radius of b, and the processed ground glass effect is covered on the corresponding screenshot, thereby realizing the screenshot which is blurred by Gaussian. Preferably, for the target community avatar, a is 10%, b is 5 mm; in the background figure, a is 12% and b is 15mm, but the present invention is not limited to this.
The core code is as follows:
creating a Gaussian blur masking layer
// creating self-packaged Gaussian blur specific Components
_navBlurView＝[[CustomBlurEffectView alloc]init]；
V/use of white effect to make Gaussian blur colors
_navBlurView.colorTint＝colorHex(0xffffff)；
// transparency 12%
_navBlurView.colorTintAlpha＝0.12；
// fuzzy radius set to 15
_navBlurView.blurRadius＝15；
It can be seen that the fuzzy display here extracts the main background color in the background image, and then performs the pure color display. When the theme color of the original image is blue, the original image can display pure blue with certain transparency after Gaussian blur; when the theme color of the original image is green, the original image can display pure green with certain transparency after Gaussian blur; the picture before and after processing does not have too large color difference. And at the moment, the text area directly reaches the navigation bar, which represents that the user mainly focuses on the text area at present, so that after the background image is subjected to pure color display of the same color system, the interference on the user browsing page can be reduced, and the user experience is improved.
According to one embodiment, a floating question button is arranged in the target interface, when a text area touches the question button in the upward sliding process, the question button is pushed back to move upwards together, and the question button can be pushed up to touch a navigation bar at the farthest. When sliding up is continued, the question button is removed from the interface.
In addition, it should be understood that most existing products can support custom head portraits and community background maps, which can be composed of different images, and can give users different visual feelings. When the product is used, different communities also have different head portraits and background pictures, but the custom head portraits do not accord with the community background pictures, the control on the consistency of the product is abandoned, the head portraits checked by users can not accord with the community background pictures, the information received by the users can be disturbed, the users can generate unpredictable behaviors, and the learning cost of the users is increased.
Therefore, in the method 300 of the present invention, the avatar image uploaded by the user may also be obtained, and both the avatar of the target community and the background image in the target interface displayed on the search page are updated to the uploaded avatar image. Generally, when editing community data, an administrator can select a picture to be uploaded in a self-defined manner, and after the picture is successfully uploaded, the picture is synchronously updated to all terminals concerning the target group. Here, the synchronization function may be configured to transmit the updated picture to another terminal by the server, or may be configured to transmit the updated picture to another terminal by the terminal that uploads the picture.
According to one embodiment, the community head portrait displayed on the search page and the background image in the target interface are updated to the uploaded head portrait image, and the subscribers of the target community to which the head portrait image belongs can be determined according to a preset subscriber list; and sending an update notification to the determined subscriber, wherein the update notification comprises the uploaded picture, so that the subscriber updates the picture according to the picture in the update notification.
Specifically, the update notification includes a community identifier where the update occurs, and the step of the subscriber performing the picture update according to the picture in the update notification includes: and when the subscriber judges that the community identification of the subscriber is consistent with the community identification in the updating notice, updating the picture according to the picture in the updating notice.
Here, the synchronous update of the three pictures is realized according to the subscription-notification mode. Each target community is supported by a corresponding data unit, and the three kinds of picture data are provided by the data units of the target community. When the target community is created, the target community is taken as a data subscription recorder in the corresponding interface. When the information data of the community changes, all subscribers are notified of the latest community data from the subscription list in the application. At this point, a notification interface is invoked to send an update notification to each subscriber, the update notification including the latest community information. And the data unit receiving the notification uses the latest community data in the notification content to perform self-refreshing, compares whether the community identification in the notification content is the same as the self community identification, and if the community identification is the same as the self community identification, assigns a value to update, and automatically changes the picture data at the corresponding position into the latest picture. The core code is as follows:
further, regarding the floating question button described above, fig. 7A shows a schematic diagram of the question button, which displays a home interface of a target group on a screen of a mobile terminal and floats the question button in the home interface. The question button comprises a character guide area and an avatar display area for guiding the question. The text guide area is an area of the text part of the question, and the head portrait display area transversely displays head portrait assemblies of a plurality of users of the target user group, wherein the head portrait assemblies can be square head portrait assemblies or round head portrait assemblies, which is not limited by the invention.
In one implementation mode, a fixed distance is reserved between two adjacent head portrait assemblies in the head portrait display area, the question button can be automatically extended, and the length of the question button is positively correlated with the number of the head portrait assemblies in the target user group. Preferably, when the number of users of the target user group is greater than the first threshold, the fixed spacing is a negative number; otherwise, it is not negative.
In another implementation, the question button and the text guide area are both of fixed length, and the spacing between two adjacent avatar components in the avatar display area is inversely related to the number of users in the target user group. Preferably, the length of the question button is a preset percentage of the width of the screen, so that the user can see the question button at the first time without excessively influencing the layout of the screen interface. The characters in the character guide area are set as fixed words, and the fixed words have corresponding fixed lengths according to the default font size of the screen.
Therefore, the fixed length of the question button minus the fixed length of the text guide area is the length of the avatar display area. At this time, the distance between adjacent avatar components in the avatar display area may be determined according to the number of users in the target user group, and the specific implementation manner may be set by a person skilled in the art according to needs.
In addition, according to one embodiment, the question entrance can be fixedly arranged in the page, for example, when the question button is positioned, the upper space is aligned with the female interface of the sliding interface, so that when the sliding interface slides, the position of the transverse guest list interface in the vertical direction is not affected, and the effect of suspending the page in the interface is achieved. Specifically, the upper boundary of the question button keeps a fixed distance from the root interface on the sliding interface, so that the position of the question button is kept unchanged in the up-and-down sliding process of the interface, the question button can be seen no matter how the user slides the screen, the exposure of the question button in the interface is ensured, and the question button is more helpful for guiding the user to ask questions.
Then, in response to a trigger operation (such as a click operation) on the question button, a question interface corresponding to the question button can be presented. As shown in fig. 7B, the question interface includes a plurality of question cards, each of which corresponds to a user in the target group, and includes basic information of the user and a sub-question button. Wherein, the basic information of the user comprises at least one of a user name, a user level, a user profile, an answering situation and an avatar component. The answer condition, such as the number of questions answered by the user, may also include the average text length of the answer, and the comprehensive satisfaction score of the questioner for the answer, which is not limited by the present invention. The sub-question button is used for asking questions of the user corresponding to the question card.
In this way, in response to a triggering operation on one of the question cards (for example, a triggering operation on a question button in the question card), a posting interface corresponding to the question card is presented, so that the question content is posted to the target user corresponding to the question card in the posting interface.
Optionally, the question button can be displayed in an enlarged manner in response to the triggering operation of the question button, and the distance between two adjacent head portrait assemblies in the question button displayed in the enlarged manner is greater than or equal to zero so as to select the target head portrait assembly from the head portrait assemblies displayed in the enlarged manner. And then, responding to the trigger operation of the target head portrait component, presenting a publishing interface corresponding to the target head portrait component so as to publish the questioning content to the target user corresponding to the target head portrait component in the publishing interface.
Fig. 8 illustrates an interface display apparatus 800 according to an embodiment of the present invention, which is adapted to reside in a mobile terminal (e.g., mobile terminal 200). As shown in fig. 8, the apparatus 800 includes a first display module 810, a determination module 820, and a second display module 830.
The first display module 810 displays a target interface on an application of the mobile terminal, the target page including a background map on the top and a text area under the background map.
The determining module 820 determines whether the aspect ratio of the target interface is smaller than that of the background image in response to the slide-down operation of the background image, so as to obtain a determination result.
When the determination result is yes, the second display module 830 displays a partial image that is not displayed in the background image along with the sliding operation, and when the determination result is no, cuts out the background image with a corresponding width for enlarged display according to the height of the background image after being pulled down, while keeping the aspect ratio of the background image unchanged.
According to an embodiment of the present invention, the apparatus 800 may further include a third display module and a fourth display module (neither shown). The third display module is suitable for responding to the finger releasing operation of a user and restoring the current background image to the state of the background image when the target interface is displayed for the first time. The fourth display module is suitable for responding to the upglide operation of the user, gradually covering the text content upwards to the background image, and displaying the current background image after fuzzy processing is carried out on the text area when the text area touches the navigation bar of the application. Specifically, the fourth display module may monitor an upward sliding operation of the page, calculate a distance between the top of the text area and the bottom of the navigation bar, and determine that the text area touches the navigation bar of the application when the distance is 0.
According to another embodiment of the present invention, the apparatus 800 may further include a picture synchronization device (not shown in the figure), adapted to obtain an avatar picture uploaded by the user, and update both the target community avatar displayed on the search page and the background picture in the target interface into the uploaded avatar picture. Specifically, the picture synchronization device may determine, according to a preset subscriber list, subscribers of a target community to which the avatar picture belongs; and sending an update notification to the determined subscriber, wherein the update notification comprises the uploaded picture, so that the subscriber updates the picture according to the picture in the update notification.
According to another embodiment of the present invention, the first display module 810 may further display a floating question button; responding to the trigger operation of the question button, presenting a question interface corresponding to the question button, wherein the question interface comprises a plurality of question cards, and each question card corresponds to one community user; and responding to the trigger operation of one of the quiz cards, presenting a publishing interface corresponding to the quiz card so as to publish the quiz content to the target user corresponding to the quiz card in the publishing interface.
Optionally, the first display module 810 may further display, in response to a trigger operation on the question button, the question button in an enlarged manner, where a distance between two adjacent avatar components in the question button in the enlarged manner is greater than or equal to zero, so as to select a target avatar component from the avatar components in the enlarged manner. Then, the first display module 810 presents a publication interface corresponding to the target avatar component in response to the trigger operation on the target avatar component, so as to publish the question content to the target user corresponding to the target avatar component in the publication interface.
The details of the interface display device 800 of the present invention are disclosed in detail in the description based on other figures, and are not repeated herein.
According to the technical scheme of the invention, the consistency of the community head portrait, the background image and the preview page is realized, and the background image is added with a downslide amplification function; when the slide does not reach the original height of the picture, the original picture can be displayed; when the glide height exceeds the original height of the background picture, the picture is enlarged; when the fingers are released, the fingers automatically slide up to the set proportion of the system; when the interface is slid upwards, the background image is blurred by Gaussian; the question button is displayed in a floating mode and comprises an avatar component which is convenient for a user to view, and therefore the user experience is improved from multiple aspects.
A8, the method as in a7, wherein the update notification includes a community identifier where the update occurs, and the step of the subscriber performing the picture update according to the picture in the update notification includes: and when the subscriber judges that the community identification of the subscriber is consistent with the community identification in the updating notice, updating the picture according to the picture in the updating notice. A9, the method as A6 recites, wherein the target interfaces comprise a background interface after the user joins the target community and a preview interface when the user does not join the target community, and the avatar of the target community is a thumbnail of the background graph. A10, the method as described in a5, wherein, for the target community avatar, a is 10%, b is 5 mm; for the background plot, a is 12% and b is 15 mm.
The various techniques described herein may be implemented in connection with hardware or software or, alternatively, with a combination of both. Thus, the methods and apparatus of the present invention, or certain aspects or portions thereof, may take the form of program code (i.e., instructions) embodied in tangible media, such as removable hard drives, U.S. disks, floppy disks, CD-ROMs, or any other machine-readable storage medium, wherein, when the program is loaded into and executed by a machine, such as a computer, the machine becomes an apparatus for practicing the invention.
In the case of program code execution on programmable computers, the computing device will generally include a processor, a storage medium readable by the processor (including volatile and non-volatile memory and/or storage elements), at least one input device, and at least one output device. Wherein the memory is configured to store program code; the processor is configured to perform the interaction method of the invention according to instructions in said program code stored in the memory.
By way of example, and not limitation, readable media may comprise readable storage media and communication media. Readable storage media store information such as computer readable instructions, data structures, program modules or other data. Communication media typically embodies computer readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media. Combinations of any of the above are also included within the scope of readable media.
In the description provided herein, algorithms and displays are not inherently related to any particular computer, virtual system, or other apparatus. Various general purpose systems may also be used with examples of this invention. The required structure for constructing such a system will be apparent from the description above. Moreover, the present invention is not directed to any particular programming language. It is appreciated that a variety of programming languages may be used to implement the teachings of the present invention as described herein, and any descriptions of specific languages are provided above to disclose the best mode of the invention.
In the description provided herein, numerous specific details are set forth. It is understood, however, that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.
Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the invention, various features of the invention are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be interpreted as reflecting an intention that: that the invention as claimed requires more features than are expressly recited in each claim. Rather, as the following claims reflect, inventive aspects lie in less than all features of a single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into this detailed description, with each claim standing on its own as a separate embodiment of this invention.
Those skilled in the art will appreciate that the modules or units or components of the devices in the examples disclosed herein may be arranged in a device as described in this embodiment or alternatively may be located in one or more devices different from the devices in this example. The modules in the foregoing examples may be combined into one module or may be further divided into multiple sub-modules.
Those skilled in the art will appreciate that the modules in the device in an embodiment may be adaptively changed and disposed in one or more devices different from the embodiment. The modules or units or components of the embodiments may be combined into one module or unit or component, and furthermore they may be divided into a plurality of sub-modules or sub-units or sub-components. All of the features disclosed in this specification (including any accompanying claims, abstract and drawings), and all of the processes or elements of any method or apparatus so disclosed, may be combined in any combination, except combinations where at least some of such features and/or processes or elements are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.
Furthermore, those skilled in the art will appreciate that while some embodiments described herein include some features included in other embodiments, rather than other features, combinations of features of different embodiments are meant to be within the scope of the invention and form different embodiments. For example, in the following claims, any of the claimed embodiments may be used in any combination.
Furthermore, some of the described embodiments are described herein as a method or combination of method elements that can be performed by a processor of a computer system or by other means of performing the described functions. A processor having the necessary instructions for carrying out the method or method elements thus forms a means for carrying out the method or method elements. Further, the elements of the apparatus embodiments described herein are examples of the following apparatus: the apparatus is used to implement the functions performed by the elements for the purpose of carrying out the invention.
As used herein, unless otherwise specified the use of the ordinal adjectives "first", "second", "third", etc., to describe a common object, merely indicate that different instances of like objects are being referred to, and are not intended to imply that the objects so described must be in a given sequence, either temporally, spatially, in ranking, or in any other manner.
While the invention has been described with respect to a limited number of embodiments, those skilled in the art, having benefit of this description, will appreciate that other embodiments can be devised which do not depart from the scope of the invention as described herein. Furthermore, it should be noted that the language used in the specification has been principally selected for readability and instructional purposes, and may not have been selected to delineate or circumscribe the inventive subject matter. Accordingly, many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the appended claims. The present invention has been disclosed in an illustrative rather than a restrictive sense, and the scope of the present invention is defined by the appended claims.
Claims (12)
1. An interface display method, adapted to be executed in a mobile terminal, the method comprising:
displaying a target interface on an application of the mobile terminal, wherein the target interface comprises an upper background picture and a text area below the background picture;
responding to the slide-down operation of the background image, and judging whether the aspect ratio of the target interface is smaller than that of the background image;
if so, displaying a partial image which is not displayed in the background image along with the sliding down operation; otherwise, keeping the height-width ratio of the background image unchanged, cutting out the background image with the corresponding width according to the height of the background image after being pulled down, and carrying out amplification display;
and responding to the upward sliding operation of a user, gradually covering the text area upwards on the background image, and displaying the current background image after fuzzy processing when the text area touches the navigation bar of the application, wherein when the fuzzy processing is carried out on the current background image, the main background color in the current background image is adopted, and pure color display is carried out.
2. The method of claim 1, further comprising the steps of:
and in response to the finger releasing operation of the user, restoring the current background image to the state of the background image when the target interface is displayed for the first time.
3. The method of claim 1, wherein the body area touches a navigation bar of an application, determined according to the following steps:
monitoring the upward sliding operation of the page, calculating the distance between the top of the text area and the bottom of the navigation bar, and determining that the text area touches the applied navigation bar when the distance is 0.
4. The method according to claim 1, wherein the blurring process is a gaussian blurring process that takes a background color with a white transparency of a in the background image and a blurring radius of b.
5. The method of any one of claims 1-4, further comprising the step of:
and acquiring the head portrait picture uploaded by the user, and updating the target community head portrait displayed on the search page and the background picture in the target interface into the uploaded head portrait picture.
6. The method of claim 5, wherein the step of updating the community avatar displayed on the search page and the background image in the target interface into the uploaded avatar image comprises:
determining a subscriber of a target community to which the head portrait picture belongs according to a preset subscriber list;
and sending an update notification to the determined subscriber, wherein the update notification comprises the uploaded picture, so that the subscriber can update the picture according to the picture in the update notification.
7. The method as claimed in claim 6, wherein the update notification includes a community identifier where the update occurs, and the step of the subscriber performing the picture update according to the picture in the update notification includes:
and when the subscriber judges that the community identification of the subscriber is consistent with the community identification in the updating notice, updating the picture according to the picture in the updating notice.
8. The method of claim 5, wherein the target interface comprises a background interface after the user joins the target community and a preview interface when the user does not join the target community, and the target community avatar is a thumbnail of the background graph.
9. The method of claim 5, wherein,
for the target community avatar, a is 10%, b is 5 mm;
for the background plot, a is 12% and b is 15 mm.
10. An interface display apparatus adapted to reside in a mobile terminal, the apparatus comprising:
the mobile terminal comprises a first display module, a second display module and a display module, wherein the first display module is suitable for displaying a target interface on an application of the mobile terminal, and the target interface comprises an upper background picture and a text area below the background picture;
the judging module is suitable for responding to the gliding operation of the background image and judging whether the aspect ratio of the target interface is smaller than that of the background image to obtain a judging result;
the second display module is suitable for displaying the partial image which is not displayed in the background image along with the sliding operation when the judgment result is yes, keeping the height-width ratio of the background image unchanged when the judgment result is no, and cutting out the background image with the corresponding width according to the height of the background image after being pulled down for amplifying and displaying;
and the fourth display module is suitable for responding to the upward sliding operation of the user, gradually covering the text area upwards on the background image, and displaying the current background image after fuzzy processing when the text area touches the navigation bar of the application, wherein when the fuzzy processing is carried out on the current background image, the main background color in the current background image is adopted, and pure color display is carried out.
11. A mobile terminal, comprising:
one or more processors;
a memory; and
one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs comprising instructions for performing any of the methods of claims 1-9.
12. A readable storage medium storing program instructions that, when read and executed by a mobile terminal, cause the mobile terminal to perform the method of any of claims 1-9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011354236.7A CN112492104B (en) | 2020-11-27 | 2020-11-27 | Interface display method and device and mobile terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011354236.7A CN112492104B (en) | 2020-11-27 | 2020-11-27 | Interface display method and device and mobile terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112492104A CN112492104A (en) | 2021-03-12 |
| CN112492104B true CN112492104B (en) | 2022-03-18 |
Family
ID=74935780
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011354236.7A Active CN112492104B (en) | 2020-11-27 | 2020-11-27 | Interface display method and device and mobile terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112492104B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115016867B (en) * | 2021-09-15 | 2023-07-14 | 荣耀终端有限公司 | Card management method and terminal equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104579908A (en) * | 2013-10-21 | 2015-04-29 | 腾讯科技（深圳）有限公司 | Method and device for displaying images |
| CN107885411A (en) * | 2016-09-30 | 2018-04-06 | 北京京东尚科信息技术有限公司 | For display methods and display device without the pulldown function page |
| CN107908331A (en) * | 2017-11-17 | 2018-04-13 | 广东小天才科技有限公司 | The display control method and electronic equipment of a kind of desktop icons |
| CN108765271A (en) * | 2018-05-30 | 2018-11-06 | 北京小米移动软件有限公司 | Image processing method and equipment |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| DE102009046177A1 (en) * | 2008-10-30 | 2010-06-10 | Samsung Electronics Co., Ltd., Suwon | Touch data generator |
| CN104156156B (en) * | 2013-05-13 | 2017-12-01 | 腾讯科技（深圳）有限公司 | Using interactive interface information displaying method and device |
| CN105528200B (en) * | 2014-09-30 | 2020-06-26 | 腾讯科技（深圳）有限公司 | Display method and device of browser tab |
| JP6222186B2 (en) * | 2015-08-11 | 2017-11-01 | コニカミノルタ株式会社 | Operation panel and image forming apparatus having the same |
| CN106020596A (en) * | 2016-05-13 | 2016-10-12 | 厦门美图移动科技有限公司 | Method and device for setting desktop background image of mobile terminal as well as mobile terminal |
-
2020
- 2020-11-27 CN CN202011354236.7A patent/CN112492104B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104579908A (en) * | 2013-10-21 | 2015-04-29 | 腾讯科技（深圳）有限公司 | Method and device for displaying images |
| CN107885411A (en) * | 2016-09-30 | 2018-04-06 | 北京京东尚科信息技术有限公司 | For display methods and display device without the pulldown function page |
| CN107908331A (en) * | 2017-11-17 | 2018-04-13 | 广东小天才科技有限公司 | The display control method and electronic equipment of a kind of desktop icons |
| CN108765271A (en) * | 2018-05-30 | 2018-11-06 | 北京小米移动软件有限公司 | Image processing method and equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112492104A (en) | 2021-03-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10896478B2 (en) | Image grid with selectively prominent images | |
| US11048384B2 (en) | Generating content to be shared between users | |
| US11443460B2 (en) | Dynamic mask application | |
| US10511833B2 (en) | Controls and interfaces for user interactions in virtual spaces | |
| US20180096507A1 (en) | Controls and Interfaces for User Interactions in Virtual Spaces | |
| CN107911736B (en) | Live broadcast interaction method and system | |
| DE112016004208T5 (en) | Providing personal assistance for the maintenance / management of multimedia and creating stories on computing devices | |
| WO2018067514A1 (en) | Controls and interfaces for user interactions in virtual spaces | |
| DE202016003234U1 (en) | Device for capturing and interacting with enhanced digital images | |
| CN111191640B (en) | Three-dimensional scene presentation method, device and system | |
| KR20140038439A (en) | Emotion-based user identification for online experiences | |
| US20140223474A1 (en) | Interactive media systems | |
| CN110568974B (en) | Sliding view display method and device and mobile terminal | |
| EP4246963A1 (en) | Providing shared augmented reality environments within video calls | |
| Smith | Motion comics: the emergence of a hybrid medium | |
| KR102454421B1 (en) | Personalized Auto Video Crop | |
| CN113286201A (en) | Recommendation information display method and device, electronic equipment and storage medium | |
| CN112492104B (en) | Interface display method and device and mobile terminal | |
| CN112269615A (en) | Interface interaction method and device and mobile terminal | |
| CN113342233B (en) | Interaction method, device, computer equipment and storage medium | |
| US10796421B2 (en) | Creating selective virtual long-exposure images | |
| TW202301082A (en) | Interaction method, computer device and computer-readable storage medium | |
| CN112131487A (en) | Interaction method and computing device | |
| KR101912554B1 (en) | Fairy tale creation and sharing system | |
| CN109683779B (en) | Mobile terminal and interaction method thereof |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |