Method, device, storage medium and electronic device for displaying interface elements

Abstract

The present disclosure relates to a method, device, storage medium and electronic device for displaying interface elements. The method comprises: displaying a group of interface elements on a target application interface; obtaining a first target instruction on the target application interface, wherein the first target instruction is used to select multiple interface elements in the group of interface elements; in response to the first target instruction, selecting the multiple interface elements on the target application interface, and displaying the spacing lines between the multiple interface elements and the distance values ​​between the multiple interface elements on the target application interface. The present disclosure solves the technical problem in the related art that the operation method is cumbersome and the verification efficiency is low due to the one-by-one measurement of the spacing lines and distance values ​​between multiple interface elements.

Description

Technical Field

[0001] The present disclosure relates to the field of interface element display, and in particular to a method, device, storage medium and electronic device for displaying interface elements. Background Art

[0002] In the related art, in order to verify the interface elements set on the target application interface, the following verification method is usually used during the verification process: first, a screenshot of the display interface where the interface elements to be verified are located is taken to obtain the corresponding screenshots, and the above screenshots are compared one by one with the coordinates of the individual interface elements and the color values ​​of the interface elements in the original design draft, and the spacing lines between each interface element are measured one by one to obtain the verification results.

[0003] However, since there are many interface elements in the target application interface, the method of measuring the spacing lines between each interface element one by one is cumbersome to operate and has low verification efficiency. Summary of the invention

[0004] The present disclosure provides a method, device, storage medium and electronic device for displaying interface elements, so as to at least solve the technical problem in the related art that the operation mode is cumbersome and the verification efficiency is low due to measuring the spacing lines and distance values ​​between multiple interface elements one by one. The technical solution of the present disclosure is as follows:

[0005] According to a first aspect of an embodiment of the present disclosure, a method for displaying interface elements is provided, which is applied in a process of verifying interface elements set on a target application interface, comprising: displaying a group of interface elements on the target application interface; obtaining a first target instruction on the target application interface, wherein the first target instruction is used to select multiple interface elements from the group of interface elements; in response to the first target instruction, selecting the multiple interface elements on the target application interface, and displaying spacing lines between the multiple interface elements on the target application interface.

[0006] Optionally, the spacing lines between the multiple interface elements are displayed on the target application interface, including: when the multiple interface elements include a first interface element and a second interface element, and the first interface element and the second interface element are both in an unselected state, a first spacing line from the first interface element to the second interface element, and a second spacing line from the second interface element to the first interface element are displayed on the target application interface.

[0007] Optionally, displaying a first spacing line from the first interface element to the second interface element, and a second spacing line from the second interface element to the first interface element on the target application interface includes: displaying the first spacing line in a first display state on the target application interface, and displaying the second spacing line in a second display state; acquiring a second target instruction on the target application interface, wherein the second target instruction is used to switch the display states of the first spacing line and the second spacing line; in response to the second target instruction, displaying the first spacing line in the second display state on the target application interface, and displaying the second spacing line in the first display state.

[0008] Optionally, the above-mentioned displaying of spacing lines between the above-mentioned multiple interface elements on the above-mentioned target application interface includes: when the above-mentioned multiple interface elements include a main interface element and a slave interface element, displaying the spacing line from the above-mentioned slave interface element to the above-mentioned main interface element on the above-mentioned target application interface, wherein the above-mentioned one main interface element is in a selected state, and the above-mentioned one slave interface element is in an unselected state; or when the above-mentioned multiple interface elements include a main interface element and multiple slave interface elements, displaying the spacing lines from each of the above-mentioned multiple slave interface elements to the above-mentioned main interface element on the above-mentioned target application interface, wherein the above-mentioned one main interface element is in a selected state, and the above-mentioned multiple slave interface elements are in an unselected state.

[0009] Optionally, the above-mentioned displaying of spacing lines between the above-mentioned multiple interface elements on the above-mentioned target application interface includes: when the above-mentioned multiple interface elements include N main interface elements and N groups of slave interface elements, displaying spacing lines on the above-mentioned target application interface from each group of slave interface elements in the above-mentioned N groups of slave interface elements to a corresponding main interface element in the above-mentioned N main interface elements, wherein the above-mentioned N main interface elements and the above-mentioned N groups of slave interface elements have a one-to-one correspondence, each main interface element corresponds to a group of slave interface elements in the above-mentioned N groups of slave interface elements, the above-mentioned N is a natural number greater than 1, the above-mentioned N main interface elements are in a selected state, and the above-mentioned N groups of slave interface elements are in an unselected state.

[0010] Optionally, the above-mentioned displaying the spacing lines from each group of the above-mentioned N groups of slave interface elements to a corresponding one of the above-mentioned N main interface elements on the above-mentioned target application interface includes: displaying the i-th group of spacing lines in the first display state on the above-mentioned target application interface, and displaying N-1 groups of spacing lines in the second display state except the i-th group of spacing lines, wherein the above-mentioned N-1 groups of spacing lines except the i-th group of spacing lines are the N-1 groups of spacing lines except the i-th group of spacing lines in the N groups of spacing lines, and the above-mentioned N groups of spacing lines include each group of the above-mentioned N groups of slave interface elements to the above-mentioned N main interface elements. a spacing line of a main interface element corresponding to the main interface elements, 1≤i≤N; obtaining a third target instruction on the target application interface, wherein the third target instruction is used to switch the display state of the N groups of spacing lines; in response to the third target instruction, displaying the jth group of spacing lines in the first display state on the target application interface, and displaying N-1 groups of spacing lines in the second display state except the jth group of spacing lines, wherein the N-1 groups of spacing lines except the jth group of spacing lines are the N-1 groups of spacing lines except the jth group of spacing lines in the N groups of spacing lines, 1≤j≤N, j is not equal to i.

[0011] Optionally, after obtaining the first target instruction on the above-mentioned target application interface, the above-mentioned method also includes: in response to the above-mentioned first target instruction, displaying the above-mentioned multiple interface elements in the first display state on the above-mentioned target application interface, and displaying the interface elements in the above-mentioned group of interface elements except the above-mentioned multiple interface elements in the second display state.

[0012] According to a second aspect of an embodiment of the present disclosure, there is provided a device for displaying interface elements, which is used in a process of verifying interface elements set on a target application interface, and includes a first display unit, configured to execute displaying a group of interface elements on the target application interface; an acquisition unit, configured to execute acquisition of a first target instruction on the above-mentioned target application interface, wherein the above-mentioned first target instruction is used to select multiple interface elements from the above-mentioned group of interface elements; and a second display unit, configured to execute in response to the above-mentioned first target instruction, select the above-mentioned multiple interface elements on the above-mentioned target application interface, and display spacing lines between the above-mentioned multiple interface elements and distance values ​​between the above-mentioned multiple interface elements on the above-mentioned target application interface.

[0013] Optionally, the second display unit includes: a first display subunit, configured to display a first spacing line from the first interface element to the second interface element, and a second spacing line from the second interface element to the first interface element on the target application interface when the multiple interface elements include a first interface element and a second interface element, and the first interface element and the second interface element are both in an unselected state.

[0014] Optionally, the second display unit includes: a second display subunit, configured to display the first spacing lines in the first display state on the target application interface, and display the second spacing lines in the second display state; a first acquisition subunit, configured to acquire a second target instruction on the target application interface, wherein the second target instruction is used to switch the display state of the first spacing lines and the second spacing lines; a third display subunit, configured to display the first spacing lines in the second display state on the target application interface in response to the second target instruction, and display the second spacing lines in the first display state.

[0015] Optionally, the second display unit further includes: a fourth display sub-unit, configured to display a spacing line from the slave interface element to the main interface element on the target application interface when the multiple interface elements include a main interface element and a slave interface element, wherein the one main interface element is in a selected state and the one slave interface element is in an unselected state; and a fifth display sub-unit, configured to display a spacing line from each of the multiple slave interface elements to the main interface element on the target application interface when the multiple interface elements include a main interface element and multiple slave interface elements, wherein the one main interface element is in a selected state and the multiple slave interface elements are in an unselected state.

[0016] Optionally, the second display unit also includes: a sixth display sub-unit, which is configured to display a spacing line from each group of slave interface elements in the N groups of slave interface elements to a corresponding main interface element in the N main interface elements on the target application interface when the multiple interface elements include N main interface elements and N groups of slave interface elements, wherein the N main interface elements and the N groups of slave interface elements have a one-to-one correspondence, each main interface element corresponds to a group of slave interface elements in the N groups of slave interface elements, N is a natural number greater than 1, the N main interface elements are in a selected state, and the N groups of slave interface elements are in an unselected state.

[0017] Optionally, the sixth display subunit comprises: a seventh display subunit configured to display the i-th group of spacing lines in the first display state on the target application interface, and to display N-1 groups of spacing lines in the second display state except the i-th group of spacing lines, wherein the N-1 groups of spacing lines except the i-th group of spacing lines are the N-1 groups of spacing lines except the i-th group of spacing lines in the N groups of spacing lines, the N groups of spacing lines include spacing lines from each group of the N groups of slave interface elements to a corresponding one of the N main interface elements, 1≤i≤N, i and N are both positive integers; a second An acquisition subunit is configured to acquire a third target instruction on the target application interface, wherein the third target instruction is used to switch the display state of the N groups of spacing lines; an eighth display subunit is configured to display the jth group of spacing lines in the first display state on the target application interface in response to the third target instruction, and to display N-1 groups of spacing lines in the second display state except the jth group of spacing lines, wherein the N-1 groups of spacing lines except the jth group of spacing lines are the N-1 groups of spacing lines except the jth group of spacing lines in the N groups of spacing lines, 1≤j≤N, and j is a positive integer not equal to i.

[0018] Optionally, the above-mentioned device also includes: a ninth display subunit, configured to display the above-mentioned multiple interface elements in the first display state on the above-mentioned target application interface in response to the above-mentioned first target instruction, and to display the interface elements in the above-mentioned group of interface elements other than the above-mentioned multiple interface elements in the second display state.

[0019] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, comprising: a processor; and a memory for storing instructions executable by the processor; wherein the processor is configured to execute the instructions to implement any one of the above-mentioned interface element display methods.

[0020] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided. When instructions in the above-mentioned computer-readable storage medium are executed by a processor of an electronic device, the above-mentioned electronic device can execute any one of the above-mentioned interface element display methods.

[0021] The technical solution provided by the embodiments of the present disclosure brings at least the following beneficial effects: in the embodiments of the present disclosure, the spacing lines and distance values ​​between multiple interface elements can be displayed simultaneously through the input control instructions, thereby simplifying the verification operation of the interface elements in the target application interface, and solving the technical problem in the related technology that the display operation of the spacing lines is relatively complicated due to the measurement of the spacing lines and distance values ​​between multiple interface elements one by one.

[0022] On the other hand, in an embodiment of the present disclosure, multiple groups of spacing lines corresponding to multiple groups of interface elements can be displayed through input control instructions, and each group of spacing lines is the spacing lines from one or more interface elements to the interface element in a selected state, which further simplifies the display operation of the spacing lines of the interface elements, improves the display efficiency of the spacing lines of the interface elements, and thus further improves the verification efficiency of the interface elements.

[0023] On the other hand, in the embodiments of the present disclosure, the spacing lines corresponding to different interface elements can be displayed in different display states, for example, a first display state and a second display state, through input control instructions, and can be switched between different display states. In this way, the spacing line to be operated can be highlighted, avoiding misoperation between different spacing lines, and improving the verification accuracy of interface elements.

[0024] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure.

[0025] First, to facilitate understanding of the embodiments of the present disclosure, some terms or nouns involved in the present disclosure are explained below:

[0026] UI: user interface.

[0027] Element: A small single view on a UI draft (such as a button, text area, single image area, etc.).

[0028] UI star: refers to the UI element selected by the anchoring operation.

[0029] UI planet: refers to the UI element selected by common operations.

[0030] Star gesture: This gesture allows you to designate a selected UI element as a "UI star".

[0031] Planet gesture: This gesture allows you to designate a UI element as a "UI planet".

[0032] UI Element Galaxy: Specify a UI star, then select some other UIs as UI planets, and display the distance between the UI star and multiple UI planets (it looks like multiple planets orbiting the star).

[0033] Spacing line: refers to a line between any two UI elements (for example, UI stars, UI planets) after they are selected. If there is text on the line, the length of the line will be displayed. There can be one or more lines between two UI elements. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

[0035] Figure 1 is a hardware structure block diagram of a computer terminal showing a method for displaying interface elements according to an exemplary embodiment;

[0036] Figure 2 is a flow chart of a method for displaying interface elements according to an exemplary embodiment;

[0037] Figure 3a is a schematic diagram of an optional interface for displaying UI elements according to an exemplary embodiment;

[0038] Figure 3b is another optional interface schematic diagram of displaying UI elements according to an exemplary embodiment;

[0039] Figure 4 is another optional interface schematic diagram of displaying UI elements according to an exemplary embodiment;

[0040] Figure 5 is a flow chart of an optional method for displaying interface elements according to an exemplary embodiment;

[0041] Figure 6a is another optional interface schematic diagram of displaying UI elements according to an exemplary embodiment;

[0042] Figure 6b is another optional interface schematic diagram of displaying UI elements according to an exemplary embodiment;

[0043] Figure 6c is a schematic diagram of another optional interface for displaying UI elements according to an exemplary embodiment;

[0044] Figure 7 is a flowchart of another optional method for displaying interface elements according to an exemplary embodiment;

[0045] Figure 8 is a block diagram of a display device for an interface element according to an exemplary embodiment;

[0046] Fig. 9 is a block diagram of another display device of an interface element according to an exemplary embodiment;

[0047] Fig.10 is a block diagram of a display device for another interface element according to an exemplary embodiment;

[0048] Fig.11 It is a block diagram of an electronic device according to an exemplary embodiment. DETAILED DESCRIPTION

[0049] It should be noted that the user information involved in this disclosure (including but not limited to user device information, user personal information, etc.) is all information authorized by the user or fully authorized by all parties.

[0050] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

[0051] It should be noted that the terms "first", "second", etc. in the specification and claims of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0052] The method embodiments provided in the embodiments of the present application can be executed in a computer terminal, a computer terminal or a similar computing module. Taking running on a computer terminal as an example, Figure 1 FIG. 1 is a hardware structure block diagram of a computer terminal according to an exemplary embodiment showing a method for displaying interface elements. Figure 1 As shown, the computer terminal may include one or more ( Figure 1 Only one is shown in the figure) processor 102 (processor 102 may include but is not limited to a processing module such as a microprocessor MCU or a programmable logic device FPGA) and a memory 104 for storing data. In an exemplary embodiment, the computer terminal may also include a transmission device 106 and an input / output device 108 for communication functions. It can be understood by those skilled in the art that Figure 1 The structure shown is only for illustration and does not limit the structure of the above-mentioned computer terminal. Figure 1 More or fewer components as shown, or with Figure 1 Equivalent functions or comparisons shown Figure 1 A different configuration with more features is shown.

[0053] The memory 104 can be used to store computer programs, for example, software programs and modules of application software, such as the computer program corresponding to the control method of the smart home device in the embodiment of the present application. The processor 102 executes various functional applications and data processing by running the computer program stored in the memory 104, that is, to implement the above method. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage modules, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include a memory remotely arranged relative to the processor 102, and these remote memories may be connected to the computer terminal via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0054] The transmission module 106 is used to receive or send data via a network. The specific example of the above network may include a wireless network provided by a communication provider of a computer terminal. In one example, the transmission module 106 includes a network adapter (Network Interface Controller, referred to as NIC), which can be connected to other network devices through a base station so as to communicate with the Internet. In one example, the transmission module 106 can be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0055] Figure 2 is a flow chart of a method for displaying interface elements according to an exemplary embodiment. Figure 2 As shown, the above-mentioned method for displaying interface elements is applied to the process of verifying the interface elements set on the target application interface, and includes the following steps:

[0056] In step S11, a group of interface elements are displayed on the target application interface;

[0057] In step S12, a first target instruction is obtained on the target application interface, wherein the first target instruction is used to select multiple interface elements in the group of interface elements;

[0058] In step S13, in response to the first target instruction, the plurality of interface elements are selected on the target application interface, and spacing lines between the plurality of interface elements and distance values ​​between the plurality of interface elements are displayed on the target application interface.

[0059] It should be noted that the interface element display method provided in the embodiment of the present application is applied to terminal devices, such as mobile terminals (Android terminals, iOS terminals), PC terminals, smart wearable devices, tablet computers and other front-end devices. In the embodiment of the present disclosure, multiple application apps are running in the above-mentioned terminal devices, and the above-mentioned target application interface is the user interaction interface. The above-mentioned interface elements may include but are not limited to buttons, controls, text areas, picture areas and the like.

[0060] As an optional embodiment, the embodiment of the present application can be applied to, but not limited to, the process of verifying the interface elements set on the target application interface. For example, in the App and front-end R&D process, there is a UI designer designing a UI draft, and the R&D engineer restores the UI draft in the form of code on the terminal device, which is then accepted by the UI designer. The general specific process is as follows: The UI designer designs the UI draft, which means that the coordinates of each UI element and the spacing lines between UI elements will be marked on the UI draft. The R&D engineer restores the UI on the front-end device, which means that the R&D engineer performs coding, restores the UI draft in the form of code, and finally displays it on each front-end device; UI designer acceptance means that the UI designer compares and studies the effect displayed by the R&D engineer on the front end with the initial UI design draft. If there is no difference in the comparison result (for example, the UI element coordinate points, width and height, relative spacing between UI elements, and the color of UI elements are all correct), the UI designer will inform the management that the UI review has passed in this R&D process.

[0061] like Figure 3aAs shown, a group of interface elements are displayed on the target application interface 30, for example, the group of interface elements is UI element 1, UI element 2, UI element 3, UI element 4, UI element 5, and UI element 6. The R&D engineer or UI designer triggers a first target instruction by a touch or click operation, for example, double-clicking, sliding and then clicking, etc., to select multiple interface elements in the group of interface elements, for example, selecting UI element 1 and UI element 2, UI element 3 and UI element 4; the terminal device obtains the first target instruction on the target application interface 30, and responds to the first target instruction, still as shown in FIG. 3, selects UI element 1 and UI element 2, UI element 3 and UI element 4 on the target application interface 30. UI element 1 and UI element 2, and a spacing line between UI element 1 and UI element 2 is displayed on the above-mentioned target application interface. For example, the spacing line refers to one or more spacing lines generated according to the relative distance between any two UI elements (for example, UI stars, UI planets) after any two UI elements are selected. Text can also be displayed on the spacing line, for example, a11, a12; representing the horizontal spacing and vertical spacing from UI element 1 to UI element 2, b11, b12 representing the horizontal spacing and vertical spacing from UI element 2 to UI element 1, and the text is used to display the length of the spacing line. It should be noted that there can be one or more spacing lines between any two UI elements.

[0062] As an optional embodiment, the above-mentioned spacing lines include but are not limited to: the spacing line between the top of UI element 1 and the top of UI element 2, the spacing line between the left border of UI element 1 and the left border of UI element 2, the spacing line between the right border of UI element 1 and the right border of UI element 2, the spacing line between the upper border of UI element 1 and the upper border of UI element 2, and the like.

[0063] Through the embodiments of the present disclosure, the tediousness of the work in the UI designer acceptance / R&D engineer self-inspection stage can be reduced. In the target application interface, the UI designer / R&D engineer can trigger the first target instruction on the target application interface, select the above-mentioned multiple interface elements on the above-mentioned target application interface, and display the spacing lines and distance values ​​between the above-mentioned multiple interface elements on the above-mentioned target application interface, and then directly view the spacing lines and distance values ​​between the multiple interface elements.

[0064] In the embodiments of the present disclosure, the spacing lines and distance values ​​between multiple interface elements can be displayed simultaneously through the input of control instructions, thereby simplifying the verification operation of the interface elements in the target application interface and solving the technical problem in the related art that the display operation of the spacing lines is relatively complicated due to the measurement of the spacing lines and distance values ​​between multiple interface elements one by one.

[0065] On the other hand, in an embodiment of the present disclosure, multiple groups of spacing lines corresponding to multiple groups of interface elements can be displayed through input control instructions, and each group of spacing lines is the spacing lines from one or more interface elements to the interface element in a selected state, which further simplifies the display operation of the spacing lines of the interface elements, improves the display efficiency of the spacing lines of the interface elements, and thus further improves the verification efficiency of the interface elements.

[0066] On the other hand, in the embodiments of the present disclosure, through the input control instructions, the spacing lines corresponding to different interface elements can be displayed in different display states, for example, different spacing lines are displayed using lines of different colors; different spacing lines are displayed using lines of different thicknesses; for another example, different spacing lines are displayed using highlight states and non-highlight states, etc., and different spacing lines can be switched in different display states. In this way, the spacing line to be operated can be highlighted, avoiding the misoperation of different spacing lines due to the inability to clearly distinguish the display, and improving the verification accuracy of the interface elements.

[0067] In an optional embodiment, the step of displaying the spacing lines and distance values ​​between the plurality of interface elements on the target application interface includes:

[0068] In step S21, when the multiple interface elements include a first interface element and a second interface element, and both the first interface element and the second interface element are in an unselected state, a first spacing line from the first interface element to the second interface element and a second spacing line from the second interface element to the first interface element are displayed on the target application interface.

[0069] like Figure 4 As shown, taking the above-mentioned first interface element as UI element 3 and the above-mentioned fourth interface element as UI element 4 as an example, for example, UI element 3 and UI element 4 are both in an unselected state, that is, UI element 3 and UI element 4 are not UI elements selected by the UI designer / R&D engineer through the anchoring operation, then a first spacing line from UI element 3 to UI element 4 can be displayed on the above-mentioned target application interface. For example, the above-mentioned first spacing line includes: c11, c12 represents the horizontal spacing and vertical spacing (that is, distance value) from UI element 3 to UI element 4, and a second spacing line from UI element 4 to UI element 3 can also be displayed on the above-mentioned target application interface (in Figure 4 Not shown in the figure, the second spacing line can be obtained by analogy with the first spacing line).

[0070] As another optional embodiment, for any UI element in the embodiments of the present application, the UI designer acceptance / R&D engineer can customize the border size of the UI element. It should be noted that the above-mentioned UI element may be equal to or different from the size in the actual application.

[0071] In an optional embodiment, Figure 5 is a flowchart showing an optional interface element display according to an exemplary embodiment. Figure 5 As shown, the step of displaying a first spacing line from the first interface element to the second interface element, and a second spacing line from the second interface element to the first interface element on the target application interface includes:

[0072] In step S31, the first spacing line in the first display state is displayed on the target application interface, and the second spacing line in the second display state is displayed;

[0073] In step S32, a second target instruction is obtained on the target application interface, wherein the second target instruction is used to switch the display status of the first spacing line and the second spacing line;

[0074] In step S33, in response to the second target instruction, the first spacing line in the second display state is displayed on the target application interface, and the second spacing line in the first display state is displayed.

[0075] Optionally, in the embodiment of the present disclosure, if Figure 3a As shown, the first spacing line in the first display state is displayed on the target application interface 30, and as shown Figure 3b As shown, the above-mentioned second spacing line is displayed in the second display state. Through the embodiment of the present disclosure, the first spacing line from the selected UI element 2 to the UI element 1 is emphasized, and the second spacing line from the UI element 1 to the UI element 2, other UI elements 3, UI element 4, etc. adopt the second display state, for example, grayscale state, mask display, occlusion state display, thereby improving the visual effect of the selected multiple UI elements.

[0076] If the user wants to switch the display status of the first spacing line and the second spacing line, the user can trigger the second target instruction, for example, double-clicking, sliding and then clicking, etc. The terminal device obtains the second target instruction on the target application interface, and in response to the second target instruction, displays the first spacing line in the second display state on the target application interface 30, and displays the second spacing line in the first display state.

[0077] In an optional embodiment, the step of displaying spacing lines between the plurality of interface elements on the target application interface includes:

[0078] In step S41, when the plurality of interface elements include a main interface element and a sub-interface element, a spacing line from the sub-interface element to the main interface element is displayed on the target application interface;

[0079] In step S42, when the plurality of interface elements include a main interface element and a plurality of sub-interface elements, a spacing line from each of the plurality of sub-interface elements to the main interface element is displayed on the target application interface.

[0080] Optionally, the one main interface element is in a selected state, and the one slave interface element is in an unselected state; the one main interface element is in a selected state, and the multiple slave interface elements are in an unselected state.

[0081] When the above-mentioned multiple interface elements include a main interface element and a sub-interface element, as shown in FIG3 , the above-mentioned main interface element is UI element 1, the above-mentioned sub-interface element is UI element 2, and a spacing line from UI element 2 to UI element 1 is displayed on the above-mentioned target application interface 30; when the above-mentioned multiple interface elements include a main interface element and multiple sub-interface elements, as shown in FIG3 , Figure 6a As shown, the main interface element is UI element 1, and the multiple slave interface elements include UI element 2 and UI element 3. The spacing lines from UI element 2 and UI element 3 in the multiple slave interface elements to UI element 1 are displayed on the target application interface 30.

[0082] Through the embodiment of the present disclosure, a UI element 1 can be selected as the main interface element, which can also be understood as a UI star element, and the above-mentioned slave interface element is a UI planet element. By displaying a spacing line from each UI planet element to the UI star element in a plurality of UI planet elements on the target application interface, such as Figure 6b As shown, UI element 1 and UI element 4 may be the above-mentioned main interface elements respectively, and the multiple slave interface elements of the above-mentioned UI element 1 include UI element 2 and UI element 3, and the distance lines from the above-mentioned UI element 2 and UI element 3 to UI element 1 are displayed on the above-mentioned target application interface 30; the multiple slave interface elements of the above-mentioned UI element 4 include UI element 5 and UI element 6, and the distance lines from the above-mentioned UI element 5 and UI element 6 to UI element 4 are also displayed on the above-mentioned target application interface 30. Furthermore, a UI element galaxy may be formed by a UI star element, multiple UI planet elements, and multiple distance lines.

[0083] It should be noted that Figure 6a , Figure 6b , Figure 6c The spacing lines displayed on the target application interface can also display numerical text (currently not drawn), for example, a11, a12, b11, b12, and so on. Figure 3a , Figure 3b shown.

[0084] In an optional embodiment, the step of displaying spacing lines between the plurality of interface elements on the target application interface includes:

[0085] In step S51, when the multiple interface elements include N main interface elements and N groups of sub-interface elements, a spacing line from each group of sub-interface elements in the N groups of sub-interface elements to a corresponding main interface element in the N main interface elements is displayed on the target application interface.

[0086] Optionally, the above-mentioned N main interface elements and the above-mentioned N groups of slave interface elements have a one-to-one correspondence, each main interface element corresponds to a group of slave interface elements in the above-mentioned N groups of slave interface elements, the above-mentioned N is a natural number greater than 1, the above-mentioned N main interface elements are in a selected state, and the above-mentioned N groups of slave interface elements are in an unselected state.

[0087] In the implementation embodiments of the present disclosure, UI designers / R&D engineers can highlight only the currently active UI element galaxies by selecting multiple groups of UI element galaxies, that is, displaying the spacing of multiple groups of UI elements at the same time, and display other galaxies in grayscale or blocked display.

[0088] When the UI designer / R&D engineer turns on this function, on the target application interface, the UI designer / R&D engineer can designate an element as a UI star element through a UI star gesture (e.g., double-click, left swipe, etc.), or designate an element as a UI planet element through a UI planet gesture (e.g., single-click, right swipe, etc., which can be distinguished from the UI star gesture). After selecting multiple UI elements, spacing lines can be generated and displayed on the target application interface. In an optional embodiment, it can be displayed in a double selection form, a single UI element galaxy form, and a plurality of UI elements galaxy form:

[0089] The dual selection mode means that when the UI designer / R&D engineer has not currently specified a UI star element, any two UI planet elements can be selected through a planet gesture, and the spacing line between any two UI planet elements will be displayed on the target application interface. Other UI elements on the target application interface will be displayed in grayscale or as a mask, so that the spacing line between any two UI planet elements can be seen intuitively. In the dual selection mode, only any two UI planet elements can be selected at a time and the spacing line between the two UI planet elements will be displayed.

[0090] The galaxy form of a single UI element means that the UI designer / R&D engineer specifies a UI star element through the UI star gesture, and other UI elements are displayed in grayscale or as a mask. At this time, one or more UI planet elements are selected through the UI planet gesture, and the selected UI planet elements are highlighted. Then, the spacing lines between the current UI star element and multiple UI planet elements are generated one by one. Then, multiple UI planet elements form a UI element galaxy around a UI star element, and the spacing lines between a single UI element and multiple other UI elements can be intuitively seen.

[0091] In an optional embodiment, Figure 7 is a flowchart showing another optional interface element display according to an exemplary embodiment, such as Figure 7 As shown, the step of displaying on the target application interface a spacing line from each group of slave interface elements in the N groups of slave interface elements to a corresponding one of the N main interface elements includes:

[0092] In step S61, the i-th group of spacing lines in the first display state is displayed on the target application interface, and N-1 groups of spacing lines in the second display state other than the i-th group of spacing lines are displayed;

[0093] In step S62, a third target instruction is obtained on the target application interface, wherein the third target instruction is used to switch the display state of the N groups of spacing lines;

[0094] In step S63, in response to the third target instruction, the jth group of spacing lines in the first display state is displayed on the target application interface, and N-1 groups of spacing lines in the second display state except the jth group of spacing lines are displayed.

[0095] Optionally, the N-1 groups of spacing lines other than the i-th group of spacing lines are the N-1 groups of spacing lines other than the i-th group of spacing lines in the N groups of spacing lines, and the N groups of spacing lines include spacing lines from each group of slave interface elements in the N groups of slave interface elements to a corresponding main interface element in the N main interface elements, 1≤i≤N, i and N are both positive integers.

[0096] Optionally, the N-1 groups of spacing lines except the j-th group of spacing lines are the N-1 groups of spacing lines except the j-th group of spacing lines in the N groups of spacing lines, 1≤j≤N, and j is a positive integer that is not equal to i.

[0097] The above steps S61 to S63 can be understood as multiple UI element galaxies. For example, UI element 1 is the main interface element of UI element galaxy A, and the multiple slave interface elements of the above UI element 1 include UI element 2 and UI element 3. The spacing lines from the above UI element 2 and UI element 3 to UI element 1 are displayed on the above target application interface 30, that is, UI element 1, UI element 2, and UI element 3 constitute UI element galaxy A. After the UI designer / R&D engineer currently specifies a UI element galaxy A, Figure 6c As shown, the UI designer / R&D engineer specifies a UI element 4 as the new UI star B through the UI star gesture, and sets galaxy A to the grayscale display state, and the new UI star B to the first display state. At this time, UI planet C is specified through the UI planet gesture. At this time, UI planet C (UI element 5 and UI element 6) will constitute UI element galaxy D with UI star B (UI element 4), that is, the above-mentioned UI element 4, UI element 5 and UI element 6 constitute UI element galaxy D, and generate and display the spacing line between UI star B and UI planet C in the UI element galaxy D on the target application interface; at this time, UI element galaxy B is in the first display state, and the UI star in UI element galaxy A can be selected through the UI star gesture, so that UI element galaxy A is set to the first display state, and UI element galaxy B will be set to the grayscale state, so that the spacing lines between multiple groups of elements can be displayed at the same time, and the highlighted display state and the grayscale display state can be switched back and forth.

[0098] Compared with the original self-inspection method of interface screenshot - computer tool comparison - one-by-one spacing measurement, the disclosed embodiment can improve the efficiency of UI designer acceptance / R&D engineer review of UI elements. When displaying UI element galaxies, multiple UI element galaxies can be displayed at the same time, so as to achieve the simultaneous display of spacing lines between multiple groups of UI elements in a single time dimension; highlight the selected UI elements (for example; UI star elements, UI planet elements), and display other unselected UI elements in grayscale to enhance the visual display experience of the selected UI elements.

[0099] Furthermore, the UI element galaxy mode in the disclosed embodiment involves a dual star mode, simultaneous display of multiple galaxies, and switchable active galaxies; in addition, the selected UI element is in a first display state, and the area where the UI element is located can be dug to achieve this. For example, by using OpenGL's color mixing technology, holes can be dug in the area where multiple UI elements are located.

[0100] Figure 8 is a block diagram of a display device for an interface element according to an exemplary embodiment. Figure 8The device is applied to the process of verifying the interface elements set on the target application interface, and includes a first display unit 121, an acquisition unit 122 and a second display unit 123.

[0101] The first display unit 121 is configured to display a group of interface elements on the target application interface;

[0102] The acquisition unit 122 is configured to execute acquiring a first target instruction on the target application interface, wherein the first target instruction is used to select multiple interface elements in the group of interface elements;

[0103] The second display unit 123 is configured to execute in response to the first target instruction, select the multiple interface elements on the target application interface, and display the spacing lines between the multiple interface elements and the distance values ​​between the multiple interface elements on the target application interface.

[0104] In an optional embodiment, the second display unit 123 includes a first display sub-unit 131 .

[0105] The first display subunit 131 is configured to display a first spacing line from the first interface element to the second interface element and a second spacing line from the second interface element to the first interface element on the target application interface when the multiple interface elements include the first interface element and the second interface element, and both the first interface element and the second interface element are in an unselected state.

[0106] Fig. 9 is a block diagram of another display device for interface elements according to an exemplary embodiment. Fig. 9 The second display unit 123 includes a second display subunit 141 , a first acquisition subunit 142 , and a third display subunit 143 .

[0107] The second display subunit 141 is configured to display the first spacing line in the first display state and the second spacing line in the second display state on the target application interface;

[0108] The first acquisition subunit 142 is configured to acquire a second target instruction on the target application interface, wherein the second target instruction is used to switch the display state of the first spacing line and the second spacing line;

[0109] The third display subunit 143 is configured to display the first spacing line in the second display state and the second spacing line in the first display state on the target application interface in response to the second target instruction.

[0110] In an optional embodiment, the second display unit 123 includes a fourth display sub-unit 151 and a fifth display sub-unit 152 .

[0111] The fourth display subunit 151 is configured to display a spacing line from the slave interface element to the main interface element on the target application interface when the plurality of interface elements include a main interface element and a slave interface element, wherein the one main interface element is in a selected state and the one slave interface element is in an unselected state;

[0112] The fifth display subunit 152 is configured to display a spacing line from each of the multiple slave interface elements to the main interface element on the target application interface when the multiple interface elements include a main interface element and multiple slave interface elements, wherein the one main interface element is in a selected state and the multiple slave interface elements are in an unselected state.

[0113] In an optional embodiment, the second display unit 123 includes a sixth display sub-unit 161; the sixth display sub-unit 161 is configured to display a spacing line from each group of slave interface elements in the N groups of slave interface elements to a corresponding main interface element in the N main interface elements on the target application interface when the multiple interface elements include N main interface elements and N groups of slave interface elements, wherein the N main interface elements and the N groups of slave interface elements have a one-to-one correspondence, each main interface element corresponds to a group of slave interface elements in the N groups of slave interface elements, N is a natural number greater than 1, the N main interface elements are in a selected state, and the N groups of slave interface elements are in an unselected state.

[0114] Fig.10 is a block diagram of a display device for another interface element according to an exemplary embodiment. Fig.10 The sixth display subunit 161 includes a seventh display subunit 171 , a second acquisition subunit 172 , and an eighth display subunit 173 .

[0115] The seventh display subunit 171 is configured to display the i-th group of spacing lines in the first display state on the target application interface, and display N-1 groups of spacing lines in the second display state except the i-th group of spacing lines, wherein the N-1 groups of spacing lines except the i-th group of spacing lines are the N-1 groups of spacing lines except the i-th group of spacing lines in the N groups of spacing lines, and the N groups of spacing lines include spacing lines from each group of slave interface elements in the N groups of slave interface elements to a corresponding one of the N main interface elements, 1≤i≤N, i and N are both positive integers;

[0116] The second acquisition subunit 172 is configured to acquire a third target instruction on the target application interface, wherein the third target instruction is used to switch the display state of the N groups of spacing lines;

[0117] The eighth display subunit 173 is configured to respond to the above-mentioned third target instruction, display the j-th group of spacing lines in the first display state on the above-mentioned target application interface, and display N-1 groups of spacing lines in the second display state except the above-mentioned j-th group of spacing lines, wherein the above-mentioned N-1 groups of spacing lines except the above-mentioned j-th group of spacing lines are the N-1 groups of spacing lines in the above-mentioned N groups of spacing lines except the above-mentioned j-th group of spacing lines, 1≤j≤N, j is a positive integer not equal to i.

[0118] In an optional embodiment, the above device further includes a ninth display subunit 181 .

[0119] The ninth display subunit 181 is configured to display the multiple interface elements in the first display state on the target application interface in response to the first target instruction, and to display interface elements in the second display state other than the multiple interface elements in the group of interface elements.

[0120] Regarding the device in the above embodiment, the specific manner in which each unit performs the operation has been described in detail in the embodiment of the method, and will not be elaborated here.

[0121] In an exemplary embodiment, a computer-readable storage medium including instructions is also provided, such as a memory including instructions, and when the instructions in the above-mentioned computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to perform any of the above-mentioned model training methods. Optionally, the computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0122] According to an embodiment of the present disclosure, an electronic device is provided. Fig.11 is a block diagram of an electronic device according to an exemplary embodiment. Fig.11As shown, the electronic device may include: at least one (only one is shown in the figure) processor 901, memory 902, and peripheral interface 903. It includes: a processor; a memory for storing executable instructions of the above processor; wherein the above processor is configured to execute the above instructions to implement any of the above interface element display methods. Optionally, the memory may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory may further include a memory remotely arranged relative to the processor, and these remote memories may be connected to the computer terminal via a network. Examples of the above network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0123] According to an embodiment of the present disclosure, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, any one of the above-mentioned methods for displaying interface elements is implemented.

[0124] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0125] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for displaying an interface element, characterized in that: Applicable to the process of verifying the interface elements set on the target application interface, including: Displaying a set of interface elements on the target application interface; Acquire a first target instruction on the target application interface, wherein the first target instruction is used to select multiple interface elements in the group of interface elements; In response to the first target instruction, the multiple interface elements are selected on the target application interface, and spacing lines between the multiple interface elements and distance values ​​between the multiple interface elements are displayed on the target application interface, wherein the spacing line is a line between any two interface elements, and text on the line will display the length of the spacing line; Wherein, displaying the spacing lines between the multiple interface elements on the target application interface includes: when the multiple interface elements include one main interface element and one slave interface element, displaying the spacing lines from the slave interface element to the main interface element on the target application interface, wherein the one main interface element is in a selected state and the one slave interface element is in an unselected state; or, when the multiple interface elements include one main interface element and multiple slave interface elements, displaying the spacing lines from each of the multiple slave interface elements to the main interface element on the target application interface, wherein the one main interface element is in a selected state and the multiple slave interface elements are in an unselected state; The step of displaying the spacing lines between the plurality of interface elements on the target application interface includes: When the multiple interface elements include N main interface elements and N groups of sub-interface elements, a spacing line from each group of sub-interface elements in the N groups of sub-interface elements to a corresponding main interface element in the N main interface elements is displayed on the target application interface, wherein the N main interface elements and the N groups of sub-interface elements have a one-to-one correspondence, each main interface element corresponds to a group of sub-interface elements in the N groups of sub-interface elements, N is a natural number greater than 1, the N main interface elements are in a selected state, and the N groups of sub-interface elements are in an unselected state; The step of displaying on the target application interface a spacing line from each group of slave interface elements in the N groups of slave interface elements to a corresponding one of the N main interface elements includes: Displaying the i-th group of spacing lines in a first display state on the target application interface, and displaying N-1 groups of spacing lines in a second display state except the i-th group of spacing lines, wherein the N-1 groups of spacing lines except the i-th group of spacing lines are the N-1 groups of spacing lines except the i-th group of spacing lines in the N groups of spacing lines, and the N groups of spacing lines include spacing lines from each group of slave interface elements in the N groups of slave interface elements to a corresponding one of the N main interface elements, 1≤i≤N, i and N are both positive integers; Acquire a third target instruction on the target application interface, wherein the third target instruction is used to switch the display state of the N groups of spacing lines; In response to the third target instruction, the jth group of spacing lines in the first display state is displayed on the target application interface, and N-1 groups of spacing lines in the second display state except the jth group of spacing lines are displayed, wherein the N-1 groups of spacing lines except the jth group of spacing lines are the N-1 groups of spacing lines in the N groups of spacing lines except the jth group of spacing lines, 1≤j≤N, and j is a positive integer that is not equal to i.

2. The method according to claim 1, characterized in that The step of displaying spacing lines between the plurality of interface elements on the target application interface includes: When the multiple interface elements include a first interface element and a second interface element, and the first interface element and the second interface element are both in an unselected state, a first spacing line from the first interface element to the second interface element and a second spacing line from the second interface element to the first interface element are displayed on the target application interface.

3. The method according to claim 2, characterized in that The step of displaying a first spacing line from the first interface element to the second interface element, and a second spacing line from the second interface element to the first interface element on the target application interface includes: Displaying the first spacing line in a first display state and displaying the second spacing line in a second display state on the target application interface; Acquire a second target instruction on the target application interface, wherein the second target instruction is used to switch the display status of the first spacing line and the second spacing line; In response to the second target instruction, the first spacing line in the second display state is displayed on the target application interface, and the second spacing line in the first display state is displayed.

4. The method according to any one of claims 1 to 3, characterized in that After acquiring the first target instruction on the target application interface, the method further includes: In response to the first target instruction, the multiple interface elements in the first display state are displayed on the target application interface, and the interface elements in the group of interface elements other than the multiple interface elements in the second display state are displayed.

5. A display device for interface elements, characterized in that: Applicable to the process of verifying the interface elements set on the target application interface, including: A first display unit is configured to display a set of interface elements on the target application interface; An acquisition unit is configured to execute and acquire a first target instruction on the target application interface, wherein the first target instruction is used to select a plurality of interface elements in the group of interface elements; a second display unit, configured to execute, in response to the first target instruction, selecting the plurality of interface elements on the target application interface, and displaying, on the target application interface, spacing lines between the plurality of interface elements and distance values ​​between the plurality of interface elements, wherein the spacing line is a line between any two interface elements, and if there is text on the line, the length of the spacing line will be displayed; Wherein, the second display unit further includes: a fourth display subunit, configured to display a spacing line from the slave interface element to the main interface element on the target application interface when the plurality of interface elements include a main interface element and a slave interface element, wherein the one main interface element is in a selected state and the one slave interface element is in an unselected state; a fifth display subunit, configured to display, on the target application interface, a spacing line from each of the multiple slave interface elements to the main interface element when the multiple interface elements include one main interface element and multiple slave interface elements, wherein the one main interface element is in a selected state and the multiple slave interface elements are in an unselected state; Wherein, the second display unit further includes: a sixth display subunit, configured to display, on the target application interface, when the plurality of interface elements include N main interface elements and N groups of sub-interface elements, spacing lines from each group of sub-interface elements in the N groups of sub-interface elements to a corresponding main interface element in the N main interface elements, wherein the N main interface elements and the N groups of sub-interface elements have a one-to-one correspondence, each main interface element corresponds to a group of sub-interface elements in the N groups of sub-interface elements, N is a natural number greater than 1, the N main interface elements are in a selected state, and the N groups of sub-interface elements are in an unselected state; Wherein, the sixth display subunit comprises: a seventh display subunit, configured to display the i-th group of spacing lines in the first display state on the target application interface, and to display N-1 groups of spacing lines in the second display state except the i-th group of spacing lines, wherein the N-1 groups of spacing lines except the i-th group of spacing lines are the N-1 groups of spacing lines except the i-th group of spacing lines in the N groups of spacing lines, the N groups of spacing lines include spacing lines from each group of slave interface elements in the N groups of slave interface elements to a corresponding one of the N main interface elements, 1≤i≤N, i and N are both positive integers; A second acquisition subunit is configured to acquire a third target instruction on the target application interface, wherein the third target instruction is used to switch the display state of the N groups of spacing lines; The eighth display subunit is configured to display the jth group of spacing lines in a first display state on the target application interface in response to the third target instruction, and display N-1 groups of spacing lines in a second display state except the jth group of spacing lines, wherein the N-1 groups of spacing lines except the jth group of spacing lines are the N-1 groups of spacing lines in the N groups of spacing lines except the jth group of spacing lines, 1≤j≤N, and j is a positive integer that is not equal to i.

6. The device according to claim 5, characterized in that The second display unit comprises: The first display subunit is configured to display a first spacing line from the first interface element to the second interface element and a second spacing line from the second interface element to the first interface element on the target application interface when the multiple interface elements include a first interface element and a second interface element, and the first interface element and the second interface element are both in an unselected state.

7. The device according to claim 6, characterized in that The second display unit further includes: a second display subunit, configured to display the first spacing line in a first display state and the second spacing line in a second display state on the target application interface; A first acquisition subunit is configured to acquire a second target instruction on the target application interface, wherein the second target instruction is used to switch the display state of the first spacing line and the second spacing line; The third display subunit is configured to display the first spacing line in the second display state and the second spacing line in the first display state on the target application interface in response to the second target instruction.

8. The device according to any one of claims 5 to 7, characterized in that The device also includes: The ninth display subunit is configured to display the multiple interface elements in the first display state on the target application interface in response to the first target instruction, and to display the interface elements in the group of interface elements other than the multiple interface elements in the second display state.

9. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the interface element display method according to any one of claims 1 to 4.

10. A computer-readable storage medium, when instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the interface element display method according to any one of claims 1 to 4.

Images