Interface preview method and system and computer program product

Abstract

The invention provides an interface preview method and system and a computer program product, and relates to the technical field of interface design. The interface preview method comprises the steps of uploading design data of a user interface of a designed target project to a server through a developed design tool; processing the design data through the server to obtain previewed effect data; and performing multi-mode preview display on the effect data through the target item. The interface preview system comprises a developed design tool, a server and a target project, wherein the target project is arranged in the carrier equipment, and the server is in communication connection with the target project and the design tool; the design tool is used for uploading design data of a user interface of a designed target project to the server; the server is used for processing the design data to obtain previewed effect data; the target item is used for performing multi-mode preview display on the effect data.

Description

Technical Field

[0001] The present application relates to the field of interface design technology, and more specifically, to an interface preview method, system, and computer program product. Background Art

[0002] With the rapid development of smart cars, in-vehicle systems, such as in-vehicle infotainment systems, are becoming increasingly important as a vital component of vehicles. User experience and interface design are becoming increasingly important. These systems must not only provide a wide range of functions, such as navigation, multimedia playback, and vehicle information display, but also feature an intuitive, aesthetically pleasing, and easy-to-use UI (User Interface).

[0003] In the design and development process of existing vehicle-mounted systems, due to the large difference between the design environment and the actual usage environment, there is usually a large difference between the design drawings during the UI interface design process and the actual vehicle-mounted display effects. Repeated modifications and comparisons are required to determine the final UI interface. The modification cost is high and the difficulty is great, resulting in low vehicle-mounted system development efficiency and slow project progress, which cannot meet current design requirements. Summary of the Invention

[0004] In view of this, the purpose of the embodiments of the present application is to provide an interface preview method, system and computer program product to improve the problems of low development efficiency and slow project progress of vehicle-mounted systems in the prior art.

[0005] In order to solve the above problems, in a first aspect, an embodiment of the present application provides an interface preview method, the method comprising: Upload the design data of the user interface of the designed target project to the server through the developed design tool; Processing the design data through the server to obtain effect data for preview; Through the target project, the effect data is previewed and displayed in multiple modes.

[0006] In the above implementation process, the user interface of the target project is designed through the developed design tool, and the design data obtained is uploaded to the server for the server to process the design data and obtain effect data that can be previewed and displayed. In addition, in order to simulate the actual operating environment of the vehicle system, the effect data can be previewed and displayed in a variety of different modes through the target project. The ability to directly obtain the effect data obtained by uploading the design tool from the server for preview display through the target project effectively improves the effectiveness and value of the effect data display, reduces the gap between the design and development environments, and improves the efficiency of the feedback on the display of design data during the design process, thereby reducing the cost and difficulty of modifying the user interface, improving the development efficiency of the vehicle system, accelerating the project progress, and meeting the current design needs in a variety of different scenarios.

[0007] Optionally, the multi-mode preview display of the effect data through the target project includes: Determine display components of multiple display modes; wherein the multiple display modes include effect mode, comparison mode and project mode; Setting a switch between the multiple display modes; Based on the user's selection requirements, the switch is controlled to select the corresponding display mode to preview and display the effect data.

[0008] In the above implementation process, when the target project previews and displays the effect data, in order to optimize the display effect, you can first determine a variety of display components with different display modes in the target project to provide a variety of different display modes to meet the user's various preview, comparison and other needs. In addition, in order to achieve the display effects of a variety of different display modes, corresponding switching switches can be set between the multiple display modes, so that users can control the switching switches to select the corresponding display mode to preview the effect data based on their own selection needs. The ability to provide a variety of different display modes to display and process the effect data accordingly, and to flexibly switch modes according to the user's actual viewing needs, effectively improves the user experience when displaying the effect data, and helps users accurately evaluate the design of the user interface of the target project based on the results of the preview display, thereby reducing the communication cost during the user interface design process.

[0009] Optionally, the effect mode corresponds to a first display component, the comparison mode corresponds to a second display component, and the item mode corresponds to a third display component; The display component for determining multiple display modes includes: Creating the first display component corresponding to the effect mode for displaying the effect data; Creating an overlay; determining the transparency of the overlay and the location of the overlay on the page of the target item; determining a control component for controlling the display / hide function of the overlay based on the transparency and the location; and obtaining the second display component corresponding to the contrast mode based on the correspondence between the effect data and the target item and the control component. Determine a hidden component for hiding the effect data and a display component for displaying the page of the target project; based on the hidden component and the display component, combined with a component for disabling the overlay layer, obtain the third display component corresponding to the project mode.

[0010] In the above implementation, the effect mode displays effect data, allowing users to examine the various design elements within the effect data in detail and understand the design details. This allows the effect interface to accurately replicate the design draft, minimizing the discrepancy between the draft and the effect interface. A corresponding first display component can be created to implement a purely effect-based display function. The comparison mode overlays the effect data onto the target project's page with a certain degree of transparency for user viewing and comparison. This facilitates real-time comparison during the design and development process, allowing users to identify and correct issues promptly, and improving the fidelity between the implemented interface and the ideal designed interface. A corresponding overlay can be created, with settings for its transparency and location within the target project's page. Based on the transparency and location, a control component for displaying and hiding the overlay is determined. Based on the corresponding routing between the effect data and the target page, the corresponding second display component is determined in conjunction with the control component to implement the effect and page comparison display function. The project mode displays only the target project's original page, without displaying the effect data. This allows users to view elements such as the target project's page style and theme, and to determine whether the effect data meets design requirements based on the theme. You can set up a hidden component that can hide the effect data and a display component for displaying the page, so that based on the hidden component and the display component, combined with the component that disables the overlay layer, you can get a third display component to achieve the function of displaying only the target project's page. From multiple perspectives such as effect, comparison, and original page style, you can design display components with a variety of different functions to achieve display functions in different display modes, meet the user's various viewing needs from different angles during the preview process, effectively optimize the preview effect, help users view, understand and communicate design plans, reduce communication costs during the design process, speed up project progress, and save time and labor costs. In addition, multiple display modes can adapt to a variety of project requirements without the need for additional settings or development, further improving the development efficiency of the vehicle system.

[0011] Optionally, the setting of a switch between the multiple display modes includes: Create a toggle component; determining an enumeration type for each of said presentation modes; Determining a triggering event for the corresponding display mode based on the enumeration type; Based on the multiple triggering events and the switching components, the switching switch for switching the multiple display modes is obtained; wherein the switching switch is set in the page edge area of ​​the target item.

[0012] In the above implementation process, you can first create a switching component for switching, determine the enumeration type of each display mode, determine the trigger event bound to each display mode according to the enumeration type, and then update the trigger event to the switching component to obtain a switching switch that can switch between multiple display modes. In addition, the switching switch is set in the edge area of ​​the page of the target project, which will not occupy the key area of ​​the page and will not affect the display effect of multiple display modes. The corresponding switching function can be achieved through triggering methods such as clicking, which is convenient to operate. Being able to set a convenient and quick switching switch for users to switch display modes according to actual needs effectively improves the user's operating experience during the display process and meets a variety of different viewing needs.

[0013] Optionally, uploading the design data of the user interface of the designed target project to the server by using the developed design tool includes: In the design tool, the corresponding design data is selected based on the target project; wherein the design data includes a user interface design diagram for display or comparison; The design data is uploaded to the communication-connected server through the design tool.

[0014] In the above implementation process, considering that the developed design tool may include multiple different types of data corresponding to different front-end projects, the design data corresponding to the target project can be selected in the developed design tool based on the target project and then uploaded to the connected server for processing. The ability to select the appropriate design data for upload based on the identity of the target project effectively improves the accuracy of the design data and reduces errors caused by design data not corresponding to the project.

[0015] Optionally, the processing of the design data by the server to obtain effect data for preview includes: Determining, by the server, the target project corresponding to the design data among a plurality of front-end projects; The server processes the design data based on the target project to obtain the effect data for preview display.

[0016] In the above implementation process, taking into account the differences in hardware performance, operation methods, and other factors between the design tool and the carrier device where the target project is located, the server can first determine the corresponding target project from multiple front-end projects based on the received design data, and then process the design data based on the actual hardware, operation, and other conditions of the target project to obtain effect data that can be previewed and displayed in the target project. The design data can be processed according to the actual situation of the target project so that the target project can preview and display the effect data normally, reducing the display differences caused by the large difference between the design and actual installation environment, and improving the authenticity and effectiveness of the effect display.

[0017] Optionally, the design tool is developed and processed in the following manner: Process multiple sub-nodes of the page in the selected initial design tool in batches and in parallel to obtain an export array; The design tool is determined to include a data structure of the derived array and message data.

[0018] In the above implementation process, a suitable initial design tool can be selected for development and processing, and multiple subnodes of the page in the initial design tool can be processed in batches and in parallel to obtain the corresponding export array. This batch parallel processing reduces memory pressure and improves processing efficiency. The returned data structure can be determined based on the export array, and the corresponding message data for data transmission can be determined to obtain the corresponding design tool. User interface design and data upload can be performed in the developed design tool, effectively improving the efficiency of data transmission between the design tool and the server.

[0019] Optionally, the method further includes: Obtaining feedback data generated by users based on the effect data; Using the design tool, modifying the design data based on the feedback data to obtain modified data, and uploading the modified data to the server; Processing the modified data through the server to obtain updated data; The updated data is previewed in multiple modes through the target item.

[0020] In the above implementation process, considering that after the multi-mode preview display of the effect data, the user may have corresponding modification opinions based on the actual viewing situation, therefore, the feedback data generated by the user based on the effect data can be obtained, and the feedback data can be sent to the design tool to modify the original design data based on the feedback data, obtain the corresponding modification data and send it to the server, and the server can continue to process the modification data into updated data suitable for the target project display, so that the target project can continue to preview the updated data in multiple modes. It can provide a unified visual display result for multiple parties to communicate and feedback, and provide real-time feedback on modification opinions, reduce information gaps in the design process, and promote collaborative processing among multiple parties. All parties can intuitively discuss design details based on the preview display results, collaborate efficiently, improve project quality and team collaboration efficiency, and thus improve the development efficiency of the vehicle system.

[0021] In a second aspect, an embodiment of the present application provides an interface preview system, the system comprising: a developed design tool, a server, and a target project; Wherein, the target project is set in a carrier device, and the server is communicatively connected to the target project and the design tool; The design tool is used to upload the design data of the user interface of the designed target project to the server; The server is used to process the design data to obtain effect data for preview; The target item is used to perform a multi-mode preview display of the effect data.

[0022] In the above implementation process, the user interface of the target project is designed through the developed design tool, and the design data obtained is uploaded to the server for the server to process the design data and obtain effect data that can be previewed and displayed. In order to simulate the actual operating environment of the vehicle system, the effect data can be previewed and displayed in multiple different modes through the target project set in the carrier device.

[0023] In a third aspect, an embodiment of the present application further provides a computer program product, which includes a computer program / instructions, and when the computer program / instructions are executed by a processor, the steps of any one of the above-mentioned interface preview methods are implemented.

[0024] In summary, the embodiments of the present application provide an interface preview method, system, and computer program product, which can directly obtain the effect data obtained by uploading and processing the design tool from the server through the target project for preview and display, effectively improving the effectiveness and value of the effect data display, reducing the gap between the design and development environments, and improving the efficiency of feedback on the display of design data during the design process, thereby reducing the cost and difficulty of modifying the user interface, improving the development efficiency of the vehicle system, accelerating the project progress, and meeting the current design needs in various different scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments of the present application. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other relevant drawings can be obtained based on these drawings without creative work.

[0026] Figure 1 A flowchart of an interface preview method provided in an embodiment of the present application; Figure 2 A detailed flowchart of step S300 provided in an embodiment of the present application; Figure 3 A detailed flowchart of step S310 provided in an embodiment of the present application; Figure 4 A detailed flowchart of step S320 provided in an embodiment of the present application; Figure 5 A detailed flowchart of step S100 provided in an embodiment of the present application; Figure 6 A detailed flowchart of step S200 provided in an embodiment of the present application; Figure 7 A flowchart of another interface preview method provided in an embodiment of the present application; Figure 8 A flowchart of another interface preview method provided in an embodiment of the present application; Figure 9 This is a structural diagram of an interface preview system provided in an embodiment of the present application.

[0027] Icons: 610-Design tool; 620-Server; 630-Target project. DETAILED DESCRIPTION

[0028] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the embodiments described are only part of the embodiments of the present application, not all of them. Based on the embodiments of the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the embodiments of the present application.

[0029] In the design and development process of existing vehicle-mounted systems, due to the large difference between the design environment and the actual usage environment, there is usually a large difference between the design drawings in the UI interface design process and the actual display effects of the vehicle-mounted system. Repeated modifications and comparisons are required to determine the final UI interface. For example, in the process of converting the design drawings into the display effects in the actual vehicle-mounted system, there is a lack of real-time feedback mechanism. Designers and developers cannot immediately see the actual display effects of the design drawings on the vehicle-mounted system during the development process. Some problems are not discovered until the project review stage or even after deployment to the vehicle-mounted system. At this time, the modification cost is high. In addition, since the design drawings are usually produced in professional design software, These software programs offer rich visual effects and high-resolution previews. However, the actual operating environment of an in-vehicle system is limited by factors such as hardware performance and operating system customization, and can differ significantly from the design environment. For example, the resolution, color rendering, and hardware performance of the in-vehicle screen may differ from the design parameters. While some design software and development tools currently offer preview features, these previews are typically based on a common browser environment and cannot fully simulate the actual operating environment of the in-vehicle system. Developers must conduct actual testing on the in-vehicle system hardware to identify and modify issues. This testing approach is not only time-consuming and labor-intensive, but also makes it difficult to detect potential problems in advance. In-vehicle systems typically have a unified style theme. While design drawings may appear good when viewed individually, they may appear inconsistent within the overall theme of the in-vehicle system. For example, elements such as colors, fonts, and icons in a design drawing may not match the default style of the in-vehicle system, leading to visual inconsistencies and other issues. Consequently, the existing UI interface design process is costly and difficult to modify, resulting in low in-vehicle system development efficiency and slow project progress, making it unable to meet current design requirements.

[0030] In order to solve the above problems, the embodiments of the present application provide an interface preview method, system and computer program product, which can directly obtain the effect data obtained by uploading and processing the design tool from the server through the target project for preview display, effectively improving the effectiveness and value of the effect data display, reducing the gap between the design and development environments, and improving the efficiency of feedback on the display of design data during the design process, thereby reducing the cost and difficulty of modifying the user interface, improving the development efficiency of the vehicle system, accelerating the project progress, and meeting the current design needs in various different scenarios.

[0031] See also Figure 1 , Figure 1 This is a flow chart of an interface preview method provided in an embodiment of the present application. The method may include steps S100-S300.

[0032] Step S100: uploading the design data of the user interface of the designed target project to the server through the developed design tool.

[0033] The design tools used during design have been developed to improve the efficiency of data upload. For example, these tools may include various interface design tools or software such as Figma, MasterGo, and Instant Design. Designers can use these design tools to design according to the user interface design requirements of the target project, obtain the corresponding design data, and upload the design data to the server for processing.

[0034] Optionally, the design data may include one or more design drawings of the user interface, which may include various types of element data, such as the screen size of the user interface (such as mobile phones, tablets, in-car displays, etc.), framework (such as content partitions, basic layouts, etc.), color (such as text, area color and corresponding color values, etc.), font (such as font size, font weight, line spacing, title, etc.), functional icons (such as menus, search bars, etc.), functional components (such as buttons, arrows, sliding, long press and other interactive components), function and content modules (such as navigation classes, sidebars, input boxes, pop-ups), annotation information (such as size, text, page association and other annotation information), and other information.

[0035] Step S200: Processing the design data through the server to obtain effect data for preview.

[0036] Among them, taking into account the differences between the design environment of the design tool and the actual installation environment of the target project, the server can process the received design data accordingly to obtain effect data that can be previewed and displayed.

[0037] Optionally, the server can perform various processing such as color adjustment, integration, and multi-page association on the design data to obtain effect data suitable for previewing and displaying the target project.

[0038] Step S300: Preview and display the effect data in multiple modes through the target project.

[0039] Among them, in order to simulate the actual operating environment of the vehicle system, the effect data can be previewed in multiple different modes through the target items set on the carrier device, so that users can view the actual effect of the user interface in the actual environment.

[0040] Optionally, the target project can be a front-end project such as software or degree in the vehicle system set on the carrier device for testing. The vehicle system includes corresponding display devices such as display screens, such as vehicle-mounted display screens, which can preview and display the effect data.

[0041] exist Figure 1 In the embodiment shown, the effect data obtained by uploading and processing the design tool can be directly obtained from the server through the target project for preview and display, which effectively improves the effectiveness and value of the effect data display, reduces the gap between the design and development environments, and improves the efficiency of feedback on the display of design data during the design process, thereby reducing the cost and difficulty of modifying the user interface, improving the development efficiency of the vehicle system, accelerating the project progress, and meeting the current design needs in various scenarios.

[0042] Optionally, see Figure 2 , Figure 2 A detailed flow chart of step S300 is provided in an embodiment of the present application. Step S300 may include steps S310-S330.

[0043] Step S310: Determine display components of multiple display modes.

[0044] Among them, when the target project previews and displays the effect data, in order to optimize the display effect, you can first determine a variety of display components with different display modes in the target project to provide a variety of different types of display modes to meet the user's various preview, comparison and other needs.

[0045] It should be noted that display components for multiple display modes can be set up in the server and automatically configured to the corresponding target project during testing, eliminating the need for setup or development each time. Multiple display modes can include effect mode, comparison mode, and project mode. Effect mode is a pure effect display mode that displays effect data, comparison mode is a display mode that displays both effect data and the original pages of the target project for comparison, and project mode is a pure page display mode that displays only the original pages of the target project without displaying effect data. The display component is a plug-in set up in the target project to implement the control function of the corresponding display mode.

[0046] Step S320: Setting a switch for switching between multiple display modes.

[0047] In order to achieve display effects in a variety of different display modes, corresponding switching switches can be set between the various display modes.

[0048] Optionally, the functions of the toggle switch may include switching from effect mode to comparison mode / project mode, switching from comparison mode to effect mode / project mode, and switching from project mode to effect mode / comparison mode, etc., and can be set according to the actual number of display modes. The toggle switch is a functional plug-in that can control the display component to work.

[0049] For example, the switch can be configured as various types of interactive plug-ins such as a corresponding floating ball, a switch key, etc.

[0050] Step S330: Based on the user's selection requirements, the switch is controlled to select a corresponding display mode to preview the effect data.

[0051] Among them, users can be customers or corresponding front-end project developers. Taking into account the user's various viewing needs, users can interact with the toggle switch based on their own selection needs. For example, they can select the corresponding area from the floating ball, or click the toggle key and other methods to control the toggle switch to select the corresponding display mode to preview the effect data.

[0052] exist Figure 2 In the embodiment shown, a variety of different types of display modes can be provided to display and process the effect data accordingly, and flexible mode switching can be performed according to the user's actual viewing needs, which effectively improves the user experience when displaying effect data, and helps users accurately evaluate the design of the user interface of the target project based on the preview display results, thereby reducing the communication cost in the user interface design process.

[0053] It should be noted that, considering that there are multiple different display modes, each display mode has a corresponding display component. For example, the effect mode can correspond to the first display component, the comparison mode can correspond to the second display component, and the project mode can correspond to the third display component, so as to distinguish between multiple different types of display components.

[0054] Optionally, see Figure 3 , Figure 3 A detailed flow chart of step S310 is provided in an embodiment of the present application. Step S310 may include steps S311-S333.

[0055] Step S311: creating a first display component corresponding to the effect mode for displaying effect data.

[0056] The effect mode displays effect data, allowing users to view various design elements in the effect data in detail and understand the design details. This allows the effect interface to accurately reproduce the design draft and reduce the deviation between the design draft and the effect interface. You can create a corresponding first display component to achieve pure effect display functionality.

[0057] Optionally, the target project can communicate with the server through a corresponding API (Application Programming Interface) to obtain corresponding effect data from the server. A corresponding effect chart display component can be created as a first display component to directly display the effect data obtained from the server on the page of the target project. Considering that the effect data may include multiple different effect charts, the corresponding page turning and other effect chart switching functions can also be set in the switch so that users can view the overall effect data.

[0058] Step S312, create an overlay layer; determine the transparency of the overlay layer and the setting position of the overlay layer in the page of the target project; based on the transparency and the setting position, determine the control component that controls the display / hide function of the overlay layer; according to the correspondence between the effect data and the target project, combined with the control component, obtain the second display component corresponding to the contrast mode.

[0059] Among them, the comparison mode is a display mode in which the effect data is overlaid on the target project page with a certain degree of transparency for users to view and compare. This allows users to conduct real-time comparisons during the design and development process, promptly identify problems and make corrections, and improve the restoration between the actual interface and the ideal designed interface. A corresponding overlay can be created, and the transparency of the overlay and the setting position of the overlay on the target project page can be set. Based on the transparency and setting position, the control component that controls the display and hiding of the overlay is determined. Based on the corresponding relationship between the route between the effect data and the target page, the corresponding second display component is determined in combination with the control component to realize the display function of effect and page comparison.

[0060] Optionally, the created overlay is used to overlay the target project's page to display the effect image. A toggle switch can adjust the overlay's transparency based on the user's actual needs, such as setting various adjustable transparency options such as 20%, 30%, 40%, and 50%. The overlay's transparency can be set or adjusted via CSS. The overlay is positioned so that it can be correctly positioned on the page to reduce the disadvantages of misalignment caused by incorrect overlay positioning. In addition, to achieve better comparison results, the second display component also controls the display and hiding of the overlay. When the overlay is displayed, the target project's page and the effect data with corresponding transparency overlaid on the page are displayed, allowing the user to simultaneously see the setting of the effect data on the page without affecting the viewing effect of the page. When the overlay is hidden, only the target project's page is restricted, meeting the user's various viewing needs. The display and hiding control of the overlay can also be set in the toggle switch for user convenience. Considering that the effect data may have multiple effect images, and the target project's page may also have multiple pages, the correspondence between the effect data and the target project can be a routing association between each effect image and the corresponding page, so that the effect image can be displayed on the correct page.

[0061] Step S313, determining a hidden component for hiding the effect data and a display component for displaying the target project page; based on the hidden component and the display component, combined with the component for disabling the overlay layer, obtaining a third display component corresponding to the project mode.

[0062] The project mode is a display mode that does not display effect data but only displays the original page of the target project, allowing users to view elements such as the style theme of the target project page and determine whether the effect data meets design requirements based on the style theme. A hidden component that can hide the effect data and a display component that displays the page can be set. Based on the hidden component and the display component, a third display component is obtained in combination with a component that disables the overlay layer to realize the function of displaying only the page of the target project.

[0063] Optionally, the component for disabling the overlay layer in the third display component can disable the overlay layer function to reduce display anomalies caused by the overlay layer and display the project page without the overlay effect to the user.

[0064] exist Figure 3 In the illustrated embodiment, various display components with different functions can be designed based on multiple perspectives, such as effect, contrast, and original page style, to achieve different display modes. This meets the diverse viewing needs of users from different angles during the preview process, effectively optimizing the preview effect, helping users to view, understand, and communicate design solutions, reducing communication costs during the design process, accelerating project progress, and saving time and labor costs. Furthermore, the multiple display modes can adapt to a variety of project needs without requiring additional setup or development, further improving the development efficiency of the vehicle-mounted system.

[0065] Optionally, see Figure 4 , Figure 4 A detailed flow chart of step S320 is provided in an embodiment of the present application. Step S320 may include steps S321-S324.

[0066] Step S321: Create a switching component.

[0067] Among them, a switching component for switching can be created first. The switching component can be a corresponding floating ball, switch key or other functional plug-in.

[0068] Step S322: Determine the enumeration type of each display mode.

[0069] Among them, taking into account the different requirements of different display modes, taking the floating ball as an example, the floating ball component can display different function switching buttons in different display modes. Therefore, in order to realize multiple functions, corresponding enumeration types can be defined in the code to represent three different display modes.

[0070] For example, the method of determining the enumeration type may include: / / Define the enumeration type const MODE={ PURE_IMAGE: 'pureImage', / / effect mode; OVERLAY_IMAGE: 'overlayImage', / / contrast mode; PURE_PROJECT: 'pureProject' / / Project mode.

[0071] Step S323: Determine a triggering event for the corresponding display mode based on the enumeration type.

[0072] Among them, taking into account the triggering characteristics of components such as the floating ball, the trigger event bound to each display mode can be determined according to the enumeration type. The trigger event can be a click event. For example, clicking a certain area of ​​the floating ball can realize mode switching or corresponding overlay hiding / displaying functions, etc., so as to bind the corresponding trigger event to each display mode.

[0073] Step S324: Based on the multiple triggering events and the switching components, a switching switch for switching between the multiple display modes is obtained.

[0074] The trigger event can be updated to the switching component, and other components can be notified to perform corresponding updates, thereby obtaining a switching switch capable of switching between multiple display modes.

[0075] It should be noted that the toggle switch is set in the page edge area of ​​the target project. For example, the toggle switch is fixed in the upper left corner or lower left corner of the page. The toggle switch occupies a small page space and will not occupy the key area of ​​the page. It does not affect the display effects of various display modes. Mode switching and function adjustment operations can be achieved by clicking, which is simple and convenient to operate.

[0076] For example, when the toggle switch is clicked, you can switch from effect mode to contrast mode. Accordingly, the toggle switch can control the first display component and the third display component to be turned off, the second display component to be turned on, etc. After switching to contrast mode, the display area on the toggle switch can represent the hiding / display of the overlay layer, as well as the function of adjusting the transparency of the overlay layer, so that the user can adjust the display of the overlay layer in real time according to actual needs in contrast mode.

[0077] exist Figure 4 In the illustrated embodiment, a convenient and quick switching switch can be provided for the user to switch the display mode according to actual needs, thereby effectively improving the user's operating experience during the display process and meeting a variety of different viewing needs.

[0078] Optionally, see Figure 5 , Figure 5 A detailed flowchart of step S100 is provided in an embodiment of the present application. Step S100 may include steps S110-S120.

[0079] Step S110 : In a design tool, select corresponding design data based on a target project.

[0080] Among them, considering that the developed design tool may include multiple different types of data corresponding to different front-end projects, therefore, you can first select the design data that needs to be uploaded corresponding to the target project in the developed design tool according to the target project. The design data may include design drawings of the user interface for display or comparison.

[0081] Optionally, since the project type of the target project can be a front-end project type set in a vehicle-mounted system or other device, such as h5, Android, WeChat applet, Alibaba applet, etc., in order to associate the target project with the design data, the design data can be stored and processed through information identification. For example, the unique identity identifier of the project type of the target project is added to the name of the design data, such as unique coding data consisting of name + version + device number, etc.

[0082] Step S120: uploading the design data to the communication-connected server through the design tool.

[0083] The identification information of the target project can be used as an index to query the design data related to the design tool from multiple data, and the design data can be uploaded to a communication-connected server for processing.

[0084] Optionally, after the design data of the target project is found, the design data may be filtered according to the actual needs of the user, taking into account the diversity of the design data, so as to obtain the data required by the user for uploading.

[0085] exist Figure 5 In the embodiment described, corresponding design data can be selected for uploading according to the identity of the target project, which effectively improves the accuracy of the design data and reduces errors such as design data not corresponding to the project.

[0086] Optionally, see Figure 6 , Figure 6 A detailed flow chart of step S200 is provided in an embodiment of the present application. Step S200 may include steps S210-S220.

[0087] Step S210: determining, through the server, a target project corresponding to the design data from among a plurality of front-end projects.

[0088] Among them, taking into account the differences in hardware performance, operation methods and other factors between the design tool and the carrier device where the target project is located, and the server needs to process data of multiple front-end projects, the server can first determine the corresponding target project among multiple front-end projects based on the received design data.

[0089] Optionally, the server may also use the identification information included in the design data as an index to search for multiple front-end projects and obtain a front-end project with the same identification information as the target project.

[0090] In step S220 , the server processes the design data based on the target project to obtain effect data for preview display.

[0091] The server can process the design data according to the actual hardware, operation and other conditions of the target project to obtain effect data that can be previewed and displayed in the target project.

[0092] Optionally, the server can obtain device characteristics of the target project, which may include the hardware conditions of the target project (such as screen size, resolution, color performance, etc.), style characteristics of the pages in the target project (such as color, font, icon and other elements), etc., and perform corresponding color adjustment, interface adjustment, page paging and other adjustment processing on the design data based on the hardware conditions and style characteristics to obtain effect data suitable for preview and display of the target project.

[0093] exist Figure 6 In the embodiment shown, the design data can be processed according to the actual situation of the target project so that the target project can preview and display the effect data normally, reduce the display difference caused by the large difference between the design and the actual installation environment, and improve the authenticity and effectiveness of the effect display.

[0094] Optionally, see Figure 7 , Figure 7 This is a flow chart of another interface preview method provided in an embodiment of the present application. The method may further include steps S410-S420.

[0095] Step S410 , performing parallel processing in batches on multiple sub-nodes of the page in the selected initial design tool to obtain a derived array.

[0096] Among them, a suitable initial design tool can be selected for development processing, and multiple sub-nodes of the page in the initial design tool can be processed in batches and in parallel to obtain corresponding export arrays.

[0097] Optionally, a suitable initial design tool can be selected for development and processing, enabling the resulting design tool to communicate with the server. For example, the initial design tool's processing may include: obtaining all page images with a zoom level of 1 in the current page of the initial design tool through the corresponding development component; obtaining the picData of all child nodes of the current page; setting a batch size (e.g., batchSize = 5); dividing the node array into multiple batches of up to 5 nodes each; and processing each batch in parallel. Taking Figma as an example, the initial design tool can be used to call the exportAsync method for each node (Figma's exportAsync method is primarily used to export Figma nodes, such as canvases, components, and images, to a specified file format, such as PNG, SVG, or PDF, allowing developers to implement customized export logic in plugins to facilitate users to quickly export required design assets). The export format can be set to 'PNG', the zoom level to 1, and the result returned is an object containing the node name, ID, and image data. If the export fails, the error is recorded and null is returned. The nodes that failed to export (null value) are filtered out, and the successful results of all batches are merged into an array to obtain the export array.

[0098] Optionally, an appropriate batch size can be set to balance performance and memory usage of the design tool.

[0099] Step S420: Determine a design tool including the data structure of the export array and the message data.

[0100] Among them, the memory pressure can be reduced and the processing efficiency can be improved by batch parallel processing. The returned data structure can be determined based on the exported array, and the corresponding message data during data transmission can be determined to obtain the corresponding design tools.

[0101] For example, the returned data structure can be: { name: string; / / Node name; id: string; / / Node ID; pic: Uint8Array; / / Image data (PNG format); } Optionally, when the design tool exchanges data with the server, it can send messages using the post Message communication mechanism. The message type can be Message Type.PicList, and the message data can contain an array of all successfully exported node image data. If the node export fails, an error message can be logged in the console, and the failed node will be filtered out and not included in the final result.

[0102] exist Figure 7 In the illustrated embodiment, user interface design and data upload can be performed in the developed design tool, effectively improving the efficiency of data transmission between the design tool and the server.

[0103] Optionally, see Figure 8 , Figure 8 This is a flow chart of another interface preview method provided in an embodiment of the present application. The method may further include steps S510-S540.

[0104] Step S510: Obtain feedback data generated by the user based on the effect data.

[0105] Considering that after the multi-mode preview display of the effect data, the user may have corresponding modification opinions based on the actual viewing situation, therefore, feedback data generated by the user based on the effect data can be obtained.

[0106] Optionally, the feedback data may include various types of data such as comments, text comments, or voice comments generated by users based on the displayed effect data.

[0107] Step S520: Using a design tool, modify the design data based on the feedback data to obtain modified data, and upload the modified data to a server.

[0108] The feedback data may be sent to a terminal device where the design tool is located, so that the designer can modify the original design data based on the feedback data, obtain the corresponding modified data and send it to the server for further processing.

[0109] Step S530: Process the modified data through the server to obtain updated data.

[0110] Among them, the server can continue to process the modified data into updated data suitable for displaying the target project. The processing method is similar to that of the design data and will not be repeated here.

[0111] Step S540: Preview and display the updated data in multiple modes through the target project.

[0112] Among them, the target project can obtain updated data in real time and preview it in multiple modes.

[0113] Optionally, multiple revisions can be iterated based on actual circumstances until the updated data currently previewed meets the user's review requirements. During the revision process, designers and users can simultaneously reference the previewed data in the target project to align project details, reduce the number of revisions, shorten the design and revision cycle, lower the cost of design revisions, and improve user satisfaction.

[0114] exist Figure 8 In the embodiment shown, a unified visual display result can be provided for multiple parties to communicate and provide feedback, and modification suggestions can be fed back in real time, thereby reducing information gaps in the design process and promoting collaborative processing among multiple parties. All parties can intuitively discuss design details based on the preview display results, collaborate efficiently, improve project quality and team collaboration efficiency, and thus improve the development efficiency of the vehicle system.

[0115] See also Figure 9 , Figure 9 This is a structural diagram of an interface preview system provided in an embodiment of the present application. The interface preview system includes: a developed design tool 610, a server 620, and a target project 630; The target project 630 is set in the carrier device, and the server 620 is connected to the target project 630 and the design tool 610 for communication; The design tool 610 is used to upload the design data of the user interface of the designed target project 630 to the server 620; The server 620 is used to process the design data and obtain effect data for preview; The target item 630 is used to perform a multi-mode preview display of the effect data.

[0116] Optionally, the design tool 610 can be set on the designer's terminal device, such as the designer's personal computer (PC), tablet computer, smart phone (PDA) and other electronic devices with logical computing functions. The server 620 can be a terminal device such as a cloud terminal. The target project 630 can be a front-end project such as a program or software in a system in a carrier device (such as a vehicle, ship, aircraft, etc.), such as a WeChat program in a car-mounted vehicle system. The corresponding display function can be integrated and designed in the target project 630 in advance to facilitate the display and preview of the effect data. The design tool 610 is communicated with the server 620, and the server 620 is communicated with the target project 630.

[0117] In an optional embodiment, the target item 630 is specifically used to: determine display components of multiple display modes; wherein the multiple display modes include effect mode, comparison mode and project mode; set a switching switch between the multiple display modes; based on the user's selection requirements, control the switching switch to select the corresponding display mode, and preview the effect data.

[0118] In an optional embodiment, the effect mode corresponds to the first display component, the comparison mode corresponds to the second display component, and the project mode corresponds to the third display component; the target project 630 is specifically used to: create a first display component corresponding to the effect mode for displaying the effect data; create an overlay layer; determine the transparency of the overlay layer and the setting position of the overlay layer in the page of the target project 630; based on the transparency and the setting position, determine the control component for controlling the display / hide function of the overlay layer; according to the correspondence between the effect data and the target project 630, combined with the control component, obtain the second display component corresponding to the comparison mode; determine the hidden component for hiding the effect data, and the display component for displaying the page of the target project 630; based on the hidden component and the display component, combined with the component for disabling the overlay layer, obtain the third display component corresponding to the project mode.

[0119] In an optional embodiment, the target item 630 is specifically used to: create a switching component; determine the enumeration type of each display mode; based on the enumeration type, determine the trigger event of the corresponding display mode; based on multiple trigger events and switching components, obtain a switching switch for switching between multiple display modes; wherein the switching switch is set in the page edge area of ​​the target item 630.

[0120] In an optional embodiment, the design tool 610 is specifically used to: select corresponding design data based on the target project 630 in the design tool 610; wherein the design data includes a user interface design drawing for display or comparison; and upload the design data to the communication connected server 620.

[0121] In an optional embodiment, the server 620 is specifically used to: determine the target project 630 corresponding to the design data in multiple front-end projects; process the design data based on the target project 630 to obtain effect data for preview display.

[0122] In an optional embodiment, the design tool 610 is developed and processed in the following manner: multiple child nodes of a page in the selected initial design tool 610 are processed in batches in parallel to obtain an export array; and the design tool 610 containing the data structure of the export array and the message data is determined.

[0123] In an optional embodiment, the target project 630 is also used to obtain feedback data generated by the user based on the effect data; the design tool 610 is also used to modify the design data based on the feedback data, obtain modified data, and upload the modified data to the server 620; the server 620 is also used to process the modified data to obtain updated data; the target project 630 is also used to perform a multi-mode preview display of the updated data.

[0124] Since the principle of solving the problem by the interface preview system in the embodiment of the present application is similar to that in the embodiment of the aforementioned interface preview method, the implementation of the interface preview system in this embodiment can refer to the description in the embodiment of the aforementioned interface preview method, and the repeated parts will not be repeated.

[0125] An embodiment of the present application also provides a computer program product, which includes a computer program / instructions. When the computer program / instructions are executed by a processor, the steps of any one of the interface preview methods provided in this embodiment are implemented.

[0126] In the several embodiments provided in this application, it should be understood that the disclosed devices can also be implemented in other ways. The device embodiments described above are merely schematic. For example, the block diagrams in the accompanying drawings show the possible architecture, functions and operations of the devices according to the multiple embodiments of the present application. In this regard, each box in the block diagram can represent a module, a program segment or a part of a code, and the module, program segment or a part of the code contains one or more executable instructions for implementing the specified logical functions. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram, and the combination of the block diagrams, can be implemented with a dedicated hardware-based system that performs the specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.

[0127] In addition, the functional modules in each embodiment of the present application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0128] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes a number of instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as USB flash drives, mobile hard drives, read-only memories (ROM), random access memories (RAM), magnetic disks or optical disks.

[0129] The foregoing is merely an embodiment of the present application and is not intended to limit the scope of protection of the present application. Various modifications and variations are possible for those skilled in the art. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application shall be included within the scope of protection of the present application. It should be noted that similar reference numerals and letters represent similar items in the following figures. Therefore, once an item is defined in one figure, it does not need to be further defined or explained in subsequent figures.

[0130] The above is only a specific implementation method of the present application, but the scope of protection of the present application is not limited thereto. Any technician familiar with this technical field can easily think of changes or replacements within the technical scope disclosed in this application, which should be covered by the scope of protection of the present application.

[0131] It should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, the elements defined by the phrase "comprising..." do not exclude the presence of other identical elements in the process, method, article, or device comprising the elements.

Claims

1. An interface preview method, characterized in that: The method comprises: Upload the design data of the user interface of the designed target project to the server through the developed design tool; Processing the design data through the server to obtain effect data for preview; Through the target project, the effect data is previewed and displayed in multiple modes.

2. The method according to claim 1, characterized in that The multi-mode preview display of the effect data through the target project includes: Determine display components of multiple display modes; wherein the multiple display modes include effect mode, comparison mode and project mode; Setting a switch between the multiple display modes; Based on the user's selection requirements, the switch is controlled to select the corresponding display mode to preview and display the effect data.

3. The method according to claim 2, characterized in that in, The effect mode corresponds to the first display component, the comparison mode corresponds to the second display component, and the project mode corresponds to the third display component; The display component for determining multiple display modes includes: Creating the first display component corresponding to the effect mode for displaying the effect data; Creating an overlay; determining the transparency of the overlay and the location of the overlay on the page of the target item; determining a control component for controlling the display / hide function of the overlay based on the transparency and the location; and obtaining the second display component corresponding to the contrast mode based on the correspondence between the effect data and the target item and the control component. Determine a hidden component for hiding the effect data and a display component for displaying the page of the target project; based on the hidden component and the display component, combined with a component for disabling the overlay layer, obtain the third display component corresponding to the project mode.

4. The method according to claim 2, characterized in that The switch for switching between the multiple display modes is set up, including: Create a toggle component; determining an enumeration type for each of said presentation modes; Determining a triggering event for the corresponding display mode based on the enumeration type; Based on the multiple triggering events and the switching components, the switching switch for switching the multiple display modes is obtained; wherein the switching switch is set in the page edge area of ​​the target item.

5. The method according to any one of claims 1 to 4, characterized in that The method of uploading the design data of the user interface of the designed target project to the server through the developed design tool includes: In the design tool, the corresponding design data is selected based on the target project; wherein the design data includes a user interface design diagram for display or comparison; The design data is uploaded to the communication-connected server through the design tool.

6. The method according to any one of claims 1 to 4, characterized in that The server processes the design data to obtain preview effect data, including: Determining, by the server, the target project corresponding to the design data among a plurality of front-end projects; The server processes the design data based on the target project to obtain the effect data for preview display.

7. The method according to any one of claims 1 to 4, characterized in that in, The design tool is developed by: Process multiple sub-nodes of the page in the selected initial design tool in batches and in parallel to obtain an export array; The design tool is determined to include a data structure of the derived array and message data.

8. The method according to any one of claims 1 to 4, characterized in that The method further comprises: Obtaining feedback data generated by users based on the effect data; Modifying the design data based on the feedback data using the design tool to obtain modified data, and uploading the modified data to the server; Processing the modified data through the server to obtain updated data; The updated data is previewed in multiple modes through the target item.

9. An interface preview system, characterized in that: The system includes: a developed design tool, a server, and a target project; Wherein, the target project is set in a carrier device, and the server is communicatively connected to the target project and the design tool; The design tool is used to upload the design data of the user interface of the designed target project to the server; The server is used to process the design data to obtain effect data for preview; The target item is used to perform a multi-mode preview display of the effect data.

10. A computer program product, characterized in that The computer program product comprises a computer program / instruction, and when the computer program / instruction is executed by a processor, the steps in the method according to any one of claims 1 to 8 are implemented.

Images