CN109032601A - Design drawing cooperates cut map device and method online - Google Patents
Design drawing cooperates cut map device and method online Download PDFInfo
- Publication number
- CN109032601A CN109032601A CN201810945315.1A CN201810945315A CN109032601A CN 109032601 A CN109032601 A CN 109032601A CN 201810945315 A CN201810945315 A CN 201810945315A CN 109032601 A CN109032601 A CN 109032601A
- Authority
- CN
- China
- Prior art keywords
- design
- design drawing
- module
- cut
- product
- 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.)
- Pending
Links
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/20—Software design
- G06F8/22—Procedural
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)
Abstract
Design drawing cooperates cut map device and method online, and the dimensional parameters for cut figure to design drawing are configured, and presets to the graph type of cutting of design drawing；The upper arq mode of design drawing is switched over, upper arq mode adjusts uploading speed by way of plug-in unit；It will be uploaded in corresponding project according to the design drawing of product demand document design, checked for product design R&D team member；Design drawing markup information and map data mining platform that designer uploads are extracted, and according to preset dimensional parameters and cuts graph type to the design drawing progress pattern cut of upload；Call the two-dimension vector graphics for cutting figure generation module for figure generation picture format is cut；The design element in design drawing uploaded according to designer, which is generated, programs the model code used for engineer；Engineer calls design drawing required for cutting the downloading of figure download module to cut figure.The present invention mitigates designer's manual work burden, and mechanical manual operations is automated, teamwork efficiency and precision are improved.
Description
Technical field
The present invention relates to graph processing technique fields, and in particular to a kind of design drawing cooperates online cuts map device and method.
Background technique
Interface be in order to meet the standardized demand of Software Specialtyization and what is generated carry out software using interface
Beautify the design branch of Optimat.Specifically include software startup, Design of Software Framework, push-button design, panel
Design, menu design, label design, icon design, scroll bar and status bar design, installation process design, packaging and commercialization.
Software interface is also referred to as UI (User Interface), is the first impression that human-computer interaction pith and software use, is
The important component of software design.Software interface design is increasingly paid attention to by software design.Currently, domestic product manager,
In Project Product development process, none individual cooperation technology scheme can help their efficient ditches by designer, engineer
It is logical.
After design drawing is finalized a text, designer needs to be marked manually for each element on design drawing, and by engineer's requirement
Element will be needed to be sliced, this cumbersome manual work can occupy designer's operating time 1/3~1/2, and easily wrong mark spill tag,
Or omit slice needed for engineer.Designer needs when delivering design drawing to engineer by the big of element each on design drawing
The information such as small, color, spacing mark on design drawing one by one.Many designers still carry out manual measurement on graphics software
It marks, export picture format, it is close and numerous on a picture to be covered with markup information, it is then packaged and issues engineer.Engineer beats
It opens when checking, thickly dotted markup information checks that experience is bad, simultaneously as mark will appear wrong mark, spill tag phenomenon manually,
Engineer needs to be compared with designer again, takes time and effort.
Summary of the invention
A kind of design drawing of being designed to provide of the embodiment of the present invention cooperates cut map device and method online, mitigates designer
Mechanical manual operations is automated, improves teamwork efficiency and precision by manual work burden.
To achieve the above object, the embodiment of the present invention, which provides a kind of design drawing and cooperates online, cuts map device, described to cut figure dress
It sets and includes:
Size presetting module, the dimensional parameters for cut figure to design drawing are configured, and dimensional parameters are configured as
IOS system, Android system or type of webpage dimensional parameters；
Type presetting module is preset for the graph type of cutting to design drawing, is cut graph type and is configured as file/figure
Channel type, slice type or shared icon type；
Mode switch module is switched over for the upper arq mode to design drawing, and upper arq mode is by way of plug-in unit pair
Uploading speed adjustment；
Design drawing uploading module, for uploading designer according to the design drawing of product demand document design to corresponding project
It is middle to be checked for product design R&D team member；
Information extraction modules, the design element markup information and map data mining platform of the design drawing for extracting designer's upload；
Code generation module, the design element in the design drawing for being uploaded according to designer is generated to be made for engineer's programming
Model code；
Project canvas module, the design drawing for Exhibition Design Shi Shangchuan are checked for product design R&D team member；
Figure generation module is cut, the two-dimension vector graphics of picture format are generated for figure will to be cut；
Figure download module is cut, design drawing required for downloading for engineer cuts figure.
It cooperating online as design drawing and cuts the preferred embodiment of map device, the map device of cutting further includes file uploading module,
File uploading module uploads to product demand file used in Project design process in corresponding project for product manager
It is checked for product design R&D team member.In file upload procedure can based on Photoshop plug-in unit, Sketch plug-in unit or
Adobe XD CC (Adobe Experience Design Creative Cloud) client.Plug-in unit is that one kind follows centainly
The program that the application programming interfaces of specification are write out.It (may be propped up simultaneously under its system platform that can only operate in procedure stipulation
Hold multiple platforms), and specified platform isolated operation cannot be detached from.Adobe XD CC is one-stop User Experience/
User Interface design platform can carry out mobile application and webpage design and prototype, while be also to combine design
With establish prototype function, and provide the cross-platform deisgn product of technical grade performance simultaneously.Designer can be with using Adobe XD CC
More efficient accurate static compilation or the frame diagram completed is to the transformation for interacting prototype.
It cooperating online as design drawing and cuts the preferred embodiment of map device, the map device of cutting further includes annotation adding module,
Annotation adding module is used to carry out annotation addition on design drawing by way of getting label ready or pulling zone marker.Get mark ready
The mode of note is one mark point of generation on interface, is then annotated for mark point.Pull zone marker mode be
A marked region is generated on interface, is then annotated for marked region.
It cooperating online as design drawing and cuts the preferred embodiment of map device, the map device of cutting further includes logic link module,
Logic link module jumps logic line and according to line sequence switched design figure between design drawing for drawing.By not
Rendering logic is continuous between same design drawing, shows the logical relation between design drawing.It can be existed by the mouse of the prior art
The starting point of the side rendering logic line of one basic engineering figure (has logic pass with basic engineering figure in other extending design figure
The design drawing of system) side draw terminal, thus by computer technology generate different designs figure between logic line.
It cooperating online as design drawing and cuts the preferred embodiment of map device, the map device of cutting further includes jumping interactive module,
Jump interactive module for engineer check design diagram page between jump logic.It can be checked not by jumping interactive module
With design drawing between jump logic, can be shown by the element on mouse-click design drawing and corresponding jump logic.
It cooperating online as design drawing and cuts the preferred embodiment of map device, the map device of cutting further includes focusing division module,
Non-selected subregion is hidden for focusing the subregion of display product design R&D team member selection.Under default conditions, choose
When one subregion, other partition contents can still be shown；By focusing division module, when choosing a subregion, in other subregions
Appearance can be hidden, and be conducive to the page and accelerate response speed.
It cooperating online as design drawing and cuts the preferred embodiment of map device, the map device of cutting further includes annotation switching module,
Annotation switching module be used for in design drawing mark design element dimensional units or color parameter switch over.It can mark
On interface, switch color mode: 16 systems, RGB, RGBA by way of color lump.In practice, it is thus necessary to determine that current design base
In equipment be iOS, Android or Web, then determine that present design drawing is designed based on several times, finally selection and design drawing
Matched equipment and multiple.The interface of these three equipment of iPhone, iPad, iWatch belongs to-iOS；The boundary of Android system
Face design belongs to-Android；The interface of type of webpage belongs to-Web.Such as: 375x667 belongs to iOS 1x；
750x1334 belongs to iOS 2x；Android-- is selected in 1920x1080, (to distinguish mobile phone interface or webpage) mobile phone suggestion
xxhdpi；Webpage selects Web1x.1x is Commonly Used Size, and the webpage usually done is typically all to select 1x；2x refers to for specific screen
The size of (4k screen) design, the usual size can be 2 times of normal webpage.
It cooperates online the present invention also provides a kind of design drawing and cuts drawing method, the drawing method of cutting is filled using above-mentioned figure of cutting
Set, it is described cut drawing method the following steps are included:
The dimensional parameters for calling size presetting module cut figure to design drawing are configured, and configure dimensional parameters to
IOS system, Android system or type of webpage dimensional parameters；
Call type presetting module presets the graph type of cutting of design drawing, will cut graph type and is configured to file/figure
Channel type, slice type or shared icon type；
Invocation pattern switching module switches over the upper arq mode of design drawing, and upper arq mode is by way of plug-in unit to upper
Pass speed adjustment；
Designer is designed G- Design according to product demand file, and calls design drawing uploading module will be according to product need
It asks the design drawing of document design to upload in corresponding project, is checked for product design R&D team member；
During design drawing uploads, recalls information extraction module extracts the design drawing markup information and figure that designer uploads
Layer information, and according to preset dimensional parameters and graph type is cut to the design drawing progress pattern cut of upload；Calling cuts figure generation
Module generates the two-dimension vector graphics of picture format by figure is cut；
The design element in design drawing for calling code generation module to be uploaded according to designer is generated to be made for engineer's programming
Model code；And the design drawing of project canvas module Exhibition Design Shi Shangchuan is called to look into for product design R&D team member
It sees；Engineer calls design drawing required for cutting the downloading of figure download module to cut figure.
It cooperates online as design drawing and cuts the preferred embodiment of drawing method, described cut in drawing method further includes product manager's calling
File uploading module uploads to product demand file used in Project design process in corresponding project, grinds for product design
Hair Team Member is checked.Photoshop plug-in unit, Sketch plug-in unit or Adobe XD CC can be based in file upload procedure
(Adobe Experience Design Creative Cloud) client.Plug-in unit is a kind of application journey for following and centainly standardizing
The program that sequence interface is write out.Under its system platform that can only operate in procedure stipulation (multiple platforms may be supported simultaneously),
And specified platform isolated operation cannot be detached from.Adobe XD CC is one-stop User Experience/User
Interface design platform can carry out mobile application and webpage design and prototype, while be also to combine design and establish
Prototype function, and the cross-platform deisgn product of technical grade performance is provided simultaneously.Designer can be more efficient using Adobe XD CC
Accurately complete the transformation of static compilation or frame diagram to interaction prototype.
It cooperates online as design drawing and cuts the preferred embodiment of drawing method, described cut in drawing method further includes calling annotation addition
Module carries out annotation addition by way of getting label ready or pulling zone marker on design drawing.Get ready label mode be
A mark point is generated on interface, is then annotated for mark point.The mode for pulling zone marker is generated on interface
Then one marked region is annotated for marked region.
It cooperates online as design drawing and cuts the preferred embodiment of drawing method, described cut in drawing method further includes calling logic line
Module draws and jumps logic line and according to line sequence switched design figure between design drawing.By different design drawings it
Between rendering logic it is continuous, show the logical relation between design drawing.It can be by the mouse of the prior art in a basic engineering
The starting point of the side rendering logic line of figure, in other extending design figure (design drawing for having logical relation with basic engineering figure)
Terminal is drawn in side, to generate the logic line between different designs figure by computer technology.
It cooperates online as design drawing and cuts the preferred embodiment of drawing method, described cut in drawing method further includes that engineer calls jump
Turn interactive module check design diagram page between jump logic.By jump interactive module can check different design drawings it
Between jump logic, can be shown by the element on mouse-click design drawing and corresponding jump logic.
It cooperates online as design drawing and cuts the preferred embodiment of drawing method, described cut in drawing method further includes calling to focus subregion
Module focuses the subregion of display product design R&D team member selection and hides non-selected subregion.Under default conditions, choose
When one subregion, other partition contents can still be shown；By focusing division module, when choosing a subregion, in other subregions
Appearance can be hidden, and be conducive to the page and accelerate response speed.
It cooperates online as design drawing and cuts the preferred embodiment of drawing method, described cut in drawing method further includes calling annotation switching
Module in design drawing mark design element dimensional units or color parameter switch over.It can pass through on mark interface
The form of color lump switches color mode: 16 systems, RGB, RGBA.In practice, it is thus necessary to determine that current design based on equipment be
IOS, Android or Web, then determine that present design drawing is designed based on several times, finally selection and the matched equipment of design drawing
And multiple.The interface of these three equipment of iPhone, iPad, iWatch belongs to-iOS；The interface category of Android system
In-Android；The interface of type of webpage belongs to-Web.Such as: 375x667 belongs to iOS 1x；750x1334 belongs to iOS
2x；Android-- xxhdpi is selected in 1920x1080, (to distinguish mobile phone interface or webpage) mobile phone suggestion；Webpage selects Web 1x.
1x is Commonly Used Size, and the webpage usually done is typically all to select 1x；The size that 2x refers to for specific screen (4k screen) design, usually
The size can be 2 times of normal webpage.
It cooperates online as design drawing and cuts the preferred embodiment of drawing method, described cut in drawing method further includes cutting figure based on described
Method makes the APP or webpage prototype of a disengaging code, is implemented by computer end or mobile phone terminal to the drawing method of cutting
Or demonstration.Product manager, designer can be based on design drawing, make the APP or webpage prototype of a disengaging code, can be in electricity
Brain end or mobile phone terminal carry out preview and click skip operation (Demo of a high-fidelity).Final products are understood convenient for whole team
Form, and preview product pattern in advance effectively avoid the problems such as Product Logic bug is found after exploitation.
The embodiment of the present invention has the advantages that figure is cut in production to Technical Design Shi Buyong manually again through the invention,
It avoids the problem that mitigating design because cutting figure in engineer's hand caused by transmission problem or confusing communication is not latest edition simultaneously
Mechanical manual operations is automated, improves teamwork efficiency and precision by teacher's manual work burden.
Detailed description of the invention
Fig. 1 cooperates online for design drawing provided in an embodiment of the present invention and cuts map device schematic diagram；
Fig. 2 cooperates online for design drawing provided in an embodiment of the present invention and cuts drawing method flow chart；
Fig. 3 is plug-in unit schematic diagram provided in an embodiment of the present invention.
Specific embodiment
The following examples are used to illustrate the present invention, but are not intended to limit the scope of the present invention..
Fig. 1 and Fig. 3 is participated in, a kind of design drawing cooperates online cuts map device, and the map device of cutting includes:
Size presetting module 1, the dimensional parameters for cut figure to design drawing are configured, and dimensional parameters are configured as
IOS system, Android system or type of webpage dimensional parameters；
Type presetting module 2 is preset for the graph type of cutting to design drawing, cut graph type be configured as file/
Layer type, slice type or shared icon type；
Mode switch module 3 is switched over for the upper arq mode to design drawing, and upper arq mode is by way of plug-in unit pair
Uploading speed adjustment；
Design drawing uploading module 4, for uploading designer according to the design drawing of product demand document design to corresponding item
It is checked in mesh for product design R&D team member；
Information extraction modules 5, the design element markup information and map data mining platform of the design drawing for extracting designer's upload；
Code generation module 6, the design element in the design drawing for being uploaded according to designer is generated to be programmed for engineer
The model code used；
Project canvas module 7, the design drawing for Exhibition Design Shi Shangchuan are checked for product design R&D team member；
Figure generation module 8 is cut, the two-dimension vector graphics of picture format are generated for figure will to be cut；
Figure download module 9 is cut, design drawing required for downloading for engineer cuts figure.
The principle principle of code building is to establish data model in code generation module 6, such as single table, and a pair of of multilist is tree-shaped
Structure table, for example, JeeSite generate code theory be mainly: by Java Architecture for XML Binding
The Marshal (system of solutions) and UnMarshal (marshalling) of Context realizes the mutual conversion of JAVA and extensible markup language,
The middle file that generate code is write as an extensible markup language template, then flows a line a line by Input and Output
Template is read, then carries out being converted into corresponding file.
Design drawing cooperates cut in one embodiment of map device online, and the map device of cutting further includes file uploading module
10, product demand file used in Project design process is uploaded to corresponding item for product manager by file uploading module 10
It is checked in mesh for product design R&D team member.It can be inserted based on Photoshop plug-in unit, Sketch in file upload procedure
Part or Adobe XD CC (Adobe Experience Design Creative Cloud) client.Plug-in unit is that one kind follows
The program that the application programming interfaces centainly standardized are write out.It (may be same under its system platform that can only operate in procedure stipulation
When support multiple platforms), and specified platform isolated operation cannot be detached from.Adobe XD CC is one-stop User
Experience/User Interface design platform can carry out mobile application and webpage design and prototype, while
It is to combine design and establish prototype function, and the cross-platform deisgn product of technical grade performance is provided simultaneously.Designer uses Adobe
XD CC can be with more efficient accurate static compilation or the frame diagram completed to the transformation for interacting prototype.
Design drawing cooperates cut in one embodiment of map device online, and the map device of cutting further includes annotation adding module
11, annotation adding module 11 is used to carry out annotation addition on design drawing by way of getting label ready or pulling zone marker.
The mode for getting label ready is one mark point of generation on interface, is then annotated for mark point.Pull zone marker
Mode is one marked region of generation on interface, is then annotated for marked region.
Design drawing cooperates cut in one embodiment of map device online, and the map device of cutting further includes logic link module
12, logic link module 12 jumps logic line and according to line sequence switched design figure between design drawing for drawing.It is logical
It crosses between different design drawings that rendering logic is continuous, shows the logical relation between design drawing.The prior art can be passed through
Mouse (has in the starting point of the side rendering logic line of a basic engineering figure in other extending design figure with basic engineering figure
The design drawing of logical relation) side draw terminal, thus by computer technology generate different designs figure between logic line.
Design drawing cooperates cut in one embodiment of map device online, and the map device of cutting further includes jumping interactive module
13, jump interactive module 13 for engineer check design diagram page between jump logic.By jumping 13 energy of interactive module
It enough checks between different design drawings and jumps logic, corresponding jump can be shown by the element on mouse-click design drawing
Logic.
Design drawing cooperates cut in one embodiment of map device online, and the map device of cutting further includes focusing division module
14, non-selected subregion is hidden for focusing the subregion of display product design R&D team member selection.Under default conditions, choosing
In a subregion when, other partition contents still can show；By focusing division module 14, when choosing a subregion, other points
Area's content can be hidden, and be conducive to the page and accelerate response speed.
Design drawing cooperates cut in one embodiment of map device online, and the map device of cutting further includes annotation switching module
15, annotation switching module 15 be used for in design drawing mark design element dimensional units or color parameter switch over.It can
On mark interface, switch color mode: 16 systems, RGB, RGBA by way of color lump.In practice, it is thus necessary to determine that current
Design based on equipment be iOS, Android or Web, then determine that present design drawing is designed based on several times, finally selection and
The matched equipment of design drawing and multiple.The interface of these three equipment of iPhone, iPad, iWatch belongs to-iOS；Android system
The interface of system belongs to-Android；The interface of type of webpage belongs to-Web.Such as: 375x667 belongs to iOS 1x；
750x1334 belongs to iOS 2x；Android-- is selected in 1920x1080, (to distinguish mobile phone interface or webpage) mobile phone suggestion
xxhdpi；Webpage selects Web 1x.1x is Commonly Used Size, and the webpage usually done is typically all to select 1x；2x refers to for specific screen
The size of (4k screen) design, the usual size can be 2 times of normal webpage.
Referring to figs. 2 and 3, it cooperates online the present invention also provides a kind of design drawing and cuts drawing method, it is described to cut drawing method use
It is above-mentioned to cut map device, it is described cut drawing method the following steps are included:
S1: the dimensional parameters for calling size presetting module 1 cut figure to design drawing are configured, and dimensional parameters are configured
For iOS system, Android system or type of webpage dimensional parameters；
S2: call type presetting module 2 presets the graph type of cutting of design drawing, will cut graph type and is configured to file
Folder/layer type, slice type or shared icon type；
S3: invocation pattern switching module 3 switches over the upper arq mode of design drawing, and upper arq mode is by way of plug-in unit
Uploading speed is adjusted；
S4: designer is designed G- Design according to product demand file, and calls design drawing uploading module 4 will be according to production
The design drawing of product demand file design uploads in corresponding project, checks for product design R&D team member；
S5: during design drawing uploads, recalls information extraction module 5 extracts the design drawing markup information that designer uploads
And map data mining platform, and according to preset dimensional parameters and graph type is cut to the design drawing progress pattern cut of upload；Calling cuts figure
Generation module 8 generates the two-dimension vector graphics of picture format by figure is cut；
S6: the design element in design drawing for calling code generation module 6 to be uploaded according to designer is generated to be compiled for engineer
The model code that journey uses；And call the design drawing of 7 Exhibition Design Shi Shangchuan of project canvas module for product design R&D team
Member checks；Engineer's calling cuts design drawing required for figure download module 9 is downloaded and cuts figure.
Design drawing cooperates cut in one embodiment of drawing method online, and described cut in drawing method further includes product manager's calling
File uploading module 10 uploads to product demand file used in Project design process in corresponding project, for product design
R&D team member checks.Photoshop plug-in unit, Sketch plug-in unit or Adobe XD can be based in file upload procedure
CC (Adobe Experience Design Creative Cloud) client.Plug-in unit is a kind of application for following and centainly standardizing
The program that routine interface is write out.It (may be supported simultaneously multiple flat under its system platform that can only operate in procedure stipulation
Platform), and specified platform isolated operation cannot be detached from.Adobe XD CC is one-stop User Experience/User
Interface design platform can carry out mobile application and webpage design and prototype, while be also to combine design and establish
Prototype function, and the cross-platform deisgn product of technical grade performance is provided simultaneously.Designer can be more efficient using Adobe XD CC
Accurately complete the transformation of static compilation or frame diagram to interaction prototype.
Design drawing cooperates cut in one embodiment of drawing method online, and described cut in drawing method further includes calling annotation addition
Module 11 carries out annotation addition by way of getting label ready or pulling zone marker on design drawing.The mode for getting label ready is
A mark point is generated on interface, is then annotated for mark point.It is raw on interface for pulling the mode of zone marker
At a marked region, then annotated for marked region.
Design drawing cooperates cut in one embodiment of drawing method online, and described cut in drawing method further includes calling logic line
Module 12 draws and jumps logic line and according to line sequence switched design figure between design drawing.By in different design drawings
Between rendering logic it is continuous, show the logical relation between design drawing.It can be set by the mouse of the prior art on a basis
The starting point for counting the side rendering logic line of figure, in other extending design figure (design drawing for having logical relation with basic engineering figure)
Side draw terminal, thus by computer technology generate different designs figure between logic line.
Design drawing cooperates cut in one embodiment of drawing method online, and described cut in drawing method further includes that engineer calls jump
Turn interactive module 13 check design diagram page between jump logic.Different designs can be checked by jumping interactive module 13
Logic is jumped between figure, can be shown by the element on mouse-click design drawing and corresponding jump logic.
Design drawing cooperates cut in one embodiment of drawing method online, and described cut in drawing method further includes calling to focus subregion
Module 14 focuses the subregion of display product design R&D team member selection and hides non-selected subregion.Under default conditions, choosing
In a subregion when, other partition contents still can show；By focusing division module 14, when choosing a subregion, other points
Area's content can be hidden, and be conducive to the page and accelerate response speed.
Design drawing cooperates cut in one embodiment of drawing method online, and described cut in drawing method further includes calling annotation switching
Module 15 in design drawing mark design element dimensional units or color parameter switch over.It can lead on mark interface
The form of color lump is crossed to switch color mode: 16 systems, RGB, RGBA.In practice, it is thus necessary to determine that current design based on equipment
It is iOS, Android or Web, then determines that present design drawing is designed based on several times, finally selection and design drawing is matched sets
Standby and multiple.The interface of these three equipment of iPhone, iPad, iWatch belongs to-iOS；The interface category of Android system
In-Android；The interface of type of webpage belongs to-Web.Such as: 375x667 belongs to iOS 1x；750x1334 belongs to iOS
2x；Android-- xxhdpi is selected in 1920x1080, (to distinguish mobile phone interface or webpage) mobile phone suggestion；Webpage selects Web 1x.
1x is Commonly Used Size, and the webpage usually done is typically all to select 1x；The size that 2x refers to for specific screen (4k screen) design, usually
The size can be 2 times of normal webpage.
Design drawing cooperates cut in one embodiment of drawing method online, and described cut in drawing method further includes cutting figure based on described
Method makes the APP or webpage prototype of a disengaging code, is implemented by computer end or mobile phone terminal to the drawing method of cutting
Or demonstration.Product manager, designer can be based on design drawing, make the APP or webpage prototype of a disengaging code, can be in electricity
Brain end or mobile phone terminal carry out preview and click skip operation (Demo of a high-fidelity).Final products are understood convenient for whole team
Form, and preview product pattern in advance effectively avoid the problems such as Product Logic bug is found after exploitation.
Technical solution can provide one in line platform through the invention for product design R&D team, and product manager can be with
The projects relevant documentation such as requirement documents is passed in corresponding project, correspondence is checked at any time for Team Member, does not spend various channels
It ransacks.Designer is designed G- Design according to product demand, and design drawing is uploaded on project painting canvas, Team Member at any time with
Ground can check the design drawing of the project and each old version and the correlated condition page of every design drawing.It can be mentioned
For an online drawing board, all design drawings can be uploaded, tile, can arbitrarily drag, and according to the page between design drawing
Between the logic that jumps carry out line, ultimately form the tree-shaped logic line graph of entire product, the logic of the entire product page is closed
It is very clear.Engineer self-service can check the markup information of needs in programming process, and replicate respective code, downloading need
That wants cuts figure, also can jump logic what canvas page checked entire product design diagram page.Product manager, designer can be based on
Design drawing makes the APP or webpage prototype of a disengaging code, can carry out preview and click to jump in computer end or mobile phone terminal
Turn operation (Demo of a high-fidelity).Final products form is understood convenient for whole team, and preview product pattern in advance, effectively
Avoid the problems such as Product Logic bug is found after exploitation.Figure is cut in production to Technical Design Shi Buyong manually again through the invention,
It avoids the problem that mitigating design because cutting figure in engineer's hand caused by transmission problem or confusing communication is not latest edition simultaneously
Mechanical manual operations is automated, improves teamwork efficiency and precision by teacher's manual work burden.
Although above having used general explanation and specific embodiment, the present invention is described in detail, at this
On the basis of invention, it can be made some modifications or improvements, this will be apparent to those skilled in the art.Therefore,
These modifications or improvements without departing from theon the basis of the spirit of the present invention are fallen within the scope of the claimed invention.
Claims (10)
1. design drawing cooperates cut map device online, it is characterised in that: the map device of cutting includes:
Size presetting module (1), the dimensional parameters for cut figure to design drawing are configured, and dimensional parameters are configured as
IOS system, Android system or type of webpage dimensional parameters；
Type presetting module (2) is preset for the graph type of cutting to design drawing, is cut graph type and is configured as file/figure
Channel type, slice type or shared icon type；
Mode switch module (3) is switched over for the upper arq mode to design drawing, and upper arq mode is by way of plug-in unit to upper
Pass speed adjustment；
Design drawing uploading module (4), for uploading designer according to the design drawing of product demand document design to corresponding project
It is middle to be checked for product design R&D team member；
Information extraction modules (5), the design element markup information and map data mining platform of the design drawing for extracting designer's upload；
Code generation module (6), the design element in the design drawing for being uploaded according to designer is generated to be made for engineer's programming
Model code；
Project canvas module (7), the design drawing for Exhibition Design Shi Shangchuan are checked for product design R&D team member；
Figure generation module (8) are cut, the two-dimension vector graphics of picture format are generated for figure will to be cut；
Figure download module (9) are cut, design drawing required for downloading for engineer cuts figure.
2. design drawing according to claim 1 cooperates cut map device online, it is characterised in that: the map device of cutting further includes
File uploading module (10), file uploading module (10) are literary by product demand used in Project design process for product manager
Part is uploaded in corresponding project and is checked for product design R&D team member.
3. design drawing according to claim 1 cooperates cut map device online, it is characterised in that: the map device of cutting further includes
It annotates adding module (11), annotation adding module (11) is used for by way of getting label ready or pulling zone marker in design drawing
On carry out annotation addition.
4. design drawing according to claim 1 cooperates cut map device online, it is characterised in that: the map device of cutting further includes
Logic link module (12), logic link module (12) are used to draw between design drawing and jump logic line and suitable according to line
Sequence switched design figure.
5. design drawing according to claim 1 cooperates cut map device online, it is characterised in that: the map device of cutting further includes
Jump interactive module (13), jump interactive module (13) for engineer check design diagram page between jump logic.
6. design drawing according to claim 1 cooperates cut map device online, it is characterised in that: the map device of cutting further includes
It focuses division module (14), hides non-selected point for focusing the subregion of display product design R&D team member selection
Area.
7. design drawing according to claim 1 cooperates cut map device online, it is characterised in that: the map device of cutting further includes
It annotates switching module (15), annotation switching module (15) is used for the mark design element dimensional units or color in design drawing
Parameter switches over.
8. design drawing cooperates cut drawing method online, the drawing method of cutting is filled using figure as described in any one of claim 1 to 7 of cutting
Set, it is characterised in that: it is described cut drawing method the following steps are included:
The dimensional parameters for calling size presetting module (1) cut figure to design drawing are configured, and configure iOS for dimensional parameters
System, android system or type of webpage dimensional parameters；
Call type presetting module (2) presets the graph type of cutting of design drawing, will cut graph type and is configured to file/figure layer
Type, slice type or shared icon type；
Invocation pattern switching module (3) switches over the upper arq mode of design drawing, and upper arq mode is by way of plug-in unit to upper
Pass speed adjustment；
Designer is designed G- Design according to product demand file, and calls design drawing uploading module (4) will be according to product need
It asks the design drawing of document design to upload in corresponding project, is checked for product design R&D team member；
During design drawing uploads, recalls information extraction module (5) extracts the design drawing markup information and figure that designer uploads
Layer information, and according to preset dimensional parameters and graph type is cut to the design drawing progress pattern cut of upload；Calling cuts figure generation
Module (8) generates the two-dimension vector graphics of picture format by figure is cut；
The design element in design drawing for calling code generation module (6) to be uploaded according to designer, which generates to program for engineer, to be used
Model code；And call the design drawing of project canvas module (7) Exhibition Design Shi Shangchuan for product design R&D team member
It checks；Engineer calls design drawing required for cutting figure download module (9) downloading to cut figure.
9. design drawing according to claim 8 cooperates cut drawing method online, it is characterised in that: described cut in drawing method is also wrapped
Include product manager call file uploading module (10) product demand file used in Project design process is uploaded to it is corresponding
In project, checked for product design R&D team member；Call annotation adding module (11) by getting label ready or pulling region
The mode of label carries out annotation addition on design drawing；Calling logic link module (12) draws and jumps logic between design drawing
Line and according to line sequence switched design figure；Engineer, which calls, jumps the jump that interactive module (13) is checked between design diagram page
Turn logic；It calls the subregion for focusing division module (14) focusing display product design R&D team member selection and hides non-selected
Subregion；Call annotation switching module (15) in design drawing mark design element dimensional units or color parameter cut
It changes.
10. design drawing according to claim 8 cooperates cut drawing method online, it is characterised in that: the drawing method of cutting also wraps
It includes, based on the APP or webpage prototype for cutting drawing method and making a disengaging code, is cut by computer end or mobile phone terminal to described
Drawing method is implemented or is demonstrated.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810945315.1A CN109032601A (en) | 2018-08-20 | 2018-08-20 | Design drawing cooperates cut map device and method online |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810945315.1A CN109032601A (en) | 2018-08-20 | 2018-08-20 | Design drawing cooperates cut map device and method online |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109032601A true CN109032601A (en) | 2018-12-18 |
Family
ID=64632040
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810945315.1A Pending CN109032601A (en) | 2018-08-20 | 2018-08-20 | Design drawing cooperates cut map device and method online |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109032601A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113254014A (en) * | 2021-05-14 | 2021-08-13 | 北京自如信息科技有限公司 | Sketch plug-in-based interface development method, device and system |
| CN113688597A (en) * | 2020-05-18 | 2021-11-23 | 北京字节跳动网络技术有限公司 | A method, device, device and storage medium for displaying annotated files |
| CN116595782A (en) * | 2023-05-24 | 2023-08-15 | 成都博维数孪科技有限公司 | Packaging manuscript design method based on HTML5 technology |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105373615A (en) * | 2015-11-24 | 2016-03-02 | 深圳市华讯方舟科技有限公司 | Page customization method and device |
| CN105426197A (en) * | 2015-12-30 | 2016-03-23 | 北京迪创伟业科技有限公司 | Hierarchical design method for embedded product |
| CN106934839A (en) * | 2017-02-16 | 2017-07-07 | 广州杰赛科技股份有限公司 | A kind of CAD polar plots cut drawing method and device automatically |
| US20170293596A1 (en) * | 2013-05-07 | 2017-10-12 | Axure Software Solutions, Inc. | Variable Dimension Version Editing for Graphical Designs |
-
2018
- 2018-08-20 CN CN201810945315.1A patent/CN109032601A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170293596A1 (en) * | 2013-05-07 | 2017-10-12 | Axure Software Solutions, Inc. | Variable Dimension Version Editing for Graphical Designs |
| CN105373615A (en) * | 2015-11-24 | 2016-03-02 | 深圳市华讯方舟科技有限公司 | Page customization method and device |
| CN105426197A (en) * | 2015-12-30 | 2016-03-23 | 北京迪创伟业科技有限公司 | Hierarchical design method for embedded product |
| CN106934839A (en) * | 2017-02-16 | 2017-07-07 | 广州杰赛科技股份有限公司 | A kind of CAD polar plots cut drawing method and device automatically |
Non-Patent Citations (3)
| Title |
|---|
| 张文杰: "强化图形的网络交流协作软件设计与实现", 《实验室科学》 * |
| 蓝湖产品设计协作: "一款产品设计团队必备的协作工具", 《简书》 * |
| 蓝湖产品设计协作: "蓝湖—支持自动标注、切图、共享Symbol的产品设计协作神器", 《少数派》 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113688597A (en) * | 2020-05-18 | 2021-11-23 | 北京字节跳动网络技术有限公司 | A method, device, device and storage medium for displaying annotated files |
| CN113254014A (en) * | 2021-05-14 | 2021-08-13 | 北京自如信息科技有限公司 | Sketch plug-in-based interface development method, device and system |
| CN116595782A (en) * | 2023-05-24 | 2023-08-15 | 成都博维数孪科技有限公司 | Packaging manuscript design method based on HTML5 technology |
| CN116595782B (en) * | 2023-05-24 | 2024-03-22 | 成都博维数孪科技有限公司 | Packaging manuscript design method based on HTML5 technology |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR101456506B1 (en) | An authoring tool for web applications and the authoring method thereof | |
| WO2016054549A1 (en) | Application prototyping tool | |
| CN104298721B (en) | A kind of arbitrarily a object split screen layout edit methods of the online courseware development based on Web | |
| CN101276275A (en) | Software development visualizing editing method aiming at set top box | |
| CN109032601A (en) | Design drawing cooperates cut map device and method online | |
| CN112445564A (en) | Interface display method, electronic device and computer readable storage medium | |
| CN109062573A (en) | Design drawing design element information sharing apparatus and method | |
| KR102417862B1 (en) | the method for making the program simple | |
| CN101303663A (en) | Simulation test method for digital set-top box software development | |
| CN114594936A (en) | Page design method and device, storage medium and computer equipment | |
| CN109213484A (en) | Online Collaborative Design figure condition managing device and method | |
| CN116610394A (en) | Template and module-based data visualization page configuration method, system and device | |
| CN109284970A (en) | Online cooperation device and method based on design drawing | |
| CN109271159A (en) | The online cooperation device of tree-shaped logical formula and method | |
| CN109933318A (en) | The implementation method of SQL online editor in a kind of Angular | |
| WO2014050960A1 (en) | Electronic publication creation device, electronic publication creation method, electronic publication perusal system, viewer device, and electronic publication perusal method | |
| KR20140114984A (en) | A method for providing an application developing tool and an apparatus using it | |
| Broulik | Form Elements and Buttons | |
| KR20140098590A (en) | A method for providing an application developing tool and an apparatus using it | |
| KR20140098565A (en) | A method for providing an application developing tool and an apparatus using it | |
| KR20140098952A (en) | A method for providing an application developing tool and an apparatus using it | |
| KR20140115475A (en) | An application developing environment system | |
| KR20140115010A (en) | A method for providing an application developing tool and an apparatus using it | |
| KR20150098877A (en) | A device for providing an application developing environment | |
| KR20140115000A (en) | A method for providing an application developing tool and an apparatus using it |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20181218 |