Interface adaptation method and device, storage medium and electronic equipment

Abstract

The invention provides an interface adaptation method and device, a computer storage medium and electronic equipment, and relates to the technical field of terminals. Comprising the steps that an editing interface corresponding to an interface editing scene is displayed through a graphical user interface, the graphical user interface comprises a first to-be-edited interaction interface with a first screen aspect ratio, and the first to-be-edited interaction interface comprises a plurality of sub-assembly elements; in response to a confirmation operation acting on the target sub-component element, generating a plurality of adaptive selection controls corresponding to the target sub-component element; in response to a selection operation for a target adaptive selection control in the plurality of adaptive selection controls, updating a relative position binding state of the target sub-component element and the reference object in an upward direction of a target adaptive formula corresponding to the target adaptive selection control; and based on the updated relative position binding state, adaptively displaying the target sub-component element in a second to-be-edited interaction interface with a second screen aspect ratio. The operation efficiency of binding sub-component elements and reference object positions in an interface can be improved.

Description

Background Art

[0002] With the diversified development of terminals, the corresponding screen aspect ratios also show diversity. In order to adaptively display UI elements in the same user interface (UI for short) on terminal devices with different screen aspect ratios, the relative position binding relationship between the UI elements and the parent element is usually set.

[0003] Current UI editors often adopt the steps shown in Figure 1(a) - Figure 1(d) to achieve the above relative position binding: First, click to select a UI element, open the advanced settings panel corresponding to the UI element, select basic attributes from the displayed interface, and click the adjustment relative position jump item in the basic attributes to enter the relative position binding panel, so as to adjust the relative position binding relationship between the UI element and the parent element through a switch.

[0004] However, the above method has many operation steps to achieve the relative position binding between the UI element and the parent element, so the efficiency of the binding operation is low, which in turn affects the user experience. Summary of the Invention

[0005] The present disclosure provides an interface adaptation method, an interface adaptation device, a computer storage medium, and an electronic device, so as to improve the operation efficiency of performing the relative position binding between sub-component elements and a reference object in an interaction interface to be edited, thereby simplifying user operations and improving the user experience.

[0006] In a first aspect, an embodiment of the present disclosure provides an interface adaptation method, the method including: displaying an editing interface corresponding to an interface editing scene through a graphical user interface, the graphical user interface including a first interaction interface to be edited with a first screen aspect ratio, and the first interaction interface to be edited at least includes a plurality of sub-component elements; responding to a confirmation operation acting on a target sub-component element to generate a plurality of adaptation selection controls corresponding to the target sub-component element; wherein the plurality of adaptation selection controls are respectively used to adjust the relative position binding state of the target sub-component element and the reference object in each adaptation direction, the target sub-component element is any one of the plurality of sub-component elements, and the reference object is a sub-component element other than the target sub-component element among the plurality of sub-component elements or the first interaction interface to be edited; responding to a selection operation on a target adaptation selection control among the plurality of adaptation selection controls, updating the relative position binding state of the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control; and adaptively displaying the target sub-component element in a second interaction interface to be edited with a second screen aspect ratio based on the updated relative position binding state in the target adaptation direction.

[0007] Second aspect, an embodiment of the present disclosure provides an interface adaptation device, which includes: an editing interface display module configured to display an editing interface corresponding to an interface editing scenario through a graphical user interface, the graphical user interface including a first to-be-edited interaction interface with a first screen aspect ratio, and the first to-be-edited interaction interface at least includes a plurality of sub-component elements; an adaptation control generation module configured to generate a plurality of adaptation selection controls corresponding to a target sub-component element in response to a confirmation operation acting on the target sub-component element; wherein the plurality of adaptation selection controls are respectively used to adjust the relative position binding state of the target sub-component element and a reference object in each adaptation direction, the target sub-component element is any one of the plurality of sub-component elements, and the reference object is a sub-component element other than the target sub-component element among the plurality of sub-component elements or the first to-be-edited interaction interface; a binding state update module configured to update the relative position binding state of the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control in response to a selection operation on the target adaptation selection control among the plurality of adaptation selection controls; an interface adaptation display module configured to adaptively display the target sub-component element in a second to-be-edited interaction interface with a second screen aspect ratio based on the updated relative position binding state in the target adaptation direction.

[0008] Third aspect, an embodiment of the present disclosure provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, it implements the above interface adaptation method.

[0009] Fourth aspect, an embodiment of the present disclosure provides an electronic device, including: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to execute the above interface adaptation method by executing the executable instructions.

[0010] Fifth aspect, an embodiment of the present disclosure provides a computer program product, including a computer program, and when the computer program is executed by a processor, it implements the above interface adaptation method.

[0011] The technical solution of the present disclosure has the following beneficial effects:

[0012] The above interface adaptation method is such that the terminal device displays an editing interface corresponding to the interface editing scenario through a graphical user interface, which includes a first to-be-edited interactive interface with a first screen aspect ratio. When the terminal device responds to a selection operation on a target sub-component element in the first to-be-edited interactive interface, multiple adaptation selection controls can be generated for the target sub-component element. The user only needs to use the multiple adaptation selection controls displayed in the first to-be-edited interactive interface to respectively adjust the relative position binding state between the target sub-component element and a reference object in each adaptation direction, and thus can achieve quick binding or quick unbinding of the relative position. For example, if the adaptation selection control a is used to adjust the relative position binding state between the target sub-component element and its reference object in the upper direction, the user can, through different selection operations on the adaptation selection control a, achieve the relative position binding between the target sub-component element and its reference object in the upper direction, or achieve the release of the relative position between the target sub-component element and its parent component element in the upper direction, and then adaptively display the second to-be-edited interactive interface with a second screen aspect ratio based on the updated binding state. This process does not have the technical problems of long binding operation time and low efficiency caused by the need for multiple steps to complete the binding in related technical solutions, and achieves the technical effects of improving the binding operation efficiency and simplifying the user operation, thereby efficiently realizing the adaptive display of component elements between interfaces with different screen aspect ratios.

[0013] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and cannot limit the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0014] The drawings herein are incorporated into the specification and constitute a part of this specification, showing embodiments consistent with the present disclosure, and are used together with the specification to explain the principles of the present disclosure. Obviously, the drawings in the following description are only some embodiments of the present disclosure. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0015] Figure 1(a) - Figure 1(d) FIG. Schematically showing a schematic diagram of the process of adjusting the relative position binding state between a sub-component element and a reference object in each adaptation direction to achieve interface adaptation in one related technical solution shown in this exemplary embodiment;

[0016] Figure 2(a) - Figure 2(c) FIG. Schematically showing a schematic diagram of the display comparison of the graphical interface after switching the screen aspect ratio in one exemplary embodiment of this disclosure;

[0017] Figure 3(a) - Figure 3(c) FIG. Schematically showing a schematic diagram of the display of the interface adaptation result after verifying the adjustment of the binding state of the sub-component element in one related technical solution shown in this exemplary embodiment;

[0018] Figure 4 Schematically shows the architecture diagram of one of the interface adaptation systems in this exemplary embodiment;

[0019] Figure 5 Schematically shows the flowchart of one of the interface adaptation methods in this exemplary embodiment;

[0020] Figure 6 Schematically shows the diagram of multiple editing controls displayed for a target sub-component element in an initial mode in this exemplary embodiment;

[0021] Figure 7 Schematically shows the diagram of a display adaptation mode selection control in this exemplary embodiment;

[0022] Figure 8 Schematically shows the diagram of an interface editing scenario in an adaptation editing mode in this exemplary embodiment;

[0023] Figure 9 Schematically shows the diagram of the display of multiple adaptation selection controls in this exemplary embodiment;

[0024] Figure 10 Schematically shows another diagram of the display of multiple adaptation selection controls in this exemplary embodiment;

[0025] Figure 11(a) schematically shows the display diagram of one of the adaptation prompt controls in this exemplary embodiment;

[0026] Figure 11(b) schematically shows the diagram of the display of one of the prompt messages in this exemplary embodiment;

[0027] Figure 11(c) schematically shows the diagram of the display of one of the prompt messages in this exemplary embodiment;

[0028] Figure 12 Schematically shows the diagram of different display modes of one of the adaptation selection controls in this exemplary embodiment;

[0029] Figure 13(a) schematically shows the display diagram of an adaptation selection control when there is a parent component element in this exemplary embodiment;

[0030] Figure 13(b) schematically shows the display diagram of an adaptation selection control when there is no parent component element in this exemplary embodiment;

[0031] Figure 14(a) schematically shows the diagram of simultaneously displaying a preview interface and a first to-be-edited interaction interface in the form of a floating window in this exemplary embodiment;

[0032] FIG. 14(b) schematically shows a schematic diagram of one of the exemplary embodiments in which a preview interface and a first interactive interface to be edited are simultaneously displayed in a split-screen form;

[0033] FIG. 15(a) schematically shows a schematic diagram of one of the exemplary embodiments in which the size is adjusted by a first adjustment control;

[0034] FIG. 15(b) schematically shows a schematic diagram of one of the exemplary embodiments in which the position is adjusted by a second adjustment control;

[0035] Figure 16 Schematically shows a schematic diagram of manually switching to determine the aspect ratio of the second screen in one of the exemplary embodiments;

[0036] Figure 17 Schematically shows a schematic diagram of the structure of an interface adaptation device in one of the exemplary embodiments;

[0037] ​ Schematically shows a schematic diagram of the structure of an electronic device in one of the exemplary embodiments. Detailed Embodiments

[0038] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, the exemplary embodiments can be implemented in various forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be more thorough and complete, and will fully convey the concept of the exemplary embodiments to those skilled in the art. The features, structures, or characteristics described may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of the embodiments of the present disclosure. However, those skilled in the art will realize that the technical solutions of the present disclosure can be practiced without one or more of the specific details, or other methods, components, devices, steps, etc. may be employed. In other cases, well-known technical solutions are not shown or described in detail to avoid obscuring the various aspects of the present disclosure.

[0039] In addition, the drawings are only schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and thus repeated descriptions thereof will be omitted. Some of the block diagrams shown in the drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0040] The flowchart shown in the accompanying drawings is only an exemplary illustration and does not necessarily include all steps. For example, some steps can be further decomposed, while some steps can be combined or partially combined. Therefore, the actual execution order may change according to the actual situation.

[0041] In the related technical background, with the diversified development of terminal devices (such as mobile phones, tablets, large screens, in-vehicle devices, etc.), the aspect ratios of the screens of different terminal devices are also different. This makes developers need to consider adapting the application interface to different screen aspect ratios when developing application programs. In the user interface (UI) editor of a user-generated content (UGC) system, the relative position between the component elements (also called UI elements) in the graphical interface and a reference object can be bound, so that the UI element can be adaptively displayed based on the bound relative position on screens with different aspect ratios. Therefore, by setting the relative position binding relationship between the UI elements in the application interface and their reference objects, the UI elements can adaptively adjust their positions on screens with different aspect ratios, thus avoiding display deformation caused by using fixed positions.

[0042] For the sake of convenience of description, the following will combine ​ to make an exemplary illustration of the adapted interface diagrams formed by setting relative position binding and not setting relative position binding.

[0043] ​ Figure 1 schematically shows a comparison diagram of the interface adaptation results at different screen aspect ratios when relative position binding and no relative position binding are set in this exemplary embodiment. Taking the example of switching a graphical interface from a 375 screen to a 414 screen, when relative position binding is set, when switching to the 414 screen size, the size parameters of the correctly displayed graphical interface are shown in Figure 2(c) without deformation. When relative position binding is not set, the displayed graphical interface can be as shown in Figures 2(a) and 2(b).

[0044] Referring to Figure 2(a), graphic stretching occurs between the multiple UI elements displayed on the graphical interface. That is, compared with the correct display method shown in Figure 2(c), the two title UI elements are not aligned and the spacing between the UI elements changes. Referring to Figure 2(b), position scaling occurs between the multiple UI elements displayed on the graphical interface. That is, compared with the correct display method shown in Figure 2(c), the spacing of the edge positions between the UI element and its parent UI element changes.

[0045] In the current UI editor, in order to overcome the deformation problems shown in Figures 2(a) and 2(b) above, the following is usually adopted ​Steps are provided to set the relative position binding state between a UI element and its parent element, that is, to set the relative position binding between the UI element and its parent element, or to set that the relative position between the UI element and its parent element is not bound.

[0046] ​ FIG. 4 schematically shows a schematic diagram of an interface adaptation process demonstrated by a related technical solution in this exemplary embodiment. Referring to FIG. 1(a):

[0047] First step: Click and select UI element 101 from among multiple UI elements included in the graphical interface.

[0048] Second step: Select the "Advanced Settings" control 102 in the graphical user interface, and the interface shown in FIG. 1(b) is displayed.

[0049] Third step: By selecting the basic property control 103 in FIG. 1(b), the interface shown in FIG. 1(c) is displayed.

[0050] Fourth step: Select the jump item "Adjust Relative Binding Position" 104 in the interface shown in FIG. 1(c), and the "Adjust Relative Binding Position" interface shown in FIG. 1(d) is opened, which includes switch buttons for multiple adaptation directions such as left, right, top, bottom, horizontal, and vertical. By means of the adaptation switch buttons, the binding state of the relative position between the UI element and its reference object in the corresponding adaptation direction / the binding relationship of the relative position is adjusted.

[0051] For example, in the "Adjust Relative Binding Position" interface shown in FIG. 1(d), when the selection for the left adaptation direction is in the on state, the relative position between the UI element and its reference object is bound in the left adaptation direction.

[0052] In order to test and verify whether the binding relationship of the UI element is correct, the UI editor performs tests through the following ​ steps: First, select the setting control 301 shown in FIG. 3(a), and the setting interface shown in FIG. 3(b) is displayed in the graphical user interface. Select "Edit Settings" - "Screen Aspect Ratio Settings", and switch the resolution through the drop-down box. When a target screen aspect ratio is selected, the canvas of the UI element can be edited to switch it to the canvas of the target screen aspect ratio.

[0053] However, the above-mentioned related technical solutions have at least the following technical problems:

[0054] 1) Low binding operation efficiency.

[0055] Adaptive display under different screen aspect ratios is a necessary step in UI production, and referring to ​As shown, each UI element needs to go through the above-mentioned multiple operation steps to complete the relative position binding between each UI element and its parent element. This process is cumbersome, time-consuming, and has a high operation complexity, resulting in low binding operation efficiency and affecting the user experience.

[0056] 2) The binding relationship between the UI element and its reference object is difficult for users to understand and judge. Since setting the aspect ratio and the adaptation editing operation are not related in the interaction process and the interface, it is difficult for users to understand the relationship between the aspect ratio and the change of the UI element, making it impossible for some users to directly switch the aspect ratio.

[0057] 3) Based on the above ​ , when performing the screen aspect ratio test and verification, it is necessary to modify the aspect ratio of the editing canvas. After verification, the user also needs to modify it back to the original canvas aspect ratio by themselves, resulting in poor convenience.

[0058] In view of the above problems, an exemplary embodiment of the present disclosure proposes an interface adaptation method. This method can generate multiple adaptation selection controls for the target sub-component element. The user only needs to use the multiple adaptation selection controls displayed in the first graphical interface to respectively adjust the relative position binding state between the target sub-component element and the reference object in each adaptation direction, and then can achieve rapid binding or rapid unbinding of the relative position. For example, if the adaptation selection control a is used to adjust the relative position binding state between the target sub-component element and its reference object in the upper direction, the user can, through different selection operations on the adaptation selection control a, achieve the relative position binding between the target sub-component element and its reference object in the upper direction, or achieve the release of the relative position between the target sub-component element and its reference object in the upper direction, so as to adaptively display the second to-be-edited interaction interface with the second screen aspect ratio based on the binding state. This process does not have the technical problems of long binding operation time and low efficiency caused by the need for multiple steps to complete the binding in the related technical solutions, so as to achieve the technical effect of improving the binding operation efficiency and efficiently realizing the adaptive display of the component element interface between different screen aspect ratios. And this process can simplify the user operation and thus improve the user experience.

[0059] To solve the above problems, the present disclosure proposes an interface adaptation method and device. This method and device can be applied to ​ the system architecture of the exemplary application environment shown.

[0060] As ​As shown, the system architecture 400 may include a terminal device 401 and a server 402. The network 403 is used to provide a medium for the communication link between the terminal device 401 and the server 402. The network 403 may include various connection types, such as wired, wireless communication links, or fiber optic cables, etc. The terminal device 401 may be, for example, a smart phone, a personal digital assistant (PDA), a laptop computer, a server, a desktop computer, or any other computing device with networking capabilities, but is not limited thereto.

[0061] It should be understood that ​ the numbers of the terminal devices, networks, and servers in are merely illustrative. According to the implementation requirements, there can be any number of terminal devices, networks, and servers. For example, the server 402 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0062] The interface adaptation method provided by the embodiments of the present disclosure can be executed on the server 402. Correspondingly, the interface adaptation device is generally set in the server 402. The interface adaptation method provided by the embodiments of the present disclosure can also be executed in the terminal device 401. Correspondingly, the interface adaptation device can also be set in the terminal device 401. The interface adaptation method provided by the embodiments of the present disclosure can also be partially executed on the server 402 and partially executed in the terminal device. Correspondingly, some modules of the interface adaptation device can be set in the server 402, and some modules can be set in the terminal device 401.

[0063] For example, in an exemplary embodiment, the terminal device 401 may display an editing interface corresponding to the editing scene through the provided graphical user interface. The graphical user interface includes a first to-be-edited interaction interface with a first screen aspect ratio, and the first to-be-edited interaction interface at least includes a plurality of sub-component elements; the terminal device 401 generates a plurality of adaptation selection controls corresponding to the target sub-component element in response to a confirmation operation acting on the target sub-component element; wherein, the plurality of adaptation selection controls are respectively used to adjust the relative position binding state of the target sub-component element and the reference object in each adaptation direction, the target sub-component element is any one of the plurality of sub-component elements, and the reference object is a sub-component element other than the target sub-component element or the first graphical interface among the plurality of sub-component elements; in response to a selection operation on the target adaptation selection control among the plurality of adaptation selection controls, the relative position binding state of the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control is updated; based on the updated relative position binding state in the target adaptation direction, the target sub-component element is adaptively displayed in a second to-be-edited interaction interface with a second screen aspect ratio.

[0064] The interface adaptation method in one of the embodiments of the present disclosure can run on a local terminal device or a server. When the interface adaptation method runs on the server, the method can be implemented and executed based on a cloud interaction system, wherein the cloud interaction system includes a server and a client device.

[0065] In an alternative embodiment, various cloud applications can run under the cloud interaction system, such as cloud games. Taking cloud games as an example, cloud games refer to a game mode based on cloud computing. In the running mode of cloud games, the running entity of the game program and the presenting entity of the game screen are separated. The storage and running of the interface adaptation method are completed on the cloud game server, and the role of the client device is for data reception, sending, and presenting the game screen. For example, the client device can be a display device with data transmission function near the user side, such as a mobile terminal, a television, a computer, a palm computer, etc.; however, the information processing is performed by the cloud game server in the cloud. When playing a game, the player operates the client device to send an operation instruction to the cloud game server. The cloud game server runs the game according to the operation instruction, encodes and compresses data such as the game screen, returns it to the client device through the network, and finally, the client device decodes and outputs the game screen.

[0066] In an alternative embodiment, taking a game as an example, the local terminal device stores a game program and is used to present game screens. The local terminal device is used to interact with players through a graphical user interface, that is, conventionally, the game program is downloaded and installed on an electronic device and run. The ways for the local terminal device to provide the graphical user interface to players can include various methods. For example, it can be rendered and displayed on the display screen of the terminal, or provided to players through holographic projection. For example, the local terminal device can include a display screen and a processor. The display screen is used to present the graphical user interface, which includes game screens. The processor is used to run the game, generate the graphical user interface, and control the display of the graphical user interface on the display screen.

[0067] In a possible implementation manner, an embodiment of the present invention provides an interface adaptation method for providing a graphical user interface through a terminal device. The terminal device can be the aforementioned local terminal device or the client device in the aforementioned cloud interaction system.

[0068] However, those skilled in the art can easily understand that the above application scenarios are only for illustration and are not limited thereto in this exemplary embodiment.

[0069] Taking the above terminal device 401 as the execution subject, the interface adaptation method will be exemplified by applying it to the above terminal device 401. A graphical user interface is provided through the above terminal device. The terminal device can be the aforementioned local terminal device or the client device in the aforementioned cloud interaction system. ​ A flowchart of an interface adaptation method in this exemplary embodiment is schematically shown. Please refer to ​ The interface adaptation method provided by the embodiments of the present disclosure includes the following steps S501 - step S504:

[0070] Step S501: Display an editing interface corresponding to an interface editing scenario through the graphical user interface. The graphical user interface includes a first to-be-edited interactive interface with a first screen aspect ratio, and the first to-be-edited interactive interface at least includes a plurality of sub-component elements.

[0071] Step S502: Respond to a confirmation operation on a target sub-component element to generate a plurality of adaptation selection controls corresponding to the target sub-component element. Among them, the plurality of adaptation selection controls are respectively used to adjust the relative position binding state of the target sub-component element and a reference object in each adaptation direction. The target sub-component element is any one of the plurality of sub-component elements, and the reference object is a sub-component element other than the target sub-component element among the plurality of sub-component elements or the first to-be-edited interactive interface.

[0072] Step S503: In response to a selection operation on a target adaptation selection control among multiple adaptation selection controls, update the relative position binding state between the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control.

[0073] Step S504: Based on the updated relative position binding state in the target adaptation direction, adaptively display the target sub-component element in the second interactive interface to be edited with a second screen aspect ratio.

[0074] Based on the above ​ In the provided technical solution, the terminal device displays an editing interface corresponding to the interface editing scenario through the graphical user interface, which includes a first interactive interface to be edited with a first screen aspect ratio; when the terminal device responds to a selection operation on a target sub-component element in the first interactive interface to be edited, multiple adaptation selection controls can be generated for the target sub-component element. The user only needs to use the multiple adaptation selection controls displayed in the first interactive interface to be edited to respectively adjust the relative position binding state between the target sub-component element and the reference object in each adaptation direction, and can achieve rapid binding or rapid unbinding of the relative position. For example, by using the adaptation selection control a to adjust the relative position binding state between the target sub-component element and its reference object in the upper direction, the user can, through different selection operations on the adaptation selection control a, achieve the relative position binding between the target sub-component element and its reference object in the upper direction, or achieve the unbinding of the relative position between the target sub-component element and its parent component element in the upper direction, and then adaptively display it in the second interactive interface to be edited with a second screen aspect ratio based on the updated binding state. This process does not have the technical problems of long binding operation time and low efficiency caused by the need for multiple steps to complete the binding in the related technical solutions, and achieves the technical effects of improving the binding operation efficiency and simplifying the user operation, thereby efficiently realizing the adaptive display of component elements between interfaces with different screen aspect ratios.

[0075] The following will elaborate on the specific implementation manners of each step in the ​ illustrated embodiment in detail:

[0076] In step S501, an editing interface corresponding to the interface editing scenario is displayed through the graphical user interface. The graphical user interface includes a first interactive interface to be edited with a first screen aspect ratio, and the first interactive interface to be edited contains at least multiple sub-component elements.

[0077] Among them, the sub-component elements can be basic component elements, navigation component elements, input component elements, display component elements, interactive component elements, etc. Among them, the basic component elements are used to represent the basic elements in the interface design, such as icons, texts, buttons, pictures, cells, mask layers, pop-up layers, etc. The navigation component elements are used to provide guidance for users and help users quickly locate their current positions, such as the top navigation bar, bottom navigation bar, and side navigation bar. The input component elements are used for data entry, such as radio boxes, check boxes, input boxes, forms, selectors, etc. The display component elements are used to display relevant data content, such as avatars, logos, labels, lists, notification bars, etc. The interactive component elements are not only used to display data content but also undertake user interaction functions, including text fields (TextField), buttons (Button), check boxes (Checkbox), radio buttons (RadioButton), switches (Switch), sliders (Slider), pickers (Picker), etc. The embodiments of the present disclosure do not make an exhaustive list and any special restrictions on the types of interface elements.

[0078] Among them, the first interactive interface to be edited is an interactive interface with a canvas having a first screen aspect ratio; the screen aspect ratio represents the ratio of the width to the height of the screen, and common screen aspect ratios include 16:9 (such as non-full-screen mobile phones), 20:9 (such as full-screen mobile phones), 19:9 (such as full-screen mobile phones), 4:3 (such as tablet devices of the Apple system), 16:10 (such as tablet devices of the Android system), or other screen sizes, etc. The embodiments of the present disclosure do not make any exhaustive list in this regard.

[0079] Exemplarily, the graphical user interface provided by the terminal device includes an editing interface corresponding to the interface editing scenario, specifically including a first interactive interface to be edited having a first screen aspect ratio, and the first interactive interface to be edited includes multiple sub-component elements. The user can respectively perform corresponding adjustment of the binding relationship state for each sub-component element in the first interactive interface to be edited.

[0080] In step S502, in response to the confirmation operation acting on the target sub-component element, a plurality of adaptation selection controls corresponding to the target sub-component element are generated; among them, the plurality of adaptation selection controls are respectively used to adjust the relative position binding state of the target sub-component element and the reference object in each adaptation direction, the target sub-component element is any one of the multiple sub-component elements, and the reference object is a sub-component element other than the target sub-component element among the multiple sub-component elements or the first interactive interface to be edited.

[0081] Among them, each adaptation direction can be the upper direction, lower direction, left direction, right direction, vertical direction, horizontal direction, etc.

[0082] Before performing the above S502, that is, the step of generating a plurality of adaptation selection controls corresponding to the target sub-component element in response to the confirmation operation acting on the target sub-component element, in order to improve the flexibility of user operations and adapt to different operation requirements, an adaptation mode selection control may be provided in the graphical user interface, so that the user can select whether the current interface editing scenario is in the initial mode or the adaptation editing mode through the adaptation mode selection control.

[0083] Embodiment 1: The interface editing scenario is in the initial mode.

[0084] In an optional embodiment of the present disclosure, when the interface editing scenario is in the initial mode, the terminal device responds to the confirmation operation acting on the target sub-component element, generates at least one editing control for the target sub-component element, and responds to the third touch operation acting on the editing control to perform the editing operation corresponding to the editing control on the target sub-component element.

[0085] Among them, the third touch operation may be a click operation, a slide operation, a long press operation, a double click operation or other types of operations, etc., and the embodiments of the present disclosure do not impose any special restrictions on this.

[0086] Exemplarily, when the interface editing scenario is in the initial mode, when the user performs a selection operation on the target sub-component element in the first to-be-edited interactive interface, the terminal device may generate and display one or more editing controls for the target sub-component element, so as to perform corresponding editing operations on the target sub-component element based on the editing controls.

[0087] ​ Schematically shows a schematic diagram of a plurality of editing controls displayed for the target sub-component element in one of the initial modes of this exemplary embodiment. Refer to ​ As shown, in the initial mode, when the terminal device responds to the confirmation operation acting on the target sub-component element 601, four editing controls are generated around the target sub-component element 601, namely editing control 6021, editing control 6022, editing control 6023, and editing control 6024. For example, through the editing control 6021, the movement operation of the target sub-component element 601 can be controlled; through the editing control 6022, the size enlargement and reduction operations of the target sub-component element 601 can be controlled; through the editing control 6023, the copy operation of the target sub-component element 601 can be implemented; through the editing control 6024, the return operation of the target sub-component element 601 can be implemented to implement operations such as returning to the previous page or returning to the home screen of the application program.

[0088] It can be understood that the above ​The displayed editing control is used to represent the corresponding types of editing operations performed on the target sub-component element 601. The quantity, display position, display identifier, and achievable editing operations corresponding to its display are merely exemplary, and the embodiments of the present disclosure do not enumerate them exhaustively.

[0089] Embodiment 2: The interface editing scenario is in the adaptation editing mode.

[0090] In an optional embodiment of the present disclosure, in response to a second touch operation on the adaptation mode selection control, the interface editing scenario is controlled to enter the adaptation editing mode from the initial mode. Thus, in the adaptation editing mode, the terminal device responds to the confirmation operation acting on the target sub-component element and generates a plurality of adaptation selection controls corresponding to the target sub-component element.

[0091] Exemplarily, an adaptation mode selection control can be provided in the graphical user interface, and by performing a second touch operation on the adaptation mode selection control, the interface editing scenario can be controlled to enter the adaptation editing mode from the initial mode. At this time, in the adaptation editing mode, when responding to the confirmation operation acting on the target sub-component element, a plurality of adaptation selection controls corresponding to the target sub-component element are generated.

[0092] For ease of explanation, the following will be combined with ​ An exemplary description of the above process of displaying the adaptation mode selection control and entering the adaptation editing mode will be given.

[0093] ​ A schematic diagram schematically showing one way of displaying the adaptation mode selection control in this exemplary embodiment is shown. Referring to ​ as shown, an adaptation mode selection control is displayed on the graphical user interface (corresponding to ​ the adaptation control 701 in ​ the adaptation control 701 in

[0094] Performing a second touch operation on the adaptation control 701 in

[0095] ​ can switch the interface editing scenario from the initial mode to the adaptation editing mode. ​As shown, an adaptation mode exit control 801 is displayed in the graphical user interface. Through a touch operation on the adaptation mode exit control 801, the user can control the interface editing scene to resume from the adaptation editing mode to the initial mode.

[0096] In an optional embodiment, during the process of controlling the interface editing scene to enter the adaptation editing mode from the initial mode, or controlling the interface editing scene to resume from the adaptation editing mode to the initial mode, the interface canvas parameters of the first interactive interface to be edited are kept unchanged.

[0097] Among them, the interface canvas parameters include one or more of the canvas position and canvas size of the first interactive interface to be edited.

[0098] In this way, the user can flexibly select whether to enter the adaptation editing mode through the adaptation mode selection control provided by the graphical user interface, and after entering the adaptation editing mode, the user can also control to exit the adaptation editing mode through the adaptation mode exit control, improving the flexibility of user operations. And through the above method, different performances of a single control in different modes can be realized, thus improving the richness of functions.

[0099] Continue to refer to step S502 to respond to the confirmation operation acting on the target sub-component element, and generate a plurality of adaptation selection controls corresponding to the target sub-component element. The following will illustrate the generation of a plurality of adaptation selection controls corresponding to the target sub-component element in combination with specific embodiments.

[0100] In an optional embodiment of the present disclosure, in response to the confirmation operation acting on the target sub-component element, a plurality of adaptation selection controls are generated in multiple directions around the target sub-component element.

[0101] Among them, the direction in which each adaptation selection control is generated around the target sub-component element is consistent with the adaptation direction represented by each adaptation selection control.

[0102] Exemplarily, a plurality of adaptation selection controls can be generated in multiple directions around the target sub-component element. For the convenience of description, the following will combine ​ to exemplarily illustrate the display positions of the plurality of adaptation selection controls.

[0103] <so> ​ Schematically shows a schematic diagram of the display of one of the plurality of adaptation selection controls in this exemplary embodiment; refer to ​As shown, in response to a confirmation operation acting on the target sub-component element 901, multiple adaptation selection controls are generated in multiple directions around the target sub-component element 901. They are the adaptation selection control 9022 above the target sub-component element 901, the adaptation selection control 9024 below the target sub-component element 901, the adaptation selection control 9023 to the left of the target sub-component element 901, and the adaptation selection control 9021 to the right of the target sub-component element 901.

[0104] In addition, the directions in which the above adaptation selection controls are generated around the target sub-component element are consistent with the adaptation directions represented by the adaptation selection controls. For example, taking the adaptation selection control 9022 above the target sub-component element 901 as an example, it is used to represent the relative position between the upper side of the target sub-component element 901 and the reference object, and the same applies to the adaptation selection controls in other directions.

[0105] Through the above embodiments, the directions in which the adaptation selection controls are generated around the target sub-component element are made consistent with the adaptation directions represented by the adaptation selection controls, which conforms to the user's operation cognition, facilitates the user's understanding, and quickly realizes the adjustment of the relative position binding state in the corresponding direction, thereby improving the user operation efficiency.

[0106] Furthermore, for the convenience of more intuitively understanding the adaptation directions represented by the adaptation selection controls, the adaptation selection controls may further include connection identifiers.

[0107] In an alternative embodiment of the present disclosure, the connection identifier is located between the boundary position of the reference object in the adaptation direction and the adaptation selection control.

[0108] Exemplarily, the adaptation selection control may further include a connection identifier, which is used to connect between the boundary position of the reference object in the adaptation direction and the adaptation selection control. For the convenience of description, the following will be combined with ​ to give an exemplary illustration of the adaptation selection control including the connection identifier.

[0109] ​ Schematically shows another schematic diagram of the display of multiple adaptation selection controls in this exemplary embodiment; referring to ​ As shown, an adaptation selection control is respectively displayed above, below, to the left, and to the right of the target sub-component element 1001. Taking the adaptation selection control to the right of the target sub-component element 1001 as an example, this adaptation selection control includes a control identifier and a connection identifier 1003, and this connection identifier 1003 is located between the right edge position point 1004 of the reference object 1002 and the target sub-component element 1001.

[0110] In addition, referring to ​, the connection identifier 1003 can also point from the target sub-component element 1001 to the right edge position point 1004 of the reference object 1002, so as to visually display the adaptation direction represented by the adaptation selection control, and realize the binding of the relative positions of the target sub-component element 1001 and the reference object in this adaptation direction.

[0111] Through the above method, during the editing process of the binding relationship, the adaptation direction it represents can be visually and intuitively displayed to the user, so as to facilitate the user's understanding and quick binding, thereby improving the convenience of user operation and reducing the complexity of user operation.

[0112] Furthermore, in order to visually remind the user, an adaptation prompt control can also be provided through the graphical user interface. When the terminal device responds to the confirmation operation on the target sub-component element, an adaptation prompt control can also be displayed in the graphical user interface; in response to the touch operation on the adaptation prompt control, prompt information is generated for the target sub-component element and / or multiple adaptation selection controls.

[0113] Among them, the prompt information is used to indicate the operation methods for the target sub-component element and / or multiple adaptation selection controls.

[0114] Exemplarily, through the adaptation prompt control provided by the graphical user interface, prompt information for the target sub-component element and / or multiple adaptation selection controls can be generated, so that the user can master the functions and operation methods of each control according to the prompt information.

[0115] The following will be combined with ​ to illustrate the above embodiments.

[0116] Referring to Figure 11(a), an adaptation prompt control 1101 is provided at the upper right corner of the graphical user interface. Through the touch operation on the adaptation prompt control 1101 by the user, as shown in Figure 11(b), the corresponding prompt information can be displayed at the associated positions of the target sub-component element and multiple adaptation selection controls.

[0117] In order to simplify the interface editing scenario and avoid too much information displayed on the interface, when the terminal device responds to the confirmation operation on the target sub-component element, an adaptation prompt control can also be displayed in the graphical user interface; in response to the touch operation on the adaptation prompt control, partial prompt information and prompt sub-controls are generated for the target sub-component element and / or multiple adaptation selection controls; in response to the touch operation on the prompt sub-control, a prompt information box is displayed to display all the prompt information.

[0118] Referring to FIG. 11(c), for the target sub-component element, and / or generate partial prompt information and prompt sub-controls for multiple adaptation selection controls. Through the touch operation on the prompt sub-control, the comprehensive prompt information can be displayed in a pop-up box form.

[0119] After generating multiple adaptation selection controls in the above embodiment, continue to refer to step S503. In response to the selection operation on the target adaptation selection control among the multiple adaptation selection controls, update the relative position binding state of the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control.

[0120] Among them, the target adaptation selection control is any one of the multiple adaptation selection controls. The relative position binding state can include two states: relative position bound and relative position unbound.

[0121] Exemplarily, when the terminal device responds to the selection operation on the target adaptation selection control among the multiple adaptation selection controls, update the relative position binding state of the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control. Specifically, when the initial relative position binding state is relative position bound, through the selection operation on the target adaptation selection control, it is updated to the relative position unbound state. Conversely, when the initial relative position binding state is the relative position unbound state, through the selection operation on the target adaptation selection control, it is updated to the relative position bound state.

[0122] In addition to the above embodiments, different selection operations can also be performed to adjust the relative position binding state.

[0123] In an optional embodiment of the present disclosure, in response to the first selection operation on the target adaptation selection control, control the binding of the relative position of the target sub-component element and the reference object in the target adaptation direction; in response to the second selection operation on the target adaptation selection control, control the unbinding of the relative position of the target sub-component element and the reference object in the target adaptation direction.

[0124] Exemplarily, the target adaptation selection control can be a switch control, or different display forms are used to implement different selection operations by the user. It should be noted that unbinding can be updated from the binding state to the non-binding state, or it can be in the default non-binding state.

[0125] The above first selection operation and second selection operation will be exemplarily described below in conjunction with Embodiment a and Embodiment b.

[0126] Embodiment a: The target adaptation selection control is displayed in the form of a switch control.

[0127] In response to a first selection operation (e.g., "on") on the target adaptation selection control, control the binding of the relative position of the target sub-component element and the reference object in the target adaptation direction; conversely, in response to a second selection operation (e.g., "off") on the target adaptation selection control, control the unbinding of the relative position of the target sub-component element and the reference object in the target adaptation direction.

[0128] Embodiment b: Different display forms of the target adaptation selection control show different selection operations performed on it.

[0129] In an alternative embodiment of the present disclosure, in response to a first selection operation on the target adaptation selection control, display the target adaptation selection control in a first display manner; or, in response to a second selection operation on the target adaptation selection control, display the target adaptation selection control in a second display manner.

[0130] Among them, the first display manner and the second display manner have one or more of the following differences:

[0131] Display color;

[0132] Display style of the control identifier.

[0133] For ease of understanding, the following will combine ​ to give an exemplary illustration of the first display manner and the second display manner.

[0134] Referring to ​ as shown, when the target sub-component element and the reference object are bound in the relative position in the upper-side adaptation direction and the right-side adaptation direction, they are displayed in the first display manner; while when the target sub-component element and the reference object are unbound in the relative position in the lower-side adaptation direction and the left-side adaptation direction, they are displayed in the second display manner. As ​ can be seen, the first display manner and the second display manner are different in the display style of the control identifier; in addition, their display colors can also be made different. For example, the adaptation selection controls around the upper-side direction and the right-side direction of the target sub-component element are displayed in yellow, and the adaptation selection controls around the lower-side direction and the left-side direction of the target sub-component element are displayed in white.

[0135] Based on this, when the target adaptation selection control represents unbinding in the adaptation direction and presents the second display manner, by performing a first selection operation on it, while controlling the binding of the relative position of the target sub-component element and the reference object in the target adaptation direction, the second display manner can also be updated to the first display manner. Conversely, performing a second selection operation to control the unbinding of the relative position of the target sub-component element and the reference object in the target adaptation direction while also updating the first display manner to the second display manner.

[0136] That is to say, in this Embodiment b, the first selection operation is an operation method for updating the target adaptation selection control from the second display form to the first display form, and the second selection operation is an operation method for updating the target adaptation selection control from the first display form to the second display form.

[0137] It should be understood that in addition to the above-mentioned different display methods, other methods may also be included, and the embodiments of the present disclosure do not enumerate them exhaustively.

[0138] Furthermore, in this method, the user can also provide an adaptation trigger control through the graphical user interface, so that the user can adjust the relative position binding state of each adaptation direction through the state selection controls corresponding to each adaptation direction included in the adaptation adjustment interface.

[0139] In an optional embodiment of the present disclosure, in response to a confirmation operation on the target sub-component element, an adaptation trigger control is displayed in the graphical user interface; in response to a first touch operation on the adaptation trigger control, an adaptation adjustment interface for the target sub-component element is displayed; wherein, the adaptation adjustment interface includes state selection controls corresponding to each adaptation direction; in response to a selection operation on the target adaptation selection control, the switch state of the state selection control corresponding to the target adaptation direction in the adaptation adjustment interface is updated, so that the updated switch state represents the updated relative position binding state in the target adaptation direction.

[0140] Among them, the adaptation trigger control can be displayed before the confirmation operation on the target sub-component element, but it is in a non-triggerable state.

[0141] Exemplarily, the adaptation adjustment interface can be called out through the adaptation trigger control, and the adaptation adjustment interface includes state selection controls for each adaptation direction, so as to represent the relative position binding state in this adaptation direction through the display state of the state selection control. That is, the function of the state selection control is the same as that of each adaptation selection control. Therefore, when responding to a selection operation on the target adaptation selection control, it is necessary to synchronously update the switch state of the state selection control corresponding to the target adaptation direction in the adaptation adjustment interface to keep the binding state consistent.

[0142] In addition, when performing the step of updating the relative position binding state between the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control, the reference object can be a sub-component element other than the target sub-component element among the multiple sub-component elements or the first to-be-edited interaction interface.

[0143] In one embodiment, it is determined according to whether the target sub-component element includes a parent component element.

[0144] In an optional embodiment of the present disclosure, in response to the existence of a parent component element for the target sub-component element, the relative position binding state of the target sub-component element and the parent component element in the target adaptation direction corresponding to the target adaptation selection control is updated; in response to the non-existence of a parent component element for the target sub-component element, the relative position binding state of the target sub-component element and the first interactive interface to be edited in the target adaptation direction corresponding to the target adaptation selection control is updated.

[0145] Exemplarily, there is usually a hierarchical structure among multiple sub-component elements included in the editing interface. For the target sub-component element located in the hierarchical structure, it can be pre-determined whether the target sub-component element has a parent component element.

[0146] Exemplarily, when it is determined that the target sub-component element has a parent component element, the parent component element can be used as a reference object; conversely, if the target sub-component element does not have a parent component element, the first interactive interface to be edited can be directly used as a reference object. There is a situation where the target sub-component element has a parent component element, and the parent component element is the first interactive interface to be edited.

[0147] The following will separately describe the cases of the existence and non-existence of a parent component element with reference to FIGS. 13(a) and 13(b).

[0148] FIG. 13(a) shows the display mode when there is a parent component element. When there is a parent component element, the relative position binding state of the target sub-component element and the parent component element in the target adaptation direction corresponding to the target adaptation selection control is updated.

[0149] FIG. 13(b) shows the display mode when there is no parent component element. When there is no parent component element, the first interactive interface to be edited is used as a reference object. Therefore, the relative position binding state of the target sub-component element and the first interactive interface to be edited in the target adaptation direction corresponding to the target adaptation selection control is updated.

[0150] By the above method, when binding the relative positions, it only needs to bind it with the parent component element in the corresponding adaptation direction on the basis of the hierarchical structure, which can simplify the data calculation amount in the interface adaptation process.

[0151] In step S504, based on the updated relative position binding state in the target adaptation direction, the target sub-component element is adaptively displayed in the second interactive interface to be edited with the second screen aspect ratio.

[0152] Exemplarily, after determining the updated relative position binding state in the target adaptation direction, the target sub-component element can be adaptively displayed in the second interactive interface to be edited with the second screen aspect ratio.

[0153] In related technical solutions, ​ the second to-be-edited interaction interface for switching the aspect ratio of the second screen is implemented in a certain way to view the adapted display result. However, the above method is complex to operate, and the user also needs to modify the original canvas aspect ratio by himself, resulting in poor convenience.

[0154] To solve the above technical problems, in an optional embodiment of the present disclosure, the preview interface and the first to-be-edited interaction interface can be simultaneously displayed in the graphical user interface through the target display mode.

[0155] Among them, the preview interface includes a thumbnail of the to-be-edited interface corresponding to the second to-be-edited interaction interface; the thumbnail of the to-be-edited interface includes a target sub-component element mapping identifier corresponding to the target sub-component element and a reference object mapping identifier corresponding to the reference object, and the relative positions of the target sub-component element mapping identifier and the reference object mapping identifier in the thumbnail of the to-be-edited interface are determined according to the updated relative position binding state.

[0156] Among them, the target sub-component element mapping identifier refers to the identifier that maps the target sub-component element identifier in the first to-be-edited interaction interface to the second to-be-edited interaction interface, and the reference object mapping identifier refers to the identifier that maps the reference object identifier in the first to-be-edited interaction interface to the second to-be-edited interaction interface.

[0157] Exemplarily, the preview interface is used to display the thumbnail corresponding to the second to-be-edited interaction interface of the second screen size. It includes the target sub-component element mapping identifier corresponding to the target sub-component element and the reference object mapping identifier corresponding to the reference object, and their relative positions in the thumbnail of the to-be-edited interface can be determined according to the updated relative position binding state.

[0158] Correspondingly, the target sub-component element mapping identifier corresponding to the target sub-component element and the reference object mapping identifier corresponding to the reference object are displayed in the thumbnail of the to-be-edited interface. Compared with the target sub-component element and the reference object displayed in the first to-be-edited interaction interface, the displayed size is reduced, for example, it can be reduced proportionally according to the reduction ratio. The embodiments of the present disclosure do not make any special restrictions on this.

[0159] It can be understood that when the relative position of the target sub-component element in the first to-be-edited interaction interface changes, the relative position in the second to-be-edited interaction interface will also change synchronously.

[0160] In addition, for the convenience of users' portable operations, the corresponding screen aspect ratio of the thumbnail of the interface to be edited can be displayed. For example, referring to FIGS. 14(a) and 14(b), the screen aspect ratio adopted for the floating window / target split-screen display. Of course, the corresponding screen aspect ratio can also be displayed for the first interface to be edited interactively.

[0161] When performing the above steps of simultaneously displaying the preview interface and the first interface to be edited interactively in the graphical user interface through the target display mode, in an optional embodiment of the present disclosure, in response to the first interface to be edited interactively entering the adaptation editing mode, the preview interface and the first interface to be edited interactively are simultaneously displayed in the graphical user interface through the target display mode.

[0162] After controlling the interface editing scene to enter the adaptation editing mode from the initial mode through the second touch operation on the control for the adaptation mode, the preview interface and the first interface to be edited interactively can be simultaneously displayed in the graphical user interface.

[0163] For the target display mode in the above embodiments, it is used to provide multiple display modes for the user to select. In this regard, in an optional embodiment of the present disclosure, an adaptation interface selection control is provided through the graphical user interface. In response to the fourth touch operation on the adaptation interface selection control, the target display mode is determined according to the fourth touch operation.

[0164] Among them, the adaptation interface selection control is configured with at least two candidate display modes, and the target display mode is one of the at least two candidate display modes.

[0165] Exemplarily, through the adaptation interface selection control provided by the graphical user interface, the target display mode can be selected from the provided multiple candidate display modes, and then the preview interface and the first interface to be edited interactively are simultaneously displayed in the graphical user interface according to the target display mode.

[0166] In an optional embodiment, the adaptation interface selection control is configured with at least two candidate display modes, and the candidate display modes at least include a first display mode and a second display mode.

[0167] Among them, the first display mode is to control the preview interface to be displayed in the form of a floating window on the upper layer of the first interface to be edited interactively, and the second display mode is to control the preview interface and the first interface to be edited interactively to be displayed in a split-screen form.

[0168] The above two candidate display modes will be described below with reference to FIGS. 14(a) and 14(b) respectively.

[0169] As shown in FIG. 14(a), in response to the first interactive interface to be edited entering the adaptation editing mode, the terminal device displays the preview interface 1403 above the first interactive interface to be edited 1402 in the form of a floating window in the graphical user interface 1401 through the first display mode.

[0170] In addition to the method shown in FIG. 14(a), when the preview interface and the first interactive interface to be edited are simultaneously displayed in the form of a floating window in the graphical user interface 1401 through the first display mode, the preview interface and the first interactive interface to be edited may not overlap, and there is no upper and lower relationship between the preview interface and the first interactive interface to be edited.

[0171] As shown in FIG. 14(b), in response to the first interactive interface to be edited entering the adaptation editing mode, the terminal device simultaneously displays the preview interface 1403 and the first interactive interface to be edited 1402 in the graphical user interface 1401 in a split-screen form through the second display mode.

[0172] Moreover, the graphical user interface provides an adaptation interface selection control 1404 to determine the target display mode through a fourth trigger operation on the adaptation interface selection control.

[0173] It should be noted that the split-screen display mode of the preview interface and the first interactive interface to be edited can be horizontal split-screen or vertical split-screen, and the display positions of the preview interface and the first interactive interface to be edited are not restricted.

[0174] Furthermore, editing operations can be performed on the floating window or the target split-screen. For specific details, refer to the following embodiments:

[0175] In an optional embodiment of the present disclosure, when the preview interface and the first interactive interface to be edited are displayed in the form of a floating window or a split-screen, a first adjustment control can also be displayed for the floating window or the target split-screen; in response to a fifth touch operation on the first adjustment control, the size of the floating window is adjusted according to the first moving direction of the fifth touch operation; or, the size of the target split-screen is adjusted according to the first moving direction of the fifth touch operation.

[0176] Among them, the target split-screen is the split-screen used to present the preview interface.

[0177] Exemplarily, a first adjustment control can also be provided for the floating window or the target split-screen to adjust the display size of the floating window or the target split-screen based on the first adjustment control.

[0178] Figure 15(a) shows the preview interface and the first interactive interface to be edited in the form of a floating window. Taking the example of enlarging the display size of the floating window, for the floating window, when the first adjustment control 1501 moves in the direction indicated by the arrow, while enlarging the floating window, the preview interface in the floating window and the identifier in the preview interface are adaptively displayed.

[0179] Figure 15(b) shows the preview interface and the first interactive interface to be edited in the form of split screen. Taking the example of enlarging the display size of the target split screen, for the floating window, when the first adjustment control 1501 moves in the direction indicated by the arrow, while enlarging the target split screen, the preview interface in the target split screen and the identifier in the preview interface are adaptively displayed.

[0180] In an optional embodiment of the present disclosure, when the preview interface and the first interactive interface to be edited are displayed in the form of a floating window or split screen, a second adjustment control can also be displayed for the floating window or the target split screen; in response to a sixth touch operation on the second adjustment control, the display position of the floating window is adjusted according to the second moving direction of the sixth touch operation; or, the display position of the target split screen is adjusted according to the second moving direction of the sixth touch operation.

[0181] Exemplarily, a second adjustment control for moving its display position can also be provided for the floating window or the target split screen, so that the user can adjust according to the needs, improving the flexibility of user operation.

[0182] When adaptively displaying the target sub-component element in the second interactive interface to be edited with the second screen aspect ratio according to the updated relative position binding state in the target adaptation direction in step S504 above, it is necessary to pre-determine the second screen aspect ratio corresponding to the second interactive interface to be edited.

[0183] Embodiment A: Automatically determine the second screen aspect ratio.

[0184] In an optional embodiment of the present disclosure, obtain a plurality of first candidate screen aspect ratios to be adapted; determine the candidate screen aspect ratio with the largest difference between the screen resolutions corresponding to the plurality of first candidate screen aspect ratios and the screen resolution of the first screen aspect ratio as the second screen aspect ratio; display the thumbnail of the interface to be edited of the second interactive interface to be edited in the preview interface according to the second screen aspect ratio.

[0185] Exemplarily, the candidate screen aspect ratio with the largest difference between the screen resolutions corresponding to the plurality of first candidate screen aspect ratios and the screen resolution of the first screen aspect ratio can be determined as the second screen aspect ratio, so as to mirror the user interface in the first interactive interface to be edited in the thumbnail of the interface to be edited in the second interactive interface to be edited.

[0186] Embodiment B: Manually determine the second screen aspect ratio.

[0187] In an optional embodiment of the present disclosure, a screen type selection component is included in the graphical user interface. Based on the screen type selection component, a plurality of second candidate screen aspect ratios to be adapted are provided; in response to a selection operation for a target screen aspect ratio among the plurality of candidate screen aspect ratios, the target screen aspect ratio is determined as the second screen aspect ratio; and a thumbnail of the to-be-edited interface of the second to-be-edited interactive interface is displayed in the preview interface according to the second screen aspect ratio.

[0188] Exemplarily, a plurality of second candidate screen aspect ratios to be adapted can be provided through the screen type selection component for the user to select. The user can select a target screen aspect ratio from the plurality of candidate screen aspect ratios and use it as the second screen aspect ratio to mirror and adapt the plurality of sub-component elements in the first screen aspect ratio to be displayed in the thumbnail of the to-be-edited interface of the second screen aspect ratio.

[0189] ​ Schematically shows a schematic diagram of manually switching to determine the second screen aspect ratio in one of the exemplary embodiments. Refer to ​ As shown, a plurality of second candidate screen aspect ratios to be adapted can be displayed through the screen type selection component. The screen type selection component can have two states, one of which is the ​ expanded state shown, and the other is the collapsed state. When in the expanded state, it is convenient for the user to select a target screen aspect ratio therefrom and use it as the second screen aspect ratio.

[0190] Further, when the first to-be-edited interactive interface and the preview interface are simultaneously displayed, in an optional embodiment of the present disclosure, when performing the above-mentioned confirmation operation on the target sub-component element, in order to facilitate the user to intuitively view the currently edited target sub-component element, the target sub-component elements in the first to-be-edited interactive interface and the thumbnail of the to-be-edited interface can be updated to the selected state. This process can reduce the user's understanding cost of the binding relationship of UI elements and reduce the operation difficulty.

[0191] In an optional embodiment of the present disclosure, the interface canvas parameters, the plurality of sub-component elements, and the hierarchical structure of the plurality of sub-component elements in the thumbnail of the to-be-edited interface corresponding to the second to-be-edited interactive interface in any of the above embodiments are in an uneditable state.

[0192] The interface canvas parameters include one or more of the canvas position and the canvas size of the thumbnail of the to-be-edited interface.

[0193] Exemplarily, the interface canvas parameters in the thumbnail of the to-be-edited interface corresponding to the second to-be-edited interactive interface are all uneditable and only have a display effect.

[0194] Continuing to refer to step S504, after updating the relative position binding state in the target adaptation direction, based on the updated relative position binding state in the target adaptation direction, when adapting and displaying the target sub-component element in the second interactive interface to be edited with the second screen aspect ratio, it can be implemented based on the following embodiments:

[0195] In an optional embodiment of the present disclosure, in response to the updated relative position binding state in the target adaptation direction being bound, determine a first adjustment ratio based on the first screen aspect ratio and the second screen aspect ratio; determine the second relative distance between the target sub-component element and the reference object in the target adaptation direction in the second interactive interface to be edited based on the first relative distance between the target sub-component element and the reference object in the target adaptation direction in the first interactive interface to be edited and the first adjustment ratio; adapt and display the target sub-component element in the second interactive interface to be edited with the second screen aspect ratio based on the second relative distance.

[0196] The reference object can be the parent component element of the target sub-component element or the first interactive interface to be edited.

[0197] Exemplarily, that is, the first screen aspect ratio and the second screen aspect ratio can determine the first adjustment ratio. For example, determine the first adjustment ratio in the horizontal direction (left adaptation direction, right adaptation direction) according to the ratio between the pixel values of the canvas width in the first screen aspect ratio and the pixel values of the canvas width in the second screen aspect ratio; determine the second adjustment ratio in the vertical direction (upper adaptation direction, lower adaptation direction) based on the ratio between the pixel values of the canvas height in the first screen aspect ratio and the pixel values of the canvas height in the second screen aspect ratio, and then determine the second relative distance in the horizontal direction based on the first adjustment ratio and determine the second relative distance in the vertical direction based on the second adjustment ratio.

[0198] In addition to determining the first adjustment ratio in the above embodiment, it can also be determined according to the screen width / height ratio relationship. The embodiments of the present disclosure do not impose any special restrictions on this.

[0199] In an optional embodiment of the present disclosure, in response to the updated relative position binding state in the target adaptation direction being unbound, determine a second adjustment ratio based on the first screen aspect ratio and the second screen aspect ratio; determine the fourth relative distance between the target sub-component element and the target position of the reference object in the second interactive interface to be edited based on the third relative distance between the target sub-component element and the target position of the reference object in the first interactive interface to be edited and the second adjustment ratio; adapt and display the target sub-component element in the second interactive interface to be edited with the second screen aspect ratio based on the fourth relative distance.

[0200] Among them, the reference object may be the parent component element of the target sub-component element or the first interactive interface to be edited. The target position of the reference object may be the lower left corner position of the reference object or other fixed positions, and the embodiments of the present disclosure do not impose any special restrictions on this.

[0201] Exemplarily, an adjustment ratio may be determined based on the first screen aspect ratio and the second screen aspect ratio, so as to determine the fourth relative distance between the target sub-component element and the target position of the reference object in the second interactive interface to be edited through the third relative distance between the target positions of the reference object and the adjustment ratio.

[0202] Further, on the basis of the above embodiments in which the preview interface and the first interactive interface to be edited are simultaneously displayed in the graphical user interface, when performing step S504, it may be implemented based on the following embodiments:

[0203] An adjustment ratio may be determined based on the first screen aspect ratio and the second screen aspect ratio, and the display position of the target sub-component is determined in combination with the scaling ratio of the thumbnail of the interactive interface to be edited. It should be understood that when determining the adjustment ratio relationship, since it is determined according to the ratio between pixel values, when the target sub-component element with the first screen aspect ratio is adapted and displayed in the second screen aspect ratio, the size of the target sub-component element represented by pixels will also change accordingly.

[0204] To implement the above interface adaptation method, an interface adaptation device is provided in an embodiment of the present disclosure. ​ A schematic structural diagram of the interface adaptation device is schematically shown.

[0205] Among them, the interface adaptation device 1700 includes an editing interface display module 1701, an adaptation control generation module 1702, a binding state update module 1703, and an interface adaptation display module 1704.

[0206] The editing interface display module 1701 is configured to display, through a graphical user interface, an editing interface corresponding to an interface editing scenario. The graphical user interface includes a first to-be-edited interaction interface having a first screen aspect ratio, and the first to-be-edited interaction interface includes at least a plurality of sub-component elements; the adaptation control generation module 1702 is configured to generate, in response to a confirmation operation on a target sub-component element, a plurality of adaptation selection controls corresponding to the target sub-component element; wherein the plurality of adaptation selection controls are respectively used to adjust the relative position binding state of the target sub-component element and a reference object in each adaptation direction, the target sub-component element is any one of the plurality of sub-component elements, and the reference object is a sub-component element other than the target sub-component element among the plurality of sub-component elements or the first to-be-edited interaction interface; the binding state update module 1703 is configured to update, in response to a selection operation on a target adaptation selection control among the plurality of adaptation selection controls, the relative position binding state of the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control; the interface adaptation display module 1704 is configured to adaptively display the target sub-component element in a second to-be-edited interaction interface having a second screen aspect ratio based on the updated relative position binding state in the target adaptation direction.

[0207] In an optional embodiment of the present disclosure, the adaptation control generation module 1702 is configured to generate, in response to a confirmation operation on a target sub-component element, a plurality of adaptation selection controls in a plurality of directions around the target sub-component element; wherein the direction in which each adaptation selection control is generated around the target sub-component element is consistent with the adaptation direction represented by each adaptation selection control.

[0208] In an optional embodiment of the present disclosure, each adaptation selection control includes a connection identifier, and the connection identifier is located between the boundary position of the reference object in the adaptation direction and the adaptation selection control.

[0209] In an optional embodiment of the present disclosure, the binding state update module 1703 is configured to control the binding of the relative position of the target sub-component element and the reference object in the target adaptation direction in response to a first selection operation on the target adaptation selection control; and control the unbinding of the relative position of the target sub-component element and the reference object in the target adaptation direction in response to a second selection operation on the target adaptation selection control.

[0210] In an optional embodiment of the present disclosure, the device further includes a control display module, which is configured to perform, in response to a first selection operation on a target adaptation selection control, display the target adaptation selection control in a first display manner; or, in response to a second selection operation on the target adaptation selection control, display the target adaptation selection control in a second display manner; the first display manner and the second display manner have one or more of the following differences: display color; display style of the control identifier.

[0211] In an optional embodiment of the present disclosure, the device further includes an interface display module and a control display module. The control display module is configured to perform, in response to a confirmation operation on a target sub-component element, display an adaptation trigger control in a graphical user interface; the interface display module is configured to perform, in response to a first touch operation on the adaptation trigger control, display an adaptation adjustment interface for the target sub-component element; wherein, the adaptation adjustment interface includes status selection controls corresponding to each adaptation direction; a binding status update module 1703, which is configured to perform, in response to a selection operation on a target adaptation selection control, update the switch state of the status selection control corresponding to the target adaptation direction in the adaptation adjustment interface, so that the updated switch state represents the updated relative position binding state in the target adaptation direction.

[0212] In an optional embodiment of the present disclosure, the device further includes a mode switching module. The mode switching module is configured to perform, in response to a second touch operation on an adaptation mode selection control, control the interface editing scene to enter an adaptation editing mode from an initial mode; an adaptation control generation module 1702, which is configured to perform, in the adaptation editing mode, in response to a confirmation operation on a target sub-component element, generate a plurality of adaptation selection controls corresponding to the target sub-component element.

[0213] In an optional embodiment of the present disclosure, the device further includes an operation execution module and a control display module. The control display module is configured to perform, when the interface editing scene is in the initial mode, in response to a confirmation operation on a target sub-component element, display at least one editing control for the target sub-component element;

[0214] The operation execution module is configured to perform, in response to a third touch operation on the editing control, perform an editing operation corresponding to the editing control on the target sub-component element.

[0215] In an alternative embodiment of the present disclosure, the binding status update module 1703 is configured to update the relative position binding status of the target sub-component element and the parent component element in the target adaptation direction corresponding to the target adaptation selection control in response to the presence of the parent component element for the target sub-component element; the binding status update module 1703 is configured to update the relative position binding status of the target sub-component element and the first to-be-edited interaction interface in the target adaptation direction corresponding to the target adaptation selection control in response to the absence of the parent component element for the target sub-component element.

[0216] In an alternative embodiment of the present disclosure, the interface display module is configured to simultaneously display a preview interface and a first to-be-edited interaction interface in a graphical user interface through a target display mode; wherein, the preview interface includes a thumbnail of the to-be-edited interface corresponding to the second to-be-edited interaction interface, and the thumbnail of the to-be-edited interface includes a mapping identifier of the target sub-component element corresponding to the target sub-component element and a mapping identifier of the reference object corresponding to the reference object, and determines the relative position of the mapping identifier of the target sub-component element and the mapping identifier of the reference object in the thumbnail of the to-be-edited interface according to the updated relative position binding status.

[0217] In an alternative embodiment of the present disclosure, the interface display module is configured to simultaneously display a preview interface and a first to-be-edited interaction interface in a graphical user interface through a target display mode in response to the first to-be-edited interaction interface entering the adaptation editing mode.

[0218] In an alternative embodiment of the present disclosure, the device further includes a mode determination module, and the mode determination module is configured to display an adaptation interface selection control in a graphical user interface, and in response to a fourth trigger operation for the adaptation interface selection control, determine a target display mode according to the fourth trigger operation, wherein the adaptation interface selection control is configured with at least two candidate display modes, and the target display mode is a display mode among the at least two candidate display modes.

[0219] In an alternative embodiment of the present disclosure, the candidate display modes at least include a first display mode and a second display mode; wherein, the first display mode is to control the preview interface to be displayed in a floating window form on the upper layer of the first to-be-edited interaction interface, and the second display mode is to control the preview interface and the first to-be-edited interaction interface to be simultaneously displayed in a split-screen form.

[0220] In an alternative embodiment of the present disclosure, the apparatus further includes a size adjustment module and a control display module, configured to display a first adjustment control for a floating window or a target split screen in response to displaying a preview interface and a first interactive interface to be edited in a floating window form or a split screen form; wherein the target split screen is a split screen for presenting the preview interface; the size adjustment module is configured to adjust the size of the floating window according to a first moving direction of a fifth touch operation in response to the fifth touch operation on the first adjustment control; or adjust the size of the target split screen according to the first moving direction of the fifth touch operation.

[0221] In an alternative embodiment of the present disclosure, the apparatus further includes a position adjustment module and a control display module, configured to display a second adjustment control for a floating window or a target split screen in response to displaying a preview interface and a first interactive interface to be edited in a floating window form or a split screen form; wherein the target split screen is a split screen for carrying the preview interface; the position adjustment module is configured to adjust the display position of the floating window according to a second moving direction of a sixth touch operation in response to the sixth touch operation on the second adjustment control; or adjust the display position of the target split screen according to the second moving direction of the sixth touch operation.

[0222] In an alternative embodiment of the present disclosure, an interface display module is configured to obtain a plurality of first candidate screen aspect ratios to be adapted; determine a second screen aspect ratio as the candidate screen aspect ratio with the largest difference between the screen resolutions corresponding to the plurality of first candidate screen aspect ratios and the screen resolution of the first screen aspect ratio; and display a thumbnail of the interface to be edited of the second interactive interface to be edited in the preview interface according to the second screen aspect ratio.

[0223] In an alternative embodiment of the present disclosure, a graphical user interface includes a screen type selection component, and an interface display module is configured to provide a plurality of second candidate screen aspect ratios to be adapted based on the screen type selection component; determine the target screen aspect ratio as the second screen aspect ratio in response to a selection operation on the target screen aspect ratio among the plurality of candidate screen aspect ratios; and display a thumbnail of the interface to be edited of the second interactive interface to be edited in the preview interface according to the second screen aspect ratio.

[0224] In an alternative embodiment of the present disclosure, the apparatus further includes a status update module, configured to update the target sub-component element in the first interactive interface to be edited and the thumbnail of the interface to be edited to a selected state in response to an acknowledgment operation on the target sub-component element.

[0225] In an alternative embodiment of the present disclosure, the interface canvas parameters, multiple sub-component elements, and the hierarchical structure of multiple sub-component elements corresponding to the second interactive interface to be edited are in an uneditable state; wherein, the interface canvas parameters include one or more of the canvas position and canvas size of the thumbnail of the interactive interface to be edited.

[0226] In an alternative embodiment of the present disclosure, the interface adaptation display module 1704 is configured to execute, in response to the updated relative position binding state in the target adaptation direction being bound, determine a first adjustment ratio based on the first screen aspect ratio and the second screen aspect ratio; determine a second relative distance between the target sub-component element and the reference object in the target adaptation direction in the second interactive interface to be edited based on the first relative distance between the target sub-component element and the reference object in the first interactive interface to be edited in the target adaptation direction and the first adjustment ratio; and adaptively display the target sub-component element in the second interactive interface to be edited having the second screen aspect ratio based on the second relative distance.

[0227] In an alternative embodiment of the present disclosure, the interface adaptation display module 1704 is configured to execute, in response to the updated relative position binding state in the target adaptation direction being unbound, determine a second adjustment ratio based on the first screen aspect ratio and the second screen aspect ratio; determine a fourth relative distance between the target sub-component element and the target position of the reference object in the second interactive interface to be edited based on the third relative distance between the target sub-component element and the target position of the reference object in the first interactive interface to be edited and the second adjustment ratio; and adaptively display the target sub-component element in the second interactive interface to be edited having the second screen aspect ratio based on the fourth relative distance.

[0228] The interface adaptation device 1700 provided in the embodiments of the present disclosure can execute the technical solutions of the interface adaptation method in any of the above embodiments. Its implementation principle and beneficial effects are similar to those of the interface adaptation method. For details, refer to the implementation principle and beneficial effects of the interface adaptation method, which will not be elaborated herein.

[0229] In an exemplary embodiment of the present disclosure, there is also provided a computer-readable storage medium storing a program product capable of implementing the methods described in this specification. In some possible implementation manners, various aspects of the present invention can also be implemented in the form of a program product, which includes program code. When the program product runs on a terminal device, the program code is used to cause the terminal device to execute the steps according to various exemplary embodiments of the present invention described in the "Exemplary Method" section of this specification.

[0230] A program product for implementing the above method according to an embodiment of the present invention may be a portable compact disc read-only memory (CD-ROM), include program code, and may run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited thereto. In this document, a readable storage medium may be any tangible medium that contains or stores a program, and the program may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0231] The program product may adopt any combination of one or more readable media. The readable media may be a readable signal medium or a readable storage medium. The readable storage medium may, for example, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples (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 above.

[0232] The computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries the readable program code. Such a propagated data signal may take various forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. The readable signal medium may also be any readable medium other than the readable storage medium, and the readable medium may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0233] The program code contained on the readable medium may be transmitted by any suitable medium, including but not limited to wireless, wired, optical fiber, radio frequency (RF), etc., or any suitable combination of the above.

[0234] The program code for performing the operations of the present invention can be written in any combination of one or more programming languages, including object-oriented programming languages such as Java, C++, etc., and also including conventional procedural programming languages such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computing device, partially on the user's device, executed as a stand-alone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving a remote computing device, the remote computing device can be connected to the user's computing device through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or can be connected to an external computing device (e.g., by connecting through the Internet using an Internet service provider).

[0235] In an exemplary embodiment of the present disclosure, an electronic device capable of implementing the above method is also provided.

[0236] Those skilled in the art can understand that various aspects of the present invention can be implemented as a system, a method, or a program product. Therefore, various aspects of the present invention can be specifically implemented in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or an implementation combining hardware and software aspects, which can be collectively referred to as "circuitry", "module", or "system" here.

[0237] The following refers to ​ to describe the electronic device 1800 according to this embodiment of the present invention. ​ The shown electronic device 1800 is merely an example and should not impose any limitations on the functions and usage scope of the embodiments of the present invention.

[0238] As ​ shown, the electronic device 1800 is presented in the form of a general-purpose computing device. The components of the electronic device 1800 may include, but are not limited to: the above-mentioned at least one processing unit 1810, the above-mentioned at least one storage unit 1820, a bus 1830 connecting different system components (including the storage unit 1820 and the processing unit 1810), and a display unit 1840.

[0239] Among them, the storage unit stores program code, and the program code can be executed by the processing unit 1810, so that the processing unit 1810 executes the steps according to various exemplary embodiments of the present invention described in the above "Exemplary Method" section of this specification. For example, the processing unit 1810 can execute steps S501 to S504 as shown in Figure 1.

[0240] The storage unit 1820 may include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 18201 and / or a cache storage unit 18202, and may further include a read-only storage unit (ROM) 18203.

[0241] The storage unit 1820 may also include a program / utilities 18204 having a set (at least one) of program modules 18205. Such program modules 18205 include, but are not limited to: an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment. The bus 1830 may represent one or more of several types of bus structures, including a storage unit bus or storage unit controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of the various bus structures.

[0242] The electronic device 1800 may also communicate with one or more external devices 2000 (such as a keyboard, a pointing device, a Bluetooth device, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 1800, and / or may communicate with any device that enables the electronic device 1800 to communicate with one or more other computing devices (such as a router, a modem, etc.). Such communication may be carried out through an input / output (I / O) interface 1850. Also, the electronic device 1800 may communicate with one or more networks (such as a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) through a network adapter 1860. As shown in the figure, the network adapter 1860 communicates with other modules of the electronic device 1800 through the bus 1830. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 1800, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, redundant arrays of independent disks (RAID) systems, tape drives, and data backup storage systems, etc.

[0243] Through the description of the above embodiments, those skilled in the art can easily understand that the exemplary embodiments described herein can be implemented by software, or can be implemented by a combination of software and necessary hardware. Therefore, the technical solutions according to the embodiments of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, including several instructions to enable a computing device (which can be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the embodiments of the present disclosure.

[0244] In addition, the above-mentioned drawings are only schematic illustrations of the processes included in the method according to the exemplary embodiments of the present invention, rather than for restrictive purposes. It is easy to understand that the processes shown in the above-mentioned drawings do not indicate or limit the chronological order of these processes. Additionally, it is also easy to understand that these processes can be executed synchronously or asynchronously in, for example, multiple modules.

[0245] It should be noted that although several modules or units of the device for action execution are mentioned in the above detailed description, such a division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more of the above-mentioned modules or units can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0246] Those skilled in the art will readily conceive of 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 well-known knowledge or conventional technical means in the technical field not disclosed by the present disclosure. The specification and embodiments are only regarded as exemplary, and the true scope and spirit of the present disclosure are pointed out by the claims.

[0247] It should be understood that the present disclosure is not limited to the exact structures already described and shown in the drawings, and various modifications and changes can be made without departing from its scope. The scope of the present disclosure is only defined by the appended claims.

Claims

1. An interface adaptation method, characterized in that, Including: Displaying an editing interface corresponding to an interface editing scenario through a graphical user interface, the graphical user interface including a first to-be-edited interaction interface having a first screen aspect ratio, and at least multiple sub-component elements being included in the first to-be-edited interaction interface; Responding to a confirmation operation acting on a target sub-component element to generate multiple adaptation selection controls corresponding to the target sub-component element; wherein, the multiple adaptation selection controls are respectively used to adjust the relative position binding state of the target sub-component element and a reference object in each adaptation direction, the target sub-component element being any one of the multiple sub-component elements, and the reference object being a sub-component element other than the target sub-component element among the multiple sub-component elements or the first to-be-edited interaction interface; Responding to a selection operation on a target adaptation selection control among the multiple adaptation selection controls to update the relative position binding state of the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control; According to the updated relative position binding state in the target adaptation direction, adaptively displaying the target sub-component element in a second to-be-edited interaction interface having a second screen aspect ratio.

2. The method according to claim 1, wherein The responding to a confirmation operation acting on a target sub-component element to generate multiple adaptation selection controls corresponding to the target sub-component element includes: Responding to a confirmation operation acting on the target sub-component element to generate the multiple adaptation selection controls in multiple directions around the target sub-component element; wherein, the direction in which each adaptation selection control is generated around the target sub-component element is consistent with the adaptation direction represented by each adaptation selection control.

3. The method according to claim 2, wherein Each of the adaptation selection controls includes a connection identifier, and the connection identifier is located between the boundary position of the reference object in the adaptation direction and the adaptation selection control.

4. The method according to claim 1 or 3, characterized in that, The responding to a selection operation on a target adaptation selection control among the multiple adaptation selection controls to update the relative position binding state of the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control includes: Responding to a first selection operation on the target adaptation selection control to control the binding of the relative position of the target sub-component element and the reference object in the target adaptation direction; Or, responding to a second selection operation on the target adaptation selection control to control the unbinding of the relative position of the target sub-component element and the reference object in the target adaptation direction.

5. The method according to claim 4, wherein The method further includes: Responding to a first selection operation on the target adaptation selection control to display the target adaptation selection control in a first display manner; Or, responding to a second selection operation on the target adaptation selection control to display the target adaptation selection control in a second display manner; wherein, one or more of the following differences exist between the first display manner and the second display manner: Display color; Display style of the control identifier.

6. The method according to claim 1, wherein The method further includes: Responding to a confirmation operation acting on the target sub-component element to display an adaptation trigger control in the graphical user interface; In response to a first touch operation on the adaptation trigger control, an adaptation adjustment interface for the target sub-component element is displayed; wherein, the adaptation adjustment interface includes state selection controls corresponding to respective adaptation directions. In response to a selection operation on the target adaptation selection control, the switch state of the state selection control corresponding to the target adaptation direction in the adaptation adjustment interface is updated, so that the updated switch state represents the updated relative position binding state in the target adaptation direction.

7. The method according to claim 1, characterized in that, The graphical user interface displays an adaptation mode selection control. In response to a confirmation operation on the target sub-component element, before generating a plurality of adaptation selection controls corresponding to the target sub-component element, the method further includes: In response to a second touch operation on the adaptation mode selection control, controlling the interface editing scene to enter an adaptation editing mode from an initial mode. In the adaptation editing mode, in response to a confirmation operation on the target sub-component element, a plurality of adaptation selection controls corresponding to the target sub-component element are generated.

8. The method according to claim 7, characterized in that, The method further includes: When the interface editing scene is in the initial mode, in response to a confirmation operation on the target sub-component element, at least one editing control for the target sub-component element is displayed. In response to a third touch operation on the editing control, an editing operation corresponding to the editing control is performed on the target sub-component element.

9. The method according to claim 1, wherein The updating of the relative position binding state of the target sub-component element and the reference object in the target adaptation direction corresponding to the target adaptation selection control includes: In response to the target sub-component element having a parent component element, updating the relative position binding state of the target sub-component element and the parent component element in the target adaptation direction corresponding to the target adaptation selection control. In response to the target sub-component element not having the parent component element, updating the relative position binding state of the target sub-component element and the first to-be-edited interaction interface in the target adaptation direction corresponding to the target adaptation selection control.

10. The method according to claim 1, wherein The method further includes: Simultaneously displaying a preview interface and the first to-be-edited interaction interface in the graphical user interface through a target display mode. Wherein, the preview interface includes a thumbnail of the to-be-edited interface corresponding to the second to-be-edited interaction interface. The thumbnail of the to-be-edited interface includes a target sub-component element mapping identifier corresponding to the target sub-component element and a reference object mapping identifier corresponding to the reference object. The relative positions of the target sub-component element mapping identifier and the reference object mapping identifier in the thumbnail of the to-be-edited interface are determined according to the updated relative position binding state.

11. The method according to claim 10, characterized in that, The simultaneously displaying a preview interface and the first to-be-edited interaction interface in the graphical user interface through a target display mode includes: In response to the first to-be-edited interaction interface entering the adaptation editing mode, simultaneously displaying a preview interface and the first to-be-edited interaction interface in the graphical user interface through a target display mode.

12. The method according to claim 10, characterized in that An adaptation interface selection control is displayed in the graphical user interface. The method further includes: In response to a fourth touch operation on the adaptation interface selection control, determine the target display mode according to the fourth touch operation, where the adaptation interface selection control is configured with at least two candidate display modes, and the target display mode is a display mode among the at least two candidate display modes.

13. The method according to claim 12, characterized in that The candidate display modes at least include a first display mode and a second display mode; wherein, in the first display mode, the preview interface is controlled to be displayed in the form of a floating window on the upper layer of the first to-be-edited interaction interface, and in the second display mode, the preview interface and the first to-be-edited interaction interface are controlled to be displayed simultaneously in a split-screen form.

14. The method according to claim 12 or 13, characterized in that, The method further includes: In response to the preview interface and the first to-be-edited interaction interface being displayed in the form of a floating window or a split screen, display a first adjustment control for the floating window or the target split screen; wherein the target split screen is the split screen for presenting the preview interface; In response to a fifth touch operation on the first adjustment control, adjust the size of the floating window according to the first moving direction of the fifth touch operation; or adjust the size of the target split screen according to the first moving direction of the fifth touch operation.

15. The method according to claim 12, wherein The method further includes: In response to the preview interface and the first to-be-edited interaction interface being displayed in the form of a floating window or a split screen, display a second adjustment control for the floating window or the target split screen; wherein the target split screen is the split screen for carrying the preview interface; In response to a sixth touch operation on the second adjustment control, adjust the display position of the floating window according to the second moving direction of the sixth touch operation; or adjust the display position of the target split screen according to the second moving direction of the sixth touch operation.

16. The method according to claim 12, wherein Simultaneously displaying the preview interface and the first to-be-edited interaction interface in the graphical user interface through the target display mode includes: Obtain a plurality of first candidate screen aspect ratios to be adapted; Determine the candidate screen aspect ratio with the largest difference between the screen resolutions corresponding to the plurality of first candidate screen aspect ratios and the screen resolution of the first screen aspect ratio as the second screen aspect ratio; In the preview interface, display a thumbnail of the to-be-edited interface of the second to-be-edited interaction interface according to the second screen aspect ratio.

17. The method according to claim 12, wherein The graphical user interface includes a screen type selection component, and simultaneously displaying the preview interface and the first to-be-edited interaction interface in the graphical user interface through the target display mode includes: Based on the screen type selection component, provide a plurality of second candidate screen aspect ratios to be adapted; In response to a selection operation on a target screen aspect ratio among the plurality of candidate screen aspect ratios, determine the target screen aspect ratio as the second screen aspect ratio; In the preview interface, display a thumbnail of the to-be-edited interface of the second to-be-edited interaction interface according to the second screen aspect ratio.

18. The method according to claim 12, wherein The method further includes: In response to a confirmation operation on the target sub-component element, update the target sub-component element in the first to-be-edited interaction interface and the thumbnail of the to-be-edited interface to a selected state.

19. The method according to claim 12, wherein The interface canvas parameters, multiple sub-component elements, and the hierarchical structure of the multiple sub-component elements corresponding to the second interactive interface to be edited are in an uneditable state; Among them, the interface canvas parameters include one or more of the canvas position and canvas size of the thumbnail of the interface to be edited.

20. The method according to claim 1, characterized in that The adapting and displaying of the target sub-component element in the second interactive interface to be edited with the second screen aspect ratio according to the updated relative position binding state in the target adaptation direction includes: In response to the updated relative position binding state in the target adaptation direction being bound, determining a first adjustment ratio based on the first screen aspect ratio and the second screen aspect ratio; According to the first relative distance between the target sub-component element and the reference object in the target adaptation direction in the first interactive interface to be edited and the first adjustment ratio, determining the second relative distance between the target sub-component element and the reference object in the target adaptation direction in the second interactive interface to be edited; Based on the second relative distance, adapting and displaying the target sub-component element in the second interactive interface to be edited with the second screen aspect ratio.

21. The method according to claim 1, wherein The adapting and displaying of the target sub-component element in the second interactive interface to be edited with the second screen aspect ratio according to the updated relative position binding state in the target adaptation direction includes: In response to the updated relative position binding state in the target adaptation direction being unbound, determining a second adjustment ratio based on the first screen aspect ratio and the second screen aspect ratio; According to the third relative distance between the target position of the target sub-component element and the reference object in the first interactive interface to be edited and the second adjustment ratio, determining the fourth relative distance between the target position of the target sub-component element and the reference object in the second interactive interface to be edited; Based on the fourth relative distance, adapting and displaying the target sub-component element in the second interactive interface to be edited with the second screen aspect ratio.

22. An interface adaptation device, characterized in that, Includes: An editing interface display module configured to execute and display, through a graphical user interface, an editing interface corresponding to an interface editing scenario, where the graphical user interface includes a first interactive interface to be edited with a first screen aspect ratio, and the first interactive interface to be edited includes at least multiple sub-component elements; An adaptation control generation module configured to execute and generate, in response to a confirmation operation acting on a target sub-component element, multiple adaptation selection controls corresponding to the target sub-component element; among them, the multiple adaptation selection controls are respectively used to adjust the relative position binding state between the target sub-component element and a reference object in each adaptation direction, the target sub-component element is any one of the multiple sub-component elements, and the reference object is a sub-component element other than the target sub-component element among the multiple sub-component elements or the first interactive interface to be edited; A binding status update module, configured to execute an operation of updating a relative position binding status between the target sub-component element and the reference object in a target adaptation direction corresponding to the target adaptation selection control in response to a selection operation on the target adaptation selection control among the multiple adaptation selection controls; An interface adaptation display module, configured to execute an operation of adaptively displaying the target sub-component element in a second to-be-edited interaction interface with a second screen aspect ratio based on the updated relative position binding status in the target adaptation direction; 23. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the interface adaptation method according to any one of claims 1 to 21.

24. An electronic device, characterized in that, Comprising: A processor; And A memory for storing executable instructions of the processor; Wherein, the processor is configured to execute the interface adaptation method according to any one of claims 1 to 21 by executing the executable instructions.

Images