CN114610190B

CN114610190B - Interface editing method, device, electronic equipment and readable medium

Info

Publication number: CN114610190B
Application number: CN202210249588.9A
Authority: CN
Inventors: 钟冬
Original assignee: Futuo Network Technology Shenzhen Co ltd
Current assignee: Futuo Network Technology Shenzhen Co ltd
Filing date: 2022-03-14
Publication date: 2024-05-31
Anticipated expiration: 2042-03-14

Abstract

The application provides an interface editing method, an interface editing device, electronic equipment and a readable medium. The method comprises the following steps: acquiring an application starting instruction and displaying an application interface according to the application starting instruction, wherein the application interface comprises a functional component; triggering operation feedback when long-press operation executed on the functional component is detected; when the function component is detected to be dragged in the application interface, the function component moves along a dragging track; when a drag stop is detected and the function component satisfies the component movement condition, the function component is exposed at the position where the drag stop. The method can directly display the result when the editing process of the navigation bar is completed, operation steps are fewer, the editing result is more visual, the operation efficiency of the user-defined operation is improved, and the efficiency of information display and operation application is further improved.

Description

Interface editing method, device, electronic equipment and readable medium

Technical Field

The present application relates to the field of computer technologies, and in particular, to an interface editing method, an apparatus, an electronic device, and a readable medium.

Background

With the development of computer technology, in particular internet technology and mobile terminal technology, there are an increasing number of applications in all kinds. Various types of navigation bars are often provided for users in applications and allow the user to customize the functionality of the navigation bars.

Currently, customization of the navigation bar is typically accomplished by switching the display and function of the various options within the navigation bar.

However, when the navigation bar is edited, the navigation bar needs to be edited and saved to see the final result of the editing, the operation process is complex, the editing process is not intuitive, and the operation efficiency of the self-defining process and the efficiency of information display and operation application are affected.

Disclosure of Invention

Based on the technical problems, the application provides an interface editing method, an interface editing device, electronic equipment and a readable medium, so that results can be directly displayed when the editing process of a navigation bar is completed, operation steps are fewer, the editing results are more visual, the operation efficiency of custom operation is improved, and further the efficiency of information display and operation application is improved.

Other features and advantages of the application will be apparent from the following detailed description, or may be learned by the practice of the application.

According to an aspect of an embodiment of the present application, there is provided an interface editing method, including:

acquiring an application starting instruction and displaying an application interface according to the application starting instruction, wherein the application interface comprises a functional component;

Triggering operation feedback when long-press operation executed on the functional component is detected;

when the function component is detected to be dragged in the application interface, the function component moves along a dragging track;

When a drag stop is detected and the function component satisfies a component movement condition, the function component is presented at a position where the drag stop.

In some embodiments of the present application, based on the above technical solutions, the application interface includes a first container and a second container; and when the long-press operation performed on the functional component is detected, triggering operation feedback, wherein the operation feedback comprises the following steps:

acquiring coordinate information corresponding to the touch point of the long-press operation and determining a container where the touch point is located according to the coordinate information;

if the touch point is in the first container, traversing each component in the first container and determining a functional component aiming at the long-press operation according to the coordinate information;

Deleting the functional component and recording the starting position of the functional component;

And displaying the occupied component at the starting position and triggering operation feedback.

In some embodiments of the present application, based on the above technical solution, when the function component is detected to be dragged in the application interface, the function component moves along a dragging track, including:

When a drag operation in the application interface is detected, the occupancy component moves along a drag track;

And in the process of moving the occupied component, if the occupied component overlaps with other components in the first container or the second container, updating the positions of the other components so that the other components are free from positions for the occupied component.

In some embodiments of the present application, based on the above technical solution, when a drag stop is detected and the function component satisfies a component movement condition, the function component is presented at a position where the drag stop, including:

when the dragging stop is detected, determining a container in which the occupancy component is located;

if the occupancy component is in the second container and the number of components in the second container is lower than the upper limit of the number of components in the second container, determining that the functional component meets a component movement condition;

Concealing the placeholder component and adding the functional component at the location in the second container where dragging stopped;

And updating the layout of the components in the second container according to the positions of the functional components.

In some embodiments of the present application, based on the above technical solution, after determining the container in which the occupancy component is located when the drag stop is detected, the method further includes:

When drag stopping is detected, if the occupancy component is not in any container or the number of components in the container in which the occupancy component is located is equal to or greater than a component accommodation threshold of the container in which the occupancy component is located, the occupancy component moves back to the starting position;

concealing the placeholder component and adding the functional component at the starting location.

In some embodiments of the present application, based on the above technical solutions, the method further includes:

When the long press operation is detected to be interrupted, the occupancy component moves back to the starting position;

hiding the occupying component and adding the functional component at the starting position.

In some embodiments of the present application, based on the above technical solution, the first container further includes an association component, where an association relationship exists between the association component and the second container; the method further comprises the steps of:

when the dragging stop is detected, if the occupancy component and the association component are overlapped, the occupancy component moves into the second container according to the association relation between the association component and the second container;

Concealing the placeholder component and adding the functional component in the second container.

According to an aspect of an embodiment of the present application, there is provided an interface editing apparatus including:

The interface display module is used for acquiring an application starting instruction and displaying an application interface according to the application starting instruction, wherein the application interface comprises a functional component;

The feedback triggering module is used for triggering operation feedback when the long-press operation executed on the functional component is detected;

The component moving module is used for moving the functional component along a dragging track when the functional component is detected to be dragged in the application interface;

And the component display module is used for displaying the functional component at the position of the dragging stop when the dragging stop is detected and the functional component meets the component moving condition.

According to an aspect of an embodiment of the present application, there is provided an electronic apparatus including: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to perform the interface editing method as in the above technical solution via execution of the executable instructions.

According to an aspect of the embodiments of the present application, there is provided a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the interface editing method as in the above technical solution.

In the embodiment of the application, the application interface is displayed according to the application starting instruction, the operation feedback is triggered when the long-press operation of the functional component is detected, the functional component moves along the dragging track in the application interface, the functional component is displayed at the position where the dragging stops when the dragging stops and the component moving condition is met. By the method, the result can be directly displayed when the dragging of the navigation bar is completed in the editing process, the operation steps are fewer, the editing result is more visual, the operation efficiency of the custom operation is improved, and the efficiency of information display and operation application is further improved.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application as claimed.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the application and together with the description, serve to explain the principles of the application. It is evident that the drawings in the following description are only some embodiments of the present application and that other drawings may be obtained from these drawings without inventive effort for a person of ordinary skill in the art.

In the drawings:

FIG. 1 is a schematic diagram of an implementation environment in an embodiment of the present application;

FIG. 2 is an interface diagram illustrating a navigation bar customization process according to an embodiment of the present application;

FIG. 3 is an interface diagram illustrating a navigation bar customization process according to an embodiment of the present application;

FIG. 4 is an interface diagram illustrating a navigation bar customization process according to an embodiment of the present application;

FIG. 5 is a schematic flow chart of an interface editing method according to an embodiment of the present application;

FIG. 6 is a schematic diagram of a specific implementation procedure in an embodiment of the present application;

FIG. 7 schematically shows a block diagram of the interface editing apparatus in the embodiment of the present application;

fig. 8 shows a schematic diagram of a computer system suitable for use in implementing an embodiment of the application.

Detailed Description

Example embodiments will now be described more fully with reference to the accompanying drawings. However, the exemplary embodiments may be embodied in many 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 thorough and complete, and will fully convey the concept of the example embodiments to those skilled in the art.

Furthermore, the described features, structures, or characteristics 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 embodiments of the application. One skilled in the relevant art will recognize, however, that the application may be practiced without one or more of the specific details, or with other methods, components, devices, steps, etc. In other instances, well-known methods, devices, implementations, or operations are not shown or described in detail to avoid obscuring aspects of the application.

The block diagrams depicted in the figures are merely functional entities and do not necessarily correspond to physically separate entities. That is, the functional entities may be implemented in software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor devices and/or microcontroller devices.

The flow diagrams depicted in the figures are exemplary only, and do not necessarily include all of the elements and operations/steps, nor must they be performed in the order described. For example, some operations/steps may be decomposed, and some operations/steps may be combined or partially combined, so that the order of actual execution may be changed according to actual situations.

It should be appreciated that the interface editing method of the present application may be applied to various types of application programs or software products, and in particular, may be applied to a client on a mobile terminal. Taking the application in financial management software as an example, navigation bars are typically presented in such software to facilitate user access to the various functional modules. The user can customize the navigation bar. When the user-defined navigation bar is customized, the client displays a plurality of container areas capable of being edited, the position and the sequence of the functional components contained in each container can be adjusted through the dragging operation, and the quantity and the content of the functional components contained in each container can be adjusted by dragging the components into different containers, so that a user can edit the content of the navigation bar in a simpler, more convenient and more visual mode. It will be appreciated that embodiments of the present application are applicable to a variety of scenarios, including the editing of various types of editable pages in a software product, such as home pages, navigation pages, or function pages, among others.

The following describes the technical scheme provided by the application in detail by combining the specific embodiments. Referring to fig. 1, fig. 1 is a schematic diagram of an implementation environment in an embodiment of the present application. The implementation environment includes a server 110 and a terminal device 120, where the server 110 and the terminal device 120 communicate via a wired or wireless network. The terminal device 120 is deployed with a client for implementing the scheme of the present application, and the server 110 provides background services for the client on the terminal device 120. In the actual application process, the user uses the terminal device 120 to edit the page or the navigation bar, the terminal device 120 executes the scheme of the present application, presents the result of the interface editing process to the user, and sends the editing result to the server 110 for storage, so as to directly present the editing result when the application is opened next time.

The server 110 may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or may be a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDNs (Content Delivery Network, content delivery networks), basic cloud computing services such as big data and artificial intelligence platforms, which are not limited herein.

The terminal device 120 may be, but is not limited to, a mobile phone, a computer, an intelligent voice interaction device, an intelligent home appliance, a vehicle-mounted terminal, an aircraft, etc. The terminal device 120 and the server 110 may be directly or indirectly connected through wired or wireless communication, and the present application is not limited herein. The number of terminal devices 120 and servers 110 is also not limited.

Referring to fig. 2 to 4, fig. 2 to 4 are schematic interface diagrams of a navigation bar customization process according to an embodiment of the application. As shown in fig. 2, when the user enters the navigation bar customization function, the client displays a navigation bar area that the user can edit. These areas correspond to different containers, for example, two containers are shown in fig. 2, each corresponding to two editable areas. Each container includes one or more components therein, and a user can press the components for a long time to determine the components desired to be edited. In one embodiment, the components included in the container are divided into editable components and non-editable components, wherein the editable components are identified for distinction, e.g., the editable components show a jittery state in the custom page, and the non-editable components are stationary and not jittery. The user selects one component by pressing for a long time, and after the selection, the unselected component stops shaking and becomes inoperable. In one embodiment, the terminal device prompts the user, for example, by vibration or by sound effect, when the long press of the selected component starts or after the long press of the selected component is successful. As shown in FIG. 3, after the selection is successful, the user can drag the selected component, during the drag process, the component can change its display form/size according to the different containers, and when other components are contacted, the squeezing effect of squeezing other components out will be generated, so that the insertion position is left for the dragged component with the occupied position, and at this time, the hand is released to indicate the insertion position. As shown in fig. 4, there is a specific associated component in the bottom container, and when the component is dragged over the associated component and dropped, the component moves into the container associated above for display. It will be appreciated that there is an upper limit to the number of components that can be contained in each container. For example, the bottom container of fig. 4 may be configured to contain up to 6 components, and if the 7 th component is pulled into the bottom container, the squeezing effect will not occur, and after the hands are loosened, the components will return to their original positions.

The following describes the technical scheme provided by the application in detail by combining the specific embodiments. Referring to fig. 5, fig. 5 is a schematic flowchart of an interface editing method according to an embodiment of the application. As shown in fig. 5, the interface editing method at least includes steps S510 to S540, and is described in detail as follows:

step S510, an application starting instruction is obtained, and an application interface is displayed according to the application starting instruction, wherein the application interface comprises a functional component.

Specifically, the application start instruction may be a start instruction for starting the application program itself. For example, the user clicks on a client icon on the terminal to launch a corresponding program. In such cases, the application may not provide a dedicated custom page, and the user may trigger editing of the exposed functional components by long presses on the page of the application. The application start instruction may also refer to a start instruction for starting the custom edit page function. In such cases, the user may enter via an initiation instruction into an interface dedicated to custom editing, where the page content that can be edited is displayed for editing by the user. Functional components refer to page elements in an interface that may be used to access specific functions or open specific pages, such as page icons, links or interaction areas and fields, etc.

And step S520, triggering operation feedback when the long-press operation performed on the functional component is detected.

The client detects the operation of the user, and when the long-press operation performed on the functional component is detected, the client feeds back the operation to the user. The operational feedback may be presented by vibration or playing audio, etc., or may be presented visually, such as by dithering the functional components. A long press operation generally refers to a touch or click operation whose duration exceeds a certain threshold, and the threshold for judging a long press may depend on specific needs, for example, a click or touch operation lasting more than 0.5 seconds or 1 second may be regarded as a long press operation.

In step S530, when the function component is detected to be dragged in the application interface, the function component moves along a dragging track.

Specifically, after the user performs the long-press operation triggering operation feedback, the functional component can be dragged in the application interface, and the functional component moves according to the dragging track. In the dragging process, the functional component can move along with the dragging track in the whole application interface without limiting the display area where the functional component is originally located. It is understood that the process in which the function component is dragged and the long press process in the previous step may be continuous processes, that is, the dragging process is directly started when the user selects the function component to be edited by the long press operation. For example, in a terminal operated by a touch screen, a user directly starts a slide drag operation after pressing the screen for a long time without releasing the touch point. In another embodiment, the drag and long press processes may also be separate processes. For example, the user selects the function module by pressing the mouse button for a long time, and at this time, the function module still moves along the track of the mouse pointer until the user clicks the mouse again to determine the moved position of the function module.

Step S540, when the drag stop is detected and the functional component meets the component movement condition, the functional component is displayed at the position where the drag stop is detected.

Specifically, when the dragging is stopped, the client checks whether the current state of the function component satisfies the component movement condition, and if so, the editing process is determined to be successful, so that the function component is displayed at the position where the dragging is stopped. The component movement condition may specifically include a plurality of rules, such as whether the location of the functional component can be used to display the component, whether there is a conflict with the display of other components, whether the dragging process is completed correctly, or whether there is an abnormality in the editing process, and so on. It can be understood that the client determines whether to stop dragging according to a corresponding operation event, for example, for touch input, whether to stop an input signal, i.e. whether to loosen a hand of a user, and for mouse input, whether to release a mouse button or whether to trigger a click operation of the release assembly, etc.

In the embodiment of the application, the application interface is displayed according to the application starting instruction, the operation feedback is triggered when the long-press operation of the functional component is detected, the functional component moves along the dragging track in the application interface, the functional component is displayed at the position where the dragging stops when the dragging stops and the component moving condition is met. By the method, the result can be directly displayed when the dragging is completed in the editing process of the navigation bar, the operation steps are fewer, the editing result is more visual, the operation efficiency of the custom operation is improved, and the efficiency of information display and operation application is improved.

In addition, in this embodiment, information such as the use frequency of each functional component may be monitored to determine the application heat of the functional component, and then the target position is recommended based on the application heat, and when the dragging of the functional component is detected, the recommended target position is displayed in the interface in the form of a dashed border or the like, so as to adjust the position of the functional component.

The manner of calculating the application heat in this embodiment may be:

acquiring the clicking times of the functional components in a preset period and the display duration of the application interface corresponding to the functional components;

According to the preset period Per, the clicking times Hit_num and the display duration Hit_dur, the application heat Der is calculated as follows:

Wherein α and β are used to represent the preset heat factor, and the preset period in this embodiment may be one week, one month or one day, etc. In this embodiment, the browsing parameter in unit time is calculated as the application heat in the above manner, and the unit time may be hour or one day. The utilization rate of the functional components is measured and evaluated through the application heat, and the positions of the functional components are suggested and adjusted based on the utilization rate, so that the utilization rate and the application efficiency of the product functions are improved.

In one embodiment of the application, the application interface includes a first container and a second container; in the step S520, when a long press operation performed on the functional component is detected, an operation feedback is triggered, including:

The first container and the second container correspond to a portion of the display area in the application interface, respectively. Each container may hold a number of components therein. The coordinate information corresponding to the touch point is coordinate information in the whole application interface or the display, and according to the coordinate information, the position of the touch point in the first container in the long-press operation can be determined. Specifically, if the touch point is located in the first container, each component in the first container may be traversed according to the converted position, and a functional component targeted by the long-press operation may be determined according to the coordinate information. It will be appreciated that if the touch point is located within the second container, components in the second container may be detected to determine the functional components. After determining the functional component, the functional component may then be deleted from the current page and the starting position of the functional component recorded, followed by showing the placeholder component at the starting position and triggering the operational feedback. In particular, the occupancy component typically has the same or similar appearance as the functional component. The placeholder component would be added to the common container of all interactable containers and be uppermost in the container hierarchy, hidden from display by default.

In one embodiment of the present application, the step S530 above, when detecting that the function component is dragged in the application interface, the function component moves along a dragging track, including:

Specifically, during the process that the occupancy component moves along the dragging track, other components are occupied. If overlap or release between the placeholder component and a component in any container is detected, the client moves the component in contact with the placeholder component to free up a location for the placeholder component. Specifically, as the placeholder assembly moves, the placeholder assembly position and size is continually updated. Meanwhile, in the moving process, judging whether the space between the occupied component and the component in the container has an intersection, and if the space between the occupied component and the component in the container has an intersection with the space on the upper side or the left side, updating the position of the component and the position of the previous component; if there is an intersection with the lower or right side spacing, the position of the next and subsequent component of the component is updated to free up positions for the placeholder components. The moving process can be displayed in an animation mode, so that the squeezing effect is achieved.

In one embodiment of the present application, the step S540 above, when the drag stop is detected and the function component satisfies the component movement condition, presents the function component at the position where the drag stop, includes:

Specifically, when the client detects that the touch operation of the user is ended, it is determined that drag stop is detected. At this time, the container in which the occupancy component is located is determined according to the location of the occupancy zone. If the occupancy component is in the second container, the number of components currently accommodated by the second container is determined. If the number is below the upper limit of the number of components of the second container, it may be determined that the functional component satisfies the component movement condition. For example, the upper limit of the number of components of the second container is 6, if the current number of components in the second container is less than 6, new components may be added, otherwise, the new components cannot be moved into the second container. In the event that the component movement condition is met, the placeholder component is hidden from the application interface and a functional component is added at the location in the second container where the drag ceases. In particular, the current location of the placeholder component may be recorded for use in subsequently adding the functional component before hiding the placeholder component. In addition, the manner of hiding the placeholder component can be replaced by deleting the placeholder component. The layout of the components in the second container is then updated according to the locations of the functional components. Specifically, the layout includes a list of new components and location information. The components in the individual containers are exposed according to the layout when the application interface is loaded.

It will be appreciated that the above described process may be applied to a first container, with the process being similar, except that the process of moving occurs inside the first container rather than moving from the first container to a second container, and will not be described again.

In one embodiment of the present application, the above step, after determining the container in which the occupancy component is located when the drag stop is detected, further includes:

Specifically, if the placeholder component is not in any of the containers, such as in a position above or below all of the containers shown in fig. 2, or the number of components in the container in which the placeholder component is located is equal to or greater than the component accommodation threshold of the container in which it is located, the placeholder component may move back to the previously recorded starting position of the functional component. Subsequently, the placeholder component is hidden and the functional component is added at the starting position. It will be appreciated that adding a functional component back to the starting position also updates the position of other components in the container, thereby allowing room for the functional component to be displayed.

In one embodiment of the application, the method further comprises:

Specifically, the long press operation being broken refers to a case where the long press operation is not normally ended. For example, removal of a finger off-screen or other higher priority event interrupts the long press operation. At this point, the placeholder assembly moves back to the home position. Subsequently, the placeholder component is hidden and the functional component is added at the starting position

In one embodiment of the present application, the first container further includes an association component, where an association relationship exists between the association component and the second container; the method further comprises the steps of:

Specifically, when drag stoppage is detected, it is detected whether there is overlap between the placeholder component and the associated component. It will be appreciated that during movement of the placeholder component, the association component does not move directly to yield if overlapped or released with the association component. The client records the contact time of the occupying component and the association component, and moves the association component when the contact time exceeds a certain time. If the placeholder component and the association component overlap, the placeholder component is moved into the second container according to the association relationship between the association component and the second container, and then the placeholder component is hidden and the functional component is added in the second container. In particular, the add-on function component position may be the end of the arrangement of components in the second container, i.e. the next position of the last component. It will be appreciated that during this process, the client will still determine whether the number of components in the second container exceeds the component accommodation threshold of the second container, and if the number of components equals or exceeds the component accommodation threshold, the functional component will not be added to the second container, but will be moved back to the starting position.

Referring now to fig. 6, fig. 6 is a schematic diagram illustrating a specific implementation procedure in an embodiment of the present application. As shown in fig. 6, in step 601, the user enters a long press gesture process flow by a long press operation. In step 602, the touch points of the gesture are converted to custom navigation pages. Based on the location of the transformed touch point, in step 603, all containers in the discovery page are traversed, looking for the container where the touch point is located. If the touch point is not in any container, the flow ends and the long press gesture processing flow exits in step 611. Otherwise, in step 604, different operations are performed in different containers according to the gesture status. In the start state, step 605 is entered to determine whether the touch point hits the draggable element. If there is a hit, the initial position of the current component is recorded and the component and display placeholder components are removed in step 606, a change state is entered, and then step 604 is returned. When the status is changed or ended, step 604 proceeds to step 607 where it is determined whether the occupancy component is displayed. If so, step 608 is entered, the gesture status is determined and distributed. If it is a change state, then in step 609, the location of the inserted placeholder component is calculated and the squeeze animation is displayed. If it is the end state, then in step 610, the starting position at which the functional component needs to be inserted is calculated and the functional component is inserted. Subsequently, in step 611, the long press gesture processing flow is exited.

It should be noted that although the steps of the methods of the present application are depicted in the accompanying drawings in a particular order, this does not require or imply that the steps must be performed in that particular order, or that all illustrated steps be performed, to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step to perform, and/or one step decomposed into multiple steps to perform, etc.

The following describes the implementation of the apparatus of the present application that may be used to perform the interface editing method of the above-described embodiments of the present application. Fig. 7 schematically shows a block diagram of the interface editing apparatus in the embodiment of the present application. As shown in fig. 7, the interface editing apparatus 700 may mainly include:

The interface display module 710 is configured to obtain an application start instruction and display an application interface according to the application start instruction, where the application interface includes a functional component;

a feedback triggering module 720, configured to trigger an operation feedback when a long-press operation performed on the functional component is detected;

a component moving module 730, configured to, when detecting that the function component is dragged in the application interface, move along a dragging track;

The component showing module 740 is configured to, when the drag stop is detected and the function component satisfies the component moving condition, show the function component at a position where the drag stop.

In one embodiment of the present application, based on the above technical solution, the application interface includes a first container and a second container; the feedback trigger module 720 includes:

The coordinate acquisition unit is used for acquiring coordinate information corresponding to the touch point of the long-press operation and determining a container where the touch point is located according to the coordinate information;

the component traversing unit is used for traversing each component in the first container and determining the functional component aiming at the long-press operation according to the coordinate information if the touch point is in the first container;

a position recording unit for deleting the functional component and recording the starting position of the functional component;

and the operation feedback unit is used for displaying the occupied component at the initial position and triggering operation feedback.

In one embodiment of the present application, based on the above technical solution, the component moving module 730 includes:

a component pushing unit for, when a drag operation in the application interface is detected, moving the occupancy component along a drag trajectory;

and the position updating unit updates the positions of other components when the occupied component overlaps with the other components in the first container or the second container in the moving process of the occupied component on a daily basis, so that the other components can be free of positions for the occupied component.

In one embodiment of the present application, based on the above technical solution, the component display module 740 includes:

A container determining unit, configured to determine a container in which the occupancy component is located when a drag stop is detected;

A condition confirmation unit configured to determine that the functional component satisfies a component movement condition if the occupancy component is in the second container and the number of components in the second container is lower than an upper limit of the number of components of the second container;

a first component hiding unit for hiding the occupancy component and adding the function component at a position where dragging stops in the second container;

And the first layout updating unit is used for updating the layout of the components in the second container according to the positions of the functional components.

In an embodiment of the present application, based on the above technical solution, the interface editing apparatus 700 further includes:

A first component moving back unit, configured to, when drag stopping is detected, move the placeholder component back to the starting position if the placeholder component is not in any container or the number of components in a container in which the placeholder component is located is equal to or greater than a component accommodation threshold of the container in which the placeholder component is located;

a second component hiding unit for hiding the occupancy component and adding the function component at the start position.

a second component return unit for moving the occupancy component back to the start position when it is detected that the long press operation is interrupted;

And the third component hiding unit is used for hiding the occupied component and adding the functional component at the starting position.

In an embodiment of the present application, based on the above technical solution, the first container further includes an association component, where an association relationship exists between the association component and the second container; the interface editing apparatus 700 further includes:

the association moving unit is used for moving the occupation component into the second container according to the association relation between the association component and the second container if the occupation component and the association component overlap when the dragging is detected to be stopped;

A occupancy component hiding unit for hiding the occupancy component and adding the functional component in the second container.

It should be noted that, the apparatus provided in the foregoing embodiments and the method provided in the foregoing embodiments belong to the same concept, and a specific manner in which each module performs an operation has been described in detail in the method embodiment, which is not described herein again.

It should be noted that, the computer system 800 of the electronic device shown in fig. 8 is only an example, and should not impose any limitation on the functions and the application scope of the embodiments of the present application.

As shown in fig. 8, the computer system 800 includes a central processing unit (Central Processing Unit, CPU) 801 that can perform various appropriate actions and processes according to a program stored in a Read-Only Memory (ROM) 802 or a program loaded from a storage section 808 into a random access Memory (Random Access Memory, RAM) 803. In the RAM 803, various programs and data required for system operation are also stored. The CPU 801, ROM 802, and RAM 803 are connected to each other by a bus 804. An Input/Output (I/O) interface 805 is also connected to bus 804.

The following components are connected to the I/O interface 805: an input portion 806 including a keyboard, mouse, etc.; an output portion 807 including a Cathode Ray Tube (CRT), a Liquid crystal display (Liquid CRYSTAL DISPLAY, LCD), and a speaker, etc.; a storage section 808 including a hard disk or the like; and a communication section 809 including a network interface card such as a LAN (Local Area Network ) card, modem, or the like. The communication section 809 performs communication processing via a network such as the internet. The drive 810 is also connected to the I/O interface 805 as needed. A removable medium 811 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 810 as needed so that a computer program read out therefrom is mounted into the storage portion 808 as needed.

In particular, the processes described in the various method flowcharts may be implemented as computer software programs according to embodiments of the application. For example, embodiments of the present application include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network via the communication section 809, and/or installed from the removable media 811. When executed by a Central Processing Unit (CPU) 801, performs the various functions defined in the system of the present application.

It should be noted that, the computer readable medium shown in the embodiments of the present application may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-Only Memory (ROM), an erasable programmable read-Only Memory (Erasable Programmable Read Only Memory, EPROM), a flash Memory, an optical fiber, a portable compact disc read-Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present application, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the foregoing.

The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

It should be noted that although in the above detailed description several modules or units of a device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functions of two or more modules or units described above may be embodied in one module or unit in accordance with embodiments of the application. Conversely, the features and functions of one module or unit described above may be further divided into a plurality of modules or units to be embodied.

From the above description of embodiments, those skilled in the art will readily appreciate that the example embodiments described herein may be implemented in software, or may be implemented in software in combination with the necessary hardware. Thus, the technical solution according to the embodiments of the present application may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (may be a CD-ROM, a U-disk, a mobile hard disk, etc.) or on a network, and includes several instructions to cause a computing device (may be a personal computer, a server, a touch terminal, or a network device, etc.) to perform the method according to the embodiments of the present application.

Other embodiments of the application will be apparent to those skilled in the art from consideration of the specification and practice of the application disclosed herein. This application is intended to cover any variations, uses, or adaptations of the application following, in general, the principles of the application and including such departures from the present disclosure as come within known or customary practice within the art to which the application pertains.

It is to be understood that the application is not limited to the precise arrangements and instrumentalities shown in the drawings, which have been described above, and that various modifications and changes may be effected without departing from the scope thereof. The scope of the application is limited only by the appended claims.

Claims

1. An interface editing method, comprising:

acquiring the clicking times of the functional component in a preset period and the display duration of an application interface corresponding to the functional component, and calculating the application heat of the functional component according to the preset period, the clicking times and the display duration, wherein the calculation formula of the application heat is as follows:

Wherein Der is the application heat, hit_dur is the display duration, hit_num is the click times, per is the preset period, and α and β are used for representing preset heat factors;

Recommending a target position for the functional component based on the application hotness;

When the function component is detected to be dragged in the application interface, the function component moves along a dragging track and indicates the target position in the application interface;

when a drag stop is detected and the function component satisfies a component movement condition, the function component is presented at a drag stop location, the drag stop location being determined with reference to the target location.

2. The method of claim 1, wherein the application interface includes a first container and a second container therein; and when the long-press operation performed on the functional component is detected, triggering operation feedback, wherein the operation feedback comprises the following steps:

3. The method of claim 2, wherein the function component moves following a drag trajectory when the function component is detected as being dragged in the application interface, comprising:

4. The method of claim 2, wherein the presenting the functional component at the drag stopped location when drag stop is detected and the functional component satisfies a component movement condition comprises:

5. The method of claim 4, wherein after determining the container in which the placeholder component is located when a drag stop is detected, the method further comprises:

6. The method according to claim 4, wherein the method further comprises:

7. The method of claim 2, wherein the first container further comprises an association component, wherein the association component has an association relationship with the second container; the method further comprises the steps of:

8. An interface editing apparatus, comprising:

the interface display module is further configured to obtain a number of clicks of the functional component in a preset period and a display duration of an application interface corresponding to the functional component, and calculate an application heat of the functional component according to the preset period, the number of clicks and the display duration, where a calculation formula of the application heat is as follows:

The interface display module is further used for recommending a target position for the functional component based on the application heat;

The component moving module is used for moving the functional component along a dragging track when the functional component is detected to be dragged in the application interface, and indicating the target position in the application interface;

And the component display module is used for displaying the functional component at the position of the drag stop when the drag stop is detected and the functional component meets the component moving condition, wherein the position of the drag stop is determined by referring to the target position.

9. An electronic device, comprising:

A processor;

a memory for storing executable instructions of the processor;

Wherein the processor is configured to perform the interface editing method of any of claims 1 to 7 via execution of the executable instructions.

10. A computer readable medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the interface editing method according to any of claims 1 to 7.