Editing method and device of interface prototype graph, storage medium and terminal equipment

Abstract

The embodiment of the invention discloses an interface prototype graph editing method and device, a storage medium and terminal equipment, and relates to the field of interface design. The method comprises the steps that a prototype design interface is displayed, the prototype design interface comprises canvas and a style attribute adjustment panel, a current variable value is modified in a variable adjustment area in a CSS variable adjustment control, and a display effect is updated in a corresponding display effect preview area in real time according to the modified variable value; obtaining an interface element associated with the selected CSS variable adjustment control in the canvas, and updating a display effect of the associated interface element according to the modified variable value; after the design is completed, the CSS code is generated according to the interface prototype graph drawn by the prototype design user in the canvas, and the CSS code is imported into the project file of the UI design user, so that the collaboration problem between the prototype design and the UI development is effectively solved.

Description

Technical Field

[0001] The present application relates to the field of interface design, and in particular to a method, device, storage medium and terminal device for editing an interface prototype. Background Art

[0002] In today's rapidly developing software development field, interface prototypes play a vital role as an intuitive and efficient design communication tool. It can not only clearly display the user interface (UI) structure layout of the software or application, but also simulate the interaction between the user and the interface, providing a solid foundation for the user experience design of the product. Through interface prototypes, project team members can more easily understand the design intent, promote effective communication between departments, and collect valuable user feedback in the early stages of the project, so as to adjust the design direction in time and ensure that the product can ultimately meet market demand and user expectations.

[0003] In the design process of the front-end interface, prototype designers usually carefully plan and layout every detail of the interface, striving to maximize the user experience by optimizing visual elements, operation processes and information architecture. This design process is highly dependent on professional prototyping tools, which provide a wealth of design elements and interactive simulation functions, allowing prototype designers to efficiently create interface models that are close to the final product.

[0004] However, in actual development practice, a significant problem gradually emerged: although prototype designers can use prototype design tools to create detailed interface prototypes, when these design results are transferred to interface developers for actual UI interface development, there is often a deviation between design and implementation. This deviation is mainly due to poor communication between prototype designers and interface developers, as well as differences in their thinking and working habits.

[0005] This problem of inconsistent coordination not only prolongs the product development cycle and increases modification costs, but may also cause the UI interface of the final product to fail to accurately convey the original intention of the prototype design, affecting user satisfaction. Therefore, how to effectively solve the coordination problem between prototype design and UI development and ensure that the design intent is accurately implemented during the development process has become a technical challenge that needs to be urgently solved in the current software development field. Summary of the invention

[0006] The embodiments of the present application provide a method, device, storage medium and terminal device for editing an interface prototype, which can solve the problems in the prior art. The technical solution is as follows:

[0007] In a first aspect, an embodiment of the present application provides a method for editing an interface prototype, the method comprising:

[0008] Display a prototype design interface, the prototype design interface comprising: a canvas and a style attribute adjustment panel, the style attribute integrated panel is provided with a plurality of CSS variable adjustment controls, each CSS variable adjustment control comprises a variable value adjustment area and a display effect preview area;

[0009] Select a CSS variable adjustment control, modify the current variable value in the variable adjustment area of ​​the CSS variable adjustment control, and update the display effect in the corresponding display effect preview area in real time according to the modified variable value;

[0010] Get the interface element associated with the selected CSS variable adjustment control in the canvas, and update the display effect of the associated interface element according to the modified variable value;

[0011] After the design is completed, CSS code is generated according to the interface prototype image drawn by the prototype design user in the canvas, and the CSS code is imported into the engineering file of the UI design user.

[0012] In a second aspect, an embodiment of the present application provides a device for editing an interface prototype, the device comprising:

[0013] A display unit, used to display a prototype design interface, wherein the prototype design interface includes: a canvas and a style attribute adjustment panel, wherein the style attribute integrated panel is provided with a plurality of CSS variable adjustment controls, each CSS variable adjustment control includes a variable value adjustment area and a display effect preview area;

[0014] A preview unit, used to select a CSS variable adjustment control, modify the current variable value in the variable adjustment area of ​​the CSS variable adjustment control, and update the display effect in the corresponding display effect preview area in real time according to the modified variable value;

[0015] An updating unit, used to obtain the interface element associated with the selected CSS variable adjustment control in the canvas, and to update the display effect of the associated interface element according to the modified variable value;

[0016] The importing unit is used to generate CSS code according to the interface prototype image drawn by the prototype design user in the canvas after the design is completed, and import the CSS code into the engineering file of the UI design user.

[0017] In a third aspect, an embodiment of the present application provides a computer storage medium, wherein the computer storage medium stores a plurality of instructions, wherein the instructions are suitable for being loaded by a processor and executing the above-mentioned method steps.

[0018] In a fourth aspect, an embodiment of the present application provides a terminal device, which may include: a processor and a memory; wherein the memory stores a computer program, and the computer program is suitable for being loaded by the processor and executing the above-mentioned method steps.

[0019] The beneficial effects brought about by the technical solutions provided by some embodiments of the present application include at least:

[0020] By providing key functions such as an integrated style property adjustment panel, real-time preview and feedback mechanism, reducing design and implementation deviations, improving development efficiency and accuracy, and promoting cross-departmental communication, it effectively solves the coordination problem between prototype design and UI development. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0022] Figure 1 It is a schematic diagram of the network architecture provided by the embodiment of the present application;

[0023] Figure 2 It is a flowchart of a method for editing an interface prototype provided in an embodiment of the present application;

[0024] Figure 3 It is the sub-interface corresponding to the color tab provided in the embodiment of the present application;

[0025] Figure 4 It is the sub-interface corresponding to the border tab provided in the embodiment of the present application;

[0026] Figure 5 It is the sub-interface corresponding to the font tab provided in the embodiment of the present application;

[0027] Figure 6 It is a structural schematic diagram of an editing device for an interface prototype provided by the present application;

[0028] Figure 7 It is a structural schematic diagram of a terminal device provided by this application. DETAILED DESCRIPTION

[0029] In order to make the objectives, technical solutions and advantages of the present application more clear, the embodiments of the present application will be further described in detail below with reference to the accompanying drawings.

[0030] It should be noted that the interface prototype editing method provided in the present application is generally executed by a terminal device, and correspondingly, the interface prototype editing device is generally set in the terminal device.

[0031] Figure 1 An exemplary system architecture that can be applied to the interface prototype editing method or interface prototype editing device of the present application is shown.

[0032] like Figure 1 As shown, the system architecture may include: a terminal device 101 and a server 102. The terminal device 101 and the server 102 may communicate via a network, and the network is used as a medium for providing communication links between the above-mentioned units. The network may include various types of wired communication links or wireless communication links, for example: a wired communication link includes an optical fiber, a twisted pair or a coaxial cable, etc., and a wireless communication link includes a Bluetooth communication link, a wireless fidelity (WIreless-FIdelity, Wi-Fi) communication link or a microwave communication link, etc.

[0033] Among them, server 102 is a design server, which is used to store engineering files and related data of prototype design users and UI design users. Prototype design users and UI design users use prototype design tools deployed in the design server through various terminal devices to execute interface prototype design and UI interface design respectively.

[0034] It should be noted that the terminal device 101 and the server 102 can be hardware or software. When the terminal device 101 and the server 102 are hardware, they can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. When the terminal device 101 and the server 102 are software, they can be implemented as multiple software or software modules (for example, to provide distributed services), or as a single software or software module, which is not specifically limited here.

[0035] Various communication client applications can be installed on the terminal device of the present application, such as: video recording applications, video playback applications, voice interaction applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0036] The terminal device can be hardware or software. When the terminal device is hardware, it can be various terminal devices with a display screen, including but not limited to smart phones, tablet computers, laptops, and desktop computers. When the terminal device is software, it can be installed in the terminal devices listed above. It can be implemented as multiple software or software modules (for example: used to provide distributed services), or it can be implemented as a single software or software module, which is not specifically limited here.

[0037] When the terminal device is hardware, a display device and a camera may be installed thereon. The display device may be any device capable of realizing a display function, and the camera is used to collect video streams; for example, the display device may be a cathode ray tube display (CR), a light-emitting diode display (LED), an electronic ink screen, a liquid crystal display (LCD), a plasma display panel (PDP), etc. The user may use the display device on the terminal device to view displayed text, pictures, videos and other information.

[0038] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be used as required.

[0039] The following will be combined with the attached Figure 2 , the editing method of the interface prototype provided by the embodiment of the present application is described in detail. Among them, the editing device of the interface prototype in the embodiment of the present application can be Figure 1 The terminal equipment shown.

[0040] See also Figure 2 , which is a flow chart of a method for editing an interface prototype diagram provided in an embodiment of the present application. Figure 2 As shown, the method of the embodiment of the present application may include the following steps:

[0041] S201. Display a prototype design interface, where the prototype design interface includes: a canvas and a style property adjustment panel.

[0042] Among them, the prototype design user starts the prototype design tool, and after initialization, the prototype design interface is loaded and displayed. The interface mainly includes two main parts: the canvas and the style attribute adjustment panel. The canvas is used for the prototype design user to draw and display the interface prototype, and supports functions such as dragging and dropping UI components and adjusting the layout. The style attribute adjustment panel is used to integrate multiple CSS (Cascading Style Sheets) variable adjustment controls, which are usually located on the side or bottom of the canvas, so that the prototype design user can adjust the style attributes at any time. Each CSS variable adjustment control is divided into two areas: the variable value adjustment area and the display effect preview area. The variable value adjustment area is used to provide multiple input methods such as input boxes, sliders, and color selectors, allowing prototype design users to modify the values ​​of CSS variables. The display effect preview area is used to display the effects of the current CSS variable after modification in real time, such as color changes, font size adjustments, etc., so that the prototype design user can intuitively preview the modification effect.

[0043] The terminal device has some commonly used CSS variables preset, and the default values ​​of these variables are loaded into various CSS variable adjustment controls for use by prototype design users.

[0044] Furthermore, in some embodiments of the present application, the style property adjustment panel includes multiple tabs: a color tab, a border tab, a spacing tab, and a font tab, and the sub-interface corresponding to each tab includes at least one CSS variable adjustment control.

[0045] Among them, see Figure 3 The schematic diagram of the style property adjustment panel shown in the figure contains multiple tabs: color tab, border tab, spacing tab and font tab. Each tab corresponds to a sub-interface, and the sub-interface contains at least one CSS variable adjustment control. The color tab contains CSS variable adjustment controls for adjusting the background color, text color and other colors, such as a color picker. The border tab contains CSS variable adjustment controls for adjusting the border width, color, style and other properties. The spacing tab contains CSS variable adjustment controls for adjusting the element spacing (such as margins and padding), such as input boxes and sliders. The font tab contains CSS variable adjustment controls for adjusting the font size, font style, line height and other properties. Prototype design users can switch between different sub-interfaces by clicking on the tabs to view and modify the CSS variables of the corresponding categories. When switching tabs, the system hides the sub-interface of the current tab and displays the sub-interface of the selected tab. Figure 3 This is the sub-interface corresponding to the color tab. Figure 4 It is the sub-interface corresponding to the border tab. Figure 5 It is the sub-interface corresponding to the font tab.

[0046] Furthermore, in some embodiments of the present application, based on the configuration instructions of the prototype design user, one or more interface elements referenced by the CSS variable adjustment control in the canvas are configured, and the mapping relationship between the CSS variable adjustment control and the referenced interface elements is saved.

[0047] In which, in the style property adjustment panel or configuration menu, a configuration entry is provided, such as a "Configure Element Mapping" button or option. When the prototype design user clicks the entry, the configuration mode is triggered. In the style property adjustment panel, the prototype design user selects a CSS variable adjustment control. The system highlights the selected control and is ready to receive further configuration instructions. The prototype design user switches to the canvas view and selects one or more interface elements. The system can capture the user's selection by clicking, dragging, or other interactive methods. The selected interface element can be highlighted for user confirmation. The system establishes a mapping relationship between the CSS variable adjustment control and the interface element based on the prototype design user's selection. The mapping relationship can be a data structure, such as a dictionary or an object, in which the key is the identifier of the CSS variable adjustment control and the value is a list of identifiers of the interface element. The system saves the mapping relationship in memory (for real-time preview and update) and / or persistent storage (such as a file, a database). Persistent storage can ensure that the mapping relationship is still available after the user closes the application or restarts the computer.

[0048] The system verifies the validity of the mapping relationship to ensure that each CSS variable adjustment control is correctly associated with at least one interface element. If the verification fails (such as the control is not associated with any element), the system provides an error prompt and allows the user to reconfigure.

[0049] Furthermore, in some embodiments of the present application, based on the editing instructions of the prototype designer, a new operation or a deletion operation of a CSS variable adjustment control is performed on the style property adjustment panel, or a variable type of the CSS variable adjustment control is modified.

[0050] Among them, the prototype designer triggers the editing instructions on the style property adjustment panel by clicking, dragging, selecting menu items, etc. The instructions include adding new CSS variables, deleting CSS variables, or modifying CSS variable types. The application of the terminal device captures the editing instructions and parses the specific content of the instructions, such as the target CSS variable, new variable name, new variable value, or new variable type. The system creates a new CSS variable adjustment control based on the new variable name, initial value, and other information in the instruction. The control may include a variable name input box, a variable value adjuster (such as a color selector, a numerical adjuster, etc.), and a variable type selector (such as color, size, font, etc.). The system adds the newly created control to the appropriate position of the style property adjustment panel. The display and layout of the control should be consistent with other style property adjustment controls to ensure the consistency of the user experience. The system automatically generates or updates the corresponding variable declaration in the CSS code based on the newly added control information. The updated CSS code should be reflected in real time on the interface elements in the canvas so that the prototype designer can view the effect.

[0051] The system finds the corresponding CSS variable adjustment control in the style property adjustment panel based on the target CSS variable information in the instruction. The system removes the target control from the style property adjustment panel. When removing, ensure that the display and layout of other controls are not damaged. The system deletes the variable declaration corresponding to the target control from the CSS code. The updated CSS code should be reflected in real time on the interface elements in the canvas to ensure the validity of the deletion operation. Similar to the deletion operation, the system first locates the target CSS variable adjustment control. The system updates the type selector of the target control based on the new variable type information in the instruction. If the new type requires a different adjuster (such as changing from a color selector to a numeric adjuster), the system should replace the adjuster accordingly. The system updates the corresponding variable declaration in the CSS code based on the new type information and possible variable value changes. The updated CSS code should be reflected in real time on the interface elements in the canvas so that prototype designers can view the effect of the new type.

[0052] After adding, deleting, or modifying, the system should update the style of the interface elements in the canvas in real time to reflect the changes in the CSS code. The real-time preview function helps prototype designers quickly verify the effects of editing operations. The system should provide user feedback mechanisms, such as status bar prompts, pop-up windows, etc., to inform prototype designers of the results of editing operations (such as success, failure, error prompts, etc.). Feedback information should be clear and accurate so that prototype designers can understand the results of operations in a timely manner and take corresponding measures.

[0053] Through the above steps, the terminal device provides a flexible and efficient CSS variable adjustment function for prototype designers. Prototype designers can add, delete or modify CSS variable adjustment controls as needed, and view the impact of editing operations on the style of interface elements in real time. This function helps to improve the flexibility and efficiency of prototype design while ensuring the correctness and consistency of CSS code.

[0054] S202, selecting a CSS variable adjustment control, modifying a current variable value in a variable adjustment area in the CSS variable adjustment control, and updating a display effect in a corresponding display effect preview area in real time according to the modified variable value.

[0055] The prototype design user selects a CSS variable adjustment control by clicking or touching. After the control is selected, it is highlighted and the variable value adjustment area is focused. The prototype design user enters a new value through the input box, or adjusts the variable value through a slider, color selector, etc. The system monitors the prototype design user's input events, captures and updates the variable value in real time. According to the new variable value entered by the prototype design user, the system immediately updates the display effect in the display effect preview area. The preview effect is synchronized with the change of the variable value to ensure that the prototype design user gets what he sees.

[0056] Furthermore, when the CSS variable adjustment control is used to adjust the color variable, a color selector is provided in the variable value adjustment area; the target color is determined based on the position of the click instruction triggered by the prototype designer in the color palette, the target color is used as the main color, and a plurality of color blocks arranged in descending order of depth are displayed in the corresponding display effect preview area, and each color block references an interface element.

[0057] Among them, in the CSS variable adjustment control of the color tab, the variable value adjustment area is set to a color selector. The color selector can be a color palette containing a variety of colors for the prototype design user to choose. Next to the color tab or canvas, a display effect preview area is set to display color blocks of different shades. The preview area can be a vertical or horizontal color bar with multiple color blocks arranged on it. The prototype design user clicks on the color selector (color palette) to trigger the click instruction. The system captures the click position and determines the target color based on the position. The system maps the click position to the color space of the color palette and finds the corresponding color value. The color value is the target color selected by the prototype design user. The system updates the target color value to the currently selected CSS variable. If this CSS variable is associated with multiple interface elements on the canvas, the colors of these elements will also be updated accordingly.

[0058] Based on the target color, the system generates a series of colors with different shades, which can be achieved by adjusting the brightness, saturation or transparency of the color. For each color with different shades, the system creates a color block. Each color block references an interface element (or represents the style of an interface element) for display in the preview area. Arrange the color blocks of different shades in the preview area in descending (or ascending) order. In this way, the prototype design user can intuitively see the performance of the target color at different shades. Render the arranged color blocks into the preview area.

[0059] For example, see Figure 3 As shown, the color selector is a color wheel with continuously distributed color values. The selected target color is blue. Then, blue is used as the main color. Nine color blocks are arranged in descending order horizontally. Each color block is associated with an interface element. The referenced interface element and the corresponding color value are displayed below each color block.

[0060] S203: Obtain the interface element associated with the selected CSS variable adjustment control in the canvas, and update the display effect of the associated interface element according to the modified variable value.

[0061] The system maintains a mapping relationship to record which interface elements in the canvas are associated with each CSS variable adjustment control. When a prototype design user selects a CSS variable adjustment control, the system finds all associated interface elements based on the mapping relationship. Based on the variable values ​​modified by the prototype design user, the system calculates and applies the new style to all associated interface elements. The interface elements in the canvas are updated in real time according to the new style for the prototype design user to review. During the update process, the system provides dynamic feedback, such as highlighting updated elements, displaying update animations, etc., so that the prototype design user can clearly see the changes.

[0062] S204: After the design is completed, generate CSS code according to the interface prototype image drawn by the prototype design user in the canvas, and import the CSS code into the project file of the UI design user.

[0063] Among them, after the prototype design user completes the design, the operation of generating CSS code is triggered (such as clicking the "Generate Code" button). The system traverses all CSS variable adjustment controls and collects the variable values ​​modified by the prototype design user. Based on the collected variable values, the system generates the corresponding CSS code. The system formats the generated CSS code to ensure that the code structure is clear and easy to read. Optionally, the system can also optimize the CSS code, such as merging repeated styles, compressing code, etc.

[0064] The prototype design user selects or specifies the project file path of the UI design user. The system prompts the prototype design user to confirm the import operation to ensure that the UI design user's existing work will not be overwritten. After confirmation, the system imports the generated CSS code into the specified project file (the file belongs to the UI design user), usually through the file operation API to read and write files. After the import is completed, the system provides a success prompt to the prototype design user and the UI design user, and allows the UI design user to view or edit the project file to further develop the UI interface.

[0065] Through the above steps, the terminal device realizes the collaboration process between the prototype design user and the UI design user. The prototype design user can intuitively modify the style attributes in the prototype design interface and preview the modification effect in real time. After the design is completed, the system can automatically generate CSS code and import it into the UI design user's project file, thereby supporting the UI design user to carry out subsequent UI development work based on the prototype design.

[0066] Further, in some embodiments of the present application, generating CSS code according to the interface prototype image drawn by the prototype design user in the canvas, and importing the CSS code into the engineering file of the UI design user includes:

[0067] After receiving a save instruction from the prototype design user, generating CSS code according to the prototype image drawn in the canvas;

[0068] Upload the CSS code to the design server;

[0069] Sending an import request to the design server, the import request carrying the user identifier of the UI designer, the import request instructing the design server to import the generated CSS code into the project file of the UI designer;

[0070] Receive import result information from the design server.

[0071] Among them, after the prototype design user completes the design of the interface prototype, he clicks the save button or selects the save menu item to trigger the save instruction. The prototype design tool application of the terminal device captures the instruction and prepares to enter the CSS code generation stage. The system traverses all interface elements in the canvas, including their position, size, color, font, border and other attributes. For each element, the system generates corresponding CSS rules according to its type and attributes. The system combines all generated CSS rules into a complete CSS code file. The code may contain multiple style classes or ID selectors, each of which corresponds to an interface element in the canvas. The system optimizes the generated CSS code, such as merging duplicate rules and deleting useless code. The system performs code verification to ensure that the generated CSS code complies with the CSS syntax specification. The system establishes a connection with the design server through HTTP, HTTPS or other network protocols. After the connection is established, the system is ready to upload data. The system sends the generated CSS code to the design server as part of the file content or request body. When sending, some additional information may also be required, such as the file name, file type, uploader identifier, etc. The system receives the upload response from the design server and checks the response status code and message content. If the upload is successful, the system continues to execute subsequent steps; if the upload fails, the system displays an error message and allows the user to re-upload. The system constructs a new HTTP request to request the design server to import the CSS code into the UI designer's project file. The request carries the UI designer's user ID (such as user name, user ID, etc.) so that the design server can identify the target project file. The system sends the import request to the design server through the previously established network connection or re-established connection. When sending, make sure that the request contains all necessary information, such as user ID, CSS code ID (if generated during previous upload), import options, etc.

[0072] The system waits for a response from the design server, which contains information about the result of the import operation. The response may include a success message, a failure message, an error code, an error description, etc. The system receives and parses the response content, and displays corresponding prompt information to the user based on the response result. If the import is successful, the system can display a success message and may provide further operation options (such as viewing the imported project file). If the import fails, the system displays an error message and allows the user to retry the import or perform other operations.

[0073] Through the above steps, the terminal device provides a complete process of CSS code generation, uploading, importing and result receiving for the prototype design user. After the design is completed, the prototype design user can generate CSS code with one click and import it into the project file of the UI designer, thus achieving a seamless connection between design and development. At the same time, the system also provides error handling and user feedback mechanisms to ensure the reliability of the process and the friendliness of the user experience.

[0074] The embodiments of the present application specifically include the following beneficial effects:

[0075] By integrating the style property adjustment panel in the prototype design interface and setting multiple CSS variable adjustment controls, designers can adjust CSS variables directly on the interface without having to write code manually. This greatly reduces the handover time between design and development, because designers can instantly see the effect of the modification and generate CSS code that can be directly imported.

[0076] Each CSS variable adjustment control includes a variable value adjustment area and a display effect preview area. When adjusting the variable value, the designer can see the effect changes in real time in the preview area. This instant feedback mechanism helps designers quickly iterate the design while ensuring the consistency of the design effect and development implementation.

[0077] Since designers can adjust CSS variables directly in the prototyping interface and see the effects in real time, the deviation between design and implementation is greatly reduced. Designers can ensure that their design intentions are accurately implemented during the development process because the generated CSS code directly reflects their design decisions.

[0078] The generated CSS code can be directly imported into the UI design user's project file, without the need for developers to perform additional manual coding or debugging. This not only improves development efficiency, but also reduces development delays caused by manual coding errors.

[0079] This technical solution helps project team members (including designers, developers, product managers, etc.) better understand design intent and interaction methods by providing an intuitive design interface and instant effect preview. This promotes effective communication across departments, helps collect valuable user feedback in the early stages of the project, and adjusts the design direction in a timely manner.

[0080] By reducing the handover time and deviation between design and development, and improving development efficiency and accuracy, this technical solution helps shorten the product development cycle, which means that products can enter the market faster, thereby seizing market opportunities and meeting user needs.

[0081] The following is an embodiment of the device of the present application, which can be used to execute the embodiment of the method of the present application. For details not disclosed in the embodiment of the device of the present application, please refer to the embodiment of the method of the present application.

[0082] See also Figure 6 , which shows a schematic diagram of the structure of an interface prototype editing device provided by an exemplary embodiment of the present application, hereinafter referred to as device 6. The device 6 can be implemented as all or part of the terminal device through software, hardware or a combination of both. The device 6 includes: a display unit 601, a preview unit 602, an update unit 603, and an import unit 604.

[0083] A display unit 601 is used to display a prototype design interface, wherein the prototype design interface includes: a canvas and a style attribute adjustment panel, wherein the style attribute integrated panel is provided with a plurality of CSS variable adjustment controls, each CSS variable adjustment control includes a variable value adjustment area and a display effect preview area;

[0084] The preview unit 602 is used to select a CSS variable adjustment control, modify the current variable value in the variable adjustment area of ​​the CSS variable adjustment control, and update the display effect in the corresponding display effect preview area in real time according to the modified variable value;

[0085] An updating unit 603 is used to obtain the interface element associated with the selected CSS variable adjustment control in the canvas, and to update the display effect of the associated interface element according to the modified variable value;

[0086] The importing unit 604 is used to generate CSS code according to the interface prototype image drawn by the prototype design user in the canvas after the design is completed, and import the CSS code into the engineering file of the UI design user.

[0087] In one or more possible embodiments, the style property adjustment panel includes multiple tabs: a color tab, a border tab, a spacing tab, and a font tab, and the sub-interface corresponding to each tab includes at least one CSS variable adjustment control.

[0088] In one or more possible embodiments, when the CSS variable adjustment control is used to adjust the color variable, a color selector is provided in the variable value adjustment area; the target color is determined based on the position of the click instruction triggered by the prototype designer in the color wheel, the target color is used as the main color, and a plurality of color blocks arranged in descending order of depth are displayed in the corresponding display effect preview area, and each color block references an interface element.

[0089] In one or more possible embodiments, it further includes:

[0090] The configuration unit is used to configure one or more interface elements referenced by the CSS variable adjustment control on the canvas based on the configuration instructions of the prototype design user, and to save the mapping relationship between the CSS variable adjustment control and the referenced interface elements.

[0091] In one or more possible embodiments, the display prototype design interface includes:

[0092] The prototype designer's terminal device sends a login request to the design server;

[0093] After the design server verifies that the prototype designer has passed the identity authentication, a prototype design interface is displayed.

[0094] In one or more possible embodiments, generating CSS code according to the interface prototype image drawn by the prototype design user in the canvas, and importing the CSS code into the engineering file of the UI design user includes:

[0095] After receiving a save instruction from the prototype design user, generating CSS code according to the prototype image drawn in the canvas;

[0096] Upload the CSS code to the design server;

[0097] Sending an import request to the design server, the import request carrying the user identifier of the UI designer, the import request instructing the design server to import the generated CSS code into the project file of the UI designer;

[0098] Receive import result information from the design server.

[0099] In one or more possible embodiments, it further includes:

[0100] The editing unit is used to perform a new operation, a deletion operation or a modification of a variable type of a CSS variable adjustment control on the style attribute adjustment panel based on an editing instruction of a prototype designer.

[0101] It should be noted that, when the device 6 provided in the above embodiment executes the method for editing the interface prototype, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device is divided into different functional modules to complete all or part of the above functions. In addition, the interface prototype editing device and the interface prototype editing method embodiment provided in the above embodiment belong to the same concept, and the implementation process thereof is detailed in the method embodiment, which will not be repeated here.

[0102] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0103] The present application also provides a computer storage medium, which can store multiple instructions, and the instructions are suitable for being loaded and executed by a processor as described above. Figure 2 The method steps of the embodiment shown in the figure can be found in the specific implementation process. Figure 2 The specific description of the illustrated embodiment will not be repeated here.

[0104] The present application also provides a computer program product, which stores at least one instruction, and the at least one instruction is loaded and executed by the processor to implement the method for editing the interface prototype as described in the above embodiments.

[0105] See also Figure 7 , which is a schematic diagram of the structure of a terminal device provided in an embodiment of the present application. Figure 7 As shown, the terminal device 700 may include: at least one processor 701 , at least one network interface 704 , a user interface 703 , a memory 705 , and at least one communication bus 702 .

[0106] The communication bus 702 is used to realize the connection and communication between these components.

[0107] The user interface 703 may include a display screen (Display) and a camera (Camera), and the optional user interface 703 may also include a standard wired interface and a wireless interface.

[0108] The network interface 704 may optionally include a standard wired interface or a wireless interface (such as a WI-FI interface).

[0109] Among them, the processor 701 may include one or more processing cores. The processor 701 uses various interfaces and lines to connect the various parts of the entire terminal device 700, and executes various functions and processes data of the terminal device 700 by running or executing instructions, programs, code sets or instruction sets stored in the memory 705, and calling data stored in the memory 705. Optionally, the processor 701 can be implemented in at least one hardware form of digital signal processing (Digital Signal Processing, DSP), field programmable gate array (Field-Programmable Gate Array, FPGA), and programmable logic array (Programmable Logic Array, PLA). The processor 701 can integrate one or a combination of a central processing unit (Central Processing Unit, CPU), a graphics processing unit (Graphics Processing Unit, GPU) and a modem. Among them, the CPU mainly processes the operating system, user interface and application programs; the GPU is responsible for rendering and drawing the content to be displayed on the display screen; the modem is used to process wireless communications. It can be understood that the above-mentioned modem may not be integrated into the processor 701, and it can be implemented separately through a chip.

[0110] Among them, the memory 705 may include a random access memory (Random Access Memory, RAM) and may also include a read-only memory (Read-Only Memory). Optionally, the memory 705 includes a non-transitory computer-readable storage medium. The memory 705 can be used to store instructions, programs, codes, code sets or instruction sets. The memory 705 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as a touch function, a sound playback function, an image playback function, etc.), instructions for implementing the above-mentioned method embodiments, etc.; the data storage area may store data involved in the above-mentioned method embodiments, etc. The memory 705 may optionally be at least one storage device located away from the aforementioned processor 701. As Figure 7 As shown, the memory 705 as a computer storage medium may include an operating system, a network communication module, a user interface module and an application program.

[0111] exist Figure 7In the terminal device 700 shown in FIG. 1 , the user interface 703 is mainly used to provide an input interface for the user and obtain the data input by the user; and the processor 701 can be used to call the application stored in the memory 705 and specifically execute the following steps: Figure 2 The specific process can be referred to Figure 2 As shown, no further description is given here.

[0112] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing related hardware through a computer program, and the program can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes of the embodiments of the above-mentioned methods. The storage medium can be a disk, an optical disk, a read-only storage memory, or a random access memory, etc.

[0113] The above disclosure is only the preferred embodiment of the present application, which certainly cannot be used to limit the scope of rights of the present application. Therefore, equivalent changes made according to the claims of the present application are still within the scope covered by the present application.

Claims

1. A method for editing an interface prototype, characterized in that: include: Display a prototype design interface, the prototype design interface comprising: a canvas and a style attribute adjustment panel, the style attribute integrated panel is provided with a plurality of CSS variable adjustment controls, each CSS variable adjustment control comprises a variable value adjustment area and a display effect preview area; Select a CSS variable adjustment control, modify the current variable value in the variable adjustment area of ​​the CSS variable adjustment control, and update the display effect in the corresponding display effect preview area in real time according to the modified variable value; Get the interface element associated with the selected CSS variable adjustment control in the canvas, and update the display effect of the associated interface element according to the modified variable value; After the design is completed, CSS code is generated according to the interface prototype image drawn by the prototype design user in the canvas, and the CSS code is imported into the engineering file of the UI design user.

2. The method according to claim 1, characterized in that The style attribute adjustment panel includes multiple tabs: a color tab, a border tab, a spacing tab and a font tab, and the sub-interface corresponding to each tab includes at least one CSS variable adjustment control.

3. The method according to claim 1 or 2, characterized in that: When the CSS variable adjustment control is used to adjust the color variable, a color selector is provided in the variable value adjustment area; the target color is determined based on the position of the click instruction triggered by the prototype designer in the color palette, the target color is used as the main color, and a plurality of color blocks arranged in descending order of depth are displayed in the corresponding display effect preview area, and each color block references an interface element.

4. The method according to claim 3, characterized in that Also includes: Based on the configuration instruction of the prototype design user, one or more interface elements referenced by the CSS variable adjustment control on the canvas are configured, and a mapping relationship between the CSS variable adjustment control and the referenced interface elements is saved.

5. The method according to claim 1, 2 or 4, characterized in that: The display prototype design interface includes: The prototype designer's terminal device sends a login request to the design server; After the design server verifies that the prototype designer has passed the identity authentication, a prototype design interface is displayed.

6. The method according to claim 5, characterized in that The step of generating CSS code according to the interface prototype image drawn by the prototype design user in the canvas and importing the CSS code into the engineering file of the UI design user includes: After receiving a save instruction from the prototype design user, generating CSS code according to the prototype image drawn in the canvas; Upload the CSS code to the design server; Sending an import request to the design server, the import request carrying the user identifier of the UI designer, the import request instructing the design server to import the generated CSS code into the project file of the UI designer; Receive import result information from the design server.

7. The method according to claim 6, characterized in that Also includes: Based on the editing instruction of the prototype designer, a new operation or a deletion operation of the CSS variable adjustment control is performed on the style attribute adjustment panel, or the variable type of the CSS variable adjustment control is modified.

8. An editing device for an interface prototype, characterized in that: include: A display unit, used to display a prototype design interface, wherein the prototype design interface includes: a canvas and a style attribute adjustment panel, wherein the style attribute integrated panel is provided with a plurality of CSS variable adjustment controls, each CSS variable adjustment control includes a variable value adjustment area and a display effect preview area; A preview unit, used to select a CSS variable adjustment control, modify the current variable value in the variable adjustment area of ​​the CSS variable adjustment control, and update the display effect in the corresponding display effect preview area in real time according to the modified variable value; An updating unit, used to obtain the interface element associated with the selected CSS variable adjustment control in the canvas, and to update the display effect of the associated interface element according to the modified variable value; The importing unit is used to generate CSS code according to the interface prototype image drawn by the prototype design user in the canvas after the design is completed, and import the CSS code into the engineering file of the UI design user.

9. A computer storage medium, characterized in that The computer storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor and executing the method steps according to any one of claims 1 to 7.

10. A terminal device, characterized in that: include: A processor and a memory; wherein the memory stores a computer program, and the computer program is suitable for being loaded by the processor and executing the method steps as claimed in any one of claims 1 to 7.

Images