CN108897541A - Vision restoring method, device, storage medium and the terminal of application program - Google Patents
Vision restoring method, device, storage medium and the terminal of application program Download PDFInfo
- Publication number
- CN108897541A CN108897541A CN201810717697.2A CN201810717697A CN108897541A CN 108897541 A CN108897541 A CN 108897541A CN 201810717697 A CN201810717697 A CN 201810717697A CN 108897541 A CN108897541 A CN 108897541A
- Authority
- CN
- China
- Prior art keywords
- user interface
- application program
- element box
- comparisons
- vision
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR 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
Abstract
The embodiment of the present invention provides vision restoring method, device, storage medium and the terminal of a kind of application program, and method therein includes：The configuration information of application program is obtained, the configuration information includes that the design table of comparisons, the original user interface of the application program and the markup information of the original user interface, the original user interface include multiple element boxes；Element box in the original user interface is split；According to the design table of comparisons and the markup information, the layout of each element box after planning is split in screen；Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.The present invention is capable of the vision reduction of the realization APP of high-fidelity, and exploitation maintenance cost is low, and flexibility and universality are high.
Description
Technical field
The present invention relates to Internet technical fields, and in particular to application program processing technology field more particularly to one kind are answered
With the vision restoring method of program, a kind of vision reduction apparatus of application program, a kind of computer storage medium, one kind is for answering
The terminal restored with the vision of program.
Background technique
One application program (Application, APP) from design to the process to market of release will include the design phase and
Development phase, design phase include UI (User Interface, the user interface) design of APP, and the development phase includes the UI of APP
Vision reduction.Vision reduction just refers to the process of that the UI by designer's design implements to APP.In general, what APP was restored in vision
Need to consider environment adaptation issues in the process, such as：It is opened for a kind of Android (Android, Mobile operating system) system environments
The APP of hair, due to the open source characteristic of android system, Android terminal fragmentation is very serious, and fragmentation herein refers to
Different terminal manufacturers may produce a variety of carrying different hardware platforms, interface based on identical Android kernel
Android terminal, the speed of service, the software compatibility between these terminals have difference；It is therefore advantageous to the case where be APP
Vision reduction effect can be adapted to more multi-model and resolution ratio.The vision reduction scheme of existing APP it is most of from layout and
Two aspects of picture control carry out adaptation consideration, i.e., the adaptation side of a set of layout and picture is individually developed for each terminal
Case, therefore development cost and maintenance cost are higher；In addition, in addition to layout and picture, UI also include text element and text element
The quantity of element is very more, and the vision reduction scheme of existing APP is not directed to the adaptation of text, but text element exactly influences
One key factor of the vision reduction effect of APP, the reduction degree difference of text element will have a direct impact on the vision reduction of entire UI
Effect is poor.
Summary of the invention
The embodiment of the present invention provides vision restoring method, device, storage medium and the terminal of a kind of application program, Neng Gougao
The vision reduction of the realization APP of fidelity, exploitation maintenance cost are low.
On the one hand, the embodiment of the present invention provides a kind of vision restoring method of application program, it may include：
Obtain application program configuration information, the configuration information include design the table of comparisons, the application program it is original
The markup information of user interface and the original user interface, the original user interface include multiple element boxes；
Element box in the original user interface is split；
According to the design table of comparisons and the markup information, the cloth of each element box after planning is split in screen
Office；
Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.
On the other hand, the embodiment of the present invention provides a kind of vision reduction apparatus of application program, it may include：
Acquiring unit, for obtaining the configuration information of application program, the configuration information includes the design table of comparisons, described answers
With the original user interface of program and the markup information of the original user interface, the original user interface includes multiple elements
Box；
Split cells, for being split to the element box in the original user interface；
Layout units, for being planned in screen each after splitting according to the design table of comparisons and the markup information
The layout of element box；
Vision reduction unit restores to obtain target use for carrying out vision to the application program according to the layout planned
Family interface.
In another aspect, the embodiment of the present invention provides a kind of computer storage medium, the computer storage medium is stored with
One or one or more instruction, described instruction are suitable for being loaded by processor and executing following method：
Obtain application program configuration information, the configuration information include design the table of comparisons, the application program it is original
The markup information of user interface and the original user interface, the original user interface include multiple element boxes；
Element box in the original user interface is split；
According to the design table of comparisons and the markup information, the cloth of each element box after planning is split in screen
Office；
Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.
In another aspect, the embodiment of the present invention provides a kind of terminal that the vision for application program restores, including：
Processor is adapted for carrying out one or one or more instruction；And
Computer storage medium, the computer storage medium be stored with one or one or more instruction, described one or
One or more instruction is suitable for being loaded by the processor and executing following method：
Obtain application program configuration information, the configuration information include design the table of comparisons, the application program it is original
The markup information of user interface and the original user interface, the original user interface include multiple element boxes；
Element box in the original user interface is split；
According to the design table of comparisons and the markup information, the cloth of each element box after planning is split in screen
Office；
Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.
The embodiment of the present invention is based on the vision reduction that " All Box " theory carries out APP, specifically obtains matching for application program
Confidence breath, the configuration information include designing the table of comparisons, the original user interface of the application program and original user circle
The markup information in face, the original user interface are piled up by multiple element boxes；To the member in the original user interface
Plain box is split；Each element box according to the design table of comparisons and the markup information, after planning is split in screen
The layout of son；Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.Entire vision
Reduction process only needs to make the design table of comparisons early period, is in its corresponding position by the element typesetting of UI according to the design table of comparisons
It can guarantee visual effect, development cost is low, and when UI is designed and changed, such as color is replaced or the style tune of element box
It is whole；As long as the position of element box is constant, overall page effect will not change, and flexibility and pervasive degree are higher；Also, it is directed to
The type and resolution ratio of different terminals can be realized the vision reduction effect of the APP of high-fidelity, and collocation degree is higher.
Detailed description of the invention
In order to more clearly explain the embodiment of the invention or the technical proposal in the existing technology, to embodiment or will show below
There is attached drawing needed in technical description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this
Some embodiments of invention for those of ordinary skill in the art without creative efforts, can be with
It obtains other drawings based on these drawings.
Fig. 1 is that APP provided in an embodiment of the present invention runs architecture diagram；
Fig. 2 is the engineering bibliographic structure of existing application program provided in an embodiment of the present invention；
Fig. 3 is that the vision of existing application program provided in an embodiment of the present invention restores showing for the user interface that scheme obtains
It is intended to；
Fig. 4 is a kind of flow chart of the vision restoring method of application program provided in an embodiment of the present invention；
Fig. 5 is the schematic diagram of color chart provided in an embodiment of the present invention；
Fig. 6 is the schematic diagram of the font table of comparisons provided in an embodiment of the present invention；
Fig. 7 is the production flow diagram of the font table of comparisons provided in an embodiment of the present invention；
Fig. 8 is the schematic diagram of the original user interface of application program provided in an embodiment of the present invention；
Fig. 9 is the schematic diagram for the target user interface that application program provided in an embodiment of the present invention is restored through vision；
Figure 10 is the flow chart of the vision restoring method of another application program provided in an embodiment of the present invention；
Figure 11 is a kind of structural schematic diagram of the vision reduction apparatus of application program provided in an embodiment of the present invention；
Figure 12 is the structural schematic diagram for the terminal that a kind of vision for application program provided in an embodiment of the present invention restores.
Specific embodiment
Following will be combined with the drawings in the embodiments of the present invention, and technical solution in the embodiment of the present invention carries out clear, complete
Site preparation description.
One application program (Application, APP) probably needs to undergo such a from design to releasing to market
Process：Development phase design phase-- popularization operation stage.Operation framework shown in Figure 1, design phase mainly wrap
It includes：The design of product prototype and the design of UI；This stage, which can be, uses such as PC (Personal by designer
Computer, personal computer), the terminals such as mobile phone complete.Development phase mainly includes：The vision of the exploitation of product and UI are also
It is former；This stage, which can be, is completed by developer using terminals such as PC, mobile phones.Promote operation stage mainly include：By
Developer, which will develop and test the APP passed through, is uploaded to background server, passes through the means such as publicity, popularization by background server
The related content of APP is pushed into user, user can be downloaded from background server and install APP carry out using.Wherein, the view of UI
Feel that reduction is to influence the whether fine key factor of APP.Vision reduction just refers to that the UI by designer's design implements to APP's
Process；In practical application, how accurate the original design original text mark no matter designer provides is, the product that developed or it is more or
Few all to have error, this error is characterized using vision reduction degree, and vision reduction degree is higher, the UI restored and design
Difference between original UI is smaller, and APP is finer.
In general, APP needs to consider environment adaptation issues during vision restores, such as：For Android (Android,
A kind of Mobile operating system) system environments exploitation APP, due to the open source characteristic of android system, Android terminal fragment
Change is very serious, and it is a variety of that fragmentation herein refers to that different terminal manufacturers may be produced based on identical Android kernel
The Android terminal of different hardware platforms, interface is carried, the speed of service, the software compatibility between these terminals have difference；
It is therefore advantageous to the case where be that the vision reduction effect of APP can be adapted to more multi-model and resolution ratio.Such as the embodiment of the present invention
The relevant technologies refer to that the most of adaptation that carries out in terms of being laid out with picture control two of vision reduction scheme of current APP is examined
Consider.Layout adaptation refers to type and resolution ratio according to different terminals, uses different topology files；Such as：For large-size screen monitors
Mobile phone need to be additionally provided design mark；Or if it is intended to realize more careful layout adaptation, need to design as much as possible
Suitable for the layout pattern of various resolution ratio, vision reduction effect of such APP on different terminals can just meet the original of design
The effect that UI is presented.Picture control adaptation refers to using edit tool or as technology is suitable to realize to the adaptive displaying of picture progress
Match, such as require to scheme using .9 as far as possible in APP .9 figure herein is the special picture of one kind in Android exploitation, this
The picture of format is generated by ADT (Abstract Data Type, abstract data model) included edit tool, uses nine palaces
The method of lattice cutting makes picture support the adaptive displaying under Android environment；If schemed without using .9, difference is differentiated
Rate just needs respectively to correspond to a picture resource.Please also refer to APP engineering bibliographic structure schematic diagram shown in Fig. 2；It can by Fig. 2
Know, the vision reduction scheme of current APP needs to include more points as far as possible in the engineering bibliographic structure (i.e. resource file) of APP
The picture resource (as shown in Figure 2 each picture file catalogue be respectively used to store the picture resource under each resolution ratio) of resolution and
Various topology file folders (each layout catalogue as shown in Figure 2) are asked to solve the adaptation of the terminal of different type of machines and resolution ratio
Topic.At least there is following defect in the vision reduction scheme of current APP：(1) due to being respectively necessary for multiple cloth using different terminals
The multiple picture resources of office are adapted to, this just needs individually to develop the adaptation side of a set of layout and picture for each terminal
Case, development cost and maintenance cost are higher；And this meeting is so that the engineering catalogue file of APP is excessive, when the online release of APP
Afterwards, excessive installation kit can occupy more download bandwidth resource, can also occupy the more memory space of terminal；(2) in addition to cloth
Office and picture, UI also include that the quantity of text element and text element is very more, and the vision of existing APP restores scheme and do not relate to
And the adaptation of text, but text element exactly influences a key factor of the vision reduction effect of APP, such as refers to figure
The UI restored shown in 3 through vision, it is evident that the reducing degree of text element is poor, to cause the view of entire UI
Feel that reduction effect is poor；For situation shown in Fig. 3, design vision Walkthrough is mostly used to solve greatly at present, i.e., by manually to text
The spacing etc. of this element is readjusted, then secondary development of doing over again, this undoubtedly increases development cost, and efficiency is also low.
Based on this, the embodiment of the present invention proposes that the vision reduction scheme of such a application program, the program propose " All
Box " theory, " All Box " theory refers to element each in UI as a box, then entire UI is exactly by multiple members
Made of plain box (size of these element boxes may be the same or different) is piled up；" All Box " theory is using design control
Agreed specifications of the table as design and development in the design process cut UI according to smooth vertical and horizontal rule, guarantee UI
Multiple element boxes of design table of comparisons specification can be cut into, and guarantee not intersect when these element boxes are piled up；?
Development process can restore UI by pile up by these element boxes.This is based on the vision of the APP of " All Box " theory
Reduction scheme at least has following advantage：(1) it only needs to make the design table of comparisons early period, according to the design table of comparisons by the element of UI
Typesetting can guarantee visual effect in its corresponding position, and development cost is low, and when UI is designed and changed, such as color replacement
Or the style adjustment of element box；As long as the position of element box is constant, overall page effect will not change, flexibility and general
Appropriateness is higher；(2) the vision reduction effect that can be realized the APP of high-fidelity for the type of different terminals and resolution ratio, is fitted
It is higher with spending.
Based on foregoing description, the embodiment of the present invention provides a kind of vision restoring method of application program, and this method can be
It is executed, is specifically can be used in developer as shown in Figure 1 eventually by the terminal of the vision reduction for application program
End is to execute.Fig. 4 is referred to, this method may include following steps S101-S104.
S101, obtains the configuration information of application program, and the configuration information includes the design table of comparisons, the application program
The markup information of original user interface and the original user interface, the original user interface include multiple element boxes.
The design table of comparisons is used to define the design specification and development specifications of the application program；In other words, design control
Table is the specification that designer and developer arrange jointly.Designing the table of comparisons may include color chart and the font table of comparisons；
Wherein, the color chart is for defining color specification used in the application program；Such as：Color chart could dictate that
The multiple colors specifications such as the dominant hue, background colour, the main title color that are related in APP.Specifically please also refer to face shown in fig. 5
The schematic diagram of the color table of comparisons；Color chart includes at least one color attribute, and the color attribute includes at least color designation
And color value；Such as shown in Fig. 5, C1black is a kind of color designation, and the color value of this color of C1black is #111111；Into
One step, the color attribute in color chart may also include color description, for example, the color description of C1black be " it is extremely black, be used for
Background "；For another example：C7green is another color designation, and the color value of this color is #dfff00, and color description is that " brilliant green is used
In theme color ".The font table of comparisons is for defining font specification used in the application program；Specifically please also refer to Fig. 6 institute
The schematic diagram of the font table of comparisons shown；The font table of comparisons includes at least one font attribute, and the font attribute includes at least word
Body title, font size, carry font element box height, carry font element box in line space；Such as Fig. 6
Shown, T90 is a kind of font name, and font size is 90px (pixels, pixel), carries the element box of this kind of font
Highly (line hight) is 108px, and carrying the line space (space) in the element box of this kind of font is 60px；Further,
Every kind of font attribute in the font table of comparisons, which may also include, is described as " clearing mark using description, such as the use of this font of T90
Topic-Medium, it is non-common, only come across navigation "；For another example：T30 is another font name, font size 30px, carrying
The height (line hight) of the element box of this kind of font is 42px, carries the line space in the element box of this kind of font
It (sapce) is 18px, the use of this kind of font is described as " auxiliary information is used for ins stream label ".Certainly, in the font table of comparisons
Font attribute can also include other information, such as paragraph require (paragraph paragraph shown in Fig. 6).
The design table of comparisons can be multiplexed in multiple APP, and versatility is higher.In the specific implementation, the design table of comparisons can
To be to combine APP that the color used and font is needed to carry out production acquisition, and one as configuration information by designer
Divide to be supplied to the development phase.Wherein, the font table of comparisons can be terminal used in designer as shown in Figure 1 to execute
Manufacturing process, please also refer to Fig. 7, which mainly includes the following steps that s11-s17：
The original UI of s11, the APP according to designed by designer determine the font type type used in APP；
S12 measures element in original UI using measuring tool such as PS (a kind of image processing software of Photoshop) tool
Font height obtain the height of element box；
S13 carries out vision reduction according to the height of element box in the case where various types and various resolution ratio；
S14, judges whether font exceeds the carrying range of element box；S15 is executed if exceeding, and adjusts element box
Height, font can be contained completely；
S16, if without departing from or the height of element box is adjusted, judge the element box and other yuan
Whether the degree of coupling of plain box is low, if the degree of coupling is low, shows that the element box is not same or similar with other elements box,
S17 is thened follow the steps, the corresponding font attribute of element box is added in the font table of comparisons.
Undergo above-mentioned s11-s17 that can make to obtain the font table of comparisons as shown in FIG. 6.Especially, it should be noted that being
Various types and various resolution ratio can be preferably adapted to, the embodiment of the present invention uses dp (device independent
Pixels, equipment independent pixel) it is used as font size unit, due to dp and device-dependent, in different equipment (i.e. different machines
Type, different resolution) in have different display effects；So, for using dp as member designed by the font of font size unit
Plain box can accommodate the different fonts height that distinct device is shown, in other words, identity element box can be used for carrying
The different fonts that distinct device is shown, this allows for element box equal energy in the case where various types, various resolution ratio
It enough realizes preferable font supporting effect, had not only solved the adaptation issues of type and resolution ratio, but also can guarantee the vision of APP also
Former effect.
The original user interface of APP refers to original copy designed by UI of the designer for APP, please also refer to shown in Fig. 8
Original UI；As shown in figure 8, the element in original UI is by the smooth vertical and horizontal element box being cut into one by one, these yuan
Plain box, which is piled up, forms original UI, also, includes markup information in the original UI, and the markup information includes following at least one
Kind：Used color of object title, the attribute of each element box, the spacing of adjacent element box, element box distance and page
The distance at face edge；Such as certain element box is labeled as " C8red " in Fig. 8, shows the text element of element box carrying
The font name of (i.e. Taurus) is C8red, is the word that may know that text element by searching for color chart shown in fig. 5
Body color is red；For another example the element box of carrying QQ (a kind of instant messenger that Tencent releases) head portrait shown in Fig. 8
The spacing of sub and adjacent carrying " sadness 71149 of an eye drip tear " this text under it element box is 0.5cm.Wherein,
The attribute of element box may include following any one or more：The width of the type of the element that element box is carried, element box
Degree and/or height；The type of element herein includes but is not limited to：Text, picture, rich text.Such as certain element box in Fig. 8
Markup information be " T30 ", show the element box for carrying text element, and the font of text element is using setting
The T30 font in the table of comparisons is counted, then finding this font attribute of T30 from the design table of comparisons, this yuan can be obtained
The height of plain box；The markup information of the element box for carrying QQ head portrait includes height 4.5cm, width as shown in Figure 8 again
For 5cm.
Design the table of comparisons, the markup information of original UI and original UI of APP is completed in the design phase, and matching as APP
Confidence breath is provided to the development phase；The configuration information can store in the database, and step S101 can be obtained from database
The configuration information of APP.
S102 splits the element box in the original user interface.
Since the original UI of APP is to be piled up to be formed by multiple element boxes, then needing first in vision reduction by this
A little element boxes are split, and individual element box one by one is obtained, then are directed to the individual element of this one respectively
Box carries out corresponding program development, to realize the element box of this one in APP.
S103, each element box according to the design table of comparisons and the markup information, after planning is split in screen
Layout.
S104 carries out vision to the application program according to the layout planned and restores to obtain target user interface.
In step S103-S104, according to the design table of comparisons and markup information, each element box can be determined in screen
Layout, that is, determine position of each element box in screen；It is successively put according to these positions of element box in screen
It puts and realizes these corresponding programs of element box (control), it can vision is carried out to APP and restores to obtain target UI, target UI
The UI for referring to the APP that reduction obtains, please also refer to the schematic diagram of target UI shown in Fig. 9；Comparison diagram 8 and Fig. 9 are it is found that this hair
The vision restoring method that bright embodiment is based on the APP of " All Box " theory can reach the vision reduction effect of high-fidelity.
The embodiment of the present invention is based on the vision reduction that " All Box " theory carries out APP, specifically obtains matching for application program
Confidence breath, the configuration information include designing the table of comparisons, the original user interface of the application program and original user circle
The markup information in face, the original user interface are piled up by multiple element boxes；To the member in the original user interface
Plain box is split；Each element box according to the design table of comparisons and the markup information, after planning is split in screen
The layout of son；Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.Entire vision
Reduction process only needs to make the design table of comparisons early period, is in its corresponding position by the element typesetting of UI according to the design table of comparisons
It can guarantee visual effect, development cost is low, and when UI is designed and changed, such as color is replaced or the style tune of element box
It is whole；As long as the position of element box is constant, overall page effect will not change, and flexibility and pervasive degree are higher；Also, it is directed to
The type and resolution ratio of different terminals can be realized the vision reduction effect of the APP of high-fidelity, and collocation degree is higher.
The embodiment of the present invention also provides the vision restoring method of another application program, and this method can be by for applying
The terminal of the vision reduction of program executes, and can be terminal used in developer as shown in Figure 1 specifically to execute.Please
Referring to Figure 10, this method may include following steps S201-S215.
S201 obtains the original user interface of application program.
The original user interface of APP refers to original copy designed by UI of the designer for APP.In a kind of embodiment, APP
It can be a completely new APP, the original user interface of the APP refers to the UI original copy designed for this completely new APP at this time.It is another
In kind embodiment, APP can be an APP that is designed but needing correcting, at this time the original user interface of the APP
Refer to the UI original text for this APP correcting design.
S202 cuts element according to smooth vertical and horizontal principle in the original user interface, forms multiple members
Plain box；Each element box is used to carry an element of the original user interface, the element include text, picture or
Rich text.
Smooth vertical and horizontal principle can guarantee that UI can be cut into multiple element boxes, and guarantee these element cartridge stacks
Do not intersect when block.Wherein, text element box can be referred to as carrying the element box of text and rich text；For holding
The element box for carrying picture can be referred to as picture element box.Rich text is a kind of text of special format, can be than general
The richer content of logical text representation；Such as：Expression in instant messaging application is exactly a typical rich text, such as rich text
":- D " for indicating " happy " this expression, rich text ">_<" for indicating " going mad " this expression, rich text "==b " is used
In expression " emitting cold sweat " this expression.
S203 is labeled in the original user interface according to the design table of comparisons, obtains the application program
Markup information；The markup information comprises at least one of the following：The category of used color of object title, each element box
Property, the spacing of adjacent element box, element box distance are at a distance from page edge.
Designing the table of comparisons includes color chart and the font table of comparisons, and color chart can be found in Fig. 5；The font table of comparisons
It can be found in Fig. 6.Original UI is labeled according to the design table of comparisons, markup information as shown in Figure 8 can be obtained.It needs to illustrate
It is, if the element box in original UI uses the attribute in the design table of comparisons, just directly in the element box side
Mark corresponding Property Name；Such as：The text element of certain element box carrying uses the font of T54, then can Direct Mark
For " T54 "；If there are element boxes, and the attribute in the design table of comparisons is not used in original UI, then it can pass through measurement member
The attributes such as the width of plain box and height simultaneously carry out practical mark；Such as：Unused pair of the picture element of certain element box carrying
According to the attribute in table, then then can measure the width and the practical mark of height progress of the picture element.
It is being set by the markup information of the step S201-S203 design table of comparisons obtained, the original UI and original UI of APP
The meter stage completes, and the configuration information as APP is provided to the development phase；The configuration information can store in the database.
S204, obtains the configuration information of application program, and the configuration information includes the design table of comparisons, the application program
The markup information of original user interface and the original user interface, the original user interface piled up by multiple element boxes and
At.
S205, markup information and the design table of comparisons to the original user interface carry out regression nature inspection.
S206, if regression nature inspection success, splits the element box in the original user interface.
In step S205-S206, regression nature inspection includes two levels, and a level is the mark for checking original user interface
Whether complete infuse information, such as：If checking some element box does not have corresponding markup information, or checks the mark of original UI
Note information is not labeled the original UI color used；Etc.；The markup information of so original UI is imperfect, not complete mark
Original UI can not preferably realize vision restore, at this time regression nature check it is unsuccessful, need to return to designer progress
Again it marks.If the markup information of original UI is complete, the inspection of another level is carried out, that is, checks the mark of original UI
Whether information can be designed table of comparisons covering, such as：Certain element box is noted as " T56 ", but is searched in the design table of comparisons
Not find this attribute item of T56, at this time normalization check it is unsuccessful, need to return designer marked again or
It designs and increases " T56 " attribute item in the table of comparisons newly.It can guarantee markup information and the design control of original UI by regression nature inspection
The complete and accurate of table guarantees the vision reduction effect of APP to guarantee that the vision reduction process of APP can be gone on smoothly.
If regression nature inspection success, needs to split the element box in original UI；Due to the original UI of APP
It is to be piled up to be formed by multiple element boxes, then needing first to split these element boxes, obtaining in vision reduction
Individual element box one by one, then corresponding program development is carried out for the individual element box of this one respectively,
To realize the element box of this one in APP.
S207 draws grid in screen.
S208 determines each element box after splitting in the net according to the design table of comparisons and the markup information
Position in lattice.
S209 is laid out according to position of each element box in the grid.
It, can be customized one in terminal (terminal used in development phase developer) in step S207-S209
View (view), the view are rendered as grid in terminal screen；Each element is determined according to the design table of comparisons and markup information
The position of box within a grid is to being laid out, that is, it needs to be determined that the element that is carried of each element box is customized at this
Layout (composition, layout) in view；Such as shown in Fig. 8, it is assumed that according to markup information for carrying the member of QQ head portrait
Plain box is 5cm and is 2cm at a distance from page left edge at a distance from page top edge；If the side length of a grid is 1cm,
The starting altitude that the element box can so be obtained is the 6th lattice of grid from top to bottom；In addition it is somebody's turn to do further according to known to markup information
The height of element box is 4.5cm, then, it is known that the element box from top to bottom the 6th lattice to the 10.5th case in occupancy grid
It sets；Again as shown in figure 8, being used to carry the element box and carrying QQ head of " sadness 71149 of an eye drip tear " this text element
The element box of picture is adjacent, and the two spacing is 0.5cm, then can determine the height of text element box for grid from top to bottom
The 11st lattice, can determine the position of text element box further according to other markup informations of text element box.It is specific real
In existing, one or more sub-lines when carrying out vision reduction to APP, in step S208-S209, can be passed through by main thread
Journey calculates the Layout of each element box.
S210 maps corresponding control, an element box and a control phase for each element box after splitting respectively
Mapping.
Element box needs corresponding control to realize, such as：The element box of carrying text passes through Textview
This control is realized, then how many text element box, it is necessary to put the Textview control of identical quantity.Element
Box refers to control phase mapping, and the element box with the control phase mapping is realized by control, such as：Some Textview
The text element box phase mapping of control and T30 shows the text element box for capableing of T30 by the Textview control, i.e.,
The Textview can be realized the text that font size is 30px, and the height of the text is 42px, and text line space is 18px.
S211 is placed in the grid according to position of each element box in the grid in the layout planned
With the control of each element box phase mapping.
Such as previous example, position corresponding to the element box 1 in a network is put with the control of 1 phase mapping of element box
It sets, and so on, the control of each element box phase mapping is placed in a network.
S212 obtains the rich text if in the multiple element box including the object element box for carrying rich text
The width and height of content represented by this.
S213, according in the width and the highly dynamic adjustment grid of content represented by the rich text with the target
The width and height of the control of element box phase mapping.
Step S212-S213 is the process that layout is adjusted, and the content showed by rich text is simultaneously non-textual
Actual content, such as "==b " this text is practical that indicate is " emitting cold sweat " this expression, therefore, the UI after reduction is not
It is to show "==b " this text, and be actually subjected to show is " emitting cold sweat " this expression, therefore, can accommodate rich text
Element box, may not be able to accommodate the content of rich text expression after reduction, that is, content be likely to
The effect of vision reduction is influenced beyond element box；It therefore, should determining if the carrying of some element box is rich text
After the attribute of element box, it is also necessary to which the developed width and height for obtaining content represented by the rich text come to the element box
The width and height of son are adjusted, so that the width of element box adjusted and height can accommodate rich text expression
Content；In specific implementation by taking rich text indicates expression as an example, it can use in internet expression and increase income library, such as FaceBook
Increase income library TextLayoutBuilder, using the width and height of the expression that sub thread goes measurement rich text to indicate, then adjusts again
Whole width and height with the control of the element box phase mapping for carrying rich text.
In practical application, it is also possible to the case where there are other distributing adjustments, such as：For the element box of carrying multiline text
Son designs the line space given in element box in the table of comparisons, enables the element box of carrying multiline text as carrying
The element box of single file text is equally overlapped, but since different terminals line space representation is different, may will affect
Text representation mode after reduction is also required to be laid out adjustment at this time to influence vision reduction effect；Such as：It is lower than
In the Android terminal of Android5.0 version, line space can be added automatically for single choice text；It also can be certainly for multiline text
Dynamic addition line space, then, it carries out to occur restoring deviation and influencing vision also when the reduction of APP vision in these terminals
Former effect.In order to avoid such case generation, the embodiment of the present invention is provided with optimization process, specifically can be and restored in vision
Cheng Zhong, terminal draw a multiline text view after starting APP in terminal screen, check that terminal shows that the multiline text regards
Whether when figure line space can be added automatically, if it is, the height and width of the element box of dynamic adjustment carrying multiline text,
Such as by the height of the element box and width carry out corresponding line space from reduction, to guarantee that the element box adds automatically in terminal
The reduction effect of entire UI will not be had an impact in the case where adding line space.
S214 renders to carry out vision to the application program and restore to obtain mesh the grid that placed control
Mark user interface.
Layout according to each element box renders customized view can restore target UI in APP.Step
S210-S214 describes the vision reduction process of APP；This vision reduction process has fully considered text, rich text, picture
The influence that these elements restore vision, and it is provided with dynamic optimization mechanism, it can effectively ensure that the vision reduction effect of APP,
The target UI for restoring the UI of APP, and restoring of development phase high-fidelity is enabled to meet design phase expectation
Effect.
The target user interface is compared to obtain the view of the application program with the original user interface by S215
Feel reduction degree.
Vision reduction degree is used to measure the difference between target UI and original UI, and vision reduction degree is higher, restores
Difference between UI and the original UI of design is smaller, and APP is finer.It, can be by some instruments of inspection in the embodiment of the present invention
Such as his mountain stone etc. obtains the vision reduction degree of APP.
The embodiment of the present invention is based on the vision reduction that " All Box " theory carries out APP, specifically obtains matching for application program
Confidence breath, the configuration information include designing the table of comparisons, the original user interface of the application program and original user circle
The markup information in face, the original user interface are piled up by multiple element boxes；To the member in the original user interface
Plain box is split；Each element box according to the design table of comparisons and the markup information, after planning is split in screen
The layout of son；Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.Entire vision
Reduction process only needs to make the design table of comparisons early period, is in its corresponding position by the element typesetting of UI according to the design table of comparisons
It can guarantee visual effect, development cost is low, and when UI is designed and changed, such as color is replaced or the style tune of element box
It is whole；As long as the position of element box is constant, overall page effect will not change, and flexibility and pervasive degree are higher；Also, it is directed to
The type and resolution ratio of different terminals can be realized the vision reduction effect of the APP of high-fidelity, and collocation degree is higher.
The description of the embodiment of vision restoring method based on above-mentioned application program, the embodiment of the present invention also provide one kind and answer
With the vision reduction apparatus of program, which can be operate in a computer program (including program code) in terminal,
The computer program that can be specifically operate in terminal used in developer shown in FIG. 1；And the device can
To be applied in the vision restoring method of above-mentioned Fig. 4 and application program shown in Fig. 10, with the view for executing application
Feel the corresponding steps in restoring method.Referring to Figure 11, the device operation such as lower unit：
Acquiring unit 101, for obtaining the configuration information of application program, the configuration information includes the design table of comparisons, institute
It includes multiple for stating the original user interface of application program and the markup information of the original user interface, the original user interface
Element box.
Split cells 102, for being split to the element box in the original user interface.
Layout units 103, for being planned in screen after splitting according to the design table of comparisons and the markup information
The layout of each element box.
Vision reduction unit 104 restores to obtain mesh for carrying out vision to the application program according to the layout planned
Mark user interface.
In a kind of embodiment, the design table of comparisons is used to define design specification and the exploitation rule of the application program
Model；The design table of comparisons includes color chart and the font table of comparisons；
The color chart is for defining color specification used in the application program；The color chart includes
At least one color attribute, the color attribute include at least color designation and color value；
The font table of comparisons is for defining font specification used in the application program；The font table of comparisons includes
At least one font attribute, the font attribute is including at least font name, the height of the element box of font size, carrying font
It spends, the line space in the element box of carrying font.
In another embodiment, which also runs such as lower unit：
Pretreatment unit 105, for obtaining the original user interface of application program；
Element is cut according to smooth vertical and horizontal principle in the original user interface, forms multiple element boxes
Son；Each element box is used to carry an element of the original user interface, and the element includes text, picture or rich text
This；And
It is labeled in the original user interface according to the design table of comparisons, obtains the mark of the application program
Information；The markup information comprises at least one of the following：The attribute, adjacent of used color of object title, each element box
The spacing of element box, element box distance are at a distance from page edge.
In another embodiment, the layout units are specifically used for：
Grid is drawn in screen；
According to the design table of comparisons and the markup information, determine each element box after splitting in the grid
Position；And
It is laid out according to position of each element box in the grid.
In another embodiment, the vision reduction unit is specifically used for：
Corresponding control, an element box and a control phase mapping are mapped respectively for each element box after splitting；
According to position of each element box in the grid in the layout planned, placed and each member in the grid
The control of plain box phase mapping；
The grid that placed control is rendered to carry out vision to the application program and restore to obtain target use
Family interface.
In another embodiment, the vision reduction unit is also used to：
If including the object element box for carrying rich text in the multiple element box, rich text institute table is obtained
Show the width and height of content；And
According in the width and the highly dynamic adjustment grid of content represented by the rich text with the object element
The width and height of the control of box phase mapping.
In another embodiment, which also runs such as lower unit：
Regression nature inspection unit 106, for the original user interface markup information and the design table of comparisons into
Row regression nature inspection；If regression nature inspection success, notifies the split cells to the element box in the original user interface
Son is split；And
Comparing unit 107, it is described for the target user interface to be compared to obtain with the original user interface
The vision reduction degree of application program.
According to one embodiment of present invention, the step S101- that the vision restoring method of application program shown in Fig. 4 is related to
Each unit that S104 can be in the vision reduction apparatus of application program as shown in Figure 11 is performed.For example, institute in Fig. 4
Step S101, S102, S103, the S104 shown can respectively acquiring unit 101, split cells 102 as shown in Figure 11, layout
Unit 103, vision reduction unit 104 execute.
According to one embodiment of present invention, the step of vision restoring method of application program shown in Fig. 10 is related to
Each unit that S201-S215 can be in the vision reduction apparatus of application program as shown in Figure 11 is performed.For example, figure
Step S201-S203, S204, S205, S206, S207-S209, S210-S214, S215 shown in 10 can be respectively by Figure 11
Shown in pretreatment unit 105, acquiring unit 101, regression nature inspection unit 106, split cells 102, layout units 103,
Vision reduction unit 104, comparing unit 107 execute.
According to another embodiment of the invention, each unit in the vision reduction apparatus of application program shown in Figure 11
Respectively or all one or several other units can be merged into constitute or some (a little) unit therein can be with
It is split as functionally smaller multiple units again to constitute, this may be implemented similarly to operate, without influencing implementation of the invention
The realization of the technical effect of example.Said units are logic-based function divisions, in practical applications, the function of a unit
It can be realized by multiple units or the function of multiple units is realized by a unit.In other embodiments of the invention,
The vision reduction apparatus of application program also may include other units, and in practical applications, these functions can also be by other lists
Member assists to realize, and can be cooperated and be realized by multiple units.
The embodiment of the present invention is based on the vision reduction that " All Box " theory carries out APP, specifically obtains matching for application program
Confidence breath, the configuration information include designing the table of comparisons, the original user interface of the application program and original user circle
The markup information in face, the original user interface are piled up by multiple element boxes；To the member in the original user interface
Plain box is split；Each element box according to the design table of comparisons and the markup information, after planning is split in screen
The layout of son；Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.Entire vision
Reduction process only needs to make the design table of comparisons early period, is in its corresponding position by the element typesetting of UI according to the design table of comparisons
It can guarantee visual effect, development cost is low, and when UI is designed and changed, such as color is replaced or the style tune of element box
It is whole；As long as the position of element box is constant, overall page effect will not change, and flexibility and pervasive degree are higher；Also, it is directed to
The type and resolution ratio of different terminals can be realized the vision reduction effect of the APP of high-fidelity, and collocation degree is higher.
The vision restoring method of the vision of shown application program also original system and application program based on the above embodiment, this hair
Bright embodiment, which additionally provides a kind of also former terminal, terminal of the vision for application program, for example can be development phase exploit person
Terminal device used in member.In the specific implementation, terminal described in the embodiment of the present invention is including but not limited to such as with touching
Touch sensing surface (for example, touch-screen display and/or touch tablet) mobile phone, laptop computer or tablet computer it
Other portable devices of class.It is to be further understood that in certain embodiments, the equipment is not portable communication device,
But the desktop computer with touch sensitive surface (for example, touch-screen display and/or touch tablet).Referring to Figure 12, it should
The internal structure of terminal may include processor, user interface, network interface and computer storage medium.Wherein, the place in terminal
Managing device, user interface, network interface and computer storage medium can be connected by bus or other modes, in the embodiment of the present invention
In shown Figure 12 for being connected by bus.
Wherein, user interface is the medium realizing user and terminal and interacting with information exchange, and embodying can be with
Including the display screen (Display) for output and the keyboard (Keyboard) for input etc., it should be noted that this
The keyboard at place both can be physical keyboard, or touch screen dummy keyboard can also be entity in conjunction with touch screen virtualphase
Keyboard.It is to be understood, however, that user interface can also include the one or more of the other of such as mouse and/or control-rod
Physical user-interface device.Processor (or CPU (Central Processing Unit, central processing unit)) is terminal
Core and control core are calculated, one or one or more instruction is adapted for carrying out, is particularly adapted to load and execute one or one
Above instructions are to realize correlation method process or corresponding function；Such as：CPU can be used for parsing user to transmitted by terminal
Switching on and shutting down instruction, and controlling terminal carry out switching on and shutting down operation；For another example：CPU can transmit all kinds of between terminal inner structure
Interaction data, etc..Computer storage medium (Memory) is the memory device in terminal, for storing program and data.It can
With understanding, computer storage medium herein both may include the built in memory device of terminal, naturally it is also possible to including end
Hold supported expanding storage apparatus.Computer storage medium provides memory space, which stores the operation of terminal
System.Also, it also houses and is suitable for by one or more than one instructions that processor loads and executes in the memory space,
These instructions can be one or more computer program (including program code).It should be noted that meter herein
Calculation machine storage medium can be high-speed RAM (Random Access Memory, random access memory) memory, be also possible to
Non-labile memory (non-volatile memory), for example, at least a magnetic disk storage；Optionally can also be to
Few one is located remotely from the computer storage medium of aforementioned processor.
Also it should be strongly noted that terminal supports various application programs, such as one of the following or multiple：Drawing is answered
Application program, disk imprinting application program, electrical form are created with program, demonstration applications, word-processing application, website
Application program, game application, telephony application, videoconference application, email application, instant message
Transmitting-receiving application program takes exercise and application program, photo management application program, digital camera application program, digital camera is supported to answer
With program, web (WWW) viewer applications, digital music player application and/or video frequency player application
Program.At least one public physics of such as touch sensitive surface can be used in the various application programs that can be executed at the terminal
User interface facilities.Touch sensitive surface can be adjusted and/or changed among applications and/or in corresponding application programs
The corresponding information shown in one or more functions and terminal.In this way, the public physical structure of terminal is (for example, touch sensitive
Surface) it can support the various application programs with user interface intuitive and transparent for a user.
In embodiments of the present invention, processor load and execute one stored in computer storage medium or one or more
Instruction, to realize the corresponding steps of method flow shown in above-mentioned Fig. 4 and Figure 10；In the specific implementation, in computer storage medium
One or one or more instruction are loaded by processor and execute following steps：
Obtain application program configuration information, the configuration information include design the table of comparisons, the application program it is original
The markup information of user interface and the original user interface, the original user interface include multiple element boxes；
Element box in the original user interface is split；
According to the design table of comparisons and the markup information, the cloth of each element box after planning is split in screen
Office；And
Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.
In a kind of embodiment, the design table of comparisons is used to define design specification and the exploitation rule of the application program
Model；The design table of comparisons includes color chart and the font table of comparisons；
The color chart is for defining color specification used in the application program；The color chart includes
At least one color attribute, the color attribute include at least color designation and color value；
The font table of comparisons is for defining font specification used in the application program；The font table of comparisons includes
At least one font attribute, the font attribute is including at least font name, the height of the element box of font size, carrying font
It spends, the line space in the element box of carrying font.
In another embodiment, one in computer storage medium or one or more instruction are loaded and are held by processor
Before the step of configuration information of the row acquisition application program, also execute the following steps：
Obtain the original user interface of application program；
Element is cut according to smooth vertical and horizontal principle in the original user interface, forms multiple element boxes
Son；Each element box is used to carry an element of the original user interface, and the element includes text, picture or rich text
This；And
It is labeled in the original user interface according to the design table of comparisons, obtains the mark of the application program
Information；The markup information comprises at least one of the following：The attribute, adjacent of used color of object title, each element box
The spacing of element box, element box distance are at a distance from page edge.
In another embodiment, one in computer storage medium or one or more instruction are loaded and are held by processor
Row is described according to the design table of comparisons and the markup information, and the layout of each element box after splitting is planned in screen
When step, following steps are specifically executed：
Grid is drawn in screen；
According to the design table of comparisons and the markup information, determine each element box after splitting in the grid
Position；And
It is laid out according to position of each element box in the grid.
In another embodiment, one in computer storage medium or one or more instruction are loaded and are held by processor
Row is described to carry out the process that vision restores the step of obtaining target user interface to the application program according to the layout planned
In, specifically execute following steps：
Corresponding control, an element box and a control phase mapping are mapped respectively for each element box after splitting；
According to position of each element box in the grid in the layout planned, placed and each member in the grid
The control of plain box phase mapping；And
The grid that placed control is rendered to carry out vision to the application program and restore to obtain target use
Family interface.
In another embodiment, one in computer storage medium or one or more instruction are loaded and are held by processor
The described pair of grid that placed control of row is rendered to carry out vision to the application program and restore to obtain target user
Before the step of interface, also execute the following steps：
If including the object element box for carrying rich text in the multiple element box, rich text institute table is obtained
Show the width and height of content；And
According in the width and the highly dynamic adjustment grid of content represented by the rich text with the object element
The width and height of the control of box phase mapping.
In another embodiment, one in computer storage medium or one or more instruction are also held by processor load
Row following steps：
Markup information and the design table of comparisons to the original user interface carry out regression nature inspection；
If the step of regression nature inspection success, execution splits the element box in the original user interface.
In another embodiment, one in computer storage medium or one or more instruction are also held by processor load
Row following steps：
The target user interface is compared with the original user interface to obtain the vision of the application program also
Former degree.
The embodiment of the present invention is based on the vision reduction that " All Box " theory carries out APP, specifically obtains matching for application program
Confidence breath, the configuration information include designing the table of comparisons, the original user interface of the application program and original user circle
The markup information in face, the original user interface are piled up by multiple element boxes；To the member in the original user interface
Plain box is split；Each element box according to the design table of comparisons and the markup information, after planning is split in screen
The layout of son；Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.Entire vision
Reduction process only needs to make the design table of comparisons early period, is in its corresponding position by the element typesetting of UI according to the design table of comparisons
It can guarantee visual effect, development cost is low, and when UI is designed and changed, such as color is replaced or the style tune of element box
It is whole；As long as the position of element box is constant, overall page effect will not change, and flexibility and pervasive degree are higher；Also, it is directed to
The type and resolution ratio of different terminals can be realized the vision reduction effect of the APP of high-fidelity, and collocation degree is higher.
The above disclosure is only the preferred embodiments of the present invention, cannot limit the right model of the present invention with this certainly
It encloses, therefore equivalent changes made in accordance with the claims of the present invention, is still within the scope of the present invention.
Claims (15)
1. a kind of vision restoring method of application program, which is characterized in that including：
The configuration information of application program is obtained, the configuration information includes the original user for designing the table of comparisons, the application program
The markup information of interface and the original user interface, the original user interface include multiple element boxes；
Element box in the original user interface is split；
According to the design table of comparisons and the markup information, the layout of each element box after planning is split in screen；
Vision is carried out to the application program according to the layout planned to restore to obtain target user interface.
2. the method as described in claim 1, which is characterized in that the design table of comparisons is for defining setting for the application program
Meter specification and development specifications；The design table of comparisons includes color chart and the font table of comparisons；
The color chart is for defining color specification used in the application program；The color chart includes at least
A kind of color attribute, the color attribute include at least color designation and color value；
The font table of comparisons is for defining font specification used in the application program；The font table of comparisons includes at least
A kind of font attribute, the font attribute include at least font name, font size, carry font element box height,
Carry the line space in the element box of font.
3. the method as described in claim 1, which is characterized in that before the configuration information for obtaining application program, further include：
Obtain the original user interface of application program；
Element is cut according to smooth vertical and horizontal principle in the original user interface, forms multiple element boxes；Often
A element box is used to carry an element of the original user interface, and the element includes text, picture or rich text；
It is labeled in the original user interface according to the design table of comparisons, obtains the mark of the original user interface
Information；The markup information comprises at least one of the following：The attribute, adjacent of used color of object title, each element box
The spacing of element box, element box distance are at a distance from page edge.
4. the method as described in claim 1, which is characterized in that it is described according to the design table of comparisons and the markup information,
The layout of each element box after planning is split in screen, including：
Grid is drawn in screen；
According to the design table of comparisons and the markup information, position of each element box after splitting in the grid is determined
It sets；
It is laid out according to position of each element box in the grid.
5. method as claimed in claim 4, which is characterized in that described to be carried out according to the layout planned to the application program
Vision restores to obtain target user interface, including：
Corresponding control, an element box and a control phase mapping are mapped respectively for each element box after splitting；
According to position of each element box in the grid in the layout planned, placed and each element box in the grid
The control of sub- phase mapping；
The grid that placed control is rendered to carry out vision to the application program and restore to obtain target user circle
Face.
6. method as claimed in claim 5, which is characterized in that the described pair of grid that placed control is rendered with right
Before the application program progress vision restores to obtain target user interface, further include：
If in the multiple element box including the object element box for carrying rich text, obtain in represented by the rich text
The width and height of appearance；
According in the width and the highly dynamic adjustment grid of content represented by the rich text with the object element box
The width and height of the control of phase mapping.
7. the method as described in claim 1, which is characterized in that further include：
Markup information and the design table of comparisons to the original user interface carry out regression nature inspection；
If the step of regression nature inspection success, execution splits the element box in the original user interface.
8. the method according to claim 1, which is characterized in that further include：
The target user interface is compared to obtain the vision reduction degree of the application program with the original user interface.
9. a kind of vision reduction apparatus of application program, which is characterized in that including：
Acquiring unit, for obtaining the configuration information of application program, the configuration information includes designing the table of comparisons, being described using journey
The markup information of the original user interface of sequence and the original user interface, the original user interface include multiple element boxes
Son；
Split cells, for being split to the element box in the original user interface；
Layout units, for each element according to the design table of comparisons and the markup information, after planning is split in screen
The layout of box；
Vision reduction unit restores to obtain target user circle for carrying out vision to the application program according to the layout planned
Face.
10. device as claimed in claim 9, which is characterized in that the design table of comparisons is for defining the application program
Design specification and development specifications；The design table of comparisons includes color chart and the font table of comparisons；
The color chart is for defining color specification used in the application program；The color chart includes at least
A kind of color attribute, the color attribute include at least color designation and color value；
The font table of comparisons is for defining font specification used in the application program；The font table of comparisons includes at least
A kind of font attribute, the font attribute include at least font name, font size, carry font element box height,
Carry the line space in the element box of font.
11. device as claimed in claim 9, which is characterized in that further include：
Pretreatment unit, for obtaining the original user interface of application program；According to horizontal flat perpendicular in the original user interface
Straight principle cuts element, forms multiple element boxes；Each element box is for carrying the original user interface
An element, the element includes text, picture or rich text；And according to the design table of comparisons in the original use
Family is labeled in interface, obtains the markup information of the original user interface；The markup information comprises at least one of the following：
Used color of object title, the attribute of each element box, the spacing of adjacent element box, element box distance and page side
The distance of edge；
Regression nature inspection unit, for the markup information and design table of comparisons progress regression nature to the original user interface
It checks；If regression nature inspection success, tears the element box in the original user interface open by the split cells
Point；
Comparing unit obtains the application program for the target user interface to be compared with the original user interface
Vision reduction degree.
12. device as claimed in claim 8, which is characterized in that the layout units are specifically used for：
Grid is drawn in screen；
According to the design table of comparisons and the markup information, position of each element box after splitting in the grid is determined
It sets；And
It is laid out according to position of each element box in the grid.
13. device as claimed in claim 12, which is characterized in that the vision reduction unit is specifically used for：
Corresponding control, an element box and a control phase mapping are mapped respectively for each element box after splitting；
According to position of each element box in the grid in the layout planned, placed and each element box in the grid
The control of sub- phase mapping；
If in the multiple element box including the object element box for carrying rich text, obtain in represented by the rich text
The width and height of appearance；
According in the width and the highly dynamic adjustment grid of content represented by the rich text with the object element box
The width and height of the control of phase mapping；And
The grid that placed control is rendered to carry out vision to the application program and restore to obtain target user circle
Face.
14. a kind of computer storage medium, which is characterized in that the computer storage medium is stored with one or one or more refers to
It enables, described instruction is suitable for being loaded by processor and being executed the vision reduction such as the described in any item application programs of claim 1-8
Method.
15. a kind of terminal that the vision for application program restores, which is characterized in that including：
Processor is adapted for carrying out one or one or more instruction；And
Computer storage medium, the computer storage medium is stored with one or one or more is instructed, and described one or one
Above instructions are suitable for being loaded by the processor and being executed the vision reduction such as the described in any item application programs of claim 1-8
Method.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810717697.2A CN108897541B (en) | 2018-07-03 | 2018-07-03 | Visual restoration method and device of application program, storage medium and terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810717697.2A CN108897541B (en) | 2018-07-03 | 2018-07-03 | Visual restoration method and device of application program, storage medium and terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108897541A true CN108897541A (en) | 2018-11-27 |
| CN108897541B CN108897541B (en) | 2022-02-11 |
Family
ID=64347708
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810717697.2A Active CN108897541B (en) | 2018-07-03 | 2018-07-03 | Visual restoration method and device of application program, storage medium and terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108897541B (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111258575A (en) * | 2018-11-30 | 2020-06-09 | 阿里健康信息技术有限公司 | Page layout processing method and device |
| CN111405342A (en) * | 2020-03-17 | 2020-07-10 | 北京字节跳动网络技术有限公司 | Rich text message display method, device, system, medium and electronic equipment |
| CN111767054A (en) * | 2020-09-01 | 2020-10-13 | 平安国际智慧城市科技股份有限公司 | Method and device for generating intelligent large screen and computer equipment |
| CN112035772A (en) * | 2020-07-27 | 2020-12-04 | 长沙市到家悠享网络科技有限公司 | Page evaluation method, device and equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102622232A (en) * | 2012-03-06 | 2012-08-01 | 惠州华阳通用电子有限公司 | User interface implement method of embedded device |
| CN103955364A (en) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | Front end assembly method suitable for mobile phone |
| CN104007991A (en) * | 2014-06-06 | 2014-08-27 | 百度在线网络技术（北京）有限公司 | Method and device for adjusting application program interface layout |
| US20180157468A1 (en) * | 2016-12-03 | 2018-06-07 | Thomas STACHURA | Spreadsheet-Based Software Application Development |
-
2018
- 2018-07-03 CN CN201810717697.2A patent/CN108897541B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102622232A (en) * | 2012-03-06 | 2012-08-01 | 惠州华阳通用电子有限公司 | User interface implement method of embedded device |
| CN103955364A (en) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | Front end assembly method suitable for mobile phone |
| CN104007991A (en) * | 2014-06-06 | 2014-08-27 | 百度在线网络技术（北京）有限公司 | Method and device for adjusting application program interface layout |
| US20180157468A1 (en) * | 2016-12-03 | 2018-06-07 | Thomas STACHURA | Spreadsheet-Based Software Application Development |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111258575A (en) * | 2018-11-30 | 2020-06-09 | 阿里健康信息技术有限公司 | Page layout processing method and device |
| CN111258575B (en) * | 2018-11-30 | 2023-09-15 | 阿里健康信息技术有限公司 | Page layout processing method and device |
| CN111405342A (en) * | 2020-03-17 | 2020-07-10 | 北京字节跳动网络技术有限公司 | Rich text message display method, device, system, medium and electronic equipment |
| CN111405342B (en) * | 2020-03-17 | 2021-05-07 | 北京字节跳动网络技术有限公司 | Rich text message display method, device, system, medium and electronic equipment |
| CN112035772A (en) * | 2020-07-27 | 2020-12-04 | 长沙市到家悠享网络科技有限公司 | Page evaluation method, device and equipment |
| CN111767054A (en) * | 2020-09-01 | 2020-10-13 | 平安国际智慧城市科技股份有限公司 | Method and device for generating intelligent large screen and computer equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108897541B (en) | 2022-02-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10810365B2 (en) | Workflow system and method for creating, distributing and publishing content | |
| RU2645276C2 (en) | Creation of variations when converting data to consumer content | |
| CN108897541A (en) | Vision restoring method, device, storage medium and the terminal of application program | |
| US8799765B1 (en) | Systems for sharing annotations and location references for same for displaying the annotations in context with an electronic document | |
| CN114035773B (en) | Configuration-based low-code form development method, system and device | |
| US20160085786A1 (en) | Transforming data into consumable content | |
| US9817811B2 (en) | Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method | |
| US20170293592A1 (en) | Dynamically formatting scalable vector graphics | |
| CN104317563A (en) | Online courseware cooperation development system | |
| US11829667B2 (en) | Creation of component templates and removal of dead content therefrom | |
| WO2007024490A1 (en) | Selection and display of user-created documents | |
| KR20200102238A (en) | System, method and application for data visual service | |
| WO2017151012A1 (en) | Method for processing machine-readable information | |
| JP6865942B1 (en) | Programs, methods, information processing equipment, and systems | |
| CN112927314A (en) | Image data processing method and device and computer equipment | |
| WO2011067785A2 (en) | Dynamic content creation, modification and distribution from single source of content in online and offline scenarios | |
| US9946698B2 (en) | Inserting text and graphics using hand markup | |
| KR102036914B1 (en) | Method for displaying and inputting data and apparatus using the same | |
| US11036356B2 (en) | Service backed digital ruled paper templates | |
| RU2625936C1 (en) | Machine-sensible information processing method | |
| CN114385153A (en) | Interface editing method, editing terminal and computer readable storage medium | |
| KR102181579B1 (en) | Method for providing patient information sticker service and dental insurance claim system therefor | |
| TWI249687B (en) | On-line approval method of scalable vector graphics electronic document | |
| CN113705177A (en) | Manuscript input method and device based on integrated manuscript writing environment and computer equipment | |
| CN115469870A (en) | File online processing method and device, electronic equipment and 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 |