Processing method and device for dynamically displaying input information state and storage medium

Abstract

The invention provides a processing method and equipment for dynamically displaying an input information state and a storage medium, and relates to the technical field of front-end interactive design, sensitive information and general information are distinguished by using different animation effects, and the animation effects are adjusted according to an input state and a format verification result, so that the user experience is improved. According to the method, the animation effect, such as an eye covering animation, a hand opening animation, a dialogue bubble animation, a sight tracking animation and an exaggerated expression animation, is realized by utilizing a graphic component of an animation module, and the state and format verification result of input information can be fed back to a user more intuitively.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end interaction design, and in particular to a dynamic interaction input information processing method, device and storage medium. Background Art

[0002] In the existing technology, the front-end information input form is simply designed, including only basic input boxes and corresponding name labels, lacking aesthetics and user-friendliness. In addition, when the user clicks the input box, there is a lack of clear prompts and feedback, such as the unclear distinction between the password box and the user name box, which reduces the user experience.

[0003] Some technical personnel have considered adding mascot images to improve the user experience. However, mascot images mainly show state changes rather than dynamic displays, and usually rely on preset animation effects. Since the effects are fixed during design, they cannot be dynamically adjusted according to real-time data or user input, and the look and feel is rigid. In addition, input verification and sensitive information detection are usually independent of graphic display, resulting in a disconnect between user experience and data display.

[0004] In addition, in existing forms, when too much content needs to be entered, the page will scroll up and down, affecting the overall browsing experience. Different input items may have different text format verification requirements, and the existing format verification results are displayed below the input box. If the input text of a certain item does not pass the format verification and the page is turned at this time, it is easy to not be discovered at the first time and be ignored.

[0005] Therefore, in the front-end interaction design process, especially in the dynamic interaction input information processing related methods, how to improve the user's input efficiency and experience while ensuring the accuracy and completeness of information collection is a crucial issue. Summary of the invention

[0006] In view of this, the embodiments of the present application provide a method, device and storage medium for processing dynamic interactive input information, which adds visual prompts and interactive effects corresponding to the form input box and changes according to the input state to improve the user interaction experience and the efficiency of information input. The embodiments of the present application provide the following technical solutions: In a first aspect, an embodiment of the present application provides a processing method for dynamically displaying input information status, the steps comprising: Initialize several animation effects of the animation module; Obtaining input information type, where the input information type is divided into sensitive information and general information; Record the input information status, select the first animation effect for the sensitive information, select the second animation effect for the general information and perform format verification; The animation effect is adjusted according to the input information state and the format verification result. Further, the animation module includes a plurality of graphic components, and the animation effect is achieved by changing the positions of the graphic components.

[0007] Furthermore, the input information status includes acquiring focus, losing focus and input content change, and the input information status of sensitive information also includes displaying plain text.

[0008] Furthermore, the first animation effect includes an eye-covering animation and a hand-opening animation, the eye-covering animation is set in the stage of changing the input content of the sensitive information, and the hand-opening animation is set in the stage of displaying plain text of the sensitive information.

[0009] Furthermore, the second animation effect includes a dialogue bubble animation, which is set at the stage when the input content of the general information changes, and adjusts the content in the dialogue bubble based on the format verification result.

[0010] Furthermore, the animation effect also includes a third animation effect, namely, an exaggerated expression animation, which adjusts the shape of part of the graphic components based on the correct number of format verification results of the general information.

[0011] Furthermore, the animation effect also includes a fourth animation effect, namely, an eye tracking animation, which moves the position of the eye graphic component based on the input content ratio of the general information, and the input content ratio is calculated based on the width of the input content in the input box and the document object model width of the input box.

[0012] In a second aspect, an embodiment of the present application provides a processing device for dynamically displaying an input information state, including: Animation generation module, used to initialize several animation effects of the animation module; An input acquisition module is used to acquire input information types, where the input information types are divided into sensitive information and general information; An information processing module is used to record the state of input information, select the first animation effect for the sensitive information, select the second animation effect for the general information, and perform format verification; The animation response module is used to adjust the animation effect according to the input information state and the format verification result.

[0013] In a third aspect, an embodiment of the present application provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the processor implements the steps of the processing method for dynamically displaying the input information status as described in any one of the above items.

[0014] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the processing method for dynamically displaying the input information status as described in any one of the above items are implemented.

[0015] Compared with the prior art, the at least one technical solution adopted in the embodiment of the present application can achieve the following beneficial effects: 1. The processing method for dynamically displaying the input information status provided by this application can effectively improve the user experience by combining animation effects with the input status and format verification results. For sensitive information, eye-covering animation and hand-opening animation are used, and for format verification, dialogue bubble animation, eye tracking animation and exaggerated expression animation are used. The status of the input information and the format verification results can be clearly fed back to the user, such as changes in input content, format errors, etc., and the input process is made more vivid and interesting through rich animation effects. For example, the mascot will make different expressions as the input status changes, the mascot's eyes will follow the input cursor, and when entering sensitive information of a password or bank card, the mascot will cover its eyes, and when clicking to view sensitive information, it will peek, blink, and other actions, making the input process more interesting.

[0016] 2. The processing method for dynamically displaying the input information status provided in this application helps users quickly identify and correct input errors and improve input efficiency through intuitive animation feedback; and uses mascot dialogue bubbles to process prompt content, which is more unified and beautiful, and easy to view without omission.

[0017] 3. The processing method for dynamically displaying the input information status provided in this application can customize different animation effects according to different input information types and application scenarios when initializing the animation module to meet personalized needs. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0019] Figure 1 It is a flow chart of a processing method for dynamically displaying input information status of the present invention; Figure 2 It is a flow chart of a second embodiment of a processing method for dynamically displaying input information status according to the present invention; Figure 3 It is a structural diagram of a processing device for dynamically displaying the state of input information according to the present invention. DETAILED DESCRIPTION

[0020] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0021] The following describes the embodiments of the present invention through specific examples, and those skilled in the art can easily understand other advantages and effects of the present invention from the contents disclosed in this specification. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. The present invention can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work belong to the scope of protection of the present invention.

[0022] It should be noted that the terms "first", "second", etc. in the specification, claims and drawings of the present invention are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions.

[0023] In this article, Document Object Model (DOM) is a core concept in front-end development, which provides an interface for interacting with web page content. DOM converts a web page into a tree structure composed of nodes, each of which corresponds to a part of the web page, such as an element, attribute, text, etc. Through DOM, developers can dynamically access and modify the content and structure of a web page, thereby realizing interaction with the web page.

[0024] The method for dynamically displaying the input information status provided by the embodiment of the present application can be applied to the processing scenario of inputting information in the form input box. By perfectly integrating the customized mascot LOGO animation module into the front-end information filling form page, when the information is entered, the mascot LOGO animation module will respond to the input status and give corresponding animation effects to enrich the page content and improve the overall look and feel.

[0025] First, as Figure 1 As shown in a flowchart of a processing method for dynamically displaying input information status of the present invention, an embodiment of the present application provides a processing method for dynamically displaying input information status, the steps comprising: Initialize several animation effects of the animation module; by presetting multiple animation effects, the form page can select appropriate animations according to different input information states, which enhances the flexibility and personalization of the system. At the same time, the rich animation effects make the user interface more vivid and interesting, attracting the user's attention and improving the overall user experience. It should be understood that various types of graphics and animation technologies can be selected to implement the animation module, including but not limited to: using the animation function of CSS3, you can create smooth transition and transformation effects, which are suitable for simple dynamic effects such as gradients, zooms, and moves; HTML5 Canvas provides the ability to draw graphics and animations through JavaScript, which is suitable for creating complex graphics and interactive animations; WebGL is based on the Web standard of OpenGL ES, which is used to render 3D graphics and animations in supported browsers; SVG vector graphics are based on XML language, describe two-dimensional vectors and vector / raster graphics, have powerful dynamic interactive features, use text transmission, and are small in size and fast in speed.

[0026] Due to the advantages of SVG vector graphics such as small size and easy scalability, it will not bring too much performance burden to the page. At the same time, it can avoid the problem of blocking the output of the page turning content format verification result caused by the excessive length of the form content, and the error information of the input text format verification is displayed in the form of a dialogue bubble, and the prompt information will not be blocked by the scrolling of the page. Therefore, the animation module preferably uses SVG vector graphics to make the mascot LOGO. When initializing the animation module, the positions of the eyes, nose, mouth, ears, arms and other modules of the mascot SVG vector graphics will be reset first. After the initialization is completed, a blinking loop animation will be started.

[0027] Furthermore, the animation module includes several graphic components, and the animation effect is achieved by changing the position of the graphic components. Taking the use of SVG vector graphics as an example, the mascot SVG vector graphics file in the animation module can be exported by the designer team, and the name of each position is bound to the front end to facilitate subsequent code operations. After marking each part, the SVG module is displayed at the top of the page as a separate UI, and the remaining form input boxes are arranged below in the form of regional scrolling. It should be understood that the default is the top of the page, but the position of the animation module can also be changed according to user settings or the display end page to facilitate the display of the input status.

[0028] Get the input information type, which is divided into sensitive information and general information; when the input box gets the mouse focus, the system identifies and determines the type attribute of the input box (such as text, number, email, long form, etc.). Sensitive information refers to information that needs to be input securely, such as passwords and card numbers. To prevent sensitive information leakage, content format verification needs to be turned off, but a means of displaying plain text is provided. General information needs to be verified for format correctness, and the verification results are output at the same time to provide timely feedback to meet the requirements of form submission as soon as possible. By distinguishing between sensitive information and general information, the system can adopt appropriate processing strategies for different types of information, improving the accuracy and efficiency of data processing.

[0029] Record the input information status, perform corresponding animation processing according to the input information type and input information status, select the first animation effect for sensitive information, select the second animation effect for general information and perform format verification; reflect the status of input information in real time through animation effects, so that users can intuitively see the results of their operations and get immediate visual feedback on their operations.

[0030] In some embodiments, the input information status includes acquiring focus, losing focus, and input content changes. The input information status of sensitive information also includes displaying plain text. The status of the input information is reflected in real time through animation effects. After the input box loses focus, a reset operation is performed on the SVG module to smoothly transition and locate all markers to the default initialization position. After all input content checks are passed, the dialog bubble prompt content will disappear and be hidden, and it can be submitted.

[0031] The above animation effects are adjusted according to the input information status and format verification results. Specifically, the first animation effect includes an eye-covering animation and a hand-opening animation. The eye-covering animation is set in the input content change stage of sensitive information, and the hand-opening animation is set in the display plain text stage of sensitive information. When the input box obtains the mouse focus, the type attribute of the input box is judged. If the type recorded in the input box is private information such as a password, the animation type is recorded as sensitive private information and passed to the SVG animation processing module. At this time, the input text content verification will not be started. After the animation processing module captures this type of information, a eye-covering animation is started. At this time, the left and right arms and palm movements in the SVG file are operated, the coordinates are adjusted to the appropriate position, the palms are merged and smoothly transitioned to cover the eye layer, and the eye-covering animation effect is completed. If the display plain text button of the input box is clicked at this time. Then the two fingers in the SVG file are operated to open smoothly, the finger coordinates are located and the angle is adjusted to the appropriate position, and the display effect of opening the palm to peek is completed. In the display plain text stage, the user is reminded that the information will be displayed in plain text, which enhances the user's awareness of the current state.

[0032] Furthermore, the second animation effect includes a dialogue bubble animation, which is set at the stage when the input content of the general information changes, and adjusts the content in the dialogue bubble based on the format verification result. After the input box obtains the mouse focus, it is determined that the input box type is non-sensitive information. The data processing module will start the input text format verification work and pass the corresponding type to the SVG animation processing module. During the input process, the text content that needs to be verified will be format-checked in real time. If there is text that does not meet the specifications, the mascot animation module pops up a dialogue bubble to prompt the non-compliant content title and improvement suggestions. Provide instant feedback based on changes in the input content, so that users can quickly identify whether the input content meets the requirements.

[0033] Furthermore, if Figure 2 As shown in the flow chart of the second embodiment of a processing method for dynamically displaying the state of input information of the present invention, further, the animation effect also includes a third animation effect, that is, an exaggerated expression animation, which adjusts the shape of some graphic components based on the correct number of format verification results of the general information of the current input box. If the input data type is a type that needs to meet certain input standards, such as an email format, the more key content and key symbols are input, the richer the expression of the mascot will be, for example, the mouth will open wider and the eyebrows will be raised higher. The verification result of the input is intuitively displayed to the user through exaggerated expression changes, giving the user intuitive positive and negative feedback.

[0034] The animation effect also includes a fourth animation effect, namely, an eye tracking animation, which moves the position of the eye graphic component based on the input content ratio of the general information. The input content ratio is calculated based on the width of the input content in the input box and the document object model width of the input box. The corresponding type is passed to the SVG animation processing module and the eye gaze tracking animation is started. If the input type is in ordinary text format, the mascot expression will adjust the position of the eye from left to right in percentage based on the input content length compared to the input box DOM real width ratio temporarily stored at the time of initialization to achieve the eye tracking effect.

[0035] In some embodiments, the correct number of format verification results of all general information in the current form page is recorded so that the mascot can provide format verification feedback for the form page as a whole, not limited to expression feedback for a single input box.

[0036] Second, as Figure 3 As shown in the structural diagram of a processing device for dynamically displaying input information status of the present invention, an embodiment of the present application provides a processing device for dynamically displaying input information status, including: Animation generation module, used to initialize several animation effects of the animation module; The input acquisition module is used to obtain the input information type, which is divided into sensitive information and general information; An information processing module is used to record the state of input information, select the first animation effect for sensitive information, select the second animation effect for general information, and perform format verification; The animation response module is used to adjust the above animation effects according to the input information status and format verification results.

[0037] Furthermore, the animation module in the animation generation module includes a plurality of graphic components, and the animation effect is achieved by changing the positions of the graphic components.

[0038] Furthermore, the input information status in the information processing module includes obtaining focus, losing focus and input content changes, and the input information status of sensitive information also includes displaying plain text.

[0039] Furthermore, the first animation effect in the animation generation module includes an eye-covering animation and a hand-opening animation, and the eye-covering animation in the animation response module is set at the stage of changing the input content of the sensitive information, and the hand-opening animation is set at the stage of displaying the plain text of the sensitive information.

[0040] Furthermore, the second animation effect in the animation generation module includes a dialogue bubble animation, which is set at the stage when the input content of the general information changes, and the animation response module adjusts the content in the dialogue bubble based on the format verification result.

[0041] Furthermore, the animation effects in the animation generation module also include a third animation effect, namely, an exaggerated expression animation, and the animation response module adjusts the shapes of some graphic components based on the correct number of format verification results of the general information.

[0042] Furthermore, the animation effect in the animation generation module also includes a fourth animation effect, namely, an eye tracking animation. In the animation response module, the position of the eye graphic component is moved based on the input content ratio of the general information, and the input content ratio is calculated based on the width of the input content in the input box and the document object model width of the input box.

[0043] In a third aspect, an embodiment of the present application provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the steps of the processing method for dynamically displaying the input information status as described in any one of the above items are implemented.

[0044] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps of the processing method for dynamically displaying the input information status as described in any one of the above items are implemented.

[0045] It should be noted that the present application can be implemented in software and / or a combination of software and hardware, for example, can be implemented using an application specific integrated circuit (ASIC), a general purpose computer or any other similar hardware device. In one embodiment, the software program of the present application can be executed by a processor to implement the steps or functions described above. Similarly, the software program of the present application (including relevant data structures) can be stored in a computer-readable recording medium, for example, a RAM memory, a magnetic or optical drive or a floppy disk and similar devices. In addition, some steps or functions of the present application can be implemented using hardware, for example, as a circuit that cooperates with a processor to perform each step or function. In a typical configuration of the present application, the terminal and the network device each include one or more processors (CPU), input / output interfaces, network interfaces and memory. The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium. Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include non-transitory media such as modulated data signals and carrier waves.

[0046] In addition, a part of the present application may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present application through the operation of the computer. The program instruction for calling the method of the present application may be stored in a fixed or removable recording medium, and / or transmitted through a data stream in a broadcast or other signal-bearing medium, and / or stored in a working memory of a computer device that runs according to the program instruction. Here, according to an embodiment of the present application, a device is included, the device including a memory for storing computer program instructions and a processor for executing program instructions, wherein, when the computer program instruction is executed by the processor, the device is triggered to run the method and / or technical solution based on the aforementioned multiple embodiments according to the present application.

[0047] In this specification, the same or similar parts between the various embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the embodiments described later, the description is relatively simple, and the relevant parts can be referred to the partial description of the previous embodiments.

[0048] The above are only specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. A method for dynamically displaying input information status, characterized in that the steps include: Initialize several animation effects of the animation module; Obtaining input information type, where the input information type is divided into sensitive information and general information; Record the input information status, select the first animation effect for the sensitive information, select the second animation effect for the general information and perform format verification; The animation effect is adjusted according to the input information state and the format verification result.

2. The method for dynamically displaying input information status according to claim 1, characterized in that: The animation module includes a plurality of graphic components, and the animation effect is achieved by changing the positions of the graphic components.

3. The method for dynamically displaying input information status according to claim 1, characterized in that: The input information status includes acquiring focus, losing focus, and input content changes, and the input information status of sensitive information also includes displaying plain text.

4. The method for dynamically displaying input information status according to claim 3, characterized in that: The first animation effect includes an eye-covering animation and a hand-opening animation. The eye-covering animation is set during the stage where the input content of the sensitive information changes, and the hand-opening animation is set during the stage where the plain text of the sensitive information is displayed.

5. The method for dynamically displaying input information status according to claim 3, characterized in that: The second animation effect includes a dialogue bubble animation, which is set when the input content of the general information changes, and adjusts the content in the dialogue bubble based on the format verification result.

6. The method for dynamically displaying input information status according to claim 1, characterized in that: The animation effect also includes a third animation effect, namely, an exaggerated expression animation, which adjusts the shape of part of the animation module based on the correct number of format verification results of the general information.

7. The method for dynamically displaying input information status according to claim 1, characterized in that: The animation effect also includes a fourth animation effect, namely an eye tracking animation, which moves the position of the eye graphic component based on the input content ratio of the general information, and the input content ratio is calculated based on the width of the input content in the input box and the document object model width of the input box.

8. A processing device for dynamically displaying input information status, characterized in that: include: Animation generation module, used to initialize several animation effects of the animation module; An input acquisition module is used to acquire input information types, where the input information types are divided into sensitive information and general information; An information processing module is used to record the state of input information, select the first animation effect for the sensitive information, select the second animation effect for the general information, and perform format verification; The animation response module is used to adjust the animation effect according to the input information state and the format verification result.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the processing method for dynamically displaying the input information status as described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the processing method for dynamically displaying the input information status as described in any one of claims 1 to 7 are implemented.

Images