Method, device and equipment for displaying associated function options in page

Abstract

The invention relates to the technical field of information display in the financial field, and provides a method, device and equipment for displaying associated function options in a page. When a specific operation on a target object in the page is detected, determining a full-amount association function interaction control associated with the target object; the full-amount associated function interaction control is arranged into a control ring which is large in the near and small in the far and can rotate integrally; and displaying the control ring on the page by taking the target object as a center. According to the embodiment of the invention, more associated function options can be quickly displayed in a limited page space.

Description

Technical Field

[0001] The present invention relates to the field of information display technology in the financial field, and in particular to a method, device and equipment for displaying related function options on a page. Background Art

[0002] The pages of some applications (such as financial service apps, etc.) can provide associative services of related functions, but these associative services generally need to be passively triggered (for example, users search through active methods) to be displayed. In addition, due to limited page space, the page generally only supports the display of 3 to 4 options for related functions, which is difficult to meet the needs of displaying more related functions in some scenarios. Therefore, how to quickly display more related function options in a limited page space has become a technical problem that needs to be solved urgently. Summary of the invention

[0003] The purpose of the embodiments of this specification is to provide a method, apparatus and device for displaying related function options in a page, so as to realize quick display of more related function options in a limited page space.

[0004] To achieve the above objectives, on the one hand, an embodiment of the present specification provides a method for displaying related function options on a page, including:

[0005] Display page;

[0006] When a specific operation on a target object in the page is detected, determining a full range of associated functional interactive controls associated with the target object;

[0007] Arrange the interactive controls of all the associated functions into a control ring that is larger near and smaller far away and can rotate as a whole;

[0008] The control ring is displayed on the page with the target object as the center.

[0009] In the method for displaying related function options on a page in an embodiment of the present specification, determining all related function interaction controls associated with the target object includes:

[0010] From the object and associated function interaction control mapping relationship table, all associated function interaction controls corresponding to the target object are matched to form a full set of associated function interaction controls associated with the target object.

[0011] In the method for displaying related function options on a page in an embodiment of the present specification, after displaying the control ring on the page with the target object as the center, the method further includes:

[0012] When a rotation operation on the control ring is detected, a rotation direction of the rotation operation is determined, and a rotation displacement corresponding to the rotation operation is calculated in real time;

[0013] According to the rotation displacement and the rotation direction, updating the new position of each of the associated function interactive controls on the control ring in real time;

[0014] The display size of each of the associated functional interactive controls is adjusted in real time according to the new position of each of the associated functional interactive controls on the control ring, so that the control ring dynamically satisfies the layout of larger objects near and smaller objects far away.

[0015] In the method for displaying related function options in a page in an embodiment of the present specification, the display page includes:

[0016] Determine page border layout parameters of the page to be displayed;

[0017] The page is displayed on the screen of the target terminal according to the page boundary layout parameters.

[0018] In the method for displaying associated function options in a page according to an embodiment of the present specification, determining the page boundary layout parameters of the page to be displayed includes:

[0019] Obtain the device type and screen characteristics of the target terminal;

[0020] The device type and the screen features are input into a pre-trained page boundary layout prediction model to obtain page boundary layout parameters of the page to be displayed.

[0021] In the method for displaying associated function options in a page according to the embodiment of the present specification, the screen feature includes the display area size.

[0022] In the method for displaying related function options on a page in an embodiment of the present specification, displaying the control ring on the page with the target object as the center includes:

[0023] The control ring is displayed in a floating manner on the page with the target object as the center.

[0024] On the other hand, the embodiment of this specification also provides a device for displaying related function options in a page, including:

[0025] Page display module, used to display pages;

[0026] A control determination module, configured to determine, when a specific operation on a target object in the page is detected, a full range of associated functional interactive controls associated with the target object;

[0027] A control layout module, used to layout the full range of associated function interactive controls into a control ring that is larger near and smaller far and can rotate as a whole;

[0028] A control display module is used to display the control ring on the page with the target object as the center.

[0029] On the other hand, an embodiment of the present specification further provides a computer device, including a memory, a processor, and a computer program stored in the memory, wherein when the computer program is executed by the processor, the instructions of the above method are executed.

[0030] On the other hand, an embodiment of the present specification further provides a computer storage medium on which a computer program is stored. When the computer program is executed by a processor of a computer device, the instructions of the above method are executed.

[0031] It can be seen from the technical solutions provided in the above embodiments of the present specification that in the embodiments of the present specification, when a specific operation on a target object in a page is detected, all the associated functional interaction controls associated with the target object can be arranged into a control ring that can be rotated as a whole in a layout manner with larger controls near and smaller controls far away; since the associated functional interaction controls that are relatively far away on the control ring are displayed in a reduced size, more associated functional options can be displayed in a limited page space; not only that, the user only needs to perform a specific operation (such as long press, etc.) on the target object in the page, and the full amount of associated functional interaction controls associated with the target object can be automatically displayed without the user having to search or other methods to find them, thereby improving the display efficiency of the full amount of associated functional interaction controls associated with the target object and improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] In order to more clearly illustrate the technical solutions in the embodiments of this specification or the prior art, the following briefly introduces the drawings required for use in the embodiments or the prior art description. Obviously, the drawings described below are only some embodiments recorded in this specification. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative labor. In the drawings:

[0033] Figure 1 A schematic diagram of an application environment for displaying associated function options on a page in some embodiments of this specification is shown;

[0034] Figure 2 A flowchart showing a method for displaying associated function options in a page in some embodiments of this specification is shown;

[0035] Figure 3 Shows Figure 2 A flow chart showing a page in the method shown;

[0036] Figure 4 A schematic diagram showing an object selection on a page in an exemplary embodiment of the present specification is shown;

[0037] Figure 5 A schematic diagram of a control ring in an exemplary embodiment of the present specification is shown;

[0038] Figure 6 A flowchart showing a method for displaying associated function options in a page in some other embodiments of this specification is shown;

[0039] Figure 7 A schematic diagram showing a rotation operation of a control ring in an exemplary embodiment of the present specification is shown;

[0040] Figure 8 A schematic diagram showing a control ring updated based on a rotation operation in an exemplary embodiment of the present specification;

[0041] Fig. 9 A structural block diagram of a device for displaying associated function options on a page in some embodiments of this specification is shown;

[0042] Fig.10 A structural block diagram of a computer device in some embodiments of the present specification is shown.

[0043] [Description of Reference Numerals]

[0044] 10. Client;

[0045] 20. Server;

[0046] 91. Page display module;

[0047] 92. Control determination module;

[0048] 93. Control layout module;

[0049] 94. Control display module;

[0050] 1002. Computer equipment;

[0051] 1004. Processor;

[0052] 1006. Memory;

[0053] 1008. Driving mechanism;

[0054] 1010, input / output interface;

[0055] 1012. Input device;

[0056] 1014. Output device;

[0057] 1016. Presentation equipment;

[0058] 1018. Graphical user interface;

[0059] 1020. Network interface;

[0060] 1022. Communication link;

[0061] 1024. Communication bus. DETAILED DESCRIPTION

[0062] In order to enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below in conjunction with the drawings in the embodiments of this specification. Obviously, the described embodiments are only part of the embodiments of this specification, not all of the embodiments. Based on the embodiments in this specification, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of this specification.

[0063] Figure 1 , a schematic diagram of an application environment for displaying associated function options on a page in some embodiments of the present specification is shown; the application environment includes a client 10 and a server 20. The client 10 can initiate a page display request to the server 20; in response to the page display request, the server 20 can display the page; when a specific operation on a target object in the page is detected, the full amount of associated function interactive controls associated with the target object are determined; the full amount of associated function interactive controls are laid out as a control ring that is larger near and smaller far and can rotate as a whole; the control ring is displayed on the page with the target object as the center; in this way, more associated function options can be quickly displayed in a limited page space.

[0064] In some embodiments of the present specification, the client 10 may be a self-service terminal device, a mobile terminal (i.e., a smart phone), a display, a desktop computer, a tablet computer, a laptop computer, a digital assistant, or a smart wearable device, etc. Among them, the smart wearable device may include a smart bracelet, a smart watch, smart glasses, or a smart helmet, etc. Of course, the client 10 is not limited to the above-mentioned electronic devices with a certain entity, and it may also be software running in the above-mentioned electronic devices.

[0065] In some embodiments of the present specification, the server 20 may be an electronic device with computing and network interaction functions; or may be software running in the electronic device and providing business logic for data processing and network interaction.

[0066] In addition, it should be noted that Figure 1 What is shown is only an application environment provided by this specification. In actual application, there may be multiple clients 10 and multiple servers 20, and this specification does not impose any limitation.

[0067] The embodiment of this specification provides a method for displaying related function options in a page, which can be applied to the above-mentioned server side, referring to Figure 2 As shown, in some embodiments of the present specification, the method for displaying related function options in a page may include the following steps:

[0068] Step 201, display the page.

[0069] Step 202: When a specific operation on a target object in the page is detected, a full range of associated functional interactive controls associated with the target object is determined.

[0070] Step 203: Arrange the interactive controls of all the associated functions into a control ring that is larger near and smaller far away and can rotate as a whole.

[0071] Step 204: Display the control ring on the page with the target object as the center.

[0072] In an embodiment of the present specification, when a specific operation on a target object in a page is detected, all the associated functional interaction controls associated with the target object can be arranged into a control ring that can be rotated as a whole in a layout manner with larger controls near and smaller controls far away; since the associated functional interaction controls that are relatively far away on the control ring are displayed in a reduced size, more associated functional options can be displayed in a limited page space; not only that, the user only needs to perform a specific operation (such as long pressing, etc.) on the target object in the page, and the full amount of associated functional interaction controls associated with the target object can be automatically displayed, without the user having to search or other methods to find them, thereby improving the display efficiency of the full amount of associated functional interaction controls associated with the target object and improving the user experience.

[0073] In some embodiments of this specification, the display page can be triggered based on a page display request from a client, or can be automatically triggered based on the application program settings. Depending on the application scenario, the displayed page can be any page containing text, images, and / or sounds, and the displayed page contains content that can be operated by the user (such as interactive controls). For example, in Figure 4 In the illustrated exemplary embodiment, a page (or user interface) of a financial application is displayed.

[0074] refer to Figure 3 As shown, in some embodiments of this specification, displaying a page may include the following steps:

[0075] Step 301: Determine page boundary layout parameters of the page to be displayed.

[0076] The page border layout parameter is the size of the page; because the screen sizes of different terminal devices are generally different, when the same page in an application is displayed on different terminal devices, the size of the page can be different to adapt to different terminal devices.

[0077] In an embodiment of the present specification, determining the page boundary layout parameters of the page to be displayed may include:

[0078] (1) Obtain the device type and screen characteristics of the target terminal.

[0079] The device parameter information can be obtained from the operating system of the target terminal through specific instructions, so as to extract the device type and screen features of the target terminal. The device type screen may include but is not limited to: smart phones, laptops, desktop computers, tablet computers, smart glasses, smart helmets, smart watches, etc. The screen features may include the display area size of the screen, the screen shape, etc.

[0080] (2) The device type and the screen features are input into a pre-trained page boundary layout prediction model to obtain page boundary layout parameters of the page to be displayed.

[0081] The page border layout parameters are the top border offset, bottom border offset, left border offset and right border offset of the page, taking the center point of the display area of ​​the screen of the target terminal (or other specified position) as the origin.

[0082] Step 302: Display the page on the screen of the target terminal according to the page boundary layout parameters.

[0083] In the embodiments of this specification, the page border layout prediction model can be obtained by training the machine learning initial model. In this way, through machine learning judgment, it is possible to solve the problems of stretching deformation and font misalignment that may be caused by the target terminal adaptively adjusting the page border layout parameters.

[0084] In some embodiments of the present specification, the page boundary layout prediction model can be pre-trained in the following manner:

[0085] (1) Collect and prepare the dataset: Collect UI cutouts and their corresponding size information for different screen sizes. Make sure the dataset contains enough samples to cover various common screen sizes and device types.

[0086] (2) Data preprocessing: Preprocess the collected UI cut images, including resizing, cropping edges, converting to appropriate data formats, etc. Ensure that each cut image matches its corresponding size information.

[0087] (3) Feature extraction: Use appropriate machine learning techniques, such as convolutional neural networks (CNNs), to extract features from the preprocessed UI slices to help the model learn the key features of UI components, such as boundaries and shapes.

[0088] (4) Labeling data: Add appropriate labels to the size information of each UI cut so that the machine learning model can perform supervised learning. The labels can be information such as boundary coordinates, width, and height relative to the page size.

[0089] (5) Dataset division: The labeled dataset is divided into training set, validation set, and test set. The training set is used for model training, the validation set is used to adjust the model's hyperparameters and verify performance, and the test set is used to evaluate the performance of the final model.

[0090] (6) Build a machine learning model: Select an appropriate machine learning model (such as a decision tree or support vector machine, etc.) as the initial training model, use the training set to train the model, and use the validation set to tune the model.

[0091] (7) Model evaluation and tuning: Use the test set to evaluate the performance of the trained model. Perform model tuning based on the evaluation results, such as adjusting the network structure, regularization parameters, or learning rate.

[0092] (8) Prediction and automatic adjustment: The new UI slice is input into the trained model, and the model is used to predict and obtain the boundary information of the UI component (i.e., the page boundary layout parameters). Based on the prediction results, the appropriate scaling factor is calculated and the size of the UI component is automatically adjusted to adapt to different screen sizes.

[0093] (9) Integration into the application: Integrate the trained model and automatic adjustment logic into the application. When the application loads, use the model to predict and automatically adjust the size of the UI components based on the device’s screen size.

[0094] (10) Testing and Optimization: Test the application on different devices and optimize based on user feedback and performance test results. If needed, iterative improvements and retraining of the model can be performed to obtain more accurate and reliable UI component sizing.

[0095] The target object is an operable object in the page that is pre-configured with an associated function interactive control. For example, in some exemplary embodiments, the target object may be a keyword, an interactive control, etc. in the page. Each associated function interactive control corresponding to the operable object is a visual interactive control that can provide an associative service of an associated function. For example, in an exemplary embodiment, with "remittance" as the target object, its associated function interactive controls may include but are not limited to: domestic remittance, cross-border remittance, foreign exchange settlement and sale, payee, payment limit, transfer from other banks, etc. Therefore, in some embodiments of the present specification, determining the full amount of associated function interactive controls associated with the target object may include: matching all associated function interactive controls corresponding to the target object from the table of mapping relationships between objects and associated function interactive controls to form the full amount of associated function interactive controls associated with the target object. Among them, in the table of mapping relationships between objects and associated function interactive controls, a mapping relationship between each object and one or more associated function interactive controls is configured.

[0096] A specific operation is a pre-set action for triggering all the associated functional interaction controls associated with the matching target object; once the action is applied to an operable object in the page that is pre-configured with an associated functional interaction control, the action of all the associated functional interaction controls associated with the matching target object can be triggered. In some exemplary embodiments, the specific operation may be a double-click, a long press, a triple-click, etc., according to actual needs. It should be noted that specific operations are not limited to contact specific operations, but may also include non-contact specific operations (such as non-contact specific gestures or other body movements, etc.). For example, in an exemplary embodiment, when the user long presses Figure 4 When the "Remittance" interactive control on the page shown, the server can generate a corresponding control ring and display it (for example Figure 5 shown).

[0097] In the embodiments of the present specification, by arranging all the associated functional interactive controls associated with the target object into a control ring, and displaying the control ring with the target object as the center, it is easy for users to identify and operate. By arranging the associated functional interactive controls on the control ring so that they are larger near and smaller far away, the associated functional interactive controls that are relatively far away on the control ring are reduced in size, so that more associated functional options (i.e., more associated functional interactive controls) can be displayed in a limited page space.

[0098] refer to Figure 6 As shown, in some other embodiments of the present specification, the method for displaying related function options in a page may include the following steps:

[0099] Step 601: Display the page.

[0100] Step 602: When a specific operation on a target object in the page is detected, a full range of associated functional interactive controls associated with the target object is determined.

[0101] Step 603: Arrange the interactive controls of all the associated functions into a control ring that is larger when near and smaller when far and can rotate as a whole.

[0102] Step 604: Display the control ring on the page with the target object as the center.

[0103] Step 605: When a rotation operation on the control ring is detected, the rotation direction of the rotation operation is determined, and the rotation displacement corresponding to the rotation operation is calculated in real time.

[0104] In some embodiments of the present specification, the rotation operation of the control ring may be a left or right sliding (or dragging) of any associated function interactive control on the control ring. Figure 7 In the exemplary embodiment shown, the user can slide the control ring to the left with a finger, a mouse or other input operation component, and the control ring will rotate clockwise.

[0105] In some embodiments of the present specification, the rotation direction of the control ring can be determined based on the direction in which the user slides (or drags) the control ring; for example, when the user slides (or drags) the control ring to the left, it can be confirmed that the rotation direction of the control ring is clockwise; when the user slides (or drags) the control ring to the right, it can be confirmed that the rotation direction of the control ring is counterclockwise.

[0106] In some embodiments of the present specification, the rotation displacement corresponding to the rotation operation is positively correlated with the distance or duration of sliding (or dragging) the control ring. Therefore, in some embodiments of the present specification, the rotation displacement corresponding to the rotation operation can be determined by detecting the distance or duration of sliding (or dragging) the control ring. The rotation displacement refers to: the central angle of the rotation of the starting point of the rotation operation with the target object as the center.

[0107] Step 606: Update the new position of each of the associated function interactive controls on the control ring in real time according to the rotation displacement and the rotation direction.

[0108] In an embodiment of the present specification, the new position of each of the associated function interactive controls on the control ring is updated in real time according to the rotation displacement and the rotation direction, so that when the user starts the rotation operation, the control ring starts to rotate synchronously with the target object as the center; when the user stops the rotation operation, the control ring stops rotating synchronously.

[0109] For example, in Figure 7In the exemplary embodiment shown, the user can slide the control ring to the left with a finger, a mouse or other input operation component, and the control ring will rotate clockwise synchronously, so that the new position of each of the associated functional interactive controls on the control ring can be updated in real time (for example, Figure 8 shown).

[0110] Step 607: adjust the display size of each of the associated functional interactive controls in real time according to the new position of each of the associated functional interactive controls on the control ring, so that the control ring dynamically satisfies the layout of larger near and smaller far.

[0111] In the embodiments of the present specification, when the position of the associated function interactive control on the control ring changes, its display size is also dynamically adjusted to follow the change of position; for example, when the position of the associated function interactive control is closer to the front, its display size increases accordingly; when the position of the associated function interactive control is closer to the back, its display size decreases accordingly. Figure 7 In the associated function interactive control shown in FIG. 1 , when the position of “Payee” is closer to the front, its display size can be increased accordingly to Figure 8 As shown in FIG. 1 , when the position of “transfer from another bank” is further back, its display size may correspond to the following: Figure 8 As shown in the figure, the control ring can meet the layout of large near and small far in both static and dynamic conditions, which is more conducive to users to identify and operate the interactive controls of related functions.

[0112] Above Figure 6 In the illustrated embodiment, in a layout where objects are larger when near and smaller when far, the associated functional interactive controls that are displayed in a smaller size are not easy to identify; by rotating the control ring, the user can rotate the required associated functional interactive controls to an easily identifiable position (e.g., a relatively forward position on the control ring), thereby facilitating operation thereof.

[0113] In some embodiments of the present specification, displaying the control ring with the target object as the center on the page may include: displaying the control ring in a floating manner with the target object as the center on the page. By displaying the control ring in a floating manner with larger objects near and smaller objects far away, not only can the primary and secondary points of focus be achieved, but it also helps guide users to ignore other text and functional interference, and place the visual center of interaction on the associated functions extending around the target object, thereby facilitating users to quickly select and operate the associated functional interactive controls to achieve corresponding functional services.

[0114] In some embodiments of this specification, the control ring can be a control ring, a control elliptical ring or other closed ring, which can be customized as needed. Each associated function interactive control located on the control ring can be a customized graphic (such as a circle, a rounded rectangle, etc.). For example, in an exemplary embodiment, an interactive page can be created by using HTML, CSS and JavaScript, which can specifically include the following content:

[0115] 1. Create HTML structure: Use HTML tags to create the page structure, including a container element ` <div id＝"container">`, a ring element` <div id＝"ring">`, and multiple sphere elements` <div class＝"ball">`, add a unique ID to each sphere element, the ring element is a control ring, and each sphere element is an associated functional interactive control.

[0116] 2. Add CSS styles: Use CSS styles to set the appearance of containers, rings and spheres. You can set properties such as width, height, color, shape, etc. Adjust the position and size to suit your page needs.

[0117] 3. Write JavaScript interaction logic: Use JavaScript to achieve interactive effects. First, obtain the element references of the ring and sphere, as well as the coordinates of the center point of the ring. Then, add a click event listener to each sphere to select the sphere; add an event listener to the ring to detect user operations (such as detecting mouse presses, drags, and lifts).

[0118] 4. Sphere selection control: When you click a sphere, add it to a selected sphere variable and add a selected style to it. If a sphere is already selected, remove its selected style first, and then update the selected sphere variable to the currently clicked sphere.

[0119] 5. Ring drag control: The ring here refers to the virtual track where the spheres are distributed and run. When you hold down a sphere and drag it left and right, the sphere is triggered to move along the ring track. When the ring drag is triggered, the initial mouse position is recorded in the mouse down event listener of the ring. Then, in the mouse move event listener of the entire document, the change in the distance of the mouse in the X and Y directions is calculated, and the rotation angle is calculated based on this distance. If a sphere is selected, its position is rotated relative to the center point of the ring, and the new position is calculated based on the rotation angle. Finally, in the mouse up event listener of the entire page, the dragging operation is stopped.

[0120] Although the process flows described above include multiple operations that occur in a particular order, it should be clearly understood that the processes may include more or fewer operations, which may be performed sequentially or in parallel (eg, using parallel processors or a multi-threaded environment).

[0121] Corresponding to the above method for displaying related function options in a page, the embodiment of the present specification also provides a device for displaying related function options in a page, which can be configured on the above server, referring to Fig. 9 As shown, in some embodiments of the present specification, the means for displaying the associated function options in the page may include:

[0122] A page display module 91, used for displaying pages;

[0123] A control determination module 92, configured to determine a full range of associated functional interactive controls associated with a target object in the page when a specific operation on the target object is detected;

[0124] A control layout module 93, used to layout the full-volume associated function interactive controls into a control ring that is larger near and smaller far and can rotate as a whole;

[0125] The control display module 94 is used to display the control ring on the page with the target object as the center.

[0126] For the convenience of description, the above device is described in various units according to their functions. Of course, when implementing this specification, the functions of each unit can be implemented in the same or multiple software and / or hardware.

[0127] It should be noted that in the embodiments of this specification, the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved are all information and data authorized by the user and fully authorized by all parties.

[0128] The embodiments of this specification also provide a computer device. Fig.10 As shown, in some embodiments of the present specification, the computer device 1002 may include one or more processors 1004, such as one or more central processing units (CPUs) or graphics processing units (GPUs), and each processing unit may implement one or more hardware threads. The computer device 1002 may also include any memory 1006, which is used to store any kind of information such as code, settings, data, etc. In a specific embodiment, the computer program on the memory 1006 and can be run on the processor 1004, when the computer program is run by the processor 1004, can execute the instructions of the method of displaying the associated function options in the page described in any of the above embodiments. Non-limiting, for example, the memory 1006 may include any one or more combinations of the following: any type of RAM, any type of ROM, flash memory device, hard disk, optical disk, etc. More generally, any memory can use any technology to store information. Further, any memory can provide volatile or non-volatile retention of information. Further, any memory can represent a fixed or removable component of the computer device 1002. In one embodiment, when the processor 1004 executes the associated instructions stored in any memory or combination of memories, the computer device 1002 can perform any operation of the associated instructions. The computer device 1002 also includes one or more drive mechanisms 1008 for interacting with any memory, such as a hard disk drive mechanism, an optical disk drive mechanism, etc.

[0129] The computer device 1002 may also include an input / output interface 1010 (I / O) for receiving various inputs (via input device 1012) and for providing various outputs (via output device 1014). A specific output mechanism may include a presentation device 1016 and an associated graphical user interface 1018 (GUI). In other embodiments, the input / output interface 1010 (I / O), input device 1012, and output device 1014 may not be included, and the computer device 1002 may be used as a computer device in a network. The computer device 1002 may also include one or more network interfaces 1020 for exchanging data with other devices via one or more communication links 1022. One or more communication buses 1024 couple the components described above together.

[0130] The communication link 1022 may be implemented in any manner, for example, via a local area network, a wide area network (e.g., the Internet), a point-to-point connection, etc., or any combination thereof. The communication link 1022 may include any combination of hardwired links, wireless links, routers, gateway functions, name servers, etc. governed by any protocol or combination of protocols.

[0131] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), computer-readable storage media, and computer program products of some embodiments of the present specification. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processor to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processor generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0132] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processor to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0133] These computer program instructions can also be loaded onto a computer or other programmable data processor so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0134] In a typical configuration, a computer device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0135] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0136] Computer-readable media include permanent and non-permanent, removable and non-removable media that can be used to store information by any method or technology. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computer device. As defined in this specification, computer-readable media does not include temporary computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0137] Those skilled in the art will appreciate that the embodiments of this specification may be provided as methods, systems or computer program products. Therefore, the embodiments of this specification may take the form of complete hardware embodiments, complete software embodiments or embodiments combining software and hardware. Moreover, the embodiments of this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0138] The present specification embodiments may be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present specification embodiments may also be practiced in distributed computing environments where tasks are performed by remote processors connected through a communication network. In a distributed computing environment, program modules may be located in local and remote computer storage media, including storage devices.

[0139] It should also be understood that in the embodiments of this specification, the term "and / or" is only a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent three situations: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0140] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0141] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the embodiments of this specification. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, unless they are contradictory.

[0142] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method for displaying related function options in a page, characterized in that: include: Display page; When a specific operation on a target object in the page is detected, determining a full range of associated functional interactive controls associated with the target object; Arrange the interactive controls of all the associated functions into a control ring that is larger near and smaller far away and can rotate as a whole; The control ring is displayed on the page with the target object as the center.

2. The method for displaying related function options in a page according to claim 1, characterized in that: The step of determining the full range of associated functional interaction controls associated with the target object includes: From the object and associated function interaction control mapping relationship table, all associated function interaction controls corresponding to the target object are matched to form a full set of associated function interaction controls associated with the target object.

3. The method for displaying related function options in a page according to claim 1, characterized in that: After displaying the control ring on the page with the target object as the center, the method further includes: When a rotation operation on the control ring is detected, a rotation direction of the rotation operation is determined, and a rotation displacement corresponding to the rotation operation is calculated in real time; According to the rotation displacement and the rotation direction, updating the new position of each of the associated function interactive controls on the control ring in real time; The display size of each of the associated functional interactive controls is adjusted in real time according to the new position of each of the associated functional interactive controls on the control ring, so that the control ring dynamically satisfies the layout of larger objects near and smaller objects far away.

4. The method for displaying related function options in a page according to claim 1, characterized in that: The display page includes: Determine page border layout parameters of the page to be displayed; The page is displayed on the screen of the target terminal according to the page boundary layout parameters.

5. The method for displaying related function options in a page according to claim 1, characterized in that: The step of determining the page boundary layout parameters of the page to be displayed includes: Obtain the device type and screen characteristics of the target terminal; The device type and the screen features are input into a pre-trained page boundary layout prediction model to obtain page boundary layout parameters of the page to be displayed.

6. The method for displaying related function options in a page according to claim 5, characterized in that: The screen characteristics include display area size.

7. The method for displaying related function options in a page according to claim 1, characterized in that: Displaying the control ring on the page with the target object as the center includes: The control ring is displayed in a floating manner on the page with the target object as the center.

8. A device for displaying related function options in a page, characterized in that: include: Page display module, used to display pages; A control determination module, configured to determine, when a specific operation on a target object in the page is detected, a full range of associated functional interactive controls associated with the target object; A control layout module, used to layout the full range of associated function interactive controls into a control ring that is larger near and smaller far and can rotate as a whole; A control display module is used to display the control ring on the page with the target object as the center.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory, characterized in that: When the computer program is executed by the processor, the computer program executes the instructions of the method according to any one of claims 1 to 7.

10. A computer storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor of a computer device, the computer program executes instructions of the method according to any one of claims 1 to 7.

Images