CN111443978A - User interface adjusting method and device, storage medium and electronic equipment - Google Patents
User interface adjusting method and device, storage medium and electronic equipment Download PDFInfo
- Publication number
- CN111443978A CN111443978A CN202010304035.XA CN202010304035A CN111443978A CN 111443978 A CN111443978 A CN 111443978A CN 202010304035 A CN202010304035 A CN 202010304035A CN 111443978 A CN111443978 A CN 111443978A
- Authority
- CN
- China
- Prior art keywords
- adjusting
- user interface
- interface image
- reference interface
- image
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the disclosure discloses a method and a device for adjusting a user interface, wherein the method comprises the following steps: acquiring a preset reference interface image; displaying the reference interface image on a drawing area for drawing the user interface with preset transparency; adjusting the attribute of the reference interface image based on the operation of adjusting the reference interface image, and taking the reference interface with the adjusted attribute as a reference for adjusting the user interface; and adjusting the user interface based on the operation of adjusting the user interface so that the user interface is overlapped with the reference interface image. The embodiment of the disclosure can compare the user interface with the reference interface image in real time, so that a designer can observe whether the currently designed user interface is consistent with the reference interface image in real time and adjust the user interface, thereby improving the accuracy of user interface design and reducing the error between the user interface and the reference interface image.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for adjusting a user interface, a computer-readable storage medium, and an electronic device.
Background
In the field of UI (user interface) design, the traditional test method is to compare an original design drawing with a design interface by naked eyes, a strict UI design also can compare horizontal lines with each other, and if the UI can be adjusted in time in the development process, the visual test can be finished with high quality.
Visual testing typically involves the following:
1. based on the screen shot.
2. The properties are computed based on the assertion library and js (javascript).
The first solution works only with predictable UI based screenshots, testing static pages or using fake data during test runs. The second solution requires some test assertions based on the assertion library and JS computation property, with strong binding.
Disclosure of Invention
The embodiment of the disclosure provides a user interface adjusting method and device, a computer readable storage medium and electronic equipment.
An embodiment of the present disclosure provides a user interface adjustment method, including: acquiring a preset reference interface image; displaying the reference interface image on a drawing area for drawing the user interface with preset transparency; adjusting the attribute of the reference interface image based on the operation of adjusting the reference interface image, and taking the reference interface with the adjusted attribute as a reference for adjusting the user interface; and adjusting the user interface based on the operation of adjusting the user interface so that the user interface is overlapped with the reference interface image.
In some embodiments, adjusting the property of the reference interface image based on the operation of adjusting the reference interface image includes: and responding to the operation of adjusting the size of the reference interface image, and adjusting the reference interface image to the target size.
In some embodiments, adjusting the property of the reference interface image based on the operation of adjusting the reference interface image includes: and adjusting the reference interface image to the initial position in response to the operation of restoring the position of the reference interface image.
In some embodiments, adjusting the property of the reference interface image based on the operation of adjusting the reference interface image includes: and in response to the rolling fixed switching operation on the reference interface image, adjusting the reference interface image to be in fixed display or rolling display based on the rolling fixed switching operation.
In some embodiments, adjusting the property of the reference interface image based on the operation of adjusting the reference interface image includes: and responding to the operation of adjusting the transparency of the reference interface image, and modulating the transparency of the reference interface image to the target transparency.
In some embodiments, adjusting the property of the reference interface image based on the operation of adjusting the reference interface image includes: and in response to the operation of color inversion on the reference interface image, displaying the color inversion of the reference interface image.
In some embodiments, based on the act of adjusting the user interface, adjusting the user interface: in response to an operation of adding a dividing line on the drawing area, displaying a dividing line for assisting in resizing the user interface on the drawing area, wherein the dividing line includes at least one of: transverse parting lines and longitudinal parting lines.
In some embodiments, adjusting the user interface based on the operation of adjusting the user interface includes: and responding to the operation of carrying out interface element color verification on the user interface, and carrying out interface element color verification based on the input class name and the color information.
According to another aspect of the embodiments of the present disclosure, there is provided a user interface adjustment apparatus including: the acquisition module is used for acquiring a preset reference interface image; the display module is used for displaying the reference interface image on a drawing area for drawing the user interface in a preset transparency; the first adjusting module is used for adjusting the attribute of the reference interface image based on the operation of adjusting the reference interface image, and taking the reference interface with the adjusted attribute as a reference for adjusting the user interface; and the second adjusting module is used for adjusting the user interface based on the operation of adjusting the user interface so that the user interface is overlapped with the reference interface image.
In some embodiments, the first adjustment module comprises: and the size adjusting unit is used for responding to the operation of adjusting the size of the reference interface image and adjusting the reference interface image to the target size.
In some embodiments, the first adjustment module comprises: and the position restoring unit is used for responding to the operation of restoring the position of the reference interface image and adjusting the reference interface image to the initial position.
In some embodiments, the first adjustment module comprises: and the rolling fixing unit is used for responding to the rolling fixing switching operation of the reference interface image and adjusting the reference interface image into fixed display or rolling display based on the rolling fixing switching operation.
In some embodiments, the first adjustment module comprises: and the transparency adjusting unit is used for responding to the operation of adjusting the transparency of the reference interface image and modulating the transparency of the reference interface image to the target transparency.
In some embodiments, the first adjustment module comprises: and the inverting unit is used for responding to the operation of color inversion on the reference interface image and displaying the color of the reference interface image in an inverted mode.
In some embodiments, the second adjustment module comprises: a dividing line adding unit, which is used for responding to the operation of adding the dividing line on the drawing area, and displaying the dividing line used for assisting the size adjustment of the user interface on the drawing area, wherein the dividing line comprises at least one of the following: transverse parting lines and longitudinal parting lines.
In some embodiments, the second adjustment module comprises: and the checking unit is used for responding to the operation of checking the color of the interface element on the user interface and checking the color of the interface element based on the input class name and the color information.
According to another aspect of the embodiments of the present disclosure, there is provided a computer-readable storage medium storing a computer program for executing the user interface adjusting method described above.
According to another aspect of the embodiments of the present disclosure, there is provided an electronic apparatus including: a processor; a memory for storing processor-executable instructions; and the processor is used for reading the executable instructions from the memory and executing the instructions to realize the user interface adjusting method.
Based on the user interface adjusting method, the user interface adjusting device, the computer readable storage medium and the electronic device provided by the embodiments of the present disclosure, the reference interface image is displayed on the drawing area for drawing the user interface with the preset transparency, when the user interface is designed, the user interface is compared with the reference interface image, the user interface is adjusted, and the user interface is overlapped with the reference interface image, so that the user interface is compared with the reference interface image in real time, a designer can observe whether the currently designed user interface is consistent with the reference interface image in real time, and adjust the user interface, thereby improving the accuracy of user interface design and reducing errors between the user interface and the reference interface image.
The technical solution of the present disclosure is further described in detail by the accompanying drawings and examples.
Drawings
The above and other objects, features and advantages of the present disclosure will become more apparent by describing in more detail embodiments of the present disclosure with reference to the attached drawings. The accompanying drawings are included to provide a further understanding of the embodiments of the disclosure and are incorporated in and constitute a part of this specification, illustrate embodiments of the disclosure and together with the description serve to explain the principles of the disclosure and not to limit the disclosure. In the drawings, like reference numbers generally represent like parts or steps.
Fig. 1 is a system diagram to which the present disclosure is applicable.
Fig. 2 is a flowchart illustrating a user interface adjustment method according to an exemplary embodiment of the present disclosure.
Fig. 3A is an exemplary illustration of a user interface before adjustment provided by an exemplary embodiment of the present disclosure.
Fig. 3B is an exemplary diagram after adjusting the user interface provided by an exemplary embodiment of the present disclosure.
Fig. 4 is a schematic structural diagram of a user interface adjustment apparatus according to an exemplary embodiment of the present disclosure.
Fig. 5 is a schematic structural diagram of a user interface adjustment apparatus according to another exemplary embodiment of the present disclosure.
Fig. 6 is a schematic diagram of an application scenario of a user interface adjustment apparatus according to an embodiment of the present disclosure.
Fig. 7 is a block diagram of an electronic device provided in an exemplary embodiment of the present disclosure.
Detailed Description
Hereinafter, example embodiments according to the present disclosure will be described in detail with reference to the accompanying drawings. It is to be understood that the described embodiments are merely a subset of the embodiments of the present disclosure and not all embodiments of the present disclosure, with the understanding that the present disclosure is not limited to the example embodiments described herein.
It should be noted that: the relative arrangement of the components and steps, the numerical expressions, and numerical values set forth in these embodiments do not limit the scope of the present disclosure unless specifically stated otherwise.
It will be understood by those of skill in the art that the terms "first," "second," and the like in the embodiments of the present disclosure are used merely to distinguish one element from another, and are not intended to imply any particular technical meaning, nor is the necessary logical order between them.
It is also understood that in embodiments of the present disclosure, "a plurality" may refer to two or more and "at least one" may refer to one, two or more.
It is also to be understood that any reference to any component, data, or structure in the embodiments of the disclosure, may be generally understood as one or more, unless explicitly defined otherwise or stated otherwise.
In addition, the term "and/or" in the present disclosure is only one kind of association relationship describing an associated object, and means that three kinds of relationships may exist, for example, a and/or B may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" in the present disclosure generally indicates that the former and latter associated objects are in an "or" relationship.
It should also be understood that the description of the various embodiments of the present disclosure emphasizes the differences between the various embodiments, and the same or similar parts may be referred to each other, so that the descriptions thereof are omitted for brevity.
Meanwhile, it should be understood that the sizes of the respective portions shown in the drawings are not drawn in an actual proportional relationship for the convenience of description.
The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the disclosure, its application, or uses.
Techniques, methods, and apparatus known to those of ordinary skill in the relevant art may not be discussed in detail but are intended to be part of the specification where appropriate.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, further discussion thereof is not required in subsequent figures.
The disclosed embodiments may be applied to electronic devices such as terminal devices, computer systems, servers, etc., which are operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known terminal devices, computing systems, environments, and/or configurations that may be suitable for use with electronic devices, such as terminal devices, computer systems, servers, and the like, include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, hand-held or laptop devices, microprocessor-based systems, set top boxes, programmable consumer electronics, network pcs, minicomputer systems, mainframe computer systems, distributed cloud computing environments that include any of the above systems, and the like.
Electronic devices such as terminal devices, computer systems, servers, etc. may be described in the general context of computer system-executable instructions, such as program modules, being executed by a computer system. Generally, program modules may include routines, programs, objects, components, logic, data structures, etc. that perform particular tasks or implement particular abstract data types. The computer system/server may be practiced in distributed cloud computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed cloud computing environment, program modules may be located in both local and remote computer system storage media including memory storage devices.
Summary of the application
Most of the existing UI test schemes are based on comparison between screen snapshots and UI screenshots, or technical personnel are required to write assertions, an original design drawing usually has a native head, sometimes is a whole long drawing, and the scheme is not convenient to operate in a UI development stage.
Exemplary System
Fig. 1 illustrates an exemplary system architecture 100 of a user interface adjustment method or user interface adjustment apparatus to which embodiments of the present disclosure may be applied.
As shown in fig. 1, system architecture 100 may include terminal device 101, network 102, and server 103. Network 102 is the medium used to provide communication links between terminal devices 101 and server 103. Network 102 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.
A user may use terminal device 101 to interact with server 103 over network 102 to receive or send messages and the like. The terminal device 101 may have various communication client applications installed thereon, such as a web browser application, a shopping application, an instant messaging tool, and the like.
The terminal device 101 may be various electronic devices including, but not limited to, a mobile terminal such as a mobile phone, a notebook computer, a digital broadcast receiver, a PDA (personal digital assistant), a PAD (tablet computer), a PMP (portable multimedia player), a vehicle-mounted terminal (e.g., a car navigation terminal), etc., and a fixed terminal such as a digital TV, a desktop computer, etc.
The server 103 may be a server that provides various services, such as a background server that provides support for various interfaces displayed on the terminal device 101. The background server may send the designed user interface to the terminal device 101 and display the user interface on the terminal device 101.
It should be noted that the user interface adjusting method provided by the embodiment of the present disclosure may be executed by the server 103 or the terminal device 101, and accordingly, the user interface adjusting apparatus may be disposed in the server 103 or the terminal device 101.
It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Exemplary method
Fig. 2 is a flowchart illustrating a user interface adjustment method according to an exemplary embodiment of the present disclosure. The embodiment can be applied to an electronic device (such as the terminal device 101 or the server 103 shown in fig. 1), and as shown in fig. 2, the method includes the following steps:
In this embodiment, the electronic device may obtain the preset reference interface image locally or remotely. The interface reference image is a pre-designed image used for comparison when designing the user interface.
In this embodiment, the electronic device may display the reference interface image on a drawing area for drawing the user interface with a preset transparency.
The drawing area is an area on a tool used by a designer of the user interface, and in the drawing area, the designer can adjust various elements such as images and characters in the user interface. In general, the drawing area may be located in various browsers (e.g., development mode of google browser).
In this embodiment, the electronic device may adjust the attribute of the reference interface image based on the operation of adjusting the reference interface image, and use the reference interface after the attribute is adjusted as a reference for adjusting the user interface. The operation of adjusting the reference interface image may be an operation performed manually by a designer of a user interface using the electronic device. The properties of the reference interface image may include, but are not limited to, at least one of: image size, image position, image transparency, etc.
And 204, adjusting the user interface based on the operation of adjusting the user interface so that the user interface is overlapped with the reference interface image.
In this embodiment, the electronic device may adjust the user interface based on the operation of adjusting the user interface, so that the user interface coincides with the reference interface image. The operation of adjusting the user interface may be an operation performed manually by a designer of the user interface using the electronic device. Because the reference interface image and the currently designed user interface are displayed at the same position and the reference interface image has certain transparency, designers can adjust the appearances of various elements in the user interface by taking the reference interface image as a reference, so that the user interface is overlapped with the reference interface image, and the user interface which is the same as the reference interface image is drawn. As shown in fig. 3A, which shows an exemplary schematic diagram before the user interface is adjusted, when the user interface is misaligned with the reference interface image, the designer can visually see the misaligned position, so as to accurately adjust the user interface. As shown in fig. 3B, an exemplary schematic diagram after the user interface is adjusted is shown, where the user interface coincides with the reference interface, that is, the designer draws the same user interface as the reference interface image according to the reference interface image.
Generally, a plug-in may be provided in a tool (e.g., a browser) in which the drawing area is located to implement the method described in the present embodiment. Take google browsers as an example, google plug-ins can be written through popup. The script that is to be run all the time is put in background. The Content _ script may execute js in a window currently used by the designer. And utilizing the api of the Google plug-in to carry out message transmission among the pop. And processing the reference interface image by the pop.js, storing the processed reference interface image in background.js, sending a sendMessage, monitoring different messages by the Content _ script, taking data from the background.js, performing corresponding page processing, and finally inserting the reference interface image into the drawing area. In addition, the plug-in may also provide drag user interface, fixed user interface, color inversion, zoom-in and zoom-out functions.
In some alternative implementations, step 203 may include the steps of: and responding to the operation of adjusting the size of the reference interface image, and adjusting the reference interface image to the target size. Specifically, the resizing operation may be an operation performed manually by a designer of the user interface using the electronic device described above. For example, inputting the size of the reference interface image, or dragging the boundary of the reference interface image to adjust the size. The target size is the size dragged or entered by the designer. The realization mode can realize the adjustment of the size of the reference interface image according to the will of the designer, thereby further flexibly and accurately adjusting the size of the user interface to be consistent with the reference interface image.
In some alternative implementations, step 203 may include the steps of: and adjusting the reference interface image to the initial position in response to the operation of restoring the position of the reference interface image. Specifically, the operation of restoring the position may be an operation manually performed by a designer of the user interface using the electronic device described above. For example, the designer may click a restore position button to restore the position of the reference interface image to the original position. Because the position of the reference interface image can be manually adjusted by a designer in the process of drawing the user interface, the realization mode can conveniently restore the reference interface image to the initial position, and is beneficial to improving the precision of the designer in drawing the user interface.
In some alternative implementations, step 203 may include the steps of: and in response to the rolling fixed switching operation on the reference interface image, adjusting the reference interface image to be in fixed display or rolling display based on the rolling fixed switching operation. Specifically, the scroll fixing switching operation may be an operation in which a designer manually scrolls or fixes the display of the reference interface image. For example, the designer may click on a scroll fixed toggle button to cause the reference interface image to be displayed in a scroll or fixed display. Because the reference interface image may be a long image, that is, the device displaying the user interface cannot completely display the user interface on the screen, the implementation method can compare the user interface with the reference interface image in a segmented manner when the user interface has more displayed contents, which is helpful for further improving the precision of the designer in drawing the user interface.
In some alternative implementations, step 203 may include the steps of: and responding to the operation of adjusting the transparency of the reference interface image, and modulating the transparency of the reference interface image to the target transparency. The operation of adjusting the transparency may be an operation of manually adjusting the transparency of the reference interface image by a designer. For example, the designer may select or enter transparency to adjust the transparency of the reference interface image, the target transparency being the selected or entered transparency. The realization mode can flexibly adjust the transparency of the reference interface image, so that designers can refer to the reference interface images under various transparencies, and the user interface can be adjusted more accurately.
In some alternative implementations, step 203 may include the steps of: and in response to the operation of color inversion on the reference interface image, displaying the color inversion of the reference interface image. The operation of color inversion may be an operation of color inversion performed manually by a designer. For example, the designer may click on a color inversion button to invert or de-invert the color of the reference interface image. The realization mode can enable the reference interface image to be easier to observe through color inversion when the color of the reference interface image affects visual judgment (such as color), so that designers can compare the reference interface image with the user interface conveniently, and the precision of drawing the user interface by the designers is further improved.
In some alternative implementations, step 204 may include the steps of: in response to an operation of adding a dividing line on the drawing area, a dividing line for assisting in resizing the user interface is displayed on the drawing area. Wherein the dividing line comprises at least one of: transverse parting lines and longitudinal parting lines. The operation of adding the dividing line may be an operation of adding the dividing line by a designer manually operating the electronic device. For example, the designer may click on the dividing line button to perform an operation of adding or deleting at least one dividing line. By adding the dividing line, designers can compare the reference interface image with the user interface conveniently, and judge the difference between a drawn element and the original design, so that the precision of drawing the user interface is improved.
In some alternative implementations, step 204 may include the steps of: and responding to the operation of carrying out interface element color verification on the user interface, and carrying out interface element color verification based on the input class name and the color information. Interface elements may include, among other things, words, buttons, text boxes, and the like. The operation of checking the color of the interface element may be an operation of the electronic device performing color checking based on the class name and the color information input by the designer. For example, the electronic device may input a class name and interface element color information for characterizing the interface element color according to the JS verification method to verify the interface element color of the user interface with the interface element color in the reference interface image. When the colors are consistent, corresponding first information (e.g., a virtual green light) may be output, and when the colors are inconsistent, corresponding second information (e.g., a virtual red light) may be output.
Typically, in CSS, a class selector is used to specify a style for an interface element, where entering a class name, i.e., the class selector may be invoked to select an interface element (e.g., text) corresponding to the class name to specify a style (e.g., font color). Here, the interface element color is adjusted by inputting the class name and the color, and it is determined whether the interface element color is consistent with the reference interface image by the JS check method. The realization mode can realize the verification of the interface element color of the user interface, thereby further ensuring that the appearance of the user interface is consistent with the reference interface image and improving the precision of drawing the design user interface.
According to the method provided by the embodiment of the disclosure, the reference interface image is displayed on the drawing area for drawing the user interface with the preset transparency, when the user interface is designed, the user interface is compared with the reference interface image, the user interface is adjusted, and the user interface is overlapped with the reference interface image, so that the user interface is compared with the reference interface image in real time, a designer can observe whether the currently designed user interface is consistent with the reference interface image in real time, and adjust the user interface, the accuracy of user interface design is improved, and the error between the user interface and the reference interface image is reduced.
Exemplary devices
Fig. 4 is a schematic structural diagram of a user interface adjustment apparatus according to an exemplary embodiment of the present disclosure. The present embodiment can be applied to an electronic device, and as shown in fig. 4, the user interface adjusting apparatus includes: an obtaining module 401, configured to obtain a preset reference interface image; a display module 402, configured to display the reference interface image on a drawing area for drawing the user interface with a preset transparency; a first adjusting module 403, configured to adjust an attribute of the reference interface image based on an operation of adjusting the reference interface image, and use the reference interface with the attribute adjusted as a reference for adjusting the user interface; a second adjusting module 404, configured to adjust the user interface based on the operation of adjusting the user interface, so that the user interface coincides with the reference interface image.
In this embodiment, the obtaining module 401 may obtain the preset reference interface image locally or remotely. The interface reference image is a pre-designed image used for comparison when designing the user interface.
In this embodiment, the display module 402 may display the reference interface image on the drawing area for drawing the user interface with a preset transparency.
The drawing area is an area on a tool used by a designer of the user interface, and in the drawing area, the designer can adjust various elements such as images and characters in the user interface. In general, the drawing area may be located in various browsers (e.g., development mode of google browser).
In this embodiment, the first adjusting module 403 may adjust the attribute of the reference interface image based on the operation of adjusting the reference interface image, and use the reference interface after the attribute is adjusted as a reference for adjusting the user interface. The operation of adjusting the reference interface image may be an operation performed manually by a designer of a user interface using the electronic device. The properties of the reference interface image may include, but are not limited to, at least one of: image size, image position, image transparency, etc.
In this embodiment, the second adjustment module 404 may adjust the user interface based on the operation of adjusting the user interface so that the user interface coincides with the reference interface image. The operation of adjusting the user interface may be an operation performed manually by a designer of the user interface using the electronic device. Because the reference interface image and the currently designed user interface are displayed at the same position and the reference interface image has certain transparency, designers can adjust the appearances of various elements in the user interface by taking the reference interface image as a reference, so that the user interface is overlapped with the reference interface image, and the user interface which is the same as the reference interface image is drawn.
Generally, a plug-in may be provided in a tool (e.g., a browser) in which the drawing area is located to implement the method described in the present embodiment. Take google browsers as an example, google plug-ins can be written through popup. The script that is to be run all the time is put in background. The Content _ script may execute js in a window currently used by the designer. And utilizing the api of the Google plug-in to carry out message transmission among the pop. And processing the reference interface image by the pop.js, storing the processed reference interface image in background.js, sending a sendMessage, monitoring different messages by the Content _ script, taking data from the background.js, performing corresponding page processing, and finally inserting the reference interface image into the drawing area. In addition, the plug-in may also provide drag user interface, fixed user interface, color inversion, zoom-in and zoom-out functions.
Referring to fig. 5, fig. 5 is a schematic structural diagram of a user interface adjustment apparatus according to another exemplary embodiment of the present disclosure.
In some optional implementations, the first adjusting module 403 may include: a resizing unit 4031, configured to resize the reference interface image to a target size in response to a resizing operation performed on the reference interface image.
In some optional implementations, the first adjusting module 403 may include: a position restoring unit 4032, configured to adjust the reference interface image to an initial position in response to an operation of restoring a position of the reference interface image.
In some optional implementations, the first adjusting module 403 may include: a scroll fixing unit 4033 configured to, in response to a scroll fixing switching operation performed on the reference interface image, adjust the reference interface image to a fixed display or a scroll display based on the scroll fixing switching operation.
In some optional implementations, the first adjusting module 403 may include: a transparency adjustment unit 4034, configured to adjust the transparency of the reference interface image to a target transparency in response to the operation of adjusting the transparency of the reference interface image.
In some optional implementations, the first adjusting module 403 may include: an inverting unit 4035 configured to display the color of the reference interface image in an inverted state in response to an operation of color inverting the reference interface image.
In some optional implementations, the second adjusting module 404 may include: a dividing line adding unit 4041, configured to display, on the drawing area, a dividing line for assisting in resizing the user interface in response to an operation of adding the dividing line on the drawing area, where the dividing line includes at least one of: transverse parting lines and longitudinal parting lines.
In some optional implementations, the second adjusting module 404 may include: the checking unit 4042 is configured to perform interface element color checking based on the input class name and the color information in response to an operation of performing interface element color checking on the user interface.
With continued reference to fig. 6, a schematic diagram of an application scenario of a user interface adjustment apparatus provided by an embodiment of the present disclosure is shown. As shown in fig. 6, the user interface adjustment means is implemented in the form of a plug-in, which may be provided on a browser (e.g. google browser). In the plug-in, a designer clicks an option of 'uploading a design drawing', and a reference interface image can be imported. Clicking on the option "add" may add the reference interface image to the drawing area on the browser. The option "delete" may be used to delete the uploaded reference interface image. Clicking on the option "UI draft size" may perform resizing on the reference interface image, i.e., perform the steps of resizing unit 4031 described above. Clicking on the option "restore location" may perform a location restore operation on the reference interface image, i.e., perform the steps of the location restore unit 4032 described above. Clicking the option "scroll fix" may perform a scroll fix switching operation on the reference interface image, i.e., perform the steps of the scroll fix unit 4033 described above. The option "adjust transparency" may perform an operation of adjusting transparency on the reference interface image, that is, perform the step of the transparency adjustment unit 4034 described above. Clicking on the option "inversion" may perform a color inversion operation on the reference interface image, i.e., perform the steps of the inversion unit 4035 described above. The option "dividing line" may be used for an operation of adding a dividing line on the drawing area, that is, the step of the dividing line adding unit 4041 described above is performed. The option "class check" may be used to perform an operation of checking the color of the interface element on the user interface, that is, the steps of the checking unit 4042 are performed, and the class name and the color may be filled in batch by clicking the "import object".
According to the user interface adjusting device provided by the embodiment of the disclosure, the reference interface image is displayed on the drawing area for drawing the user interface with the preset transparency, when the user interface is designed, the user interface is compared with the reference interface image, the user interface is adjusted, and the user interface is overlapped with the reference interface image, so that the user interface is compared with the reference interface image in real time, a designer can observe whether the currently designed user interface is consistent with the reference interface image in real time, and adjust the user interface, so that the accuracy of user interface design is improved, and the error between the user interface and the reference interface image is reduced.
Exemplary electronic device
Next, an electronic apparatus according to an embodiment of the present disclosure is described with reference to fig. 7. The electronic device may be either or both of the terminal device 101 and the server 103 as shown in fig. 1, or a stand-alone device separate from them, which may communicate with the terminal device 101 and the server 103 to receive the collected input signals therefrom.
FIG. 7 illustrates a block diagram of an electronic device in accordance with an embodiment of the disclosure.
As shown in fig. 7, the electronic device 700 includes one or more processors 701 and memory 702.
The processor 701 may be a Central Processing Unit (CPU) or other form of processing unit having data processing capabilities and/or instruction execution capabilities, and may control other components in the electronic device 700 to perform desired functions.
In one example, the electronic device 700 may further include: an input device 703 and an output device 704, which are interconnected by a bus system and/or other form of connection mechanism (not shown).
For example, when the electronic device is the terminal device 101 or the server 103, the input device 703 may be a mouse, a keyboard, or the like, and is used for inputting information such as a reference interface image. When the electronic device is a stand-alone device, the input device 703 may be a communication network connector for receiving information such as the input reference interface image from the terminal device 101 and the server 103.
The output device 704 may output various information, including a designed user interface, to the outside. The output devices 704 may include, for example, a display, speakers, a printer, and a communication network and remote output devices connected thereto, among others.
Of course, for simplicity, only some of the components of the electronic device 700 relevant to the present disclosure are shown in fig. 7, omitting components such as buses, input/output interfaces, and the like. In addition, electronic device 700 may include any other suitable components depending on the particular application.
Exemplary computer program product and computer-readable storage Medium
In addition to the methods and apparatus described above, embodiments of the present disclosure may also be a computer program product comprising computer program instructions that, when executed by a processor, cause the processor to perform the steps in the user interface adjustment method according to various embodiments of the present disclosure described in the "exemplary methods" section above of this specification.
The computer program product may write program code for carrying out operations for embodiments of the present disclosure in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server.
Furthermore, embodiments of the present disclosure may also be a computer-readable storage medium having stored thereon computer program instructions that, when executed by a processor, cause the processor to perform steps in a user interface adjustment method according to various embodiments of the present disclosure described in the "exemplary methods" section above of this specification.
The computer-readable storage medium may take any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may include, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
The foregoing describes the general principles of the present disclosure in conjunction with specific embodiments, however, it is noted that the advantages, effects, etc. mentioned in the present disclosure are merely examples and are not limiting, and they should not be considered essential to the various embodiments of the present disclosure. Furthermore, the foregoing disclosure of specific details is for the purpose of illustration and description and is not intended to be limiting, since the disclosure is not intended to be limited to the specific details so described.
In the present specification, the embodiments are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same or similar parts in the embodiments are referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the method embodiment.
The block diagrams of devices, apparatuses, systems referred to in this disclosure are only given as illustrative examples and are not intended to require or imply that the connections, arrangements, configurations, etc. must be made in the manner shown in the block diagrams. These devices, apparatuses, devices, systems may be connected, arranged, configured in any manner, as will be appreciated by those skilled in the art. Words such as "including," "comprising," "having," and the like are open-ended words that mean "including, but not limited to," and are used interchangeably therewith. The words "or" and "as used herein mean, and are used interchangeably with, the word" and/or, "unless the context clearly dictates otherwise. The word "such as" is used herein to mean, and is used interchangeably with, the phrase "such as but not limited to".
The methods and apparatus of the present disclosure may be implemented in a number of ways. For example, the methods and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above-described order for the steps of the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above unless specifically stated otherwise. Further, in some embodiments, the present disclosure may also be embodied as programs recorded in a recording medium, the programs including machine-readable instructions for implementing the methods according to the present disclosure. Thus, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.
It is also noted that in the devices, apparatuses, and methods of the present disclosure, each component or step can be decomposed and/or recombined. These decompositions and/or recombinations are to be considered equivalents of the present disclosure.
The previous description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other aspects without departing from the scope of the disclosure. Thus, the present disclosure is not intended to be limited to the aspects shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
The foregoing description has been presented for purposes of illustration and description. Furthermore, this description is not intended to limit embodiments of the disclosure to the form disclosed herein. While a number of example aspects and embodiments have been discussed above, those of skill in the art will recognize certain variations, modifications, alterations, additions and sub-combinations thereof.
Claims (10)
1. A user interface adjustment method, comprising:
acquiring a preset reference interface image;
displaying the reference interface image on a drawing area for drawing a user interface with preset transparency;
adjusting the attribute of the reference interface image based on the operation of adjusting the reference interface image, and taking the reference interface with the adjusted attribute as a reference for adjusting a user interface;
adjusting the user interface based on the operation of adjusting the user interface so that the user interface coincides with the reference interface image.
2. The method of claim 1, wherein the adjusting the property of the reference interface image based on the adjusting the reference interface image comprises:
and responding to the operation of adjusting the size of the reference interface image, and adjusting the reference interface image to a target size.
3. The method of claim 1, wherein the adjusting the property of the reference interface image based on the adjusting the reference interface image comprises:
and responding to the operation of restoring the position of the reference interface image, and adjusting the reference interface image to an initial position.
4. The method of claim 1, wherein the adjusting the property of the reference interface image based on the adjusting the reference interface image comprises:
and responding to the rolling fixed switching operation of the reference interface image, and adjusting the reference interface image to be in fixed display or rolling display based on the rolling fixed switching operation.
5. The method of claim 1, wherein the adjusting the property of the reference interface image based on the adjusting the reference interface image comprises:
and responding to the operation of adjusting the transparency of the reference interface image, and modulating the transparency of the reference interface image to the target transparency.
6. The method of claim 1, wherein the adjusting the property of the reference interface image based on the adjusting the reference interface image comprises:
and in response to the operation of color inversion on the reference interface image, performing color inversion display on the reference interface image.
7. The method of claim 1, wherein said adjusting the user interface based on the operation of adjusting the user interface comprises:
in response to an operation of adding a dividing line on the drawing area, displaying a dividing line for assisting in resizing the user interface on the drawing area, wherein the dividing line includes at least one of: transverse parting lines and longitudinal parting lines.
8. A user interface adjustment apparatus comprising:
the acquisition module is used for acquiring a preset reference interface image;
the display module is used for displaying the reference interface image on a drawing area for drawing a user interface in a preset transparency;
the first adjusting module is used for adjusting the attribute of the reference interface image based on the operation of adjusting the reference interface image, and taking the reference interface with the attribute adjusted as a reference for adjusting the user interface;
and the second adjusting module is used for adjusting the user interface based on the operation of adjusting the user interface so as to enable the user interface to be overlapped with the reference interface image.
9. A computer-readable storage medium, the storage medium storing a computer program for performing the method of any of the preceding claims 1-7.
10. An electronic device, the electronic device comprising:
a processor;
a memory for storing the processor-executable instructions;
the processor is configured to read the executable instructions from the memory and execute the instructions to implement the method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010304035.XA CN111443978A (en) | 2020-04-17 | 2020-04-17 | User interface adjusting method and device, storage medium and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010304035.XA CN111443978A (en) | 2020-04-17 | 2020-04-17 | User interface adjusting method and device, storage medium and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111443978A true CN111443978A (en) | 2020-07-24 |
Family
ID=71653230
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010304035.XA Pending CN111443978A (en) | 2020-04-17 | 2020-04-17 | User interface adjusting method and device, storage medium and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111443978A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113703622A (en) * | 2021-04-06 | 2021-11-26 | 腾讯科技（深圳）有限公司 | Display interface processing method and device, electronic equipment and storage medium |
| CN113722038A (en) * | 2021-09-06 | 2021-11-30 | 北京字节跳动网络技术有限公司 | Data matching method and device, computer equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103674254A (en) * | 2012-09-21 | 2014-03-26 | 杭州美盛红外光电技术有限公司 | Thermal image display switching device and thermal image display switching method |
| CN104731453A (en) * | 2015-03-31 | 2015-06-24 | 努比亚技术有限公司 | Method and device for adjusting colors of terminal icon texts |
| CN105740364A (en) * | 2016-01-26 | 2016-07-06 | 腾讯科技（深圳）有限公司 | Page processing method and related apparatus |
| CN106528887A (en) * | 2016-12-19 | 2017-03-22 | 广州视源电子科技股份有限公司 | Webpage design method and system |
| CN106648571A (en) * | 2015-11-03 | 2017-05-10 | 百度在线网络技术（北京）有限公司 | Application interface correction method and apparatus |
-
2020
- 2020-04-17 CN CN202010304035.XA patent/CN111443978A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103674254A (en) * | 2012-09-21 | 2014-03-26 | 杭州美盛红外光电技术有限公司 | Thermal image display switching device and thermal image display switching method |
| CN104731453A (en) * | 2015-03-31 | 2015-06-24 | 努比亚技术有限公司 | Method and device for adjusting colors of terminal icon texts |
| CN106648571A (en) * | 2015-11-03 | 2017-05-10 | 百度在线网络技术（北京）有限公司 | Application interface correction method and apparatus |
| CN105740364A (en) * | 2016-01-26 | 2016-07-06 | 腾讯科技（深圳）有限公司 | Page processing method and related apparatus |
| CN106528887A (en) * | 2016-12-19 | 2017-03-22 | 广州视源电子科技股份有限公司 | Webpage design method and system |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113703622A (en) * | 2021-04-06 | 2021-11-26 | 腾讯科技（深圳）有限公司 | Display interface processing method and device, electronic equipment and storage medium |
| CN113703622B (en) * | 2021-04-06 | 2024-06-28 | 腾讯科技（深圳）有限公司 | Display interface processing method and device, electronic equipment and storage medium |
| CN113722038A (en) * | 2021-09-06 | 2021-11-30 | 北京字节跳动网络技术有限公司 | Data matching method and device, computer equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11790158B1 (en) | System and method for using a dynamic webpage editor | |
| US10248542B2 (en) | Screenshot validation testing | |
| US9916167B2 (en) | Automated testing of GUI mirroring | |
| US9342237B2 (en) | Automated testing of gesture-based applications | |
| US20130124532A1 (en) | Analyzing and repairing documents | |
| CN109074375B (en) | Content selection in web documents | |
| CN113382083B (en) | Webpage screenshot method and device | |
| US9996506B2 (en) | Identifying fonts using custom ligatures | |
| CN111966255A (en) | Information display method and device, electronic equipment and computer readable medium | |
| CN109582317B (en) | Method and apparatus for debugging hosted applications | |
| CN111443978A (en) | User interface adjusting method and device, storage medium and electronic equipment | |
| AU2016256364B2 (en) | Rendering graphical assets natively on multiple screens of electronic devices | |
| CN111124564A (en) | Method and device for displaying user interface | |
| CN109492163B (en) | List display recording method and device, terminal equipment and storage medium | |
| CN113076165A (en) | Page checking method and device | |
| CN117093386B (en) | Page screenshot method, device, computer equipment and storage medium | |
| CN109683726B (en) | Character input method, character input device, electronic equipment and storage medium | |
| US20210185109A1 (en) | Page presentation method and system, computer system, and computer readable medium | |
| Amarasinghe | Service worker development cookbook | |
| CN114626332A (en) | Content display method and device and electronic equipment | |
| CN108170557B (en) | Method and apparatus for outputting information | |
| CN112015416A (en) | Verification method and device for developing webpage, electronic equipment and computer readable medium | |
| CN113778429A (en) | Walk-through method, walk-through device and storage medium | |
| CN113760706B (en) | Webpage debugging method and device | |
| CN108446070A (en) | A kind of method and device for browsing information |
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 |