A product prototype automatic design method, system, device and storage medium

Abstract

The application provides a product prototype automatic design method, system, equipment and storage medium, the product prototype automatic design method comprises the following steps: S1: collecting and selecting prototype collocation data, newly creating the prototype; S2: constructing the system structure of the prototype; S3: setting the page function and structure of each level page based on the constructed system structure; S4: after completing the page function setting of each level page, automatically generating a prototype design. Through the prototype collocation of the newly created prototype, the construction of the prototype system structure and the setting of the page function and structure, the application can realize automatic generation of a prototype design.

Description

Technical Field

[0001] This invention relates to the field of product prototyping technology, and in particular to an automated product prototyping method, system, device, and storage medium. Background Technology

[0002] Product managers need to design product prototypes throughout their work. Product prototypes are the primary form of expressing requirements and an important tool for communicating feature development. In some companies, product prototypes even replace Word as the sole means of requirement communication. Currently, designing a new product prototype requires product managers to design the page structure, layout, and interaction logic between components using prototyping tools. This process involves drawing the prototype using wireframes, vector graphics, or combinations of components, which is time-consuming. Modifying pages with pre-defined interaction logic is also difficult. For product managers, refining the requirement solution requires continuous modification and refinement of the product prototype. An automated product prototype design system can help product managers improve the efficiency of prototype design and accurately express product requirements.

[0003] In the current product prototyping process, components need to be manually dragged and dropped to complete the prototype page design. Some complex components need to be drawn by hand, which is time-consuming. Moreover, the selection, layout and style design of page elements need to be set one by one, which cannot guarantee a high degree of consistency of page elements and style, affecting the designer's vision. Summary of the Invention

[0004] In view of the shortcomings of the prior art described above, the purpose of this invention is to provide an automated product prototype design method, system, device and storage medium to solve the problems of the prior art requiring manual dragging of components to assemble a complete prototype page during the prototype design process. This includes setting the selection, layout and style of page elements one by one, which leads to problems such as inconsistent page element styles, difficulty in setting page layout, and cumbersome process.

[0005] To achieve the above and other related objectives, the present invention provides an automated product prototype design method, characterized by comprising the following steps:

[0006] S1: Collect and select prototype matching data, and create the prototype;

[0007] S2: Construct the system architecture of the prototype;

[0008] S3: Based on the constructed system structure, set the page functions and structure of each level of page;

[0009] S4: After completing the page function settings for each level of page, automatically generate the prototype design.

[0010] In one embodiment of the present invention, in step S1, the prototype matching data includes: the system size, basic color scheme, and style color tone of the prototype.

[0011] In one embodiment of the present invention, S1 further includes clicking "Confirm" after completing the creation of the prototype to enter the system structure overview page.

[0012] In one embodiment of the present invention, S2 includes: on the system structure sorting page, clicking to open the editing mode to perform first-level function editing, the first-level function being system structure classification, the system structure classification defining the names of second-level, third-level and fourth-level pages, and adding or deleting the second-level, third-level and fourth-level pages by adding or deleting.

[0013] In one embodiment of the present invention, each page includes the following page types: list page, add page, icon page, and information display page.

[0014] In one embodiment of the present invention, the added page is a pop-up page.

[0015] In one embodiment of the present invention, S2 further includes: clicking to generate a system structure to create a page structure of the prototype, wherein the page structure is: each first-level page includes several second-level pages, each second-level page includes several third-level pages, and each third-level page includes several fourth-level pages.

[0016] In one embodiment of the present invention, in step S3, when setting the page functions at each level, the corresponding page type is first determined; based on the determined page type, the function setting page will have different built-in setting items, including function item settings, filter item settings, and field settings.

[0017] In one embodiment of the present invention, in step S3, the content of the function settings required for different page types is different. The list page supports function item settings, filter item settings, and field settings; the chart page supports layout settings, chart type selection and data display filling, and function item settings; the add page supports page size customization, page content layout settings, content input mode selection, and function item settings.

[0018] In one embodiment of the present invention, the added page is configured with separate page functions, and the interactive effect of clicking to jump is achieved by setting associated function items.

[0019] In one embodiment of the present invention, the function item settings include function buttons and an add page.

[0020] In one embodiment of the present invention, the filter settings include option name and option type settings, wherein the option name is customized and the option type is filtered.

[0021] In one embodiment of the present invention, the field settings include:

[0022] Select the number of data entries to display in the prototype, enter the field names and field values, and the list data will be randomly generated and displayed when the prototype is created based on the arrangement and combination of each field.

[0023] In one embodiment of the present invention, S4 includes:

[0024] S41: Match the prototype design pages with the function settings pages in the page function settings, and display the automatically generated prototype design pages in the canvas;

[0025] S42: Style the automatically generated prototype design page;

[0026] S43: Manually adjust the generated prototype using the basic elements and components displayed on the drawing board;

[0027] S44: After setting up each page, click Prototype Preview to view the display effect, and then click Save to generate the complete product prototype.

[0028] In one embodiment of the present invention, S43 includes: if there are cases where the logic settings between pages and function buttons have not been performed in the previous steps and need to be set in the interaction panel, the connection between two components can be established by dragging the link point of the component to other components, or the component can be manually selected in the interaction panel to set the interaction effect and animation effect. It can also support fuzzy search for the interaction effect name to display interaction examples and setting logic.

[0029] This invention also provides an automated product prototype design system, characterized in that it includes:

[0030] A prototype creation module is used to collect and select prototype matching data and create the prototype.

[0031] A prototype system construction module, which constructs the system structure of the prototype;

[0032] The page function setting module configures the page functions and structure of each level of page based on the constructed system structure; and

[0033] The prototype generation module automatically generates a prototype design after completing the page functions of each level of the page.

[0034] In one embodiment of the present invention, the prototype creation module includes:

[0035] A prototype system size selection module, wherein the prototype size selection module has several prototype sizes for selection;

[0036] A color matching setting module, comprising a primary color matching module and an auxiliary color matching module for mutual color matching; and

[0037] The style selection module allows you to choose the type of color scheme used to define the prototype.

[0038] In one embodiment of the present invention, the prototype system construction module includes: a hierarchical creation module, which creates prototypes according to page levels; and

[0039] Page naming module; the page naming module selects the name of the page after the category is created.

[0040] In one embodiment of the present invention, the function setting module further includes:

[0041] The function setting module includes function buttons and an add page for querying, resetting, importing, and exporting pages;

[0042] The filter setting module allows users to customize option names and filter options based on option types.

[0043] The field setting module allows users to input field names and values ​​based on the number of data entries selected for the prototype display. This enables the list data to be randomly generated and displayed when the prototype is created, based on the arrangement and combination of the fields.

[0044] In one embodiment of the present invention, the prototype generation module includes:

[0045] An automatic generation module that automatically generates a product prototype based on prototype matching data and page function setting data;

[0046] The manual generation module establishes associations by dragging and dropping the link points of components onto other components and selecting the type of interaction effect.

[0047] The present invention also provides an electronic device, characterized in that it comprises:

[0048] A memory and a processor, wherein the memory stores at least one program, which is loaded and executed by the processor to implement the method described above.

[0049] The present invention further provides a computer-readable storage medium, characterized in that the storage medium stores at least one instruction, which is loaded and executed by a processor to implement the method described above.

[0050] As described above, the product prototype automated design method of the present invention has the following beneficial effects:

[0051] 1. By utilizing a large amount of stored basic prototype page design data and user selections when creating a new prototype, the overall structure, color, and style are designed, establishing a basic color scheme for the product prototype.

[0052] 2. By combining the settings of each functional area, selecting the purpose of the page, building the functional structure of the page, setting the functional logic of the page, naming and setting the content of each function, and then automatically generating a prototype based on the set functions;

[0053] 3. Modify the prototype by changing the page's functional structure. Alternatively, you can manually adjust the prototype to automatically generate it, or modify it by exporting the prototype source file or importing it into software such as Axure or Sketch. Attached Figure Description

[0054] Figure 1 This is a flowchart of the prototype design method of the present invention.

[0055] Figure 2 This is a flowchart of automated product prototype design in a preferred embodiment of the present invention;

[0056] Figure 3 This is a schematic diagram illustrating the effect of creating a new prototype page according to the present invention;

[0057] Figure 4 This is a schematic diagram showing the system structure overview page of the present invention;

[0058] Figure 5 A schematic diagram illustrating the page functions and structural settings of this invention;

[0059] Figure 6 A schematic diagram illustrating the effect of the prototype design page of this invention;

[0060] Figure 7 This is a system architecture diagram for the prototype design of this invention. Detailed Implementation

[0061] The following specific examples illustrate the implementation of the present invention. Those skilled in the art can easily understand other advantages and effects of the present invention from the content disclosed in this specification. The present invention can also be implemented or applied through other different specific embodiments, and various details in this specification can also be modified or changed based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that, unless otherwise specified, the following embodiments and features can be combined with each other. It should also be understood that the terminology used in the embodiments of the present invention is for describing specific implementation schemes and not for limiting the scope of protection of the present invention. Test methods in the following embodiments that do not specify specific conditions are generally performed under conventional conditions or according to the conditions recommended by the respective manufacturers.

[0062] Please see Figures 1 to 6 It should be understood that the structures, proportions, sizes, etc., illustrated in the accompanying drawings are merely for illustrative purposes to aid those skilled in the art and to facilitate understanding. They are not intended to limit the scope of the invention and therefore have no substantial technical significance. Any modifications to the structure, changes in proportions, or adjustments to size, without affecting the effectiveness or purpose of the invention, should still fall within the scope of the technical content disclosed herein. Furthermore, the terms "upper," "lower," "left," "right," "middle," and "one" used in this specification are merely for clarity and not intended to limit the scope of the invention. Changes or adjustments to their relative relationships, without substantially altering the technical content, should also be considered within the scope of the invention.

[0063] Please see Figure 1 This invention provides an automated product prototype design method, comprising the following steps:

[0064] S1: Collect and select prototype matching data, and create a new prototype;

[0065] S2: System structure for building prototypes;

[0066] S3: Configure the page functions and structure of each level of page based on the constructed system structure;

[0067] S4: After completing the page function settings for each level of page, automatically generate the prototype design.

[0068] In this embodiment, during the product prototype design process, the prototype is configured with data when it is created, the system structure is built, and the functions and structure of the pages are pre-set. After the settings are completed, the prototype product is automatically generated according to the pre-set page type, function options and layout.

[0069] like Figure 2In the illustrated embodiments, prototype design using the design method and system of this invention typically involves three stages: system structure analysis, page structure analysis, and prototype adjustment. In the system structure analysis stage, a prototype is first created; then, the system size is customized or a commonly used built-in system size is selected to build the web-based system; then, the industry, type, color, and style are selected as needed. Colors are referenced from the RGB color table, selecting two primary colors and multiple auxiliary colors. The primary colors are mainly the background color of the top of the entire page and the side navigation bar, while the auxiliary colors are mainly the colors of functional items, fonts, buttons, and the page logo. Simultaneously, the style selection (e.g., minimalist, business, technological, 3D, flat, festive, fresh) sets the tone for the prototype colors (see...). Figure 3 ).

[0070] Next, the system structure will be reviewed. After clicking "Confirm" on the new prototype page, you will enter the system structure review page (see [link]). Figure 4 Next, select the user for each page level, then select the page function. This can be done by clicking to open the editing module and edit the first-level functions. The first-level functions are a system structure classification, serving as a general term for second-, third-, and fourth-level pages. There are no actual pages at this level. Clicking "Add" or "Delete" allows you to add or delete second-, third-, and fourth-level pages, with a maximum support of four levels.

[0071] After completing the system structure review, we move on to the page structure review stage, which can be found in [reference needed]. Figure 5Each page requires selecting its purpose to choose / confirm the page type. Different page types have different settings in the next page function settings section. Page types are divided into list pages (data list pages), add pages (pop-up pages for content selection or editing), chart pages (graphical or tabular pages for data display, used for data statistics), and information display pages (used for displaying text or numerical information). Next, you need to select and fill in the function content, adjust the page layout, and set / select functions for list pages. This mainly includes three sections, which can be freely added or deleted: First, function item settings, where function types are divided into function buttons and add pages. Basic function buttons such as query, reset, import, and export help to realize page functions. Add pages require separate page function settings and can be associated with a certain function item to achieve a click-to-jump interactive effect; Second, filter settings, which require setting option names and option types. Option names must be customized, and option types must be filtered, covering most option types on the market, including but not limited to text, radio buttons, and drop-down lists. The system supports various options including multi-select dropdowns, multi-select with search, single-select with search, lists, date and time options, and date and time options. Users can customize prompts. For single-select or multi-select options, option content can be set. If no settings are configured, the prototype will still display the complete data, but the data will be empty. Thirdly, field settings require selecting the number of data entries to display in the prototype, then entering field names and values. Field values ​​do not need to be fully listed; when generating the prototype, the list data will be randomly generated based on the arrangement of the listed fields. When outlining the system structure, it's crucial to clearly identify the page type, as different page types require different functional settings. List pages support functional items, filter options, and field settings. Next, page layout adjustments are needed: chart pages support layout settings, chart type selection, data display and population, and functional item settings; add pages support custom page size, page content layout settings, content input mode selection, and functional item settings. Once all page settings are complete, click "Generate System Structure" to create the prototype's page structure, thus completing the page structure setup.

[0072] The prototype adjustment phase then begins. After completing the page function settings, click "Generate Prototype." The system automatically generates the prototype based on the previous settings. Manually modify and adjust the page functions, mapping the prototype design pages one-to-one with the function setting pages in the page function settings, and setting the logical connections between functions. The automatically generated prototype design pages are then displayed on a canvas, and the prototype file can be downloaded. The canvas contains basic polygons, lines, text, images, buttons, and other basic components, including commonly used radio buttons, multi-select dropdowns, progress bars, checkboxes, and other basic components, covering Axure component content. Vector graphics or logo names can be searched to redirect to partner vector graphics websites for download. To make the product prototype more realistic, the pages more three-dimensional and richer, and to facilitate UI and UX designers' direct reference to the prototype, detailed settings are made to the prototype. For example, a download logo is added to the download button. Some complex logos are not included in this method; these can be downloaded and copied from specialized vector graphics or logo websites. Styles are then applied to the automatically generated prototype design pages. The style settings include color, size, position, and font effects. For color, size, position, and font effects settings, refer to the settings in Axure. After selecting a component, adjust its x and y axis position, choose a color, font type, and size, and adjust the component size by dragging the border. Manually adjust the generated prototype using the basic elements and components displayed on the artboard. After setting each page, click "Prototype Preview" to view the display effect. Click "Save" to generate the complete product prototype. For example, open a browser to view the display effect and complete the logical design between functions. Finally, download the prototype file and adjust the prototype design. The generated product prototype supports exporting prototype files or setting as a prototype template. Exported files can be imported into prototyping software such as Axure and Sketch for adjustment or viewing.

[0073] like Figure 3 The image shown is a schematic diagram illustrating the effect of creating a new prototype page according to the present invention, corresponding to step S1 of the present invention. In this step, the prototype matching data includes: the system size of the prototype, the basic color scheme, and the style color tone.

[0074] In one embodiment of the present invention, when selecting the size of the prototype system, for example, the size of the web-based system to be built is selected. Several commonly used sizes are provided for selection, and the system size can be customized. When selecting the basic color scheme, the colors refer to the RGB color table, and two main colors and multiple auxiliary colors are supported. The main colors are mainly the background color of the top of the entire page and the side navigation bar, while the auxiliary colors are mainly the colors of function items, fonts, buttons, and the color scheme of the page logo. When selecting the style and color tone of the prototype, the system provides a selection of styles such as minimalist, business, technological, 3D, flat, festive, and fresh.

[0075] Figure 3 In the illustrated embodiment, the left vertical column displays the "Create Prototype" function options, which includes "My Prototypes," "My Templates," "Recycle Bin," and "Template Square." "My Prototypes" stores prototypes based on user requirements, "My Templates" stores frequently used built-in prototype templates, "Recycle Bin" recycles deleted prototypes, and "Template Square" allows users to download templates. The upper right displays two prototype designs: Customer Relationship Management and a Remote Medical Diagnosis System. The lower right section, from top to bottom, includes options for prototype name, prototype system size, primary prototype color, secondary prototype color, and style.

[0076] Step S1 also includes clicking "Confirm" after completing the new prototype to enter the system structure overview page.

[0077] like Figure 4 The diagram shown is a schematic of the system structure overview page of the present invention, corresponding to step S2 of the present invention.

[0078] S2 includes: On the system structure overview page, click to start the editing mode and edit the first-level function. The first-level function is the system structure classification. The system structure classification defines the names of the second-level, third-level and fourth-level pages, and the second-level, third-level and fourth-level pages can be added or deleted by adding or deleting them.

[0079] In this embodiment, clicking to start the edit mode allows for editing of the first-level functions (the first-level functions are the system structure classifications, which are the general term for the second-level, third-level, and fourth-level pages; there are no actual pages; click to add or delete). At the same time, you can add or delete second-level, third-level, and fourth-level pages, with a maximum support for setting up to the fourth level of pages (including the add page, which is a pop-up window).

[0080] Each page includes the following page types: list page, add page, icon page, and information display page.

[0081] In one embodiment of the present invention, each page requires the selection of a page type. Different page types have different settings provided in the next page function settings section. Among them, the list page is a data list page, the add page is a pop-up page for content selection or editing, the chart page is a graphic or table page for data display and is used for data statistics, and the information display page is used for displaying text or numerical information.

[0082] The add page is a pop-up page; it is usually set on the third or fourth level page.

[0083] S2 further includes: clicking to generate a system structure to create a page structure for the prototype, wherein each first-level page includes several second-level pages, each second-level page includes several third-level pages, and each third-level page includes several fourth-level pages.

[0084] In other words, after all pages are set up, click "Generate System Structure" to create the page structure of the prototype. The page relationships are displayed according to the structure settings, showing how many second-level pages a first-level page contains, how many third-level pages a second-level page contains, and how many fourth-level pages a third-level page contains, while also displaying the page names.

[0085] Figure 4 In the illustrated embodiment, the top includes options for system structure overview, page function settings, and prototype design; currently, the system structure overview option is displayed. Below this are options for enabling / disabling edit mode and adding / deleting first-level functions. Below that is a list, horizontally arranged with first-level functions, second-level pages, third-level pages, fourth-level pages, and operations. The columns for first-level functions include customer management, contract management, and statistical analysis. Second-level pages include page management and page types; the columns for page names include My Customers, All Customers, Public Customers, All Customers, My Contracts, Sales Trends, Total Customers, Customer Analysis, and Sales Funnel; page types include list pages and icon pages. Third-level pages include page names and page types; page names include Add Customer, Follow-up Customer, Customer Information, Follow-up Status, Assignment, Edit Contract, and View Contract; page types include add page and information display page. Fourth-level pages include fourth-level pages and page types; fourth-level pages include follow-up information, payment information, attribution records, attachment information, and operation logs; page types include information display page. Operations include adding and deleting.

[0086] like Figure 5 The diagram shown illustrates the effects of the page functions and structure settings of this invention, corresponding to step S3 of this invention.

[0087] In S3, when setting up page functions at each level, the corresponding page type is first determined. Based on the determined page type, the function settings page will have different built-in settings items, including function item settings, filter item settings, and field settings.

[0088] In S3, the content of the function settings required for different page types is different. List pages support function item settings, filter item settings, and field settings; chart pages support layout settings, chart type selection and data display filling, and function item settings; add pages support page size customization, page content layout settings, content input mode selection, and function item settings.

[0089] The feature settings include feature buttons and add pages.

[0090] Add a separate page for setting page functions, and implement the interactive effect of clicking to jump by setting associated function items.

[0091] The filter settings include option name and option type settings. Option names can be customized, and option types can be filtered. Option types include text, single-select dropdown, multi-select dropdown, multi-select with search, single-select with search, list, date and time, date and time options, etc. You can set your own prompts. If the option is a single-select or multi-select option, you can set the option content. If no settings are set, the prototype can still be displayed completely, but the data will be empty.

[0092] Field settings include: selecting the number of data entries to display in the prototype, entering field names and values, so that the list data is randomly generated and displayed when the prototype is generated based on the arrangement and combination of each field.

[0093] Figure 5In the illustrated embodiment, the left vertical column includes customer management, contract management, and statistical analysis. The "My Customers" list page in customer management includes "Add Customer," "Follow-up Customer," and "Customer Information." Customer information includes follow-up information, payment information, attribution information, attachment information, and operation logs. The upper right section displays system structure, page function settings, and prototype design options. Below this is the "My Customers" page, a list page in the "Page Editing" state. The right side also includes options to save and generate a prototype. Below this are function item settings, filter item settings, and field settings. Function item settings include function items, function types, associated pages, and operations. Function items include query, reset, add, export, import, transfer, exit the pool, and add a new function item. Function types include function buttons and add pages. The operation is delete. Filter item settings include filter items, filter box types, prompts, option display, and operations. Filter items include customer name, customer registration, follow-up status, attribution department, customer source, new follow-up date, and new filter item. The filter box types include text, single-select dropdown, multi-select dropdown, single-select + search, multi-select + search, and date. Prompts include "Please enter customer name," "Please enter customer level," "Add customer," "Please select department," "Please select customer source," and "Please select follow-up date." Options include A-level, B-level, and C-level. The action is delete. Field settings include fields, field value examples, actions, and the number of data entries to display. Fields include customer name, contact number, customer source, and customer level. Field value examples include, for example, Zhang San, Li Si, phone numbers 13333333333, 18888888888, customer source options are WeChat, phone, and customer referral, and customer level options are A-level, B-level, and C-level. The action is delete. After creating a prototype based on the matched data and establishing the system structure, the page functionality is configured through function item settings, filter item settings, and field settings. In field settings, the fields and field options are arranged and combined, and then, depending on the amount of data to be displayed, some or all of the data is selected for display. For example, if a user sets three fields: Username: Zhang San, Li Si; Customer Source: WeChat, Phone, Customer Referral; Customer Level: Level A, Level B, Level C, then there are a total of 18 possible combinations, such as Zhang San-WeChat-Level A, Zhang San-Phone-Level A. If the prototype needs to display 10 data entries, it can be randomly selected from these 18 combinations, or the first 10 data entries can be selected and displayed according to the logic of descending or ascending order of name, customer source, and customer level.

[0094] like Figure 6 The diagram shown illustrates the effect of the prototype design page of this invention, corresponding to step S4 of this invention. This step specifically includes:

[0095] S41: Match the prototype design pages one-to-one with the function settings pages in the page function settings, and display the automatically generated prototype design pages on the canvas. The canvas contains basic polygons, lines, text, images, buttons, and other basic elements, including commonly used radio buttons, multi-select dropdowns, progress bars, checkboxes, and other basic components. It covers Axure element content and allows users to search for vector graphics or logo names to jump to partner vector graphics websites for vector icon download. In product prototype design, to make the product prototype more realistic, the pages more three-dimensional and richer, and to facilitate UI and UX designers to directly reference the prototype, detailed settings will be made to the prototype. For example, a download logo will be added to the download button. Some complex logos are not included in this method; these can be downloaded and copied from specialized vector graphics or logo websites.

[0096] S42: Style the automatically generated prototype design page; the style includes color, size, position, font effects, etc. The settings for color, size, position, and font effects can be found in Axure. After selecting the component, adjust the x and y axis positions, select the color, select the font type and size, and adjust the component size by dragging the border.

[0097] S43: Manually adjust the generated prototype using the basic elements and components displayed on the canvas;

[0098] S44: After setting up each page, click Prototype Preview to view the display effect. Click Save to generate the complete product prototype. For example, you can open a browser to view the display effect. The generated product prototype supports exporting prototype files or setting them as prototype templates. The exported files can be imported into prototyping software such as Axure and Sketch for adjustment or viewing.

[0099] S43 includes: If there are situations where the logic settings between pages and function buttons have not been set up in the previous steps and need to be set up in the interaction panel, you can establish a connection between two components by dragging the link point of the component to other components, or directly select the component in the interaction panel to set the interaction effect and animation effect. It also supports fuzzy search for the interaction effect name to display interaction examples and setting logic.

[0100] Figure 6In the illustrated embodiment, the left vertical column includes Customer Management, Contract Management, and Statistical Analysis. Customer Management includes "My Customers," which includes New Customers, Follow-up Customers, Customer Information, All Customers, and Public Pool Customers. Customer Information includes Follow-up Information, Payment Information, Attribution Information, Attachment Information, and Operation Logs. The top center of the page includes System Structure Overview, Page Function Settings, and Prototype Design Options, currently set to Prototype Design. Below this is the "My Customers" page; the right side includes Save, Prototype Preview, and Export Prototype File. Below this is the generated prototype design, with rulers at the top and left of the window. The left side includes "My Customers," which includes New Customers, Follow-up Customers, and Customer Information. Above this are Customer Management, Contract Management, and Statistical Analysis. Below this are fields for Customer Name, Customer Level, Follow-up Status, Attribution Department, Customer Source, and Latest Follow-up Date. The right side also has Query and Reset options. Below this are options for New Policy, Export, Import, Transfer, and Exit Public Pool. Below this is a list page for Customer Name, Contact Number, Customer Source, Customer Level, Responsible Person, Attribution Department, Follow-up Status, and Follow-up Time. Its right side includes a component search box, basic components, form components, commonly used component selection options and illustrations.

[0101] like Figure 7 As shown, the present invention also provides an automated product prototype design system, comprising: a prototype creation module, a prototype system construction module, a page function setting module, and a prototype generation module. The prototype creation module collects and selects prototype matching data to create a new prototype; the prototype system construction module constructs the system structure of the prototype; the page function setting module sets the page functions and structure of each level of pages based on the constructed system structure; and the prototype generation module automatically generates the prototype design after completing the page functions of each level of pages.

[0102] In one embodiment of the present invention, a prototype can be built using a model creation module. During the building process, combinations are created using collected matching data or by selecting existing matching data, and the system architecture pages are constructed using a prototype system building module. After construction, the functions and structure of each level of page are set using a page function setting module. Once the settings are complete, the prototype design is automatically generated. This prototype design method automates the generation of prototype designs based on the selection, layout, and style of page elements, thus ensuring the consistency of page elements and style.

[0103] The prototype creation module includes: a prototype system size selection module, which provides several prototype sizes for selection; a color scheme setting module, which includes a primary color scheme module and an auxiliary color scheme module for mutual color matching; and a style selection module, which selects the type of prototype color scheme to define the overall tone.

[0104] In one embodiment of the present invention, when creating a prototype, the prototype system size can be customized through the prototype system size selection module, or several commonly used system sizes can be selected. The color scheme setting module allows for page color selection, referencing the RGB color table, and supports the selection of two primary colors and multiple secondary colors. The primary colors are mainly the background color of the top of the entire page and the side navigation bar, while the secondary colors are mainly the colors of function items, fonts, buttons, and the page logo.

[0105] The prototype system building modules include: a hierarchical creation module, which creates pages according to their level; and a page naming module, which selects the names of the pages created according to their category.

[0106] In one embodiment of the present invention, the hierarchical creation module can add and delete first-level, second-level, third-level, and fourth-level pages during the page creation process. It supports a maximum of four levels of pages, and requires the editing mode to be enabled for editing the first-level functions. The first-level functions are system structure categories, serving as a general term for the second-level, third-level, and fourth-level pages; they do not have actual pages and are added or deleted by clicking "Add".

[0107] The function settings module also includes: a function item settings module, which includes function buttons and an add page for querying, resetting, importing, and exporting; a filter item settings module, which allows for customizable option names and filtering based on option type; and a field settings module, which, based on the number of data entries selected for the prototype to display, allows users to input field names and values, causing the list data to be randomly generated and displayed during prototype creation based on the arrangement and combination of these fields.

[0108] In one embodiment of the present invention, for example, the "My Customers" list page is configured with three main sections, which can be freely added or deleted.

[0109] The function setting module categorizes functions into function buttons and add pages, such as basic function buttons like query, reset, import, and export. This helps implement page functionality; adding pages requires separate page function settings and can be associated with specific function items to achieve click-to-jump interaction. The filter setting module allows setting option names and types. Option names must be customizable, and option types must be filtered. Option types include text, single-select dropdown, multi-select dropdown, multi-select with search, single-select with search, list, date, time, and date with time options. Users can customize prompts, such as for single-select or multi-select options. If no settings are configured, the prototype will still be fully displayed, but the data will be empty. The field setting module allows users to select the number of data entries to display in the prototype, then enter field names and values. Field values ​​do not need to be fully listed; during prototype generation, the list data is randomly generated based on the arrangement of the fields. The prototype generation module includes an automatic generation module, which automatically generates a product prototype based on the prototype's associated data and page function settings. Manually generate modules by dragging and dropping the link points of components onto other components to establish connections and select the type of interaction effect.

[0110] In this embodiment, when the manual generation module is being adjusted, if there are any previously undefined logical settings between pages or function buttons, these can be configured in the interaction panel. Connections between components can be established by dragging and dropping the link points of components to other components. Alternatively, components can be manually selected in the interaction panel to set their interactive effects. In addition to Axure's built-in interactive effects, the interactive content also includes some animation effects. Fuzzy search for interactive effect names is also supported to display interactive examples and setting logic.

[0111] The present invention further provides an electronic device, including: a memory and a processor, wherein the memory stores at least one program, and the at least one program is loaded and executed by the processor to implement the aforementioned method.

[0112] The present invention further provides a computer-readable storage medium storing at least one instruction, which is loaded and executed by a processor to implement the aforementioned method. This computer-readable storage medium may be included in the electronic device described in the above embodiments, or it may exist independently and not assembled into the electronic device.

[0113] In summary, this invention creates new prototypes by collecting prototype matching data based on user needs or selecting commonly used prototype matching data built into the system. It then constructs the system structure in edit mode, sets the page functions and structure of each level of the page after the system structure is built, and automatically generates prototype designs after the page function settings are completed. This ensures the convenience of selecting, arranging, and designing page elements, maintains a consistent prototype design style, and simplifies page layout. Furthermore, after generating the prototype design, interactive effects between components can be established and selected by dragging and dropping the link points of components to other components. Therefore, this invention effectively overcomes the various shortcomings of existing technologies and has high industrial application value.

[0114] The above embodiments are merely illustrative of the principles and effects of the present invention and are not intended to limit the invention. Any person skilled in the art can modify or alter the above embodiments without departing from the spirit and scope of the present invention. Therefore, all equivalent modifications or alterations made by those skilled in the art without departing from the spirit and technical concept disclosed in the present invention should still be covered by the claims of the present invention.

Claims

1. An automated product prototype design method, characterized in that, Includes the following steps: S1: Collect and select prototype matching data, and create the prototype; S2: Construct the system architecture of the prototype; S3: Based on the constructed system structure, the page functions and structure of each level of page are set, including determining the corresponding page type and setting it on the function setting page based on the determined page type. The function setting page has different built-in setting items. Among them, the list page supports function item settings, filter item settings, and field settings; the chart page supports layout settings, chart type selection and data display filling, and function item settings; the add page supports page size customization, page content layout settings, content input mode selection, and function item settings. S4: After completing the page function settings for each level of page, automatically generate the prototype design.

2. The product prototype automated design method according to claim 1, characterized in that: In S1, the prototype matching data includes: the system size, basic color scheme, and style color tone of the prototype.

3. The product prototype automated design method according to claim 1, characterized in that: S1 also includes clicking "Confirm" after completing the creation of the prototype to enter the system structure overview page.

4. The product prototype automated design method according to claim 3, characterized in that: S2 includes: on the system structure sorting page, clicking to start the editing mode to edit the first-level function, the first-level function being the system structure classification, the system structure classification defining the names of the second-level, third-level and fourth-level pages, and adding or deleting the second-level, third-level and fourth-level pages.

5. The product prototype automated design method according to claim 4, characterized in that: Each page includes the following page types: list page, add page, icon page, and information display page.

6. The product prototype automated design method according to claim 5, characterized in that: The added page is a pop-up page.

7. The automated product prototype design method according to claim 1, characterized in that: S2 further includes: clicking to generate a system structure to create a page structure for the prototype, wherein each first-level page includes several second-level pages, each second-level page includes several third-level pages, and each third-level page includes several fourth-level pages.

8. The automated product prototype design method according to claim 1, characterized in that: In S3, the function settings page includes function item settings, filter item settings, and field settings.

9. The product prototype automated design method according to claim 1, characterized in that: The added page has its own page functions set, and by setting associated function items, the interactive effect of clicking to jump can be achieved.

10. The product prototype automated design method according to claim 8, characterized in that: The function settings include function buttons and add pages.

11. The product prototype automated design method according to claim 8, characterized in that: The filter settings include option name and option type settings. The option name can be customized, and the option type can be used for filtering.

12. The product prototype automated design method according to claim 8, characterized in that: The field settings include: selecting the number of data entries to be displayed in the prototype, entering the field names and field values, so that the list data is randomly generated and displayed when the prototype is generated based on the arrangement and combination of each field.

13. The product prototype automated design method according to claim 1, characterized in that: S4 includes: S41: Match the prototype design pages with the function settings pages in the page function settings, and display the automatically generated prototype design pages in the canvas; S42: Style the automatically generated prototype design page; S43: Manually adjust the generated prototype using the basic elements and components displayed on the drawing board; S44: After setting up each page, click Prototype Preview to view the display effect, and then click Save to generate the complete product prototype.

14. The product prototype automated design method according to claim 13, characterized in that: S43 includes: if there are cases where the logic settings between pages and function buttons have not been set in advance and need to be set in the interaction panel, the connection between two components can be established by dragging the link point of the component to other components, or the component can be manually selected in the interaction panel to set the interaction effect and animation effect. It can also support fuzzy search for the interaction effect name to display interaction examples and setting logic.

15. An automated product prototype design system, characterized in that, include: A prototype creation module is used to collect and select prototype matching data and create the prototype. A prototype system construction module, which constructs the system structure of the prototype; The page function settings module configures the page functions and structure of each level of page based on the constructed system structure. This includes determining the corresponding page type and setting the page functions on the function settings page based on the determined page type. The function settings page has different built-in settings items. Specifically, the list page supports function item settings, filter item settings, and field settings; the chart page supports layout settings, chart type selection and data display filling, and function item settings; and the add page supports custom page size, page content layout settings, content input mode selection, and function item settings. as well as The prototype generation module automatically generates a prototype design after completing the page functions of each level of the page.

16. The automated product prototype design system according to claim 15, characterized in that: The prototype creation module includes: A prototype system size selection module, wherein the prototype size selection module has several prototype sizes for selection; A color matching setting module, comprising a primary color matching module and an auxiliary color matching module for mutual color matching; and The style selection module allows you to choose the type of color scheme used to define the prototype.

17. The automated product prototype design system according to claim 15, characterized in that: The prototype system construction module includes: A hierarchical creation module, which creates pages according to their level; and Page naming module; the page naming module selects the name of the page after the category is created.

18. The automated product prototype design system according to claim 15, characterized in that: The function setting module also includes: The function setting module includes function buttons and an add page for querying, resetting, importing, and exporting pages; The filter setting module allows users to customize option names and filter options based on option types. The field setting module allows users to input field names and values ​​based on the number of data entries selected for the prototype display. This enables the list data to be randomly generated and displayed when the prototype is created, based on the arrangement and combination of the fields.

19. The product prototype automated design system according to claim 15, characterized in that: The prototype generation module includes: An automatic generation module that automatically generates a product prototype based on prototype matching data and page function setting data; The manual generation module establishes associations by dragging and dropping the link points of components onto other components and selecting the type of interaction effect.

20. An electronic device, characterized in that, include: A memory and a processor, wherein the memory stores at least one program, which is loaded and executed by the processor to implement the method of any one of claims 1 to 14.

21. A computer-readable storage medium, characterized in that, The storage medium stores at least one instruction, which is loaded and executed by a processor to implement the method as described in any one of claims 1 to 14.

Images