CN108897541B

CN108897541B - Visual restoration method and device of application program, storage medium and terminal

Info

Publication number: CN108897541B
Application number: CN201810717697.2A
Authority: CN
Inventors: 陈海中
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2018-07-03
Filing date: 2018-07-03
Publication date: 2022-02-11
Anticipated expiration: 2038-07-03
Also published as: CN108897541A

Abstract

The embodiment of the invention provides a visual restoration method, a visual restoration device, a storage medium and a terminal of an application program, wherein the method comprises the following steps: acquiring configuration information of an application program, wherein the configuration information comprises a design comparison table, an original user interface of the application program and marking information of the original user interface, and the original user interface comprises a plurality of element boxes; splitting an element box in the original user interface; planning the layout of each split element box in a screen according to the design comparison table and the labeling information; and visually restoring the application program according to the planned layout to obtain a target user interface. The method can realize the visual restoration of the APP with high fidelity, and has low development and maintenance cost, high flexibility and universality.

Description

Visual restoration method and device of application program, storage medium and terminal

Technical Field

The invention relates to the technical field of internet, in particular to the technical field of application program processing, and particularly relates to a visual restoration method of an application program, a visual restoration device of the application program, a computer storage medium and a terminal for the visual restoration of the application program.

Background

The process of an Application (APP) from design to launch into the marketplace will include a design phase that includes UI (User Interface) design of the APP and a development phase that includes UI visual restoration of the APP. Visual restoration refers to the process of enforcing the UI designed by the designer to the APP. Generally, APP needs to consider environmental adaptation issues in the process of visual restoration, such as: for an APP developed for an Android (Android, a mobile operating system) system environment, due to the open source characteristic of an Android system, the Android terminal is very seriously fragmented, where fragmentation means that different terminal manufacturers may manufacture a plurality of Android terminals carrying different hardware platforms and interfaces based on the same Android kernel, and the operating speed and software compatibility of the terminals are different; therefore, it is preferable that the visual restoration effect of the APP can be adapted to more models and resolutions. Most of the existing visual restoration schemes of the APP are in adaptation consideration from two aspects of layout and picture control, namely, a set of adaptation schemes of the layout and the picture are independently developed for each terminal, so that the development cost and the maintenance cost are high; in addition, besides layout and pictures, the UI also contains text elements and the number of the text elements is very large, the existing visual reduction scheme of the APP does not involve adaptation of the text, but the text elements are just an important factor influencing the visual reduction effect of the APP, and poor visual reduction effect of the entire UI is directly influenced by poor reduction degree of the text elements.

Disclosure of Invention

The embodiment of the invention provides a visual restoration method, a device, a storage medium and a terminal of an application program, which can realize visual restoration of an APP with high fidelity and have low development and maintenance cost.

In one aspect, an embodiment of the present invention provides a visual restoration method for an application program, which may include:

acquiring configuration information of an application program, wherein the configuration information comprises a design comparison table, an original user interface of the application program and marking information of the original user interface, and the original user interface comprises a plurality of element boxes;

splitting an element box in the original user interface;

planning the layout of each split element box in a screen according to the design comparison table and the labeling information;

and visually restoring the application program according to the planned layout to obtain a target user interface.

In another aspect, an embodiment of the present invention provides a visual restoration apparatus for an application program, which may include:

the system comprises an acquisition unit, a storage unit and a processing unit, wherein the acquisition unit is used for acquiring configuration information of an application program, the configuration information comprises a design comparison table, an original user interface of the application program and marking information of the original user interface, and the original user interface comprises a plurality of element boxes;

the splitting unit is used for splitting the element box in the original user interface;

the layout unit is used for planning the layout of each split element box in a screen according to the design comparison table and the marking information;

and the visual reduction unit is used for carrying out visual reduction on the application program according to the planned layout to obtain a target user interface.

In yet another aspect, an embodiment of the present invention provides a computer storage medium storing one or more instructions, where the instructions are adapted to be loaded by a processor and execute the following method:

splitting an element box in the original user interface;

In another aspect, an embodiment of the present invention provides a terminal for visual restoration of an application, including:

a processor adapted to implement one or more instructions; and the number of the first and second groups,

a computer storage medium storing one or more instructions adapted to be loaded by the processor and to perform a method comprising:

splitting an element box in the original user interface;

The embodiment of the invention carries out visual restoration of APP based on an All Box concept, and specifically obtains configuration information of an application program, wherein the configuration information comprises a design comparison table, an original user interface of the application program and marking information of the original user interface, and the original user interface is formed by stacking a plurality of element boxes; splitting an element box in the original user interface; planning the layout of each split element box in a screen according to the design comparison table and the labeling information; and visually restoring the application program according to the planned layout to obtain a target user interface. The whole visual restoration process only needs to make a design comparison table at the early stage, and the visual effect can be ensured by typesetting the elements of the UI at the corresponding positions according to the design comparison table, so that the development cost is low, and when the UI design is changed, for example, color replacement or style adjustment of an element box is carried out; as long as the position of the element box is unchanged, the whole page effect is not changed, and the flexibility and the universality are higher; moreover, the visual restoration effect of high-fidelity APP can be realized by aiming at the models and the resolution ratios of different terminals, and the adaptation degree is higher.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

FIG. 1 is an APP operation architecture diagram provided by an embodiment of the present invention;

FIG. 2 is a diagram illustrating an engineering directory structure of an existing application according to an embodiment of the present invention;

FIG. 3 is a schematic diagram of a user interface obtained by a prior art visual restoration scheme for an application according to an embodiment of the present invention;

FIG. 4 is a flowchart of a visual restoration method for an application according to an embodiment of the present invention;

FIG. 5 is a schematic diagram of a color comparison table provided by an embodiment of the present invention;

FIG. 6 is a diagram illustrating a font look-up table according to an embodiment of the present invention;

FIG. 7 is a flowchart illustrating a process of making a font look-up table according to an embodiment of the present invention;

FIG. 8 is a diagram illustrating an original user interface of an application provided by an embodiment of the present invention;

FIG. 9 is a schematic diagram of a target user interface obtained by visually restoring an application according to an embodiment of the present invention;

FIG. 10 is a flowchart of a visual restoration method for another application according to an embodiment of the present invention;

fig. 11 is a schematic structural diagram of a visual restoration apparatus for an application according to an embodiment of the present invention;

fig. 12 is a schematic structural diagram of a terminal for visual restoration of an application according to an embodiment of the present invention.

Detailed Description

The technical solution in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention.

An Application (APP) is released from design to market, presumably through a process of: design phase-development phase-promotion operation phase. Referring to the operation architecture shown in fig. 1, the design phase mainly includes: designing a product prototype and designing a UI; this stage may be done by the designer using a terminal such as a PC (Personal Computer), cell phone, etc. The development stage mainly comprises: developing products and visually restoring UI (user interface); this stage may be done by the developer using a terminal such as a PC, cell phone, etc. The promotion and operation stage mainly comprises: the APP that will develop and test and pass is uploaded to backend server by the developer, and the relevant content of APP is pushed to the user through means such as propaganda, popularization by backend server, and the user can follow backend server and download and install the APP and use. Among them, visual restoration of UI is an important factor affecting whether APP is delicate or not. Visual restoration refers to a process of implementing a UI designed by a designer to an APP; in practical application, no matter how accurate the original design script provided by the designer is marked, the developed product has more or less errors, the errors are represented by visual reduction degree, the higher the visual reduction degree is, the smaller the difference between the restored UI and the original UI of the design is, and the finer the APP is.

Generally, APP needs to consider environmental adaptation issues in the process of visual restoration, such as: for an APP developed for an Android (Android, a mobile operating system) system environment, due to the open source characteristic of an Android system, the Android terminal is very seriously fragmented, where fragmentation means that different terminal manufacturers may manufacture a plurality of Android terminals carrying different hardware platforms and interfaces based on the same Android kernel, and the operating speed and software compatibility of the terminals are different; therefore, it is preferable that the visual restoration effect of the APP can be adapted to more models and resolutions. As mentioned in the related art of the embodiment of the present invention, most of the current visual reduction schemes of APP are considered to be adaptive in terms of both layout and picture control. The layout adaptation means that different layout files are used according to the models and resolutions of different terminals; for example: additionally providing design labels for large-screen mobile phones; or if more detailed layout adaptation is required, as many layout styles as possible suitable for various resolutions need to be designed, so that the visual restoration effect of the APP on different terminals can meet the designed effect of the original UI presentation. The picture control adaptation means that adaptation is realized by using an editing tool or performing adaptive display on a picture according to the technology, for example, the picture is required to be used as much as possible in an APP (application), the picture 9 is a special picture in Android development, the picture in the format is generated by an ADT (Abstract Data Type) self-contained editing tool, and the picture is adaptively displayed in an Android environment by using a Sudoku splitting method; if the 9 figure is not used, different resolutions are needed to correspond to one picture resource each. Please refer to fig. 2 for a schematic diagram of an APP engineering directory structure; as shown in fig. 2, in the current visual restoring scheme of APP, it is necessary to include picture resources (each picture file directory shown in fig. 2 is used to store the picture resources at each resolution) and various layout folders (each layout directory shown in fig. 2) with as many resolutions as possible in an engineering directory structure (i.e., resource files) of APP to solve the problem of adapting terminals with different models and resolutions. The current visual reduction schemes for APP suffer from at least the following drawbacks: (1) because different terminals are adopted to respectively need a plurality of picture resources for layout to carry out adaptation, a set of adaptation scheme of layout and pictures needs to be separately developed for each terminal, and the development cost and the maintenance cost are high; moreover, the engineering directory file of the APP is too large, and after the APP is pushed out online, the too large installation package occupies more download bandwidth resources and also occupies more storage space of the terminal; (2) in addition to layout and pictures, the UI also includes text elements and the number of the text elements is very large, the existing visual reduction scheme of the APP does not involve adaptation of the text, but the text elements are just an important factor that affects the visual reduction effect of the APP, for example, please refer to the UI obtained by visual reduction shown in fig. 3, which obviously shows that the reduction degree of the text elements is poor, thereby causing the visual reduction effect of the entire UI to be poor; for the situation shown in fig. 3, most of the existing solutions are achieved by design visual walk, that is, the space between text elements is manually readjusted, and secondary development is reworked, which undoubtedly increases the development cost and reduces the efficiency.

Based on this, the embodiment of the present invention provides a visual reduction scheme for an application, which provides an "All Box" concept, where the "All Box" concept refers to that each element in a UI is regarded as a Box, and then the entire UI is built up by multiple element boxes (the element boxes may be the same or different in size); the 'All Box' concept adopts a design comparison table as a convention specification for design and development, and cuts the UI according to a horizontal, flat and vertical rule in the design process, so that the UI can be cut into a plurality of element boxes with the specification of the design comparison table, and the element boxes are not crossed when stacked; the UI can be restored by stacking the element boxes in the development process. The visual reduction scheme of APP based on the 'All Box' concept has at least the following advantages: (1) the visual effect can be ensured only by making a design comparison table at the early stage and typesetting the elements of the UI at the corresponding positions according to the design comparison table, the development cost is low, and when the UI design is changed, for example, color replacement or style adjustment of an element box is carried out; as long as the position of the element box is unchanged, the whole page effect is not changed, and the flexibility and the universality are higher; (2) the visual restoration effect of the APP with high fidelity can be realized by aiming at the models and the resolution ratios of different terminals, and the adaptation degree is higher.

Based on the above description, the embodiment of the present invention provides a method for visually restoring an application, which may be performed by a terminal for visually restoring an application, and specifically, may be performed by a terminal used by a developer as shown in fig. 1. Referring to fig. 4, the method may include the following steps S101-S104.

S101, obtaining configuration information of an application program, wherein the configuration information comprises a design comparison table, an original user interface of the application program and marking information of the original user interface, and the original user interface comprises a plurality of element boxes.

The design comparison table is used for defining the design specification and the development specification of the application program; in other words, the design look-up table is a specification that the designer and developer agree with. The design comparison table can comprise a color comparison table and a font comparison table; wherein the color comparison table is used for defining the color specification used by the application program; for example: the color lookup table may specify various color specifications for the dominant hue, background color, dominant caption color, etc. involved in the APP. Please refer to the schematic diagram of the color comparison table shown in fig. 5; the color comparison table comprises at least one color attribute, and the color attribute at least comprises a color name and a color value; for example, as shown in fig. 5, C1black is a color name, and the color value of the color, C1black, is # 111111; further, the color attributes in the color lookup table may also include a color description, such as the color description of C1black as "very black for background"; the following steps are repeated: c7green is another color name, the color value of this color is # dfff00, and the color is described as "light green" for theme colors. The font comparison table is used for defining the font specification used by the application program; refer to the schematic diagram of the font comparison table shown in fig. 6; the font comparison table comprises at least one font attribute, wherein the font attribute at least comprises a font name, a font size, a height of an element box bearing the font and a line spacing in the element box bearing the font; for example, as shown in fig. 6, T90 is a font name, the font size is 90px (pixels), the height (line height) of the element box carrying the font is 108px, and the line space (space) in the element box carrying the font is 60 px; further, each font attribute in the font look-up table may also include a usage description, for example, the usage description of a font such as T90 is "navigation title-Medium, used very much, only appears in navigation"; the following steps are repeated: t30 is another font name, the font size is 30px, the height of the element box (line light) carrying this font is 42px, the line spacing (sapce) within the element box carrying this font is 18px, and the use of this font is described as "auxiliary information for ins stream label". Of course, the font properties in the font look-up table may also contain other information, such as paragraph requirements (paragraph param shown in FIG. 6).

The design comparison table can be multiplexed in a plurality of APPs, and the universality is high. In a specific implementation, the design comparison table may be obtained by making by a designer in combination with colors and fonts needed by the APP, and may be provided to the development stage as part of the configuration information. The font look-up table may be a production process executed by a terminal used by the designer shown in fig. 1, please refer to fig. 7, and the production process mainly includes the following steps s11-s 17:

s11, determining the font type used in the APP according to the original UI of the APP designed by the designer;

s12, measuring the font height of the element in the original UI to obtain the height of the element box using a measuring tool such as PS (Photoshop image processing software) tool;

s13, visually restoring the element box according to the height of the element box under the condition of various models and various resolutions;

s14, judging whether the font is beyond the bearing range of the element box; if so, executing s15, and adjusting the height of the element box to fully contain the font;

s16, if the height of the element box is not exceeded or has been adjusted, determining whether the coupling degree of the element box with other element boxes is low, if the coupling degree is low, indicating that the element box is not the same as or similar to other element boxes, executing step s17, and adding the font property corresponding to the element box in the font comparison table.

The font comparison table shown in FIG. 6 can be made through the above steps s11-s 17. It should be particularly noted that, in order to better adapt to various models and various resolutions, in the embodiment of the present invention, dp (device independent pixels) is used as a font size unit, and since dp is related to devices, different display effects exist in different devices (i.e., different models and different resolutions); then, the element box that designs to the typeface that uses dp as typeface size unit can hold the different typeface height that different equipment shows, in other words, same element box can be used for bearing the different typefaces that different equipment shows, and this just makes the typeface that the element box homoenergetic enough realizes the preferred under the condition of various models, various resolutions bear the effect, has both solved the adaptation problem of model and resolution ratio, can guarantee APP's visual reduction effect again.

The original user interface of the APP refers to an original document designed for the UI of the APP by a designer, please refer to the original UI shown in fig. 8; as shown in fig. 8, the elements in the original UI are cut into element boxes one by one in a horizontal and vertical manner, the element boxes are stacked to form the original UI, and the original UI includes labeling information, the labeling information including at least one of the following: the used target color name, the attribute of each element box, the distance between adjacent element boxes, the distance between the element boxes and the page edge; for example, the label of an element box in fig. 8 is "C8 red", which indicates that the font name of the text element (i.e., the golden ox seat) carried by the element box is C8red, and it can be known that the font color of the text element is red by looking up the color comparison table shown in fig. 5; further, as shown in FIG. 8, the element box carrying the QQ (an instant chat tool by Tencent) avatar and the next element box under it carrying the text "sad with tears 71149" are spaced 0.5cm apart. Wherein the attributes of the element box may include any one or more of: the type of element carried by the element box, the width and/or height of the element box; types of elements herein include, but are not limited to: text, pictures, rich text. For example, the label information of an element box in fig. 8 is "T30", which indicates that the element box is used to carry a text element, and the font of the text element is the T30 font in the design look-up table, so that the font attribute of the T30 item is found from the design look-up table, and the height of the element box can be obtained; further, as shown in FIG. 8, the label information of the element box for carrying the QQ head portrait includes a height of 4.5cm and a width of 5 cm.

Completing the design comparison table, the original UI of the APP and the marking information of the original UI in a design stage, and providing the design comparison table, the original UI of the APP and the marking information of the original UI as the configuration information of the APP to a development stage; the configuration information may be stored in a database, and step S101 may obtain the configuration information of the APP from the database.

S102, splitting the element box in the original user interface.

Because the original UI of the APP is formed by stacking a plurality of element boxes, in visual reduction, the element boxes need to be split first to obtain an individual element box, and then corresponding program development is performed for the individual element box, so as to implement the individual element box in the APP.

S103, planning the layout of each split element box in the screen according to the design comparison table and the marking information.

And S104, visually restoring the application program according to the planned layout to obtain a target user interface.

In steps S103-S104, according to the design comparison table and the marking information, the layout of each element box can be determined in the screen, namely the position of each element box in the screen is determined; placing programs (controls) corresponding to the element boxes in sequence according to the positions of the element boxes in the screen, that is, performing visual restoration on the APP to obtain a target UI, where the target UI refers to the UI of the APP obtained by restoration, please refer to the schematic diagram of the target UI shown in fig. 9; comparing fig. 8 and fig. 9, it can be known that the APP visual reduction method based on the "All Box" concept in the embodiment of the present invention can achieve a high-fidelity visual reduction effect.

The embodiment of the present invention further provides another visual restoration method for an application, which may be executed by a terminal for visual restoration of an application, and specifically may be executed by a terminal used by a developer shown in fig. 1. Referring to FIG. 10, the method may include the following steps S201-S215.

S201, acquiring an original user interface of the application program.

The original user interface of the APP refers to a manuscript designed by a designer for the UI of the APP. In one embodiment, the APP may be a completely new APP, and the original user interface of the APP refers to a UI script designed for the completely new APP. In another embodiment, the APP may be a designed APP that needs to be modified, and the original user interface of the APP refers to a UI draft designed for modifying the APP.

S202, cutting elements in the original user interface according to a horizontal, horizontal and vertical principle to form a plurality of element boxes; each element box is used to carry an element of the original user interface, the element comprising text, a picture or rich text.

The principle of being flat and vertical ensures that the UI can be cut into multiple element boxes and that the element boxes are stacked without crossing. Among them, an element box for carrying text and rich text may be referred to as a text element box; an element box for carrying a picture may be referred to as a picture element box. Rich text is a special format of text that can express richer content than ordinary text; for example: the expression in the instant messaging application is a typical rich text, such as a rich text ": D" for "happy" expression, a rich text "> ____" for "mad" expression, and a rich text "═ b" for "cold sweat" expression.

S203, labeling the original user interface according to the design comparison table to obtain labeling information of the application program; the annotation information comprises at least one of: the target color name used, the attributes of each element box, the spacing between adjacent element boxes, the distance between an element box and the edge of the page.

The design comparison table comprises a color comparison table and a font comparison table, and the color comparison table can be seen in FIG. 5; the font look-up table can be seen in fig. 6. The original UI is labeled according to the design comparison table, and the labeling information shown in fig. 8 can be obtained. It should be noted that, if the element box in the original UI uses the attribute in the design comparison table, the corresponding attribute name is directly marked on the element box side; for example: the text element carried by an element box is in the font of T54, and can be directly labeled as "T54"; if the attributes of the element box in the design comparison table are not used in the original UI, the actual marking can be carried out by measuring the attributes of the element box such as the width, the height and the like; for example: if the picture element carried by a certain element box does not use the attribute in the comparison table, the width and the height of the picture element can be measured for actual marking.

The design comparison table, the original UI of the APP and the labeling information of the original UI, which are obtained in the steps S201-S203, are completed in a design stage and are provided to a development stage as the configuration information of the APP; the configuration information may be stored in a database.

S204, obtaining configuration information of the application program, wherein the configuration information comprises a design comparison table, an original user interface of the application program and marking information of the original user interface, and the original user interface is formed by stacking a plurality of element boxes.

S205, carrying out normalization check on the marking information of the original user interface and the design comparison table.

S206, splitting the element box in the original user interface if the normalization check is successful.

In steps S205-S206, the normalization check includes two levels, one level is to check whether the annotation information of the original user interface is complete, for example: if the certain element box is checked to have no corresponding marking information, or the marking information of the original UI is checked not to mark the color used by the original UI; and the like; the marking information of the original UI is incomplete, the incompletely marked original UI cannot realize visual restoration well, and the normalization check is unsuccessful and needs to be returned to the designer for re-marking. If the annotation information of the original UI is complete, another level of check is made to see if the annotation information of the original UI can be covered by the design look-up table, for example: the box of a certain element is marked as 'T56', but the attribute item of T56 is not found in the look-up design comparison table, and the normalization check is unsuccessful, and the element box needs to be returned to the designer for re-marking or newly adding the attribute item of 'T56' in the design comparison table. The marking information of the original UI and the complete accuracy of the design comparison table can be guaranteed through normalization check, so that the visual restoration process of the APP can be smoothly carried out, and the visual restoration effect of the APP is guaranteed.

If the normalization check is successful, splitting an element box in the original UI; because the original UI of the APP is formed by stacking a plurality of element boxes, in visual reduction, the element boxes need to be split first to obtain an individual element box, and then corresponding program development is performed for the individual element box, so as to implement the individual element box in the APP.

S207, drawing a grid in the screen.

And S208, determining the positions of the split element boxes in the grid according to the design comparison table and the marking information.

S209, obtaining the layout according to the positions of the element boxes in the grid.

In steps S207-S209, a view can be customized in a terminal (used by a developer in the development phase), and the view is presented as a grid in a terminal screen; determining the position of each element box in the grid according to the design comparison table and the marking information so as to obtain the Layout, namely determining the Layout (composition and Layout) of the elements carried by each element box in the user-defined view; for example, as shown in fig. 8, it is assumed that the element box for bearing the QQ avatar is 5cm away from the upper edge of the page and 2cm away from the left edge of the page according to the label information; setting the side length of one grid as 1cm, and obtaining the 6 th grid of the element box with the initial height from top to bottom of the grid; in addition, according to the marking information, the height of the element box is known to be 4.5cm, and then the element box can be known to occupy the positions from the 6 th lattice to the 10.5 th lattice in the grid from top to bottom; as shown in fig. 8, if the element box for carrying the text element "sad with tears 71149" is adjacent to the element box for carrying the QQ avatar, and the distance between the two is 0.5cm, the height of the text element box can be determined as 11 th lattice from top to bottom of the lattice, and the position of the text element box can be determined according to other labeling information of the text element box. In a specific implementation, when the APP is visually restored by the main thread, the Layout of each element box may be calculated by one or more sub-threads in steps S208 to S209.

And S210, mapping corresponding controls for each split element box, wherein one element box is mapped with one control.

The element box is implemented by requiring corresponding controls, such as: the element boxes for bearing the texts are realized through the Textview control, so that the same number of Textview controls need to be placed for how many text element boxes exist. Mapping an element box to a control means that the element box mapped to the control is implemented by the control, for example: a certain Textview control is mapped with a text element box of T30, which indicates that a text element box of T30 can be realized by the Textview control, that is, the Textview can realize a text with a font size of 30px, the height of the text is 42px, and the line spacing of the text is 18 px.

S211, placing controls mapped with the element boxes in the grid according to the positions of the element boxes in the grid in the planned layout.

As in the foregoing example, the control mapped to the element box 1 is placed at the position corresponding to the element box 1 in the network, and so on, the control mapped to each element box is placed in the network.

S212, if the element boxes comprise target element boxes bearing rich texts, obtaining the width and height of contents represented by the rich texts.

And S213, dynamically adjusting the width and the height of a control mapped with the target element box in the grid according to the width and the height of the content represented by the rich text.

Steps S212 to S213 are a process of adjusting the layout, and since the content presented by the rich text is not the actual content of the text, for example, the "b" text actually represents the expression of "sweating", the restored UI does not need to present the "b" text, but actually represents the expression of "sweating", and therefore, the UI can accommodate an element box of the rich text, and the content represented by the rich text after being restored may not necessarily be accommodated, that is, the content may exceed the element box and may affect the visual restoration effect; therefore, if a certain element box carries rich text, after determining the attribute of the element box, the actual width and height of the content represented by the rich text are also needed to be obtained to adjust the width and height of the element box, so that the adjusted width and height of the element box can accommodate the content represented by the rich text; in the specific implementation, for example, the expression is expressed by the rich text, a source opening library in the internet, for example, the source opening library textlayout builder of FaceBook, is used, a child thread is used to measure the width and height of the expression expressed by the rich text, and then the width and height of the control mapped with the element box for bearing the rich text are readjusted.

In practical applications, there may be other layout adjustment cases, such as: for an element box bearing multiple lines of texts, the line spacing in the element box is given in a design comparison table, so that the element box bearing the multiple lines of texts can be superposed like the element box bearing a single line of texts, but because the line spacing representation modes of different terminals are different, the representation mode of the reduced texts can be influenced, the visual reduction effect is influenced, and at the moment, the layout adjustment is required; for example: in an Android terminal lower than the Android5.0 version, line spacing can be automatically added for a single-choice text; line spacing is also automatically added for multi-line text, so that reduction deviation can occur when APP visual reduction is performed in the terminals to influence visual reduction effect. In order to avoid this situation, the embodiment of the present invention sets an optimization process, which may specifically be that in a visual restoration process, after the terminal starts the APP, a multi-line text view is drawn in a terminal screen, and whether the inter-line distance is automatically added when the terminal displays the multi-line text view is checked, if so, the height and width of an element box bearing the multi-line text are dynamically adjusted, for example, the height and width of the element box are reduced by a corresponding inter-line distance, so as to ensure that the element box does not affect the restoration effect of the entire UI even when the terminal automatically adds the inter-line distance.

S214, rendering the grid in which the control is placed so as to visually restore the application program to obtain a target user interface.

And rendering the self-defined view according to the Layout of each element box to restore the target UI in the APP. Steps S210-S214 describe a visual reduction process of APP; the influence of the elements such as the text, the rich text and the picture on the visual restoration is fully considered in the visual restoration process, a dynamic optimization mechanism is arranged, the visual restoration effect of the APP can be effectively guaranteed, the UI of the APP can be restored in a development stage with high fidelity, and the restored target UI meets the effect expected in a design stage.

S215, comparing the target user interface with the original user interface to obtain the visual reduction degree of the application program.

The visual reduction degree is used for measuring the difference between the target UI and the original UI, and the higher the visual reduction degree is, the smaller the difference between the reduced UI and the designed original UI is, and the finer the APP is. In the embodiment of the invention, the visual reduction degree of the APP can be obtained by some inspection tools such as talshan stones and the like.

Based on the description of the embodiment of the visual restoration method for the application program, the embodiment of the present invention further provides a visual restoration apparatus for an application program, where the apparatus may be a computer program (including program code) running in a terminal, and specifically may be a computer program running in a terminal used by a developer shown in fig. 1; and the apparatus may be applied to the visual restoration method of the application program shown in fig. 4 and 10 described above, for executing the corresponding steps in the visual restoration method of the application program. Referring to fig. 11, the apparatus operates as follows:

the obtaining unit 101 is configured to obtain configuration information of an application, where the configuration information includes a design comparison table, an original user interface of the application, and label information of the original user interface, and the original user interface includes a plurality of element boxes.

A splitting unit 102, configured to split the element box in the original user interface.

And the layout unit 103 is configured to plan the layout of each split element box in the screen according to the design comparison table and the label information.

And the visual restoration unit 104 is configured to perform visual restoration on the application program according to the planned layout to obtain a target user interface.

In one embodiment, the design comparison table is used for defining the design specification and the development specification of the application program; the design comparison table comprises a color comparison table and a font comparison table;

the color comparison table is used for defining color specifications used by the application program; the color comparison table comprises at least one color attribute, and the color attribute at least comprises a color name and a color value;

the font comparison table is used for defining the font specification used by the application program; the font comparison table comprises at least one font attribute, and the font attribute at least comprises a font name, a font size, the height of an element box bearing the font and the line spacing in the element box bearing the font.

In another embodiment, the apparatus further operates the following:

a preprocessing unit 105, configured to obtain an original user interface of an application;

cutting the elements in the original user interface according to a horizontal, horizontal and vertical principle to form a plurality of element boxes; each element box is used for bearing one element of the original user interface, and the element comprises text, pictures or rich text; and the number of the first and second groups,

marking in the original user interface according to the design comparison table to obtain marking information of the application program; the annotation information comprises at least one of: the target color name used, the attributes of each element box, the spacing between adjacent element boxes, the distance between an element box and the edge of the page.

In another embodiment, the layout unit is specifically configured to:

drawing a grid in a screen;

determining the positions of the split element boxes in the grid according to the design comparison table and the labeling information; and the number of the first and second groups,

and obtaining the layout according to the positions of the element boxes in the grid.

In yet another embodiment, the visual reduction unit is specifically configured to:

mapping corresponding controls for each split element box, wherein one element box is mapped with one control;

placing controls mapped with the element boxes in the grid according to the positions of the element boxes in the grid in the planned layout;

rendering the grid with the placed control to perform visual restoration on the application program to obtain a target user interface.

In yet another embodiment, the visual reduction unit is further configured to:

if the plurality of element boxes comprise target element boxes bearing rich texts, acquiring the width and height of contents represented by the rich texts; and

and dynamically adjusting the width and the height of a control mapped with the target element box in the grid according to the width and the height of the content represented by the rich text.

In a further embodiment, the device further operates the following:

a normalization checking unit 106, configured to perform normalization checking on the labeling information of the original user interface and the design comparison table; if the normalization check is successful, informing the splitting unit to split the element box in the original user interface; and the number of the first and second groups,

a comparing unit 107, configured to compare the target user interface with the original user interface to obtain a visual restoration degree of the application program.

According to an embodiment of the present invention, steps S101-S104 involved in the visual restoration method of the application program shown in fig. 4 may be executed by respective units in the visual restoration apparatus of the application program shown in fig. 11. For example, steps S101, S102, S103, and S104 shown in fig. 4 may be performed by the acquisition unit 101, the splitting unit 102, the layout unit 103, and the visual restoration unit 104 shown in fig. 11, respectively.

According to an embodiment of the present invention, steps S201 to S215 involved in the visual restoration method of the application program shown in fig. 10 may be performed by respective units in the visual restoration apparatus of the application program shown in fig. 11. For example, steps S201 to S203, S204, S205, S206, S207 to S209, S210 to S214, and S215 shown in fig. 10 may be performed by the preprocessing unit 105, the obtaining unit 101, the normalization checking unit 106, the splitting unit 102, the layout unit 103, the visual restoring unit 104, and the comparing unit 107 shown in fig. 11, respectively.

According to another embodiment of the present invention, the units in the visual restoration apparatus of the application program shown in fig. 11 may be respectively or entirely combined into one or several other units to form one or several other units, or some unit(s) thereof may be further split into multiple units with smaller functions to form the same operation, without affecting the achievement of the technical effect of the embodiment of the present invention. The units are divided based on logic functions, and in practical application, the functions of one unit can be realized by a plurality of units, or the functions of a plurality of units can be realized by one unit. In other embodiments of the present invention, the visual restoration apparatus of the application program may also include other units, and in practical applications, these functions may also be implemented by the assistance of other units, and may be implemented by cooperation of a plurality of units.

Based on the visual restoration system and the visual restoration method for the application program shown in the above embodiments, the embodiment of the present invention further provides a visual restoration terminal for the application program, where the terminal may be, for example, a terminal device used by a developer in a development phase. In particular implementations, the terminals described in embodiments of the invention include, but are not limited to, other portable devices such as mobile phones, laptop computers, or tablet computers having touch sensitive surfaces (e.g., touch screen displays and/or touch pads). It should also be understood that in some embodiments, the device is not a portable communication device, but is a desktop computer having a touch-sensitive surface (e.g., a touch screen display and/or touchpad). Referring to fig. 12, the internal structure of the terminal may include a processor, a user interface, a network interface, and a computer storage medium. The processor, the user interface, the network interface and the computer storage medium in the terminal may be connected by a bus or other means, and fig. 12 shows an example of the connection by a bus in the embodiment of the present invention.

The user interface is a medium for implementing interaction and information exchange between a user and a terminal, and may specifically include a Display screen (Display) for output and a Keyboard (Keyboard) for input, and the like. However, it should be understood that the user interface may also include one or more other physical user interface devices such as a mouse and/or joystick. The processor (or CPU) is a computing core and a control core of the terminal, and is adapted to implement one or more instructions, and specifically, is adapted to load and execute one or more instructions to implement corresponding method flows or corresponding functions; for example: the CPU can be used for analyzing a power-on and power-off instruction sent to the terminal by a user and controlling the terminal to carry out power-on and power-off operation; the following steps are repeated: the CPU may transmit various types of interactive data between the internal structures of the terminal, and so on. A computer storage medium (Memory) is a Memory device in a terminal for storing programs and data. It is understood that the computer storage medium herein may include both the built-in storage device of the terminal and, of course, the extended storage device supported by the terminal. The computer storage medium provides a storage space that stores an operating system of the terminal. Also, one or more instructions, which may be one or more computer programs (including program code), are stored in the memory space and are adapted to be loaded and executed by the processor. It should be noted that the computer storage medium may be a high-speed RAM (Random Access Memory) Memory, or a non-volatile Memory (non-volatile Memory), such as at least one disk Memory; and optionally at least one computer storage medium located remotely from the processor.

It is also specifically noted that the terminal supports various applications, such as one or more of the following: a drawing application, a presentation application, a word processing application, a website creation application, a disc burning application, a spreadsheet application, a gaming application, a telephone application, a video conferencing application, an email application, an instant messaging application, an exercise support application, a photo management application, a digital camera application, a web browsing application, a digital music player application, and/or a digital video player application. Various applications that may be executed on the terminal may use at least one common physical user interface device, such as a touch-sensitive surface. One or more functions of the touch-sensitive surface and corresponding information displayed on the terminal can be adjusted and/or changed between applications and/or within respective applications. In this way, a common physical architecture (e.g., touch-sensitive surface) of the terminal can support various applications with user interfaces that are intuitive and transparent to the user.

In the embodiment of the present invention, the processor loads and executes one or more instructions stored in the computer storage medium to implement the corresponding steps of the method flows shown in fig. 4 and 10; in a specific implementation, one or more instructions in a computer storage medium are loaded by a processor and perform the following steps:

splitting an element box in the original user interface;

planning the layout of each split element box in a screen according to the design comparison table and the labeling information; and the number of the first and second groups,

In another embodiment, before one or more instructions in the computer storage medium are loaded by the processor and the step of obtaining the configuration information of the application program is executed, the following steps are further executed:

acquiring an original user interface of an application program;

In another embodiment, when one or more instructions in the computer storage medium are loaded by the processor and the step of planning the layout of each split element box in the screen according to the design comparison table and the label information is executed, the following steps are specifically executed:

drawing a grid in a screen;

In another embodiment, during the process of loading one or more instructions in the computer storage medium by the processor and executing the step of visually restoring the application program according to the planned layout to obtain the target user interface, the following steps are specifically executed:

placing controls mapped with the element boxes in the grid according to the positions of the element boxes in the grid in the planned layout; and the number of the first and second groups,

In yet another embodiment, one or more instructions in the computer storage medium are loaded by the processor and executed prior to the step of rendering the grid with placed controls to visually restore the application to obtain the target user interface, the steps of:

if the plurality of element boxes comprise target element boxes bearing rich texts, acquiring the width and height of contents represented by the rich texts; and the number of the first and second groups,

In yet another embodiment, one or more instructions in the computer storage medium loaded by the processor further performs the steps of:

carrying out normalization check on the marking information of the original user interface and the design comparison table;

and if the normalization check is successful, executing a step of splitting the element box in the original user interface.

and comparing the target user interface with the original user interface to obtain the visual reduction degree of the application program.

The above disclosure is only for the purpose of illustrating the preferred embodiments of the present invention, and it is therefore to be understood that the invention is not limited by the scope of the appended claims.

Claims

1. A visual restoration method for an application program, wherein the method is applied to the development phase of the application program; the method comprises the following steps:

acquiring configuration information of an application program, wherein the configuration information comprises a design comparison table, an original user interface of the application program and marking information of the original user interface, and the original user interface comprises a plurality of element boxes; the design comparison table, the original user interface of the application program and the marking information of the original user interface are completed in the design stage of the application program and are provided to the development stage of the application program; the design comparison table can be reused in a plurality of application programs;

carrying out normalization check on the marking information of the original user interface and the design comparison table; the normalization check comprises checking whether the annotation information of the original user interface is complete; if the label information of the original user interface is complete, continuously checking whether the label information of the original user interface can be covered by the design comparison table; if the coverage is over, the normalization check is successful; if the original user interface is not covered, the normalization check fails, the original user interface is re-labeled in the design stage of the application program or uncovered attribute items are added in the design comparison table;

if the normalization check is successful, splitting the element box in the original user interface;

2. The method of claim 1, wherein the design look-up table is used to define design specifications and development specifications for the application; the design comparison table comprises a color comparison table and a font comparison table;

3. The method of claim 1, wherein prior to obtaining configuration information for an application, further comprising:

acquiring an original user interface of an application program;

cutting the elements in the original user interface according to a horizontal, horizontal and vertical principle to form a plurality of element boxes; each element box is used for bearing one element of the original user interface, and the element comprises text, pictures or rich text;

marking in the original user interface according to the design comparison table to obtain marking information of the original user interface; the annotation information comprises at least one of: the target color name used, the attributes of each element box, the spacing between adjacent element boxes, the distance between an element box and the edge of the page.

4. The method of claim 1, wherein planning the layout of each split box in the screen according to the design look-up table and the label information comprises:

drawing a grid in a screen;

determining the positions of the split element boxes in the grid according to the design comparison table and the labeling information;

5. The method of claim 4, wherein visually restoring the application program in accordance with the planned layout results in a target user interface comprising:

6. The method of claim 5, wherein prior to rendering the grid with controls placed thereon to visually render the application to obtain a target user interface, further comprising:

if the plurality of element boxes comprise target element boxes bearing rich texts, acquiring the width and height of contents represented by the rich texts;

7. The method of any one of claims 1-3, further comprising:

8. A visual reduction device of an application program is characterized in that the visual reduction belongs to the development stage of the application program; the device comprises:

the system comprises an acquisition unit, a storage unit and a processing unit, wherein the acquisition unit is used for acquiring configuration information of an application program, the configuration information comprises a design comparison table, an original user interface of the application program and marking information of the original user interface, and the original user interface comprises a plurality of element boxes; the design comparison table, the original user interface of the application program and the marking information of the original user interface are completed in the design stage of the application program and are provided to the development stage of the application program; the design comparison table can be reused in a plurality of application programs;

the normalization checking unit is used for carrying out normalization checking on the marking information of the original user interface and the design comparison table; the normalization check comprises checking whether the annotation information of the original user interface is complete; if the label information of the original user interface is complete, continuously checking whether the label information of the original user interface can be covered by the design comparison table; if the coverage is over, the normalization check is successful; if the original user interface is not covered, the normalization check fails, the original user interface is re-labeled in the design stage of the application program or uncovered attribute items are added in the design comparison table;

the splitting unit is used for splitting the element box in the original user interface if the normalization check is successful;

9. The apparatus of claim 8, wherein the design look-up table is used to define a design specification and a development specification for the application; the design comparison table comprises a color comparison table and a font comparison table;

10. The apparatus of claim 8, further comprising:

the preprocessing unit is used for acquiring an original user interface of the application program; cutting the elements in the original user interface according to a horizontal, horizontal and vertical principle to form a plurality of element boxes; each element box is used for bearing one element of the original user interface, and the element comprises text, pictures or rich text; marking in the original user interface according to the design comparison table to obtain marking information of the original user interface; the annotation information comprises at least one of: the used target color name, the attribute of each element box, the distance between adjacent element boxes, the distance between the element boxes and the page edge; and the comparison unit is used for comparing the target user interface with the original user interface to obtain the visual restoration degree of the application program.

11. The apparatus of claim 8, wherein the placement unit is specifically configured to:

drawing a grid in a screen;

12. The apparatus of claim 11, wherein the visual reduction unit is specifically configured to:

dynamically adjusting the width and the height of a control mapped with the target element box in the grid according to the width and the height of the content represented by the rich text; and the number of the first and second groups,

13. A computer storage medium having stored thereon one or more instructions adapted to be loaded by a processor and to perform a method of visual restoration of an application program according to any of claims 1-7.

14. A terminal for visual rendition of an application, comprising:

a computer storage medium storing one or more instructions adapted to be loaded by the processor and to perform a method of visual restoration of an application program according to any of claims 1-7.