CN112083924A - Software design interface consistency improving method and tool - Google Patents

Abstract

The invention provides a method and a tool for improving the consistency of a software design interface, and belongs to the technical field of software development. The software design interface consistency improving method comprises the following steps: initializing target software; using a vector graphics making tool to arrange the Sketch files of the target software and integrating the Sketch files into a specified directory; building a dependency package required by a D2C database management tool by using a node.js package management tool; using the D2C database management tool, the generation of the target programming language file is run automatically: integrating the generated programming language file into a running file in target software by using a target application system; and (3) upgrading the service or changing the software style, redefining the Sketch basic component, generating a new programming language file, and re-integrating the new programming language file into target software. The software design interface consistency promotion tool comprises a vector graphics making tool, a D2C database management tool and a target application system.

Description

A method and tool for improving the consistency of software design interface

technical field

The invention belongs to the technical field of software development, and in particular relates to a method and a tool for improving the consistency of a software design interface.

Background technique

As the functions and technologies of Internet software products are increasingly updated and developed, the software system is more and more important at the user experience level (UE) with the iterative upgrade of functions, and it is also an indicator of users' willingness to repurchase and renew software. important dimension. A system that will not degrade the overall user experience with the transformation or upgrade of business and technology will be favored by people in this field. However, in the current situation, to quickly realize the overall consistent user experience and interface design style switching of the system, it is often a very inefficient method to invest a lot of resources to rewrite the system user experience and meet the design layer implementation.

SUMMARY OF THE INVENTION

The present invention aims to solve the above-mentioned technical problems, and provides a method and a tool for improving the consistency of a software design interface.

In order to achieve the above object, the present invention adopts the following technical solutions:

A method for improving the consistency of a software design interface, comprising the following steps:

S1. Initialize the target software;

S2. Use the vector graphics production tool to organize the Sketch files of the target software and integrate them into the specified directory;

S3. Use the Node.js package management tool to establish the dependency package required by the D2C database management tool;

S4. Use the D2C database management tool to automatically run and generate the target programming language file according to the following script command:

s1, read the Sketch file;

s2, parsing the file stream;

s3. Map fields according to the rules and methods to generate the target programming language;

S5, using the target application system to integrate the generated programming language file into the target software to run the file;

S6, business upgrade or software style revision, redefine the basic components of Sketch, and generate new programming language files, which are reintegrated into the target software.

The present invention also provides a software design interface consistency improvement tool, including:

Vector graphics production tool, used to generate the Sketch file of the design system component collection of the software;

Node.js package management tool, which is used to read the description file package.json of the nodejs project module and build the dependency package;

D2C database management tool for running and generating target programming language files;

The target application system is used to integrate the required D2C basic component files to be used in the target software.

After adopting the above-mentioned technical scheme, the present invention has the following advantages:

The method and tool for improving the consistency of software design interface of the present invention can improve the unity of the underlying design style of the multi-terminal application of software products, thereby improving the overall user experience of the software product; it can help designers to standardize the work flow, and make tools, methods and outputs more accurate. Standardized and efficient, thereby increasing the proportion of design thinking work.

Description of drawings

FIG. 1 is a flow chart of the steps of a method for improving the consistency of a software design interface according to the present invention.

Detailed ways

The present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

As shown in Figure 1, a method for improving the consistency of software design interface includes the following steps:

S1. Initialize the target software;

S2. Use the vector graphics production tool to organize the Sketch files of the target software and integrate them into the specified directory;

(Sketch file is the design system component collection file of the software, this file is generated by the designer through the vector graphics production tool)

S3. Use the Node.js package management tool to build the dependency packages required by the D2C project module;

(The dependency package is the dependency package that needs to be installed to run the D2C database management tool. Specifically, use the node.js package management tool to read the package.json configuration file in the project, and use the npm install command to generate the dependency package)

S4. Use the D2C database management tool to automatically run and generate the target programming language file according to the following script command:

(The script command is the command exposed by the D2C database management tool running)

s1, read the Sketch file;

s2. Parse the file stream; parse the file through the open source script sketch-constructor.js of the sketch constructor library, obtain the file stream of Sketch through the javascript open source script jszip.js used to parse the zip file, and generate the file through the javascript method jszip The .file method generates the target JSON file, and finally the JSON.parse method is used to parse the JSON file through javascript to generate the JSON object.

s3. Map fields according to the rules and methods to generate the target programming language; based on the generated JSON object, according to the pages ID of Sketch defined by the designer, at this time, since the classification key value of the generated JSON object is the corresponding page ID, it can be obtained from Corresponding to the attributes required for JSON object extraction, recompose the JSON object required by the target, such as the required font size, color value and other attributes, and generate the target programming language based on the javascript tripartite script node-fs-extra.js used to generate the file ;

(The target programming language is the target language file generated by the D2C database management tool, which supports the generation of ts, js, less, scss, and json files)

S5, using the target application system to integrate the generated programming language file into the target software to run the file;

First, the target file is extracted into the software engineering code base, and the target language is converted into a css file that can be parsed by the browser through the loader mechanism of the open source script webpack construction tool. Finally, the css style attribute is rendered into the DOM, and finally presented in the software system.

(Target application system, used to integrate the required D2C basic component files to be used in the target software)

S6, business upgrade or software style revision, redefine the basic components of Sketch, and generate new programming language files, which are reintegrated into the target software.

The present invention also provides a software design interface consistency improvement tool, including:

Vector graphics production tool, used to generate the Sketch file of the design system component collection of the software;

Node.js package management tool, which is used to read the description file package.json of the nodejs project module and build the dependency package;

D2C database management tool for running and generating target programming language files;

The target application system is used to integrate the required D2C basic component files to be used in the target software.

The method and tool for improving the consistency of software design interface of the present invention can improve the unity of the underlying design style of the multi-terminal application of software products, thereby improving the overall user experience of the software product; it can help designers to standardize the work flow, and make tools, methods and outputs more accurate. Standardized and efficient, thereby increasing the proportion of design thinking work.

In addition to the above-mentioned preferred embodiments, the present invention also has other embodiments, and those skilled in the art can make various changes and modifications according to the present invention, as long as they do not depart from the spirit of the present invention, they shall all belong to the definitions of the appended claims of the present invention scope.

Claims (2)

1. a software design interface consistency promotion method, is characterized in that, comprises the following steps: S1. Initialize the target software; S2. Use the vector graphics production tool to organize the Sketch files of the target software and integrate them into the specified directory; S3. Use the Node.js package management tool to establish the dependency package required by the D2C database management tool; S4. Use the D2C database management tool to automatically run and generate the target programming language file according to the following script command: s1, read the Sketch file; s2, parsing the file stream; s3. Map fields according to the rules and methods to generate the target programming language; S5, using the target application system to integrate the generated programming language file into the target software to run the file; S6, business upgrade or software style revision, redefine the basic components of Sketch, and generate new programming language files, which are reintegrated into the target software. 2. a software design interface consistency promotion tool, is characterized in that, comprises: Vector graphics production tool, used to generate the Sketch file of the design system component collection of the software; Node.js package management tool, which is used to read the description file package.json of the nodejs project module and build the dependency package; D2C database management tool for running and generating target programming language files; The target application system is used to integrate the required D2C basic component files to be used in the target software.

Images