CN113485708A - Sketch-based cross-platform interface development method and system, computer device and medium - Google Patents
Sketch-based cross-platform interface development method and system, computer device and medium Download PDFInfo
- Publication number
- CN113485708A CN113485708A CN202110875275.XA CN202110875275A CN113485708A CN 113485708 A CN113485708 A CN 113485708A CN 202110875275 A CN202110875275 A CN 202110875275A CN 113485708 A CN113485708 A CN 113485708A
- Authority
- CN
- China
- Prior art keywords
- interface
- development
- cross
- platform
- layout file
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明实施例公开一种基于Sketch的跨平台界面开发方法和系统、计算机设备和介质。在一具体实施方式中，该方法包括：接收服务器发送的代码化界面设计组件，代码化界面设计组件包括基于界面设计原图的跨平台描述文件和Web文件；基于代码化界面设计组件利用Sketch插件生成界面布局文件，界面布局文件包括至少一个图案面板、以及与每个图案面板对应的数据和图片；将界面布局文件上传至服务器，以使得服务器将界面布局文件传输至第三开发端以形成跨平台界面。该实施方式通过利用Sketch插件将自服务器接收的代码化界面设计组件生成界面布局文件，使第三开发端生成跨平台界面，实现了重复的无差异性的界面开发。
The embodiments of the present invention disclose a Sketch-based cross-platform interface development method and system, computer equipment and medium. In a specific embodiment, the method includes: receiving a coded interface design component sent by a server, where the coded interface design component includes a cross-platform description file and a Web file based on the original interface design image; the coded interface design component uses a Sketch plug-in based on the original image of the interface design. Generate an interface layout file, the interface layout file includes at least one pattern panel, and data and pictures corresponding to each pattern panel; upload the interface layout file to the server, so that the server transmits the interface layout file to the third development terminal to form a cross-section. Platform interface. In this embodiment, by using the Sketch plug-in to generate the interface layout file from the coded interface design components received from the server, the third development end generates a cross-platform interface, thereby realizing repeated and undifferentiated interface development.
Description
Technical Field
The present invention relates to computer technology. And more particularly, to a Sketch-based cross-platform interface development method and system, computer device, and medium.
Background
With the iteration of the business development requirement and the strict control of the design draft by the ui (user interface) designer, how to save the time of design and development and the cost of communication with each other become more and more the focus of development and design. However, at present, because the code permissions of different development designers are observed among different project group members, a UI designer and a developer need to repeatedly perform redundant interface design and development work in each interface development process, and thus a great amount of development cost is wasted.
Disclosure of Invention
The present invention aims to provide a solution to at least one of the problems of the prior art.
In order to achieve the purpose, the invention adopts the following technical scheme:
the invention provides a Sketch-based cross-platform interface development method, which is applied to a first development end and comprises the following steps:
receiving a coding interface design component sent by a server, wherein the coding interface design component is from a second development end and comprises a cross-platform description file and a Web file based on interface design original drawings;
generating an interface layout file by using a Sketch plug-in based on a coding interface design component, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel;
and uploading the interface layout file to a server, so that the server transmits the interface layout file to a third sending terminal to form a cross-platform interface.
In some optional embodiments, generating the interface layout file using the Sketch plug-in based on the coding interface design component further comprises:
reading a Web file of the coding interface design component to generate a Web display interface;
modifying display parameters of the interface and data parameters in the cross-platform description file corresponding to the display parameters based on the Web display interface to create a pattern panel; and
and splicing at least one pattern panel, and generating an interface layout file according to the spliced pattern panels and the data and pictures corresponding to each pattern panel.
In some optional embodiments, modifying the display parameters of the interface and the data parameters in the cross-platform description file corresponding to the display parameters to create the pattern panel based on the Web display interface further comprises:
modifying display parameters of an interface based on the Web display interface; and
converting the data based on the FLUTTER of the coding interface design component into Web data by using a data communication bridge to call and modify the data parameters in the cross-platform description file corresponding to the display parameters; and
and creating a pattern panel according to the modified display parameters and the modification of the data parameters.
In some alternative embodiments, the display parameters include one or more of canvas size, number of pattern panel graphics, pattern panel tab attributes, number of data, and data value.
In some alternative embodiments, the first development end includes a material library, in which a plurality of pattern panel materials are stored,
creating a pattern panel from the modified display parameters and data parameters further comprises:
and creating a pattern panel from the pattern panel material according to the modified display parameters and data parameters.
The second aspect of the present invention provides a method for developing a cross-platform interface, which is applied to a third development terminal, and includes:
receiving an interface layout file sent by a server, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel, and is generated by utilizing a Sketch plug-in based on a coding interface design component;
and carrying out visual configuration on the interface layout file to form a cross-platform interface.
In some optional embodiments, visually configuring the interface layout file to form a cross-platform interface across platforms includes:
drawing a pattern panel in the interface according to the interface layout file; and
and modifying the data source in the interface layout file, and binding data for the pattern panel to complete the configuration of event binding and jump logic in the pattern panel.
The third aspect of the present invention provides a method for developing a cross-platform interface, including:
the second development end sends a coding interface design component to the server, and the coding interface design component is forwarded to the first development end through the server, wherein the coding interface design component comprises a cross-platform description file and a Web file based on the interface design original drawing;
the method comprises the steps that a first development end generates an interface layout file by utilizing a Sketch plug-in unit based on a coding interface design component and uploads the interface layout file to a server, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel; and
and the third sending terminal receives the interface layout file sent by the server and forms a cross-platform interface.
In some optional embodiments, after the third sending terminal receives the interface layout file sent by the server and forms the cross-platform interface, the method further includes:
and embedding the pre-stored 3D model image into a cross-platform interface by using a 3D engine.
A fourth aspect of the present invention provides a cross-platform interface development system, including: a first development terminal, a second development terminal, a third development terminal and a server, wherein
The second development end is configured to send a coding interface design component to the server and forward the coding interface design component to the first development end through the server, and the coding interface design component comprises a cross-platform description file and a Web file based on interface design original drawings;
the first development terminal is configured to generate an interface layout file by using the Sketch plug-in based on the coding interface design component and upload the interface layout file to the server, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel; and
the third development terminal is configured to receive the interface layout file sent by the server and form a cross-platform interface.
A fifth aspect of the present invention provides a computer apparatus comprising:
one or more processors;
a storage device on which one or more programs are stored;
the one or more programs, when executed by the one or more processors, cause the one or more processors to perform: the method as described above.
A sixth aspect of the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein the program when executed by a processor implements: the method as described above.
The invention has the following beneficial effects:
aiming at the existing problems, the invention sets a Sketch-based cross-platform interface development method and system, computer equipment and medium, generates an interface layout file from a coded interface design component received from a server through a Sketch plug-in, enables a third opening sending end to carry out visual configuration to generate a cross-platform interface, and realizes repeated non-difference interface development, thereby overcoming the problems in the prior art, effectively improving the flexibility of interface design development, improving the development efficiency, reducing the development cost, and having wide application prospect.
Drawings
The following describes embodiments of the present invention in further detail with reference to the accompanying drawings.
FIG. 1 shows a flow diagram of a Sketch-based cross-platform interface development method according to an embodiment of the invention;
FIG. 2 is a block diagram illustrating a cross-platform interface development system implementing a cross-platform interface development method according to an embodiment of the present invention;
FIG. 3 is a diagram of an interaction corridor of a cross-platform interface development method according to an embodiment of the invention;
FIG. 4 is a schematic diagram of a Web display interface in a cross-platform interface development method according to one embodiment of the invention;
FIG. 5 illustrates a schematic diagram of a pattern panel created by a cross-platform interface development method according to one embodiment of the invention;
FIG. 6 illustrates a schematic diagram of a cross-platform interface generated in accordance with an embodiment of the present invention after being combined with a 3D model image; and
fig. 7 is a schematic structural diagram of a computer device according to another embodiment of the present invention.
Detailed Description
In order to more clearly illustrate the present invention, the present invention will be further described with reference to the following examples and the accompanying drawings. Similar parts in the figures are denoted by the same reference numerals. It is to be understood by persons skilled in the art that the following detailed description is illustrative and not restrictive, and is not to be taken as limiting the scope of the invention.
As shown in fig. 1, an embodiment of the present invention provides a Sketch-based cross-platform interface development method, applied to a first development end, including:
receiving a coding interface design component sent by a server, wherein the coding interface design component is from a second development end and comprises a cross-platform description file and a Web file based on interface design original drawings;
generating an interface layout file by using a Sketch plug-in based on a coding interface design component, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel;
and uploading the interface layout file to a server, so that the server transmits the interface layout file to a third sending terminal to form a cross-platform interface.
In this embodiment, the coded interface design component received from the server generates an interface layout file through the Sketch plug-in, so that the third opening end generates a cross-platform interface, and repeated non-differential interface development is realized, thereby solving the problems in the prior art, effectively improving the flexibility of interface design development, improving the development efficiency, reducing the development cost, and having a wide application prospect.
In one specific example, shown in fig. 2 is a cross-platform interface development system, comprising a server 100, a first development end 201, a second development end 202, and a third development end 203. The server 100 may be a cloud server or a local server, and one or more servers 100 may be provided, which is not limited in the present invention. The first, second and third development ends 201, 202 and 203 may be computers, portable computers, tablet computers, smart phones and other electronic devices capable of running development tools. In an embodiment of the present invention, for example, the first development terminal 201 may be an electronic device on which the Sketch plug-in is loaded and executed, the second development terminal 202 may be an electronic device on which the Android Studio tool is loaded and executed, and the third development terminal 203 may be an electronic device on which the Flutter-based Web tool is loaded and executed. Of course, those skilled in the art will understand that the above loaded development tools are only exemplary, and the present invention is not intended to limit the specific loading tools on the first development end 201, the second development end 202, and the third development end 203, so as to implement the cross-platform interface development method according to the embodiment of the present invention.
The cross-platform interface development method according to the embodiment of the present invention is described in detail in the detailed workflow of the cross-platform interface development system with reference to fig. 2 and 3.
The method comprises the steps that a first client side and a second client side receive a coding interface design component sent by a server, the coding interface design component is from a second development side, and the coding interface design component comprises a cross-platform description file and a Web file based on interface design original drawings.
As shown in fig. 3, in the process S1, the second development terminal 202 sends the coded interface design component to the server 100.
Specifically, the UI designer uses a UI design tool to design interface design artwork on his client (not shown) according to the design concept of the interface development project, where the interface design artwork is, for example, a sketch, rather than the complete interface that is finally presented. Illustratively, the UI design tool may be, for example, a Sketch tool. The UI designer sends his interface design artwork to the second development end 202 in the form of a Sketch source file.
At the second development end 202, the developer matches the data logic according to the design habit using the android studio tool to code the interface design artwork. In particular, in embodiments of the present invention, the interface design artwork is converted into a Dart file, a DSL Json file, and a Web file that configures a converged overall UI interface with interface configuration and data configuration, forming a coded interface design component. The Json file of the DSL is a cross-platform description file, that is, a description file of the interface design artwork, which can be read and identified in a cross-platform. In the development process of the next step, cross-platform description files and Web files are mainly used.
In flow S2, the coding interface component forwards to the first development terminal 201 via the server 100. That is, the first development terminal 201 receives the coded interface design component transmitted by the server 100.
The second client 201 generates an interface layout file by using the Sketch plug-in based on the coding interface design component, wherein the interface layout file comprises at least one pattern panel and data and pictures corresponding to each pattern panel. It is to be understood that in embodiments of the present invention, a pattern panel refers to a panel such as a pie chart, a bar chart, a line chart, etc., and one or more pattern panels will constitute an interface through the layout.
Specifically, as shown in fig. 3, in a flow S3, the developer reads the Web file of the coding interface design component through the designed Sketch plug-in and generates a Web display interface by using the Sketch plug-in.
In this flow S3, the first development end 201 reads the Web file of the coding interface design component by using the Sketch plug-in to generate the Web display interface, and the Web display interface is as shown in fig. 4. And modifying the display parameters of the interface and the data parameters in the cross-platform description file corresponding to the display parameters based on the Web display interface to create the pattern panel. It can be understood that, specifically, in response to the operations of a developer such as click selection, keyboard input, and the like, the first client 201 modifies the display parameters of the interface and the data parameters corresponding to the display parameters based on the display parameters to create the pattern panel, where the data parameters are the data parameters described in the cross-platform description file.
More specifically, the first development terminal 201 modifies the display parameters of the interface based on the Web display interface. As can be seen in the illustration of the Web display interface in FIG. 4, the display parameters include, but are not limited to, canvas size, number of pattern faceplate graphics, and pattern faceplate graphics attributes. Taking the pie chart illustrated in fig. 4 as an example, a developer may modify one or more of the canvas size, the number of pattern panel graphics, the pattern panel graphics attribute, the data number, and the data value of the pie chart in the pattern panel to be formed in the Web display interface according to the needs of the interface development project. For example, as shown in FIG. 4, the canvas size can be set to 300-386; the number of sectors can be set to 4 according to the number of pattern panels; aiming at the graphic attributes of the pattern panel, the graphic categories can be set to be personnel safety, corresponding colors, sector radii and the like; aiming at the data quantity, four items of data of personnel safety, building deformation, building inclination and high-altitude equipment can be set, but the data is not limited to the data quantity, and specific data items can be modified, and the number of items can be increased or reduced; for the data values, personnel safety may be set to 45, building deformation to 25, building tilt to 25, and high altitude equipment to 10. It will be understood by those skilled in the art that the foregoing is by way of example only, and that the modified embodiments are not limited thereto.
In addition, it should be noted that, although the example in fig. 4 shows that the pattern panel to be created is in the form of a pie chart, the present application is not limited thereto, and may be in various pattern forms such as the form of a line chart, the form of a bar chart, and the like.
Further, the first development end converts the coding interface design component from Flutter-based data into Web data by using a data link Bridge (Bridge) to call and modify data parameters in the cross-platform description file corresponding to the display parameters. Specifically, as shown in fig. 4, after the developer completes modification of the display parameters based on the Web display interface, the developer may click a generation button in the Web display interface, and the first terminal 201 automatically generates data parameters corresponding to the display parameters through a code by using a Sketch plug-in, that is, completes modification of the data parameters, where the data parameters are data parameters in a cross-platform description file, and through this step, the developer correspondingly updates the modification content of the pattern panel to the descriptive code data by using the Sketch plug-in, and expresses the pattern panel to be created in a data form.
It is noted that the term "modify" in the above description covers editing and modifying display parameters and data parameters, because the Web file and the cross-screen description file when importing the coding interface design component usually have default values in editable projects, but these default values are only initial default styles and have no practical meaning for a specific interface development project, so that developers need to modify the corresponding editable items on the Web display interface. In addition, because the interface layout file is generated in the following steps and stored in the file, for the subsequent new project development process, a developer can directly call the interface layout file stored in the server, and the developer can complete the new project only by further simply modifying various display parameters displayed on the Web display interface in the Sketch plug-in aiming at the interface layout file, so that the term of 'modifying' can also aim at the development process of other developers on the interface. The generation and storage of the specific layout file will be described in detail below, and will not be described in detail here.
After the display parameters and the data parameters are modified, a pattern panel is created according to the modification of the modified display parameters and the data parameters, as shown in fig. 5, a specific style of the created pattern panel is shown. Specifically, the first development end 201 may further include a material library in which a plurality of design panel materials are stored, and the first development end 201 may create the design panel using the design panel materials according to the modified display parameters and data parameters using the Sketch plug-in. In this step, exemplarily, the related class parsing and development mainly related to Sketch-Api in Sketch for Objective-C in MacOS system will be referred to: and injecting an MSTextLayer to perform character editing, drawing a graph by combining MSShapeGroup and a Bezier curve NSBezierPath, and simultaneously fusing Page, Artboard and Group to perform Sketch interface pattern panel development, which is not described again.
It will be appreciated by those skilled in the art that there is not necessarily only one pattern panel in an interface development project, for example, if an interface design is provided for a smart city theme in which the visual presentation of various aspects such as personnel safety, building deformation, building inclination, overhead equipment, etc. in construction data, various area indicators in traffic layout, cameras, layout proportions of commanders, and the growth of various area greening areas in the city over time is to be performed, the process S3 is cycled to create multiple pattern panels. The specific creation flow is similar to the above, and the developer only needs to repeat the flow S3 with Sketch.
After generating all the pattern panels of the interface development project, the first terminal 201 splices the pattern panels, and generates an interface layout file according to the spliced pattern panels and the data and pictures corresponding to each pattern panel. In the layout file, only the relationship between the data and the pattern panel picture and the content relationship between the pattern panel and the data binding in advance are shown at this time, which is equivalent to that a group of pattern panels belonging to the interface project subject, the data and the pictures corresponding to each pattern panel in the group of pattern panels are associated together to form a code description form and packed into a file, wherein each pattern panel, the data and the pictures corresponding to the pattern panel can be assigned with a unique identification code id. Wherein, the identification code id is represented by a serial number, and the picture, the position coordinate, the width and the height, the data jumping process and the like of each pattern panel are described in the layout file.
The third and first development terminals 201 upload the interface layout file to the server 100, so that the server transmits the interface layout file to the third development terminal to form a cross-platform interface.
Referring to fig. 3, in a process S4, the first development terminal 201 uploads an interface layout file to the server 100.
In the flow S5, the third opening terminal 203 receives the interface layout file transmitted by the server 100, and forms a cross-platform interface in the flow S6.
Specifically, in flow S6, the third originating terminal 203 utilizes a visualization configurator to: drawing a pattern panel in the interface according to the interface layout file; and modifying the data source in the interface layout file, and binding data for the pattern panel to complete the configuration of event binding and jump logic in the pattern panel.
When drawing a pattern panel in an interface, adjusting the specific position of the pattern panel generated in the Sketch, and binding data and configuration of a jump logic based on the specific interface address of a data source described in an interface layout file, thereby finally generating a set of cross-platform interfaces which can be directly applied to platforms such as Web, Android/IOS, Windows and the like. More specifically, the third development terminal 203 may generate an interface program (APP) using a visualization configurator, which is executable by different platforms to generate a cross-platform interface for applications on these platforms. Of course the above various platforms are not intended to be limiting and other platforms are possible, such as hongmeng.
Optionally, in the visual configurator, the pattern panel may be preliminarily demonstrated and verified to facilitate further modification by the developer, and the modification process may be, for example, a design returned by the developer to the second development end, and the process is simple and easy to repeat, and can quickly provide requirement verification.
The third originating terminal 203 uploads the cross-platform interface to the server 100 in a flow S7 after generating the cross-platform interface.
Through the above arrangement, a draft can be designed according to an interface of a designer, mature design component resources are utilized in the Sketch plug-in, the design component resources are converted into cross-platform code data, each design component corresponds to a section of code data, an interface layout file comprising a plurality of pattern panels, corresponding data and pictures is formed through splicing, in the process, a plurality of widgets (widgets) are generated in the layout file, and the layout file of one interface comprises splicing of the widgets, which is equivalent to an assembly code of a cross-platform interface. And adding event binding information by importing the set code into a visual configurator, and filling data of different pattern panels, the pattern panels and the data of the same pattern panel into the pattern panel UI. And the set code is stored in the server and is subjected to pattern panel drawing and data and event binding in a visual configurator of a developer at the other end, so that repeated development and calling of multi-end and multi-stage developers are realized, the code permission among different developers and among designers is broken through, and repeated non-differential interface development is realized.
Specifically, in practical application, compared with the design work that each designer designs independently, developers directly code each complete design original image and the design work is redundant in a reciprocating mode in the prior art, the interface development method provided by the embodiment of the invention can simplify the design process, improve the repeatability of interface development, only need the developers to simply modify and configure corresponding options in the Web display interface directly at the second development end for project updating and modification in the design process, and utilize the visual configurator to perform simple data and skip logic binding at the third development end, so that the development efficiency is improved, and the development cost is reduced.
In some alternative embodiments, the server 100 may have pre-stored thereon 3D model images of project topics previously designed and uploaded by the 3D designer as described above for the interface development project. At this time, the interface system may further include a fourth development terminal, and a developer of the development terminal may download a 3D model image from the server, and embed a pre-stored 3D model image into the cross-platform interface using the 3D engine, as shown in fig. 6, where the 3D model may be, for example, a 3D model image of a smart city. Through the setting, the cross-platform interface can be combined with the 3D model image to carry out flexible visual display.
Corresponding to the Sketch-based interface development method, as shown in fig. 2, the cross-platform interface development system includes: a first development terminal, a second development terminal, a third development terminal and a server, wherein
The second development end is configured to send a coding interface design component to the server and forward the coding interface design component to the first development end through the server, and the coding interface design component comprises a cross-platform description file and a Web file based on interface design original drawings;
the first development terminal is configured to generate an interface layout file by using the Sketch plug-in based on the coding interface design component and upload the interface layout file to the server, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel; and
the third development terminal is configured to receive the interface layout file sent by the server and form a cross-platform interface.
In this embodiment, the cross-platform interface development system generates an interface layout file from the coded interface design component received from the server by using the Sketch plug-in on the second development end, so that the third development end generates a cross-platform interface, and repeated non-differential interface development is realized, thereby solving the problems in the prior art, effectively improving the flexibility of interface design development, improving the development efficiency, reducing the development cost, and having a wide application prospect.
Based on the same inventive concept, the embodiment of the invention also provides a cross-platform interface development method, which comprises the following steps:
the second development end sends a coding interface design component to the server, and the coding interface design component is forwarded to the first development end through the server, wherein the coding interface design component comprises a cross-platform description file and a Web file based on the interface design original drawing;
the method comprises the steps that a first development end generates an interface layout file by utilizing a Sketch plug-in unit based on a coding interface design component and uploads the interface layout file to a server, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel; and
and the third sending terminal receives the interface layout file sent by the server and forms a cross-platform interface.
Optionally, after the third sending terminal receives the interface layout file sent by the server and forms the cross-platform interface, the method further includes: and embedding the pre-stored 3D model image into a cross-platform interface by using a 3D engine.
In the embodiment, the coded interface design component received from the server is generated into the interface layout file by using the Sketch plug-in on the second development end, so that the third development end generates the cross-platform interface, and the repeated non-differential interface development is realized, thereby solving the problems in the prior art, effectively improving the flexibility of interface design development, improving the development efficiency and reducing the development cost, and the cross-platform interface and the 3D model image can be combined to perform flexible visual display by inserting the 3D model image.
Based on the same inventive concept, an embodiment of the present invention further provides a cross-platform interface development method, applied to a third development terminal, including:
receiving an interface layout file sent by a server, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel, and is generated by utilizing a Sketch plug-in based on a coding interface design component;
and carrying out visual configuration on the interface layout file to form a cross-platform interface.
The interface development method provided by this embodiment has been described in detail in describing the Sketch-based cross-platform interface development method, and reference may be made to the above description for relevant parts, which are not described herein again.
In this embodiment, the third development end receives an interface layout file formed by the second development end from the server to generate a cross-platform interface, wherein the interface layout file generates a coded interface design component received from the server by using a Sketch plug-in on the second development end, so that repeated non-differential interface development is realized, thereby solving the problems in the prior art, effectively improving the flexibility of interface design development, improving the development efficiency, reducing the development cost, and having a wide application prospect.
Another embodiment of the present invention provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements: receiving a coding interface design component sent by a server, wherein the coding interface design component is from a second development end and comprises a cross-platform description file and a Web file based on interface design original drawings; generating an interface layout file by using a Sketch plug-in based on a coding interface design component, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel; and uploading the interface layout file to a server, so that the server transmits the interface layout file to a third sending terminal to form a cross-platform interface.
Another embodiment of the present invention provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements: the second development end sends a coding interface design component to the server, and the coding interface design component is forwarded to the first development end through the server, wherein the coding interface design component comprises a cross-platform description file and a Web file based on the interface design original drawing; the method comprises the steps that a first development end generates an interface layout file by utilizing a Sketch plug-in unit based on a coding interface design component and uploads the interface layout file to a server, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel; and the third sending terminal receives the interface layout file sent by the server and forms a cross-platform interface.
Another embodiment of the present invention provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements: receiving an interface layout file sent by a server, wherein the interface layout file comprises at least one pattern panel, and data and pictures corresponding to each pattern panel, and is generated by utilizing a Sketch plug-in based on a coding interface design component; and carrying out visual configuration on the interface layout file to form a cross-platform interface.
In practice, the computer-readable storage medium may take any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present embodiment, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
As shown in fig. 7, another embodiment of the present invention provides a schematic structural diagram of a computer device. The computer device 12 shown in fig. 7 is only an example and should not bring any limitations to the functionality or scope of use of the embodiments of the present invention.
As shown in FIG. 7, computer device 12 is in the form of a general purpose computing device. The components of computer device 12 may include, but are not limited to: one or more processors or processing units 16, a system memory 28, and a bus 18 that couples various system components including the system memory 28 and the processing unit 16.
The system memory 28 may include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM)30 and/or cache memory 32. Computer device 12 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 34 may be used to read from and write to non-removable, nonvolatile magnetic media (not shown in FIG. 7, and commonly referred to as a "hard drive"). Although not shown in FIG. 7, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 by one or more data media interfaces. Memory 28 may include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the invention.
A program/utility 40 having a set (at least one) of program modules 42 may be stored, for example, in memory 28, such program modules 42 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which examples or some combination thereof may comprise an implementation of a network environment. Program modules 42 generally carry out the functions and/or methodologies of the described embodiments of the invention.
The processor unit 16 executes various functional applications and data processing by running a program stored in the system memory 28, for example, implementing a Sketch-based cross-platform interface development method or a cross-platform interface development method provided by an embodiment of the present invention.
It should be noted that, the order of the steps of the gaze tracking method provided in the embodiment of the present invention may be properly expressed, and the steps may be increased or decreased according to the situation, and any method that can be easily changed within the technical scope disclosed by the present disclosure by a person skilled in the art should be covered in the protection scope of the present invention, and therefore, the detailed description is omitted.
Aiming at the existing problems, the invention sets a Sketch-based cross-platform interface development method and system, computer equipment and medium, generates an interface layout file from a coded interface design component received from a server through a Sketch plug-in, enables a third opening sending end to carry out visual configuration to generate a cross-platform interface, and realizes repeated non-difference interface development, thereby overcoming the problems in the prior art, effectively improving the flexibility of interface design development, improving the development efficiency, reducing the development cost, and having wide application prospect.
It should be understood that the above-mentioned embodiments of the present invention are only examples for clearly illustrating the present invention, and are not intended to limit the embodiments of the present invention, and it will be obvious to those skilled in the art that other variations and modifications can be made on the basis of the above description, and all embodiments cannot be exhaustive, and all obvious variations and modifications belonging to the technical scheme of the present invention are within the protection scope of the present invention.
Claims (12)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110875275.XA CN113485708B (en) | 2021-07-30 | 2021-07-30 | Cross-platform interface development method and system based on Sketch, computer device and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110875275.XA CN113485708B (en) | 2021-07-30 | 2021-07-30 | Cross-platform interface development method and system based on Sketch, computer device and medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113485708A true CN113485708A (en) | 2021-10-08 |
| CN113485708B CN113485708B (en) | 2025-03-11 |
Family
ID=77945000
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110875275.XA Active CN113485708B (en) | 2021-07-30 | 2021-07-30 | Cross-platform interface development method and system based on Sketch, computer device and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113485708B (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114064040A (en) * | 2021-11-30 | 2022-02-18 | 上海汇付数据服务有限公司 | Terminal code automatic generation method and platform based on visual interface |
| CN114416069A (en) * | 2022-01-24 | 2022-04-29 | 京东方科技集团股份有限公司 | Application development platform, microprogram generation method, device and storage medium |
| CN114510220A (en) * | 2021-12-16 | 2022-05-17 | 中国科学院软件研究所 | Distributed application development and debugging method and auxiliary tool for HarmonyOS |
| CN117591175A (en) * | 2023-11-21 | 2024-02-23 | 中航信移动科技有限公司 | Weex-based method, medium and equipment for cross-platform compatibility of hong Monte systems |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102081520A (en) * | 2011-01-14 | 2011-06-01 | 杭州海康威视数字技术股份有限公司 | Method and system for establishing graphical user interface of embedded digital video recorder |
| US20160098250A1 (en) * | 2014-10-03 | 2016-04-07 | Kony, Inc. | Application prototyping tool |
| CN108984174A (en) * | 2018-07-03 | 2018-12-11 | 百度在线网络技术（北京）有限公司 | Cross-platform application creation method, device, server and storage medium |
| CN109189539A (en) * | 2018-09-03 | 2019-01-11 | 深圳市东微智能科技股份有限公司 | Update method, terminal and the computer readable storage medium at interface |
| US20190346981A1 (en) * | 2018-05-11 | 2019-11-14 | GameCommerce, Inc. | Automated experience creation engine |
| CN111124409A (en) * | 2019-12-24 | 2020-05-08 | 深圳乐信软件技术有限公司 | Sketch-based business page generation method, device, equipment and storage medium |
| CN111475163A (en) * | 2020-06-22 | 2020-07-31 | 腾讯科技（深圳）有限公司 | Method, device and equipment for generating code file of view template and storage medium |
| CN111752562A (en) * | 2020-05-18 | 2020-10-09 | 深圳市东微智能科技股份有限公司 | Cross-platform client interface development method, device, terminal equipment and medium |
| CN112486482A (en) * | 2019-09-11 | 2021-03-12 | 北京京东尚科信息技术有限公司 | Page display method and device |
-
2021
- 2021-07-30 CN CN202110875275.XA patent/CN113485708B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102081520A (en) * | 2011-01-14 | 2011-06-01 | 杭州海康威视数字技术股份有限公司 | Method and system for establishing graphical user interface of embedded digital video recorder |
| US20160098250A1 (en) * | 2014-10-03 | 2016-04-07 | Kony, Inc. | Application prototyping tool |
| US20190346981A1 (en) * | 2018-05-11 | 2019-11-14 | GameCommerce, Inc. | Automated experience creation engine |
| CN108984174A (en) * | 2018-07-03 | 2018-12-11 | 百度在线网络技术（北京）有限公司 | Cross-platform application creation method, device, server and storage medium |
| CN109189539A (en) * | 2018-09-03 | 2019-01-11 | 深圳市东微智能科技股份有限公司 | Update method, terminal and the computer readable storage medium at interface |
| CN112486482A (en) * | 2019-09-11 | 2021-03-12 | 北京京东尚科信息技术有限公司 | Page display method and device |
| CN111124409A (en) * | 2019-12-24 | 2020-05-08 | 深圳乐信软件技术有限公司 | Sketch-based business page generation method, device, equipment and storage medium |
| CN111752562A (en) * | 2020-05-18 | 2020-10-09 | 深圳市东微智能科技股份有限公司 | Cross-platform client interface development method, device, terminal equipment and medium |
| CN111475163A (en) * | 2020-06-22 | 2020-07-31 | 腾讯科技（深圳）有限公司 | Method, device and equipment for generating code file of view template and storage medium |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114064040A (en) * | 2021-11-30 | 2022-02-18 | 上海汇付数据服务有限公司 | Terminal code automatic generation method and platform based on visual interface |
| CN114510220A (en) * | 2021-12-16 | 2022-05-17 | 中国科学院软件研究所 | Distributed application development and debugging method and auxiliary tool for HarmonyOS |
| CN114416069A (en) * | 2022-01-24 | 2022-04-29 | 京东方科技集团股份有限公司 | Application development platform, microprogram generation method, device and storage medium |
| WO2023138435A1 (en) * | 2022-01-24 | 2023-07-27 | 京东方科技集团股份有限公司 | Application development platform, micro-program generation method, and device and storage medium |
| CN114416069B (en) * | 2022-01-24 | 2025-09-02 | 京东方科技集团股份有限公司 | Application development platform, microprogram generation method, device and storage medium |
| CN117591175A (en) * | 2023-11-21 | 2024-02-23 | 中航信移动科技有限公司 | Weex-based method, medium and equipment for cross-platform compatibility of hong Monte systems |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113485708B (en) | 2025-03-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113485708A (en) | Sketch-based cross-platform interface development method and system, computer device and medium | |
| CN111740948B (en) | Data packet issuing method, dynamic updating method, device, equipment and medium | |
| US11816459B2 (en) | Graphical user interface programming system | |
| CN107393013B (en) | Virtual roaming file generation and display method, device, medium, equipment and system | |
| US10207190B2 (en) | Technologies for native game experience in web rendering engine | |
| CN100580667C (en) | Method and device for generating form by using form type | |
| KR20130086138A (en) | Cross-platform application framework | |
| CN108008954A (en) | Page configuration method, apparatus, server and medium | |
| US10019424B2 (en) | System and method that internally converts PowerPoint non-editable and motionless presentation mode slides into editable and mobile presentation mode slides (iSlides) | |
| US7603624B2 (en) | System and method for styling content in a graphical user interface control | |
| US20200285450A1 (en) | System for providing instant preview of a mobile application under development | |
| US20080215968A1 (en) | System and Method for Managing Content of Rich Media | |
| CN109960773A (en) | Page animation method, apparatus, equipment and storage medium based on HTML5 | |
| JP7280388B2 (en) | Apparatus and method, equipment and medium for implementing a customized artificial intelligence production line | |
| CN113626023B (en) | Cross-platform interface development method and system based on Sketch, computer equipment and medium | |
| KR20130017337A (en) | Hybrid app development platform architecture and test method of the same, and computer-readable recording medium with program for the same | |
| CN111045675A (en) | Page generation method, device, equipment and storage medium based on Flutter | |
| CN102289367B (en) | Command-line shell order according to pattern generates | |
| CN116932356A (en) | Cross-platform testing method, device, computer equipment and storage medium | |
| CN109471580B (en) | Visual 3D courseware editor and courseware editing method | |
| CN114130017A (en) | Game engine-based interface deployment method, device, device and storage medium | |
| CN102541544B (en) | The processing method of Tree control, Apparatus and system | |
| JP2008287365A (en) | Program generation device, program generation method, program, and recording medium | |
| CN112346736B (en) | Data processing method and system | |
| CN116962807A (en) | Video rendering method, device, equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |