WO2023173868A1 - 界面编辑方法、装置、电子设备和可读介质 - Google Patents

界面编辑方法、装置、电子设备和可读介质 Download PDF

Info

Publication number
WO2023173868A1
WO2023173868A1 PCT/CN2022/140760 CN2022140760W WO2023173868A1 WO 2023173868 A1 WO2023173868 A1 WO 2023173868A1 CN 2022140760 W CN2022140760 W CN 2022140760W WO 2023173868 A1 WO2023173868 A1 WO 2023173868A1
Authority
WO
WIPO (PCT)
Prior art keywords
component
container
functional component
placeholder
detected
Prior art date
Application number
PCT/CN2022/140760
Other languages
English (en)
French (fr)
Inventor
钟冬
Original Assignee
富途网络科技(深圳)有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Priority claimed from CN202210249588.9A external-priority patent/CN114610190B/zh
Application filed by 富途网络科技(深圳)有限公司 filed Critical 富途网络科技(深圳)有限公司
Publication of WO2023173868A1 publication Critical patent/WO2023173868A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • the present application relates to the field of computer technology, and in particular, to an interface editing method, device, electronic equipment and readable medium.
  • navigation bars are often provided to users in applications, and users are allowed to customize the functions of the navigation bar.
  • customization of the navigation bar usually involves editing the display and functions of each option in the navigation bar through switches.
  • this application provides an interface editing method, device, electronic device and readable medium, so that when the editing process of the navigation bar is completed, the result is directly displayed, with fewer operating steps and the editing result is more intuitive. , which improves the operational efficiency of custom operations, thereby improving the efficiency of information display and operational applications.
  • an interface editing method including:
  • the functional component When it is detected that the dragging stops and the functional component satisfies the component movement condition, the functional component is displayed at the position where the dragging stops.
  • the application interface includes a first container and a second container; when a long press operation on the functional component is detected, operation feedback is triggered, including :
  • the functional component moves following the drag trajectory, including:
  • the placeholder component moves following the drag trajectory
  • the positions of the other components are updated so that the Other components make room for the placeholder component.
  • displaying the functional component at the position where the dragging stops includes:
  • the placeholder 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, it is determined that the functional component meets the component movement condition
  • the layout of the components in the second container is updated.
  • the method further includes:
  • the placeholder component When it is detected that the drag stops, if the placeholder component is not in any of the containers or the number of components in the container where the placeholder component is located is equal to or greater than the component accommodation threshold of the container, the placeholder component The component moves back to the starting position;
  • the method further includes:
  • the placeholder component moves back to the starting position
  • the first container further includes an associated component, and there is an associated relationship between the associated component and the second container; the method further includes:
  • the placeholder component moves to the location according to the association relationship between the associated component and the second container. into the second container;
  • an interface editing device including:
  • An interface display module used to obtain an application startup instruction and display an application interface according to the application startup instruction, where the application interface includes functional components;
  • a feedback triggering module configured to trigger operation feedback when a long press operation on the functional component is detected
  • a component moving module configured to move the functional component following the drag trajectory when it is detected that the functional component is dragged in the application interface
  • a component display module configured to display the functional component at the position where the dragging stops when it is detected that the dragging stops and the functional component meets the component movement condition.
  • an electronic device including: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to execute by executing the executable instructions.
  • a computer-readable storage medium on which a computer program is stored.
  • the interface editing method in the above technical solution is implemented.
  • the application interface is displayed according to the application startup instruction, and operation feedback is triggered when a long press operation on the functional component is detected.
  • the functional component follows the drag trajectory in the application interface, and when the drag stops and meets the Component movement condition to display functional components at the position where dragging stops.
  • Figure 1 is a schematic diagram of an implementation environment in the embodiment of the present application.
  • Figure 2 is a schematic interface diagram of the navigation bar customization process in the embodiment of this application.
  • Figure 3 is a schematic interface diagram of the navigation bar customization process in the embodiment of this application.
  • Figure 4 is a schematic interface diagram of the navigation bar customization process in the embodiment of this application.
  • Figure 5 is a schematic flow chart of an interface editing method in an embodiment of the present application.
  • Figure 6 is a schematic diagram of the specific implementation process in the embodiment of the present application.
  • Figure 7 schematically shows a block diagram of the interface editing device in the embodiment of the present application.
  • FIG. 8 shows a schematic structural diagram of a computer system suitable for implementing an electronic device according to an embodiment of the present application.
  • Example embodiments will now be described more fully with reference to the accompanying drawings.
  • Example embodiments may, however, be embodied 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 thorough and complete, and will fully convey the concepts of the example embodiments. To those skilled in the art.
  • the interface editing method in this application can be applied to various applications or software products, and specifically can be applied to clients on mobile terminals.
  • a navigation bar is usually displayed to facilitate users to access various functional modules. Users can customize the navigation bar.
  • the client will display multiple container areas that can be edited.
  • the functional components included in each container can be adjusted in position and order by dragging. You can also drag the components to different locations. container to adjust the number and content of functional components included in each container, thereby allowing users to edit the content of the navigation bar in a simpler and more intuitive way.
  • the embodiments of the present application can be applied to various scenarios, including the editing process of various editable pages in software products, such as the main page, navigation page or function page, etc.
  • 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.
  • the server 110 and the terminal device 120 communicate through a wired or wireless network.
  • a client implementing the solution of this application is deployed on the terminal device 120, and the server 110 provides background services for the client on the terminal device 120.
  • the user uses the terminal device 120 to edit the page or navigation bar.
  • the terminal device 120 will execute the solution of this application, display the results of the interface editing process to the user, and send the editing results to the server 110. Store it so that the editing results can be displayed directly the next time you open the app.
  • Server 110 may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or may provide cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, Cloud servers for basic cloud computing services such as middleware services, domain name services, security services, CDN (Content Delivery Network, content distribution network), and big data and artificial intelligence platforms are not restricted here.
  • the terminal device 120 may be a mobile phone, a computer, an intelligent voice interaction device, a smart home appliance, a vehicle-mounted terminal, an aircraft, etc., but is not limited thereto.
  • the terminal device 120 and the server 110 can be connected directly or indirectly through wired or wireless communication methods, which is not limited in this application.
  • the number of terminal devices 120 and servers 110 is not limited either.
  • Figures 2 to 4 are schematic interface diagrams of the navigation bar customization process in the embodiment of the present application.
  • the client when the user enters the navigation bar customization function, the client will display the navigation bar area that the user can edit. These areas correspond to different containers.
  • Figure 2 shows two containers, corresponding to two editable areas respectively.
  • Each container contains one or more components. Users can long press the component to determine the component they want to edit.
  • the components included in the container are divided into editable components and non-editable components, where the editable components will be identified for easy differentiation. For example, the editable components will be displayed on the custom page. The jitter state will appear, while the non-editable component will remain still without jitter.
  • the terminal device prompts the user, for example, through vibration or sound effects.
  • the user can drag the selected component.
  • the component will change its display form/size according to the container it is in, and when it comes into contact with other components, there will be The squeezing effect of squeezing other components away makes room for the insertion position of the placeholder component being dragged. At this time, letting go means inserting the position.
  • the component When the component is dragged to the associated component and let go, the component will move to the associated container above for display. Understandably, there is an upper limit to the number of components that can be contained in each container.
  • the bottom container in Figure 4 can be set to contain up to 6 components. If you continue to drag the seventh component into the bottom container, there will be no crowding effect, and the component will return to its original position after you let go.
  • Figure 5 is a schematic flow chart of an interface editing method in an embodiment of the present application. As shown in Figure 5, the interface editing method at least includes steps S510 to S540. The details are as follows:
  • Step S510 Obtain an application startup instruction and display an application interface according to the application startup instruction.
  • the application interface includes functional components.
  • the application startup instruction may be a startup instruction for starting the application program itself. For example, the user clicks the client icon on the terminal to start the corresponding program. In such cases, the application does not need to provide a dedicated custom page, and users can trigger editing of the displayed functional components by long pressing on the application's page.
  • the application startup instruction may also refer to a startup instruction that activates the custom editing page function. In such cases, the user can enter an interface specifically used for custom editing through the startup command, and the interface will display the editable page content for the user to edit.
  • Functional components refer to page elements in the interface that can be used to access specific functions or open specific pages, such as page icons, links, or interactive areas and fields.
  • Step S520 When a long press operation on the functional component is detected, operation feedback is triggered.
  • the client will detect the user's operation. When a long press operation on a functional component is detected, the client will provide operation feedback to the user. Operation feedback can be presented through vibration or audio playback, or through visual means such as making functional components shake.
  • a long press operation usually refers to a touch or tap operation that lasts longer than a certain threshold. The threshold used to determine a long press can depend on specific needs. For example, a tap or click that lasts for more than 0.5 seconds or 1 second can be considered. Touch operations are recognized as long press operations.
  • Step S530 When it is detected that the functional component is dragged in the application interface, the functional component moves following the drag track.
  • the user can drag the functional component in the application interface, and the functional component will move according to the drag trajectory.
  • the functional component can move throughout the entire application interface along the dragging trajectory without being limited to the display area where the functional component originally resides.
  • the process of dragging the functional component and the long-pressing process in the previous step can be a continuous process, that is, the dragging process is started directly after the user selects the functional component to be edited through the long-pressing operation. For example, in a terminal operated through a touch screen, the user directly starts the sliding and dragging operation after long pressing the screen without releasing the touch point.
  • the dragging process and the long-pressing process may also be separate processes. For example, if the user selects a function module by long-pressing the mouse button, and then releases the mouse button, the function module will still move along the trajectory of the mouse pointer until the user clicks the mouse again to determine the moved position of the function module.
  • Step S540 When it is detected that the dragging stops and the functional component meets the component movement condition, the functional component is displayed at the position where the dragging stops.
  • the client when dragging stops, the client will check whether the current status of the functional component meets the component movement conditions. If so, it will determine that the editing process is successful and display the functional component at the position where the dragging stops.
  • the component moving conditions may include multiple 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 are exceptions during the editing process. It is understandable that when detecting whether dragging has stopped, the client will make a judgment based on the corresponding operation event. For example, for touch input, it can be judged whether the input signal is suspended, that is, whether the user has let go, and for mouse input, it can be judged whether Release the mouse button or whether a click operation of the release component is triggered, etc.
  • the application interface is displayed according to the application startup instruction, and operation feedback is triggered when a long press operation on the functional component is detected.
  • the functional component follows the drag trajectory in the application interface, and when the drag stops and meets the Component movement condition to display functional components at the position where dragging stops.
  • information such as the frequency of use of each functional component can also be monitored to determine the application popularity of the functional component, and then the target location is recommended based on the application popularity.
  • the target location is recommended based on the application popularity.
  • the method of calculating application popularity in this embodiment may be:
  • the application heat Der is calculated as:
  • ⁇ and ⁇ are used to represent preset heat factors.
  • the preset period may be one week, one month, one day, etc.
  • the browsing parameters per unit time are calculated as application popularity through the above method, and the unit time can be an hour, a day, etc.
  • the usage rate of functional components is measured and evaluated through application popularity, and the location of functional components is recommended and adjusted based on the usage rate, which improves the usage rate and application efficiency of product functions.
  • the application interface includes a first container and a second container; the above step S520, when a long press operation on the functional component is detected, triggering operation feedback includes:
  • the first container and the second container respectively correspond to a part of the display area in the application interface.
  • Each container can hold a certain number of components.
  • the coordinate information corresponding to the touch point is the coordinate information in the overall application interface or the display. According to the coordinate information, the position of the touch point of the long press operation in the first container can be determined. Specifically, if the touch point is located in the first container, each component in the first container can be traversed according to the converted position, and the functional component targeted by the long press operation can be determined according to the coordinate information. It can be understood that if the touch point is located in the second container, the component in the second container can be detected to determine the functional component.
  • placeholder components usually have the same or similar appearance as functional components.
  • the placeholder component will be added to the common container of all interactive containers and will be located at the top of the container hierarchy. It will be hidden and not displayed by default.
  • step S530 when it is detected that the functional component is dragged in the application interface, the functional component moves following the drag trajectory, including:
  • the placeholder component moves following the drag trajectory
  • the positions of the other components are updated so that the Other components make room for the placeholder component.
  • the client will move the components that are in contact with the placeholder component to make room for the placeholder component.
  • the position and size of the placeholder component are continuously updated.
  • the moving process determines whether the spacing between the placeholder component and the component in the container intersects. If there is an intersection with the spacing on the upper or left side, the position of the component and the previous component will be updated; if there is an intersection with the spacing on the lower or right side, Then update the position of the next component and the component after it to make room for the placeholder component.
  • the moving process can be displayed through animation to achieve the crowding effect.
  • step S540 when it is detected that dragging stops and the functional component meets the component movement condition, displaying the functional component at the position where the dragging stops includes:
  • the placeholder 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, it is determined that the functional component meets the component movement condition
  • the layout of the components in the second container is updated.
  • the container in which the placeholder component is located is determined based on the location of the placeholder interval. If the placeholder component is in the second container, the number of components currently accommodated in the second container will be determined. If the number is lower than the upper limit of the number of components of the second container, it can be determined that the functional component satisfies the component movement condition. For example, the upper limit of the number of components in the second container is 6. If the current number of components in the second container is less than 6, new components can be added, otherwise, new components cannot be moved to the second container.
  • the placeholder component is hidden from the application interface and the functional component is added in the second container at the position where the drag stops.
  • the current position of the placeholder component can be recorded for subsequent addition of functional components.
  • the method of hiding the placeholder component can also be replaced by deleting the placeholder component.
  • the layout of the components in the second container is updated based on the position of the functional components. Specifically, the layout includes a new component list and location information.
  • the method further includes:
  • the placeholder component When it is detected that the drag stops, if the placeholder component is not in any of the containers or the number of components in the container where the placeholder component is located is equal to or greater than the component accommodation threshold of the container, the placeholder component The component moves back to the starting position;
  • the placeholder component is not in any of the containers, for example, it is above or below all the containers as shown in Figure 2, or the number of components in the container where the placeholder component is located is equal to or greater than the number of components in the container, If the component accommodates the threshold, the placeholder component will move back to the starting position of the previously recorded functional component. Then, hide the placeholder component and add the functional component in its starting position. It can be understood that when adding a functional component back to the starting position, the positions of other components in the container will also be updated, thereby leaving room for display of the functional component.
  • the method further includes:
  • the placeholder component moves back to the starting position
  • the long press operation being interrupted refers to the situation that the long press operation does not end normally.
  • the finger is removed from the screen or other higher priority events interrupt the long press operation.
  • the placeholder component will move back to the starting position. Then, hide the placeholder component and add the functional component at the starting position
  • the first container further includes an associated component, and there is an associated relationship between the associated component and the second container; the method further includes:
  • the placeholder component moves to the location according to the association relationship between the associated component and the second container. into the second container;
  • the dragging stop when the dragging stop is detected, whether there is overlap between the placeholder component and the associated component is detected. It can be understood that during the movement of the placeholder component, if it overlaps or is removed from the associated component, the associated component will not move directly to give way.
  • the client will record the time when the placeholder component is in contact with the associated component, and will only move the associated component when the time exceeds a certain period. If the placeholder component overlaps with the associated component, the placeholder component will be moved to the second container according to the association between the associated component and the second container, and then the placeholder component will be hidden and added in the second container.
  • the functional components Specifically, the position where the functional component is added may be the end of the component arrangement in the second container, that is, the next position of the last component.
  • the client will still determine whether the number of components in the second container exceeds the component accommodation threshold of the second container. 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 move back to the starting position.
  • step 601 the user enters the long press gesture processing flow through a long press operation.
  • step 602 the touch point of the gesture will be converted to the custom navigation page.
  • step 603 all containers in the discovery page are traversed to find the container where the touch point is located. If the touch point is not in any container, the process ends, and the long press gesture processing process exits in step 611. Otherwise, in step 604, different operations will be performed in different containers according to the gesture status.
  • step 605 will be entered to determine whether the touch point hits the draggable component.
  • step 604 will go to step 607 to determine whether the placeholder component is displayed. If it is to be displayed, proceed to step 608 to determine the gesture status and distribute it. If it is a change state, in step 609, the position where the placeholder component is inserted is calculated and the squeeze animation is displayed. If it is the end state, in step 610, the starting position where 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.
  • Figure 7 schematically shows a block diagram of the interface editing device in the embodiment of the present application.
  • the interface editing device 700 may mainly include:
  • the interface display module 710 is used to obtain the application startup instruction and display the application interface according to the application startup instruction, and the application interface includes functional components;
  • a feedback triggering module 720 is configured to trigger operation feedback when a long press operation on the functional component is detected
  • Component moving module 730 configured to move the functional component following the drag trajectory when it is detected that the functional component is dragged in the application interface
  • the component display module 740 is configured to display the functional component at the position where the dragging stops when the dragging stop is detected and the functional component meets the component movement condition.
  • the application interface includes a first container and a second container;
  • the feedback triggering module 720 includes:
  • a coordinate acquisition unit configured to acquire coordinate information corresponding to the touch point of the long press operation and determine the container where the touch point is located based on the coordinate information
  • a component traversal unit configured to traverse each component in the first container if the touch point is in the first container and determine the functional component targeted by the long press operation according to the coordinate information
  • a position recording unit used to delete the functional component and record the starting position of the functional component
  • An operation feedback unit is used to display the placeholder component at the starting position and trigger operation feedback.
  • the component moving module 730 includes:
  • a component pushing unit configured to move the placeholder component following the drag trajectory when a drag operation in the application interface is detected
  • a position update unit that updates the positions of other components every day during the movement of the placeholder component if the placeholder component overlaps with other components in the first container or the second container. , so that the other components make room for the placeholder component.
  • the component display module 740 includes:
  • a container determination unit configured to determine the container in which the placeholder component is located when it is detected that dragging has stopped
  • a condition confirmation unit configured to determine that the functional component satisfies component movement if the placeholder 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 of the second container. condition;
  • a first component hiding unit configured to hide the placeholder component and add the functional component at the position where dragging stops in the second container
  • a first layout update unit configured to update the layout of the components in the second container according to the location of the functional component.
  • the interface editing device 700 further includes:
  • the first component relocation unit is used to, when it is detected that dragging has stopped, if the placeholder component is not in any of the containers or the number of components in the container where the placeholder component is located is equal to or greater than the number of components in the container. If the component accommodates the threshold, the placeholder component moves back to the starting position;
  • the second component hiding unit is used to hide the placeholder component and add the functional component at the starting position.
  • the interface editing device 700 further includes:
  • a second component moving unit configured to move the placeholder component back to the starting position when it is detected that the long press operation is interrupted
  • the third component hiding unit is used to hide the placeholder component and add the functional component at the starting position.
  • the first container further includes an associated component, and there is an associated relationship between the associated component and the second container;
  • the interface editing device 700 further includes:
  • An associated moving unit configured to, when it is detected that dragging stops, if the placeholder component overlaps with the associated component, based on the association between the associated component and the second container, the The placeholder component is moved into the second container;
  • a placeholder component hiding unit is used to hide the placeholder component and add the functional component in the second container.
  • FIG. 8 shows a schematic structural diagram of a computer system suitable for implementing an electronic device according to an embodiment of the present application.
  • the computer system 800 includes a central processing unit (Central Processing Unit, CPU) 801, which can be loaded into a random accessory according to a program stored in a read-only memory (Read-Only Memory, ROM) 802 or from a storage part 808. Access the program in the memory (Random Access Memory, RAM) 803 to perform various appropriate actions and processes. In RAM 803, various programs and data required for system operation are also stored.
  • CPU 801, ROM 802 and RAM 803 are connected to each other via 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 part 806 including a keyboard, a mouse, etc.; an output part 807 including a cathode ray tube (Cathode Ray Tube, CRT), a liquid crystal display (Liquid Crystal Display, LCD), etc., and a speaker, etc. ; a storage part 808 including a hard disk, etc.; and a communication part 809 including a network interface card such as a LAN (Local Area Network) card, a modem, etc.
  • the communication section 809 performs communication processing via a network such as the Internet.
  • Driver 810 is also connected to I/O interface 805 as needed.
  • Removable media 811 such as magnetic disks, optical disks, magneto-optical disks, semiconductor memories, etc., are installed on the drive 810 as needed, so that a computer program read therefrom is installed into the storage portion 808 as needed.
  • the processes described in the respective method flow charts may be implemented as computer software programs.
  • embodiments of the present application include a computer program product including a computer program carried on a computer-readable medium, the computer program containing program code for performing the method illustrated in the flowchart.
  • the computer program may be downloaded and installed from the network via communications portion 809 and/or installed from removable media 811 .
  • the central processing unit (CPU) 801 various functions defined in the system of the present application are executed.
  • 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 above two.
  • the computer-readable storage medium may be, for example, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or any combination thereof.
  • Computer readable storage media may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard drive, random access memory (RAM), read only memory (ROM), removable Programmable Read-Only Memory (Erasable Programmable Read Only Memory, EPROM), flash memory, optical fiber, portable compact disk read-only memory (Compact Disc Read-Only Memory, CD-ROM), optical storage device, magnetic storage device, or any of the above suitable The combination.
  • a computer-readable storage medium may be any tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device.
  • the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, in which computer-readable program code is carried. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above.
  • a computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can send, propagate, or transmit 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 suitable medium, including but not limited to: wireless, wired, etc., or any suitable combination of the above.
  • each block in the flowchart or block diagrams may represent a module, segment, or portion of code that contains one or more logic functions that implement the specified executable instructions.
  • the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown one after another may actually execute substantially in parallel, or they may sometimes execute in the reverse order, depending on the functionality involved.
  • each block in the block diagram or flowchart illustration, and combinations of blocks in the block diagram or flowchart illustration can be implemented by special purpose hardware-based systems that perform the specified functions or operations, or may be implemented by special purpose hardware-based systems that perform the specified functions or operations. Achieved by a combination of specialized hardware and computer instructions.
  • the example embodiments described here can be implemented by software, or can be implemented by software combined with necessary hardware. Therefore, the technical solution according to the embodiment of the present application 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, U disk, mobile hard disk, etc.) or on the network , including several instructions to cause a computing device (which can be a personal computer, server, touch terminal, or network device, etc.) to execute the method according to the embodiment of the present application.
  • a non-volatile storage medium which can be a CD-ROM, U disk, mobile hard disk, etc.
  • a computing device which can be a personal computer, server, touch terminal, or network device, etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供一种界面编辑方法、装置、电子设备和可读介质。该方法包括：获取应用启动指令并根据应用启动指令展示应用界面，应用界面中包括功能组件；当检测到对功能组件执行的长按操作时，触发操作反馈；当检测到功能组件在应用界面中被拖动时，功能组件跟随拖动轨迹移动；当检测到拖动停止并且功能组件满足组件移动条件时，在拖动停止的位置处展示功能组件。

Description

界面编辑方法、装置、电子设备和可读介质
相关申请的交叉引用
本申请要求于2022年3月14日提交的，申请名称为“界面编辑方法、装置、电子设备和可读介质”的、中国专利申请号为“202210249588.9”的优先权，该中国专利申请的全部内容通过引用结合在本申请中。
技术领域
本申请涉及计算机技术领域，尤其涉及一种界面编辑方法、装置、电子设备和可读介质。
背景技术
随着计算机技术，尤其是互联网技术和移动终端技术的发展，形形色色的应用程序越来越多。在应用程序中经常为用户提供各类导航栏，并且允许用户对导航栏的功能进行自定义。
当前，对于导航栏的自定义通常是通过开关来对导航栏内的各个选项的显示和功能进行编辑。
然而，上述的过程在编辑导航栏时，对于导航栏需要进行编辑和保存才能看到编辑的最终结果，操作过程复杂且编辑过程不直观，影响自定义过程的操作效率和信息展示和操作应用的效率。
技术解决方案
基于上述技术问题，本申请提供一种界面编辑方法、装置、电子设备和可读介质，以便在对导航栏的编辑过程在拖动完成时就直接展示结果，操作步骤更少，编辑结果更直观，提高了自定义操作的操作效率，进而提高了信息展示和操作应用的效率。
本申请的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本申请的实践而习得。
根据本申请实施例的一个方面，提供一种界面编辑方法，包括：
获取应用启动指令并根据所述应用启动指令展示应用界面，所述应用界面中包括功能组件；
当检测到对所述功能组件执行的长按操作时，触发操作反馈；
当检测到所述功能组件在所述应用界面中被拖动时，所述功能组件跟随拖动轨迹移动；
当检测到拖动停止并且所述功能组件满足组件移动条件时，在拖动停止的位置处展示所述功能组件。
在本申请的一些实施例中，基于以上技术方案，所述应用界面中包括第一容器和第二容器；所述当检测到对所述功能组件执行的长按操作时，触发操作反馈，包括：
获取所述长按操作的触摸点对应的坐标信息并根据所述坐标信息确定触摸点所在的容器；
若所述触摸点在所述第一容器内，遍历所述第一容器内的各个组件并根据所述坐标信息确定所述长按操作针对的功能组件；
删除所述功能组件并记录所述功能组件的起始位置；
在所述起始位置展示占位组件并触发操作反馈。
在本申请的一些实施例中，基于以上技术方案，所述当检测到所述功能组件在所述应用界面中被拖动时，所述功能组件跟随拖动轨迹移动，包括：
当检测到在所述应用界面中的拖动操作时，所述占位组件跟随拖动轨迹移动；
在所述占位组件移动过程中，若所述占位组件与所述第一容器或者所述第二容器中的其他组件之间交叠，则更新所述其他组件的位置，以使所述其他组件为所述占位组件空出位置。
在本申请的一些实施例中，基于以上技术方案，所述当检测到拖动停止并且所述功能组件满足组件移动条件时，在拖动停止的位置处展示所述功能组件，包括：
当检测到拖动停止时，确定所述占位组件所在的容器；
若所述占位组件处于所述第二容器中并且所述第二容器中的组件数量低于所述第二容器的组件数量上限，则确定所述功能组件满足组件移动条件；
隐藏所述占位组件并且在所述第二容器中拖动停止的位置处添加所述功能组件；
根据所述功能组件的位置，更新所述第二容器中组件的布局。
在本申请的一些实施例中，基于以上技术方案，所述当检测到拖动停止时，确定所述占位组件所在的容器之后，所述方法还包括：
当检测到拖动停止时，若所述占位组件未处于所述任一容器中或者所述占位组件所在的容器中的组件数量等于或大于所在容器的组件容纳阈值，则所述占位组件移动回到所述起始位置；
隐藏所述占位组件并且在所述起始位置添加所述功能组件。
在本申请的一些实施例中，基于以上技术方案，所述方法还包括：
当检测到所述长按操作被打断时，所述占位组件移动回到所述起始位置；
隐藏所述占位组件并在所述起始位置添加所述功能组件。
在本申请的一些实施例中，基于以上技术方案，所述第一容器中还包括关联组件，所述关联组件与所述第二容器之间存在关联关系；所述方法还包括：
当检测到拖动停止时，若所述占位组件与所述关联组件之间交叠，则根据所述关联组件与所述第二容器之间的关联关系，所述占位组件移动到所述第二容器中；
隐藏所述占位组件并且在所述第二容器中添加所述功能组件。
根据本申请实施例的一个方面，提供一种界面编辑装置，包括：
界面展示模块，用于获取应用启动指令并根据所述应用启动指令展示应用界面，所述应用界面中包括功能组件；
反馈触发模块，用于当检测到对所述功能组件执行的长按操作时，触发操作反馈；
组件移动模块，用于当检测到所述功能组件在所述应用界面中被拖动时，所述功能组件跟随拖动轨迹移动；
组件展示模块，用于当检测到拖动停止并且所述功能组件满足组件移动条件时，在拖动停止的位置处展示所述功能组件。
根据本申请实施例的一个方面，提供一种电子设备，该电子设备包括：处理器；以及存储器，用于存储处理器的可执行指令；其中，该处理器配置为经由执行可执行指令来执行如以上技术方案中的界面编辑方法。
根据本申请实施例的一个方面，提供一种计算机可读存储介质，其上存储有计算机程序，当该计算机程序被处理器执行时实现如以上技术方案中的界面编辑方法。
在本申请的实施例中，根据应用启动指令展示应用界面，当检测到对功能组件的长按操作时触发操作反馈，功能组件跟随应用界面中的拖动轨迹移动，并且在拖动停止并且满足组件移动条件，在拖动停止的位置处展示功能组件。通过上述的方式，可以对导航栏的编辑过程在拖动完成时就直接展示结果，操作步骤更少，编辑结果更直观，提高了自定义操作的操作效率，进而提高了信息展示和操作应用的效率。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
图1为本申请实施例中一个实施环境的示意图；
图2本申请实施例中导航栏自定义过程的界面示意图；
图3本申请实施例中导航栏自定义过程的界面示意图；
图4本申请实施例中导航栏自定义过程的界面示意图；
图5为本申请实施例中一种界面编辑方法的示意流程图；
图6为本申请实施例中的具体实施流程的示意图；
图7示意性地示出了本申请实施例中界面编辑装置的组成框图；
图8示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本申请将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。
此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本申请的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本申请的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本申请的各方面。
附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
应理解，本申请中的界面编辑方法可以应用于各类应用程序或者软件产品中，并且具体可以应用于移动终端上客户端中。以应用在金融管理软件中为例，在此类软件中通常会展示导航栏便于用户访问各个功能模块。用户可以对导航栏进行自定义。在进行自定义时，客户端会展示出多个可以进行编辑的容器区域，每个容器中所包括的功能组件都可以通过拖拽的操作来调整位置和顺序，还可以将组件拖拽到不同的容器中来调整各个容器中所包括的功能组件数量和内容，从而允许用户以更简便和更直观的方式来编辑导航栏的内容。可以理解，本申请实施例可应用于各种场景，包括软件产品中各类可编辑页面的编辑过程，例如主页面、导航页面或者功能页面等。
下面结合具体实施方式对本申请提供的技术方案做出详细说明。请参阅图1，图1为本申请实施例中一个实施环境的示意图。该实施环境包括服务器110和终端设备120，服务器110与终端设备120之间通过有线或者无线网络进行通信。终端设备120上部署有实 现本申请的方案的客户端，服务器110则为终端设备120上的客户端提供后台服务。在实际应用的过程中，用户使用终端设备120来对进行页面或者导航栏的编辑，终端设备120会执行本申请的方案，向用户展示界面编辑过程的结果，并且将编辑结果发送给服务器110来进行存储，以便在下次打开应用时直接展示出编辑结果。
服务器110可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)以及大数据和人工智能平台等基础云计算服务的云服务器，本处不对此进行限制。
终端设备120可以是手机、电脑、智能语音交互设备、智能家电、车载终端、飞行器等，但并不局限于此。终端设备120以及服务器110可以通过有线或无线通信方式进行直接或间接地连接，本申请在此不做限制。终端设备120以及服务器110的数量也不做限制。
请参阅图2至图4，图2至图4为本申请实施例中导航栏自定义过程的界面示意图。如图2所示，当用户进入导航栏自定义功能时，客户端会展示出用户可以编辑的导航栏区域。这些区域对应于不同的容器，例如，图2中展出了两个容器，分别对应于两个可编辑的区域。每个容器中包括一个或者多个组件，用户可以长按组件来确定想要编辑的组件。在一个实施例中，容器中所包括的组件分为可编辑组件和不可编辑组件，其中，可编辑的组件会被标识出来以便于进行区分，例如，可编辑的组件在自定义页面中会展示出抖动状态，而不可编辑组件则会静止而不抖动。用户通过长按来选中一个组件，选中后，未被选中的组件会停止抖动并且变为不可操作状态。在一个实施例中，在长按选中组件开始时或者长按选中组件成功后，终端设备会对用户进行提示，例如通过震动或者通过音效等方式。如图3所示，选中成功后，用户可以拖拽所选中的组件，在拖拽过程中，组件会随着所处容器不同而改变其显示形态/尺寸，并且在于其他组件接触时，会有将其他组件挤开的挤占效果，为拖拽中的占位组件空出插入位置，此时松手表示插入该位置。如图4所示，在底部的容器中存在一个特定的关联组件，当组件被拖拽到该关联组件上并放手时，组件会移动到上方被关联的容器中进行展示。可以理解的是，每个容器中所能包含的组件数量存在上限。例如，图4中的底部容器可以被设定为最多包含6个组件，如继续往底部容器拖入第7个组件，则不会出现挤占效果，并且松手后，组件会回原本的位置。
下面结合具体实施方式对本申请提供的技术方案做出详细说明。请参阅图5，图5为本申请实施例中一种界面编辑方法的示意流程图。如图5所示，该界面编辑方法至少包括步骤S510至S540，详细介绍如下：
步骤S510，获取应用启动指令并根据所述应用启动指令展示应用界面，所述应用界面中包括功能组件。
具体地，应用启动指令可以是用于启动应用程序本身的启动指令。例如，用户在终端上点击客户端图标来启动对应的程序。在此类情况中，应用可以不提供专门的自定义页面，用户可以在应用的页面上通过长按来触发对所展示的功能组件的编辑。应用启动指令也可以指的是启动自定义编辑页面功能的启动指令。在此类情况中，用户可以通过启动指令进入专门用于进行自定义编辑的界面中，该界面中会展示出可以进行编辑的页面内容以供用户编辑。功能组件指的是界面中可以用于访问具体功能或者打开具体页面的页面元素，例如页面图标、链接或者互动区域和栏位等。
步骤S520，当检测到对所述功能组件执行的长按操作时，触发操作反馈。
客户端会对用户的操作进行检测，当检测到对于功能组件执行的长按操作，客户端会向用户进行操作反馈。操作反馈可以通过震动或者播放音频等方式呈现，也可以通过例如使功能组件抖动的视觉方式呈现。长按操作通常指的是持续时间超过一定阈值的触控或者点按操作，用于判断长按的阈值可以取决于具体需求而定，例如，可以将持续超过0.5秒或者1秒的点按或触控操作认定为长按操作。
步骤S530，当检测到所述功能组件在所述应用界面中被拖动时，所述功能组件跟随拖动轨迹移动。
具体地，用户在进行长按操作触发操作反馈之后，可以在应用界面中拖动功能组件，功能组件则会根据拖动轨迹移动。在拖动的过程中，功能组件可以随着拖动轨迹在整个应用界面中移动，而不受限与功能组件原本所在的显示区域。可以理解，功能组件被拖动的过程与上一步骤中的长按过程可以是连续的过程，即，当用户通过长按操作选定要编辑的功能组件后直接开始拖拽过程。例如，在通过触摸屏进行操作的终端中，用户在长按屏幕后直接开始滑动拖拽操作，而不会松开触摸点。在另一个实施例中，拖动过程和长按过程也可以是分开的过程。例如，用户通过长按鼠标按键选定功能模块，此时松开鼠标按键，功能模块仍会跟随鼠标指针的轨迹移动，直至用户再次点击鼠标来确定功能模块移动后的位置。
步骤S540，当检测到拖动停止并且所述功能组件满足组件移动条件时，在拖动停止的位置处展示所述功能组件。
具体地，在拖动停止时，客户端会检查功能组件当前的状态是否满足组件移动条件，如果满足，则会认定编辑过程成功，从而在拖动停止的位置处展示功能组件。组件移动条件具体可以包括多个规则，例如功能组件所在的位置是否能够用于展示组件、与其他组件的展示是否存在冲突、拖动过程是否正确完成或者编辑过程中是否存在异常等条件。可以理解的是，客户端在检测拖动是否停止时会根据对应的操作事件来进行判断，例如对于触摸输入，可以判断输入信号是否中止，即用户是否松手，而对于鼠标输入，则可以判断是 否松开鼠标按键或者是否触发了释放组件的点击操作等。
在本申请的实施例中，根据应用启动指令展示应用界面，当检测到对功能组件的长按操作时触发操作反馈，功能组件跟随应用界面中的拖动轨迹移动，并且在拖动停止并且满足组件移动条件，在拖动停止的位置处展示功能组件。通过上述的方式，可以对导航栏的编辑过程在拖动完成时就直接展示结果，操作步骤更少，编辑结果更直观，提高了自定义操作的操作效率，提高了信息展示和操作应用的效率。
除此之外，本实施例中还可以监控每个功能组件的使用频率等信息，以确定功能组件的应用热度，之后基于应用热度推荐目标位置，在检测到功能组件被拖动时，在界面中通过虚线边框等形式显示推荐的目标位置，以调整该功能组件的位置。
示例性地，本实施例中计算应用热度的方式可以是：
获取预设周期内功能组件的点击次数，以及功能组件对应的应用界面的展示时长；
根据预设周期Per、点击次数Hit_num和展示时长Hit_dur，计算应用热度Der为：
Figure PCTCN2022140760-appb-000001
其中，α、β用于表示预设的热度因子，本实施例中预设周期可以是一周、一个月或者一天等等。本实施例中通过上述方式计算得到单位时间内的浏览参数作为应用热度，单位时间可以为小时或者一天等等。以通过应用热度来衡量和评估功能组件的使用率，并基于使用率来建议和调整功能组件的位置，提高了产品功能的使用率和应用效率。
在本申请的一个实施例中，应用界面中包括第一容器和第二容器；上述步骤S520，所述当检测到对所述功能组件执行的长按操作时，触发操作反馈，包括：
获取所述长按操作的触摸点对应的坐标信息并根据所述坐标信息确定触摸点所在的容器；
若所述触摸点在所述第一容器内，遍历所述第一容器内的各个组件并根据所述坐标信息确定所述长按操作针对的功能组件；
删除所述功能组件并记录所述功能组件的起始位置；
在所述起始位置展示占位组件并触发操作反馈。
第一容器和第二容器分别对应于应用界面中的一部分显示区域。每个容器中都可以容纳一定数量的组件。触摸点对应的坐标信息为在整体应用界面或者显示器中的坐标信息，根据该坐标信息，可以确定长按操作的触摸点在第一容器内的位置。具体地，若触摸点位于第一容器内，则可以根据转换后的位置，遍历所述第一容器内的各个组件，并根据坐标信息确定长按操作针对的功能组件。可以理解，若触摸点位于第二容器内，则可以检测第二容器中的组件来确定功能组件。在确定功能组件后，则可以将功能组件从当前的页面中 删除并记录功能组件的起始位置，随后在起始位置展示占位组件并触发操作反馈。具体地，占位组件通常与功能组件具有相同或者相似的外观。占位组件会被添加到所有可交互容器的公共容器上，且位于容器层级的最上方，默认隐藏不显示。
在本申请的一个实施例中，上述步骤S530，所述当检测到所述功能组件在所述应用界面中被拖动时，所述功能组件跟随拖动轨迹移动，包括：
当检测到在所述应用界面中的拖动操作时，所述占位组件跟随拖动轨迹移动；
在所述占位组件移动过程中，若所述占位组件与所述第一容器或者所述第二容器中的其他组件之间交叠，则更新所述其他组件的位置，以使所述其他组件为所述占位组件空出位置。
具体地，在占位组件跟随拖动轨迹移动的过程中，会对其他组件进行挤占。如果检测到占位组件与任意容器中的组件之间存在交叠或者解除时，客户端会将与占位组件接触的组件移开，以便为占位组件空出位置。具体地，随着占位组件移动，不断更新占位组件位置和尺寸。同时移动过程判断占位组件和容器内组件的间距是否有交集，如和上侧或者左侧的间距有交集则更新该组件和之前的组件位置；如和下侧或者右侧的间距有交集，则更新该组件下一个组件和其之后组件的位置，为占位组件空出位置。移动的过程可以通过动画的方式展现，从而达到挤占的效果。
在本申请的一个实施例中，上述步骤S540，所述当检测到拖动停止并且所述功能组件满足组件移动条件时，在拖动停止的位置处展示所述功能组件，包括：
当检测到拖动停止时，确定所述占位组件所在的容器；
若所述占位组件处于所述第二容器中并且所述第二容器中的组件数量低于所述第二容器的组件数量上限，则确定所述功能组件满足组件移动条件；
隐藏所述占位组件并且在所述第二容器中拖动停止的位置处添加所述功能组件；
根据所述功能组件的位置，更新所述第二容器中组件的布局。
具体地，当客户端检测到用户的触控操作结束时则确定检测到拖动停止。此时，根据占位区间的所在位置来确定占位组件所在的容器。若占位组件处于所述第二容器中，则会确定第二容器当前所容纳的组件数量。如果该数量低于第二容器的组件数量上限，则可以确定功能组件满足组件移动条件。例如，第二容器的组件数量上限为6个，如果第二容器中组件的当前数量少于6个，则可以添加新的组件，否则，则不能将新组件移动到第二容器中。在满足组件移动条件的情况下，会从应用界面中隐藏占位组件并且在第二容器中拖动停止的位置处添加功能组件。具体地，隐藏占位组件之前可以记录下占位组件的当前位置以用于后续添加功能组件。此外，隐藏占位组件的方式也可以采用删除占位组件的方式来替代。随后，根据功能组件的位置，更新第二容器中组件的布局。具体地，布局包括将 新的组件列表和位置信息。在应用界面加载时会根据布局来展示各个容器中的组件。
可以理解的是，上述的过程可以应用于第一容器，过程相似，区别在于移动的过程在第一容器内部发生，而不是从第一容器移动到第二容器，此时不再赘述。
在本申请的一个实施例中，上述步骤，当检测到拖动停止时，确定所述占位组件所在的容器之后，所述方法还包括：
当检测到拖动停止时，若所述占位组件未处于所述任一容器中或者所述占位组件所在的容器中的组件数量等于或大于所在容器的组件容纳阈值，则所述占位组件移动回到所述起始位置；
隐藏所述占位组件并且在所述起始位置添加所述功能组件。
具体地，如果占位组件未处于所述任一容器中，例如处在如图2所示的所有容器的上方或下方的位置，或者占位组件所在的容器中的组件数量等于或大于所在容器的组件容纳阈值，则占位组件会移动回到之前记录的功能组件的起始位置。随后，隐藏占位组件并且在起始位置添加功能组件。可以理解，将功能组件添加回到起始位置时，也会更新容器中其他组件的位置，从而为功能组件留出展示空间。
在本申请的一个实施例中，所述方法还包括：
当检测到所述长按操作被打断时，所述占位组件移动回到所述起始位置；
隐藏所述占位组件并在所述起始位置添加所述功能组件。
具体地，长按操作被打断指的是长按操作并未正常结束的情况。例如，手指移除屏幕外或者其他优先级更高的事件打断长按操作。此时，占位组件会移动回到起始位置。随后，隐藏占位组件并在起始位置添加功能组件
在本申请的一个实施例中，所述第一容器中还包括关联组件，所述关联组件与所述第二容器之间存在关联关系；所述方法还包括：
当检测到拖动停止时，若所述占位组件与所述关联组件之间交叠，则根据所述关联组件与所述第二容器之间的关联关系，所述占位组件移动到所述第二容器中；
隐藏所述占位组件并且在所述第二容器中添加所述功能组件。
具体地，当检测到拖动停止时，会检测占位组件与关联组件之间是否存在交叠的情况。可以理解，在占位组件移动的过程中，如果与关联组件交叠或者解除，关联组件不会直接移动让位。客户端会记录占位组件与关联组件接触的时间，在时间超过一定时长时候才会移动关联组件。如果占位组件与关联组件之间交叠，则会根据关联组件与第二容器之间的关联关系，将占位组件移动到第二容器中，随后隐藏占位组件并且在第二容器中添加所述功能组件。具体地，添加功能组件位置可以是第二容器中组件排列的末端，即最后一个组件的下一个位置。可以理解的是，在此过程中，客户端仍会判断第二容器中的组件数量是 否超过了第二容器的组件容纳阈值，如果组件数量等于或者超过组件容纳阈值，则不会将功能组件添加到第二容器，而是会移动回起始位置。
下面请参阅图6，图6为本申请实施例中的具体实施流程的示意图。如图6所示，在步骤601中，用户通过长按操作来进入长按手势处理流程。在步骤602中，手势的触摸点会被转换到自定义导航页面上。根据转换后触摸点的所在位置，在步骤603中，遍历发现页中所有容器，寻找触摸点所在的容器。如果触摸点不在任何容器中，则流程结束，在步骤611中退出长按手势处理流程。否则，在步骤604中，会根据手势状态执行在不同容器执行步不同操作。在开始状态时，会进入步骤605中，判断触摸点是否命中可拖拽组件。如果命中，则在步骤606中记录当前组件的初始位置并移除组件和显示占位组件，进入变更状态，随后回到步骤604。在变更状态或者结束状态时，步骤604会转到步骤607中，判断占位组件是否显示。如果要显示，则进入步骤608，判断手势状态并进行分发。如果是变更状态，则在步骤609中，计算插入占位组件的位置并且显示挤占动画。如果是结束状态，则在步骤610中，计算需要插入功能组件的起始位置并且插入功能组件。随后，在步骤611中，退出长按手势处理流程。
应当注意，尽管在附图中以特定顺序描述了本申请中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。
以下介绍本申请的装置实施，可以用于执行本申请上述实施例中的界面编辑方法。图7示意性地示出了本申请实施例中界面编辑装置的组成框图。如图7所示，界面编辑装置700主要可以包括：
界面展示模块710，用于获取应用启动指令并根据所述应用启动指令展示应用界面，所述应用界面中包括功能组件；
反馈触发模块720，用于当检测到对所述功能组件执行的长按操作时，触发操作反馈；
组件移动模块730，用于当检测到所述功能组件在所述应用界面中被拖动时，所述功能组件跟随拖动轨迹移动；
组件展示模块740，用于当检测到拖动停止并且所述功能组件满足组件移动条件时，在拖动停止的位置处展示所述功能组件。
在本申请的一个实施例中，基于上述技术方案，所述应用界面中包括第一容器和第二容器；反馈触发模块720包括：
坐标获取单元，用于获取所述长按操作的触摸点对应的坐标信息并根据所述坐标信息确定触摸点所在的容器；
组件遍历单元，用于若所述触摸点在所述第一容器内，遍历所述第一容器内的各个组件并根据所述坐标信息确定所述长按操作针对的功能组件；
位置记录单元，用于删除所述功能组件并记录所述功能组件的起始位置；
操作反馈单元，用于在所述起始位置展示占位组件并触发操作反馈。
在本申请的一个实施例中，基于上述技术方案，组件移动模块730包括：
组件推动单元，用于当检测到在所述应用界面中的拖动操作时，所述占位组件跟随拖动轨迹移动；
位置更新单元，天天在所述占位组件移动过程中，若所述占位组件与所述第一容器或者所述第二容器中的其他组件之间交叠，则更新所述其他组件的位置，以使所述其他组件为所述占位组件空出位置。
在本申请的一个实施例中，基于上述技术方案，组件展示模块740包括：
容器确定单元，用于当检测到拖动停止时，确定所述占位组件所在的容器；
条件确认单元，用于若所述占位组件处于所述第二容器中并且所述第二容器中的组件数量低于所述第二容器的组件数量上限，则确定所述功能组件满足组件移动条件；
第一组件隐藏单元，用于隐藏所述占位组件并且在所述第二容器中拖动停止的位置处添加所述功能组件；
第一布局更新单元，用于根据所述功能组件的位置，更新所述第二容器中组件的布局。
在本申请的一个实施例中，基于上述技术方案，界面编辑装置700还包括：
第一组件回移单元，用于当检测到拖动停止时，若所述占位组件未处于所述任一容器中或者所述占位组件所在的容器中的组件数量等于或大于所在容器的组件容纳阈值，则所述占位组件移动回到所述起始位置；
第二组件隐藏单元，用于隐藏所述占位组件并且在所述起始位置添加所述功能组件。
在本申请的一个实施例中，基于上述技术方案，界面编辑装置700还包括：
第二组件回移单元，用于当检测到所述长按操作被打断时，所述占位组件移动回到所述起始位置；
第三组件隐藏单元，用于隐藏所述占位组件并在所述起始位置添加所述功能组件。
在本申请的一个实施例中，基于上述技术方案，所述第一容器中还包括关联组件，所述关联组件与所述第二容器之间存在关联关系；界面编辑装置700还包括：
关联移动单元，用于当检测到拖动停止时，若所述占位组件与所述关联组件之间交叠，则根据所述关联组件与所述第二容器之间的关联关系，所述占位组件移动到所述第二容器中；
占位组件隐藏单元，用于隐藏所述占位组件并且在所述第二容器中添加所述功能组 件。
需要说明的是，上述实施例所提供的装置与上述实施例所提供的方法属于同一构思，其中各个模块执行操作的具体方式已经在方法实施例中进行了详细描述，此处不再赘述。
图8示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。
需要说明的是，图8示出的电子设备的计算机系统800仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。
如图8所示，计算机系统800包括中央处理单元(Central Processing Unit，CPU)801，其可以根据存储在只读存储器(Read-Only Memory，ROM)802中的程序或者从储存部分808加载到随机访问存储器(Random Access Memory，RAM)803中的程序而执行各种适当的动作和处理。在RAM 803中，还存储有系统操作所需的各种程序和数据。CPU 801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(Input/Output，I/O)接口805也连接至总线804。
以下部件连接至I/O接口805：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(Cathode Ray Tube，CRT)、液晶显示器(Liquid Crystal Display，LCD)等以及扬声器等的输出部分807；包括硬盘等的储存部分808；以及包括诸如LAN(Local Area Network，局域网)卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入储存部分808。
特别地，根据本申请的实施例，各个方法流程图中所描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(CPU)801执行时，执行本申请的系统中限定的各种功能。
需要说明的是，本申请实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、闪存、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、光 存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。
附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本申请实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本申请实施方式的方法。
本领域技术人员在考虑说明书及实践这里公开的申请后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。
应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (12)

  1. 一种界面编辑方法，包括：
    获取应用启动指令并根据所述应用启动指令展示应用界面，所述应用界面中包括功能组件；
    当检测到对所述功能组件执行的长按操作时，触发操作反馈；
    当检测到所述功能组件在所述应用界面中被拖动时，所述功能组件跟随拖动轨迹移动；
    当检测到拖动停止并且所述功能组件满足组件移动条件时，在拖动停止的位置处展示所述功能组件。
  2. 根据权利要求1所述的方法，其中，所述应用界面中包括第一容器和第二容器；所述当检测到对所述功能组件执行的长按操作时，触发操作反馈，包括：
    获取所述长按操作的触摸点对应的坐标信息并根据所述坐标信息确定触摸点所在的容器；
    若所述触摸点在所述第一容器内，遍历所述第一容器内的各个组件并根据所述坐标信息确定所述长按操作针对的功能组件；
    删除所述功能组件并记录所述功能组件的起始位置；
    在所述起始位置展示占位组件并触发操作反馈。
  3. 根据权利要求2所述的方法，其中，所述当检测到所述功能组件在所述应用界面中被拖动时，所述功能组件跟随拖动轨迹移动，包括：
    当检测到在所述应用界面中的拖动操作时，所述占位组件跟随拖动轨迹移动；
    在所述占位组件移动过程中，若所述占位组件与所述第一容器或者所述第二容器中的其他组件之间交叠，则更新所述其他组件的位置，以使所述其他组件为所述占位组件空出位置。
  4. 根据权利要求2所述的方法，其中，所述当检测到拖动停止并且所述功能组件满足组件移动条件时，在拖动停止的位置处展示所述功能组件，包括：
    当检测到拖动停止时，确定所述占位组件所在的容器；
    若所述占位组件处于所述第二容器中并且所述第二容器中的组件数量低于所述第二容器的组件数量上限，则确定所述功能组件满足组件移动条件；
    隐藏所述占位组件并且在所述第二容器中拖动停止的位置处添加所述功能组件；
    根据所述功能组件的位置，更新所述第二容器中组件的布局。
  5. 根据权利要求4所述的方法，其中，所述当检测到拖动停止时，确定所述占位组 件所在的容器之后，所述方法还包括：
    当检测到拖动停止时，若所述占位组件未处于任一所述容器中或者所述占位组件所在的容器中的组件数量等于或大于所在容器的组件容纳阈值，则所述占位组件移动回到所述起始位置；
    隐藏所述占位组件并且在所述起始位置添加所述功能组件。
  6. 根据权利要求4所述的方法，其中，所述方法还包括：
    当检测到所述长按操作被打断时，所述占位组件移动回到所述起始位置；
    隐藏所述占位组件并在所述起始位置添加所述功能组件。
  7. 根据权利要求2所述的方法，其中，所述第一容器中还包括关联组件，所述关联组件与所述第二容器之间存在关联关系；所述方法还包括：
    当检测到拖动停止时，若所述占位组件与所述关联组件之间交叠，则根据所述关联组件与所述第二容器之间的关联关系，所述占位组件移动到所述第二容器中；
    隐藏所述占位组件并且在所述第二容器中添加所述功能组件。
  8. 根据权利要求1所述的方法，其中，所述方法还包括：
    监控每个所述功能组件的使用频率信息，以确定所述功能组件的应用热度，并基于所述应用热度推荐目标位置；
    在检测到所述功能组件被拖动时，在所述应用界面中显示推荐的所述目标位置。
  9. 一种界面编辑装置，包括：
    界面展示模块，用于获取应用启动指令并根据所述应用启动指令展示应用界面，所述应用界面中包括功能组件；
    反馈触发模块，用于当检测到对所述功能组件执行的长按操作时，触发操作反馈；
    组件移动模块，用于当检测到所述功能组件在所述应用界面中被拖动时，所述功能组件跟随拖动轨迹移动；
    组件展示模块，用于当检测到拖动停止并且所述功能组件满足组件移动条件时，在拖动停止的位置处展示所述功能组件。
  10. 一种电子设备，包括：
    处理器；
    存储器，用于存储所述处理器的可执行指令；
    其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1至8中任意一项所述的界面编辑方法。
  11. 一种计算机可读介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述的界面编辑方法。
  12. 一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，在所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述的界面编辑方法。
PCT/CN2022/140760 2022-03-14 2022-12-21 界面编辑方法、装置、电子设备和可读介质 WO2023173868A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210249588.9 2022-03-14
CN202210249588.9A CN114610190B (zh) 2022-03-14 界面编辑方法、装置、电子设备和可读介质

Publications (1)

Publication Number Publication Date
WO2023173868A1 true WO2023173868A1 (zh) 2023-09-21

Family

ID=81863462

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/140760 WO2023173868A1 (zh) 2022-03-14 2022-12-21 界面编辑方法、装置、电子设备和可读介质

Country Status (1)

Country Link
WO (1) WO2023173868A1 (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104516880A (zh) * 2013-09-26 2015-04-15 Sap欧洲公司 图形的基于区块的布局
CN107015721A (zh) * 2016-10-20 2017-08-04 阿里巴巴集团控股有限公司 一种应用界面的管理方法和装置
CN110286899A (zh) * 2019-06-28 2019-09-27 北京字节跳动网络技术有限公司 应用程序显示界面的编辑方法及装置、存储介质
CN111124583A (zh) * 2019-12-25 2020-05-08 上海传英信息技术有限公司 功能界面编辑方法、移动终端及可读存储介质
CN114610190A (zh) * 2022-03-14 2022-06-10 富途网络科技(深圳)有限公司 界面编辑方法、装置、电子设备和可读介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104516880A (zh) * 2013-09-26 2015-04-15 Sap欧洲公司 图形的基于区块的布局
CN107015721A (zh) * 2016-10-20 2017-08-04 阿里巴巴集团控股有限公司 一种应用界面的管理方法和装置
CN110286899A (zh) * 2019-06-28 2019-09-27 北京字节跳动网络技术有限公司 应用程序显示界面的编辑方法及装置、存储介质
CN111124583A (zh) * 2019-12-25 2020-05-08 上海传英信息技术有限公司 功能界面编辑方法、移动终端及可读存储介质
CN114610190A (zh) * 2022-03-14 2022-06-10 富途网络科技(深圳)有限公司 界面编辑方法、装置、电子设备和可读介质

Also Published As

Publication number Publication date
CN114610190A (zh) 2022-06-10

Similar Documents

Publication Publication Date Title
US11800192B2 (en) Bullet screen processing method and apparatus, electronic device, and computer-readable storage medium
KR102324286B1 (ko) 애플리케이션 인터페이스 관리 방법 및 장치
US20210397309A1 (en) Interface display method and apparatus, and storage medium
CN111050203B (zh) 一种视频处理方法、装置、视频处理设备及存储介质
CN110333918B (zh) 一种管理寄宿程序的方法与设备
CN115509398A (zh) 使用即时消息服务以显示图释的方法及其用户装置
WO2022205772A1 (zh) 直播间的页面元素展示方法及装置
CN104007894A (zh) 便携式设备及其多应用操作方法
CN112860148B (zh) 勋章图标的编辑方法、装置、设备及计算机可读存储介质
US20080122849A1 (en) Method for displaying animation and system thereof
CN111343074B (zh) 一种视频处理方法、装置和设备以及存储介质
US20110231424A1 (en) Method and system for automated file aggregation on a storage device
WO2022048329A1 (zh) 菜单显示方法和装置
US11278801B2 (en) Management of provisioning of video game during game preview
CN112887797B (zh) 控制视频播放的方法及相关设备
CN111831190B (zh) 音乐应用程序控制方法、装置及电子设备
EP2731011A1 (en) Shared instant media access for mobile devices
US20230241499A1 (en) Position adjustment method and apparatus for operation control, terminal, and storage medium
CN107835986A (zh) 一种电子设备的数据操作方法及电子设备
WO2023173868A1 (zh) 界面编辑方法、装置、电子设备和可读介质
WO2023051135A1 (zh) 元素显示方法、元素选择方法、装置、设备及存储介质
CN115460448A (zh) 一种媒体资源编辑方法、装置、电子设备以及存储介质
CN114610190B (zh) 界面编辑方法、装置、电子设备和可读介质
CN113419660A (zh) 视频资源处理方法、装置、电子设备及存储介质
CN112783386A (zh) 页面跳转方法、装置、存储介质及计算机设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22931874

Country of ref document: EP

Kind code of ref document: A1