CN112433656A - Interface dynamic display method and equipment - Google Patents
Interface dynamic display method and equipment Download PDFInfo
- Publication number
- CN112433656A CN112433656A CN202011172047.8A CN202011172047A CN112433656A CN 112433656 A CN112433656 A CN 112433656A CN 202011172047 A CN202011172047 A CN 202011172047A CN 112433656 A CN112433656 A CN 112433656A
- Authority
- CN
- China
- Prior art keywords
- interface
- icons
- icon
- menu items
- display
- Prior art date
- Legal status (The legal status 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 status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 50
- 230000008569 process Effects 0.000 claims description 12
- 230000000694 effects Effects 0.000 claims description 11
- 230000003993 interaction Effects 0.000 claims description 5
- 230000009467 reduction Effects 0.000 claims description 5
- 230000029058 respiratory gaseous exchange Effects 0.000 claims description 5
- 230000003247 decreasing effect Effects 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 2
- 238000013016 damping Methods 0.000 description 2
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 230000003203 everyday effect Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
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
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- 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/0485—Scrolling or panning
-
- 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
- G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
- G06F2203/048—Indexing scheme relating to G06F3/048
- G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to the technical field of user interface graphic display, and discloses an interface dynamic display method and equipment, wherein the interface dynamic display method comprises the following steps: the method comprises the steps that an electronic device receives and installs an interface display template sent by a cloud server, wherein the interface display template comprises menu items on an interface; inquiring whether the function corresponding to the menu item exists in a function list of the electronic equipment; if not, deleting the icons corresponding to the menu items on the interface, and adjusting the display positions of the icons corresponding to the remaining menu items on the interface according to the weight. According to the technical scheme, the menu items which cannot be used by the electronic equipment in the interface display template can be deleted, and the user is prevented from clicking the icons of the menu items which cannot be normally used. And the technical scheme readjusts the deleted icons in the interface, so that the icon arrangement vacant positions formed after the icons in the interface are deleted can be automatically supplemented.
Description
Technical Field
The invention relates to the technical field of graphical display of user interfaces, in particular to a dynamic interface display method and device.
Background
Electronic equipment such as computers, mobile phones and song-ordering equipment generally performs man-machine interaction through display interfaces of display screens, different equipment or different application software have different display interfaces, and icons with menu items with different functions are displayed in the display interfaces for users to select. In the prior art, the icon styles of the menu items in the interface are displayed without difference, the positions of the icons in the interface are uniformly distributed, and the sizes of the icons are also the same, so that when the number of the icons is large, the user can hardly find the icon of the target menu item in the first time. In the prior art, after the menu items in the display interface need to be configured, the corresponding functions can be opened only when the icons of the menu items are clicked.
However, in some cases, the electronic device is managed by the cloud server, and the interface display template of the electronic device is completed by the cloud server and imported into the electronic device, and the interface display template of the electronic device includes the display style of the interface icon of the electronic device and the icon of the interface display. In general, the cloud server provides interface display templates for a plurality of electronic devices, software and hardware environments of each electronic device may be different, and installed applications are also different, so that the cloud server may include applications that can be installed on different electronic devices as much as possible when providing the interface display templates, and therefore the interface display templates received by the electronic devices may include software functions that the electronic devices do not have. After the electronic equipment is provided with the interface display template, menu item icons with different functions in the interface display template can be displayed in the electronic equipment display interface, but the condition that the entry functions of the icons of some menu items do not exist still exists, and when the icons are clicked, a prompt of 'the function is temporarily not started and the intention is respected' is often displayed, so that the use experience of a user is influenced.
Disclosure of Invention
Therefore, an interface dynamic display method needs to be provided, which is used for solving the technical problem that in the prior art, the use experience of a user is influenced by displaying icons of menu items which are not configured in a display interface.
In order to achieve the above object, the present invention provides a dynamic interface display method, which comprises the following steps:
the method comprises the steps that the electronic equipment receives and installs an interface display template, wherein the interface display template comprises a display style of an interface icon and a menu item corresponding to the interface display icon;
inquiring whether the function corresponding to the menu item in the interface display template exists in a function list of the electronic equipment or not;
if not, deleting the icons corresponding to the menu items on an interface display template interface, and adjusting the display positions of the remaining icons corresponding to the menu items on the interface according to the weight.
Further, the adjusting the display positions of the icons corresponding to the remaining menu items on the interface according to the weight includes:
presetting the weight of a menu item, wherein the weight is determined based on the number of times the menu item is clicked, or the weight is determined based on the number of times the menu item is expected to be clicked;
and configuring the positions of the icons on the interface according to the weights of the rest menu items, wherein the heavier the menu item is, the more the corresponding icon is centered at the arrangement position of the interface.
Further, the interface dynamic display method further comprises the following steps:
the method includes the steps of collecting the number of clicks of icons corresponding to interface menu items, counting the number of clicks of the icons corresponding to the menu items according to a preset period, rearranging the display positions of the icons corresponding to the menu items on an interface according to the number of clicks of the icons corresponding to the menu items, wherein the more the number of clicks is, the more the positions of the icons corresponding to the menu items on the interface are.
Further, the interface dynamic display method further comprises the following steps:
when the icons corresponding to the menu items are arranged on the interface, the size of the icons arranged in the center of the interface is the largest, and other icons are gradually reduced from the center to the periphery.
Further, the interface dynamic display method further comprises the following steps:
when the interface is slid, the icons move along the sliding direction, the size of the icons sliding to the center of the interface is gradually increased, and the size of the icons far away from the center of the interface is gradually decreased.
Further, in the sliding process of the icon, the width W of the icon at a certain time is: w ═ Wn-1-Wn)*d/D+Wn(ii) a Preset central line LnAnd said middle line Ln-1Said middle line LnThrough the center of the icon, another center line Ln-1Through the center of the adjacent icon n-1 of said icon, said midline LnAnd said middle line Ln-1Parallel, said median line LnAnd said middle line Ln-1The distance between the icons is D, and the center point of the icon is separated from the center line L at a certain moment in the process that the icon slides towards the adjacent icon n-1nD is more than or equal to 0 and less than or equal to D, and the width of the icon is WnThe width of the adjacent icon n-1 is Wn-1。
Furthermore, the interface comprises more than two rows or more than two columns of icons, the scaling values between two adjacent icons in the same row or the same column are different, and the scaling values of the icons in the same row or the same column are gradually increased along the direction from the center of the interface to the periphery.
Further, when the interface is slid, the icons in the interface synchronously move along the sliding direction; the movement of the icons configured to be topmost slows or stops when the icons configured to be bottommost are away from a top boundary of the interface or the icons configured to be bottommost are away from a bottom boundary of the interface.
Further, the method also comprises the following steps: when the icons in the interface do not slide, the icons in the interface are controlled to be gradually enlarged and reduced according to a preset period, the enlargement and reduction time for one time is different, more than one icon is enlarged and reduced at the same time, and the icon breathing display effect is achieved.
In order to solve the above technical problem, the present invention further provides another technical solution:
the device is provided with an interface for man-machine interaction, icons of more than two menu items are displayed on the interface, and the icons of the menu items are displayed by the interface dynamic display method according to any technical scheme.
Different from the prior art, the electronic equipment in the technical scheme receives and installs the interface display template, so that a user can conveniently display the interface of the electronic equipment, and after the interface display template is installed, whether the function corresponding to the menu item in the interface display template exists in the function list of the electronic equipment is inquired; if not, deleting the icons corresponding to the menu items in an interface display template, and adjusting the display positions of the icons corresponding to the remaining menu items on the interface according to the weight. Therefore, the menu items which cannot be used by the electronic equipment in the interface display template can be deleted, and the user is prevented from clicking the icons of the menu items which cannot be normally used. And the technical scheme readjusts the deleted icons in the interface, so that the icon arrangement vacant positions formed after the icons in the interface are deleted can be automatically supplemented.
Further, the above technical solution configures the position of the icon on the interface according to the weight of the preset menu item, so that the larger the weight of the menu item is, the more the center the corresponding icon is at the position arranged on the interface, and the weight is determined based on the number of times that the menu item is clicked, or the weight is determined based on the number of times that the menu item is expected to be clicked. Therefore, the positions of the corresponding icons of the menu items can be adjusted according to the clicking times of the menu items, and the icon of the menu item with higher clicking times is closer to the center of the interface, so that a user can find the icon of the target menu item conveniently at the first time.
Furthermore, the technical scheme determines the weight of the menu item by collecting the frequency of each menu item being selected, and adjusts the display style of the icon according to the weight, so that the display position and size of the icon are adjusted according to the weight, and the clicking operation of the user is facilitated.
Furthermore, in the above technical solution, the icons have different sizes, and along different arrangement directions, the sizes of the icons are linearly increased or decreased in different ways, so that the display styles of the icons are richer.
Furthermore, in the technical scheme, the icons move along with the sliding direction when the interface is slid, and when the icons move to the top or the bottom of the interface, the movement of the icons is slowed or stopped, so that the movement damping effect is realized, and the display effect is better compared with the existing linear dragging display mode.
Drawings
FIG. 1 is a flowchart of a method for dynamically displaying an interface according to an embodiment;
FIG. 2 is a flow diagram of an embodiment for dynamically adjusting the display position of an icon on an interface;
FIG. 3 is a diagram illustrating the display effect of the interface according to an embodiment;
FIG. 4 is a schematic diagram of the positions and widths of the centerlines and icons in the interface according to an embodiment;
FIG. 5 is a schematic diagram of an electronic device according to an embodiment;
description of the reference symbols
500. An electronic device;
501. a human-computer interaction interface;
Detailed Description
To explain technical contents, structural features, and objects and effects of the technical solutions in detail, the following detailed description is given with reference to the accompanying drawings in conjunction with the embodiments.
Referring to fig. 1 to 4, the present embodiment provides a dynamic interface display method. The interface dynamic display method can be applied to the operating system interfaces of electronic equipment with display interfaces such as computers, mobile phones, on-demand equipment and the like or the display interfaces of application software with different functions. As shown in fig. 1, the interface dynamic display method includes the steps of:
s101, receiving an interface display template by electronic equipment, wherein the interface display template comprises a display style of an interface icon and a menu item corresponding to the interface display icon;
s102, inquiring whether a function corresponding to a menu item in the interface display template exists in a function list of the electronic equipment or not;
s103, if not, deleting the icons corresponding to the menu items in an interface display template, and adjusting the display positions of the icons corresponding to the remaining menu items on the interface according to the weight;
and S104, if so, displaying the icons of the menu items on the display interface according to the icon display style in the interface display template.
In step S101, the electronic device receives an interface display template sent by a cloud server. The electronic equipment can be connected with the cloud server through a network, and the electronic equipment is managed by the cloud server. The cloud server can simultaneously manage electronic equipment in a plurality of audio-visual places, the electronic equipment can be song ordering equipment and the like in the audio-visual places, software and hardware information of the electronic equipment can be collected through the cloud server, and functions of the electronic equipment are configured. For example, the display style of the icons of each menu item of the interface configuring the song requesting device in the interface includes the icons of which menu items are displayed, the position, the size and the like of the icons in the interface. Because one cloud server needs to be configured for a plurality of electronic devices, the cloud server provides an interface display template of the electronic devices and sends the interface display template to the electronic devices, and the electronic devices receive the interface display template and install the interface display template. Meanwhile, the interface display template of the cloud server includes menu items of application software frequently used by the electronic device managed by the interface display template, and therefore the number of the menu items in the interface display template is generally greater than or equal to the number of the menu items of the application software installed in a certain electronic device. So the menu item comparison and deletion operation of step 102 needs to be performed.
In step S102, when querying whether the function of the menu item in the interface display template exists in the function list, the xml configuration files of all the menu items may be obtained, the function entry information sets at the tops of the menu items in the configuration files in the xml are collected, and then, whether the function corresponding to the menu item in the interface display template exists in the function list of the electronic device (that is, whether the electronic device has application software corresponding to the menu item) is queried one by one. If, in step S102, all the application software installed in the electronic device is recorded in the function list of the electronic device, and when the function corresponding to the menu item in the interface display template sent by the cloud server exists in the function list of the electronic device, it is described that the corresponding function can be opened when the menu item in the interface display template is clicked and selected, so that it is not necessary to delete the icon corresponding to the menu item, and it jumps to step S104, in step S104, the display position of the icon corresponding to the menu item on the interface is arranged according to the weight of the menu item, so that the icon of the menu item is displayed in the interface for the user to select.
In step S102, when the function of a certain menu item in the query interface display template is not in the function list, it indicates that the functional electronic device corresponding to the menu item is not installed, and cannot jump to the corresponding functional interface when clicked, so to prevent the user from clicking the uninstalled menu item, the user jumps to step S103, and deletes the menu item and the corresponding icon in step S103. In order to make the interface display cleaner and more convenient for the user to use, in the embodiment, after a menu item and a corresponding icon are deleted, the display style of the icons corresponding to the remaining menu items on the interface is adjusted, so that the icons of other menu items are placed in the blank positions left on the interface.
When the display style of the icons corresponding to the remaining menu items on the interface is adjusted in step S103, the positions of the corresponding icons may be adjusted according to the weights of the menu items described in the above embodiments, and the sizes of the icons may be adjusted according to the weights of the menu items, so that the icon of the menu item with the larger weight is closer to the center of the interface, and the size of the icon is larger. Icons for a plurality of menu items are displayed in the interface, and in different embodiments the icons for the menu items may be arranged differently, in some embodiments the icons may be arranged in a row-column arrangement, and in other embodiments the icons may be arranged in a circle.
According to the embodiment, whether the function of each menu item in the interface display template exists in the function list of the electronic equipment is inquired, and when the function of the menu item in the interface display template does not exist in the function configuration list of the electronic equipment, the icon of the menu item is deleted on the interface, so that the situation that a user clicks the icon of the menu item which cannot be normally used is avoided, and the use experience of the user is improved. And the display style of the deleted icon in the interface is readjusted, so that the icon arrangement vacancy formed after the icon in the interface is deleted can be automatically supplemented.
As shown in fig. 2, in an embodiment, the interface dynamic display method further includes the steps of:
s201, presetting the weight of a menu item, wherein the weight is determined based on the number of times the menu item is clicked, or the weight is determined based on the number of times the menu item is expected to be clicked;
s202, positions of the icons on the interface are configured according to the weights of the rest menu items, and the larger the weight of the menu item is, the more the center the corresponding icon is arranged on the interface.
In step S201, the weight of the menu item may be based on the frequency of selecting the menu item or the frequency of expecting to select the menu item, if the frequency of selecting or expecting to select the menu item is higher, the corresponding weight is higher, otherwise, the weight is lower. In step S202, the ranking priority of the menu items may be determined based on the weights of the menu items, and the menu items with higher weights have higher priorities and are closer to the center of the interface when the icon is displayed, thereby facilitating the user to find the menu item.
In some embodiments, the interface dynamic display method further includes collecting click times of each menu item periodically, adjusting the weight of the corresponding menu item according to the collected click times of each menu item at regular intervals (for example, every half day, every day, or every week), wherein the higher the collected click times is, the higher the corresponding weight is, and adjusting the position of the icon corresponding to the menu item in the interface according to the adjusted weight. Therefore, in the embodiment, the weight of each menu item can be dynamically adjusted, and the position of the icon of the menu item in the interface can be automatically adjusted according to the weight change.
In another embodiment, in addition to adjusting the position of the icon of the menu item in the interface according to the weight of the menu item, the icon of the menu item with higher weight is closer to the center of the interface, and further, in this embodiment, the method further comprises the following steps: and setting the size of the corresponding icon according to the weight of the menu item, so that the icon of the menu item with the larger weight is larger, when the icon corresponding to the menu item is arranged on the interface, the size of the icon arranged in the center of the interface is the largest, and other icons are gradually reduced from the center to the periphery. Therefore, the icon of the menu item with the larger weight is closer to the center of the interface, and the size of the icon is larger, so that the user can find the icon of the menu item with the larger weight conveniently.
In this embodiment, icons of menu items of different weights may be displayed in different sizes by controlling the icon scaling. For example, an icon may be enlarged in proportion to the weight of the corresponding menu item, so that the icon corresponding to the menu item with larger weight has larger size.
In the implementation mode, the display style of the deleted icon in the interface is readjusted, so that the icon arrangement vacancy formed after the icon in the interface is deleted can be automatically supplemented. And by configuring the priority of the menu items and adjusting the display style of the icons of the menu items on the interface according to the priority, the display position (such as the middle position) of the interface in the icon arrangement of the menu item with high priority can be enabled, and the icon size of the menu item with high priority is enabled to be larger than that of the icon with low priority, thereby facilitating the clicking of the user.
In another embodiment, there are more icons corresponding to menu items in the interface, so that the icons in the interface need to be browsed through the sliding interface. Therefore, in order to facilitate browsing icons in the interface, in addition to adopting the icon size adjustment according to the weight described in the above embodiment, the icon size arranged in the center of the interface is maximized, and the other icons are gradually reduced from the center to the periphery, and in this embodiment, further considering the case when the interface is slide-browsed, the icon in the interface is moved in the sliding direction, and the size of the icon is gradually increased when the icon is moved toward the center of the interface during the movement, and the size of the icon is also gradually reduced when the icon is moved away from the center of the interface. The icons sliding towards the center of the interface are gradually increased in size, and the icons far away from the center of the interface are gradually decreased in size. Therefore, in the embodiment, in the interface sliding process, the size of the icon displayed in the interface is dynamically adjusted, the same icon is different in size at different positions in the interface when moving, and the size of the icon is the largest when the icon moves to the center of the interface. Therefore, in the embodiment, the icons of the menu items with high weights are distributed in the center of the interface, the icon sizes are larger, and the icons sliding to the center of the interface are enlarged and displayed during interface sliding browsing, so that the icons with high weights can be highlighted, and each icon can be easily found during interface sliding browsing.
As shown in fig. 3, the interface of a song requesting system is schematically illustrated, wherein the interface has a plurality of song requesting menu items in different modes, the icons of the menu items have a plurality of different display widths, and the display widths of the icons of the different menu items gradually change along a certain direction. The middle part of the interface of the song ordering device is provided with at least icons of song ordering menu items with a plurality of different functions, such as 'song name', 'singer', 'song order by voice', 'list', 'song kind', and the like, the icons are arranged in two rows and three columns in the interface, and the positions of the icons and the display widths of the icons (namely the sizes of the icons) are gradually changed along each row or each column. Therefore, the icons are linearly and gradually changed in different direction dimensions, and the display styles of the icons are richer.
In the embodiment shown in fig. 3, the middle of the interface of the song ordering system includes six icons at the top of the menu, namely, "song title", "singer", "voice song order", "list", "song seed", and "CHIVAS", the six icons are arranged in three rows and two columns on the song ordering interface, and the icons in the same row or the same column are gradually increased in the reduction ratio value from the center of the interface to the periphery, so that the size of the icons is gradually reduced from the center of the interface to the periphery.
As shown in fig. 4, according to the above embodiment, the two adjacent icons have different sizes, and the icons are enlarged or reduced during the sliding process. The size of the icon in the sliding process is calculated according to the following method:
in the process that the icon slides towards the adjacent icon n-1, the width W of the icon at a certain moment is as follows: w ═ Wn-1-Wn)*d/D+Wn(ii) a The icons are squares, and the squares shown in fig. 4 are icons. Before the icon is not slid, the middle line LnThrough the center of the icon, another center line Ln-1Through the center of the adjacent icon n-1 of said icon, said midline LnAnd said middle line Ln-1Parallel, said median line LnAnd said middle line Ln-1The distance between the icons is D, and the center point of the icon is separated from the center line L at a certain moment in the process that the icon slides towards the adjacent icon n-1nD is more than or equal to 0 and less than or equal to D, and the width of the icon is WnThe width of the adjacent icon n-1 is Wn-1. By this embodiment, the size of the icon during the sliding process can be clearly known.
As shown in fig. 4, a plurality of parallel middle lines (e.g., middle line 1, middle line 2, and middle line 3 in fig. 4) are disposed on the interface, where each middle line corresponds to one icon arranged on the interface, and the middle line passes through the center of the corresponding icon.
As shown in fig. 4, icons of five menu items of icons 1 to 5 exist in the interface, the icons 1 to 5 are arranged longitudinally along the interface, and the positions and sizes of the icons 1 to 5 are gradually changed. In the embodiment, a plurality of central lines 1, 2 and 3 are arranged on the interface, wherein the central lines 1, 2 and 3 are parallel to each other, the central line 1 passes through the middle of the icon 1, the central line 2 passes through the middle of the icon 2, and the central line 3 passes through the middle of the icon 3.
Assuming that a central line 2 passes through the center point of the icon, the icon (the icon is a square) is moved to the central line 1, the distance from the center point of the icon to the central line 2 is D, and the distance from the central line 1 to the central line 2 is D, then the width W of the icon is W ═ W (W ═ W-1-W2)*d/D+W2. The W is2Width of the icon before the sliding, W1The midline 1 is the width of the adjacent icon, passing through the center point of the adjacent icon.
If it is assumed that the central line 3 passes through the center point of the icon, the icon is slid toward the central line 2, and the width W of the icon sliding process is: w is W ═ W2-W3)*d/D+W3. The distance between the center point of the icon and the central line 3 is D, the distance between the central line 1 and the central line 2 is D, and the width of the icon before sliding is W3W is as described1Is the width of adjacent icons is W2The central line 2 passes through the center point of the neighboring icon.
When browsing the interface, an input operation may be performed by a screen sliding operation (for a touch display screen) or by an input device such as a mouse or a keyboard, and an icon displayed in the interface may also be moved according to the input operation. For example, when the interface is slid in a certain direction, the icons in the interface are also moved in response to the sliding operation. In one embodiment, when the icon at the top of the interface is far away from the top boundary of the interface or the icon at the bottom of the interface is far away from the bottom boundary of the interface, the movement of the icon is slowed down or stopped, so that a movement damping effect is presented.
As shown in fig. 3, in which the icons of the menu item "singer" are located at the topmost position among all the icons, when the interface is slid down, each icon in the interface moves down, and when all the icons move down and the topmost "singer" icon has moved away from the top boundary of the interface (or a preset distance from the top of the interface), the rate at which each icon moves down becomes smaller or each icon no longer moves down with the sliding operation. Similarly, when the interface is slid up and the bottom-most icon has left the interface bottom boundary, the rate at which the icons move up becomes smaller or the icons no longer move up with the sliding operation. Through the above operation, the icon, during sliding, when sliding to the top, slows down the sliding speed or has the effect of springback.
Further, when the icon at the top most part of the interface is far away from the top boundary of the interface or the icon at the bottom most part of the interface is far away from the bottom boundary of the interface, the method further comprises the following steps:
and the whole icon displayed in the interface shrinks towards the sliding direction, and the icon restores the display style before shrinking after the sliding is finished.
In one embodiment, the interface dynamic display method further includes the steps of: when the icons in the interface do not slide, the icons in the interface are controlled to be gradually enlarged and reduced according to a preset period, the icons are enlarged and reduced for one time in different time, more than one icon is enlarged and reduced at the same time, and the icon breathing display effect is achieved. And gradually enlarging and reducing the icon in the control interface according to a preset period to realize the breathing display effect of the icon. Wherein, the frequency of the period can be 5 seconds or 6 seconds, and the scale of the icon zooming in and out can be 0.6 to 1.5; therefore, the icon in the interface can present a breathing display effect, so that the icon display is more regular. Meanwhile, the time for one enlargement and reduction of the same icon is different, for example, the time for one enlargement of one icon is 0.4s, and the time for one reduction is 0.6 s. When the interface is slid, the icons in the interface stop zooming in and out; when the sliding stops, the interface icon is enlarged and reduced again according to the preset period.
In another embodiment, as shown in fig. 5, a device 500 is provided, the device having an interface 501 for human-computer interaction, the interface displaying icons of more than two menu items, the electronic device may be any one of a computer, a mobile phone, a video-on-demand device, and the like. The device is provided with a storage medium, the storage medium is stored with control instructions, and when the control instructions are executed by a processor, the interface dynamic display method display in any one of the above embodiments is executed.
It should be noted that, although the above embodiments have been described herein, the invention is not limited thereto. Therefore, based on the innovative concepts of the present invention, the technical solutions of the present invention can be directly or indirectly applied to other related technical fields by making changes and modifications to the embodiments described herein, or by using equivalent structures or equivalent processes performed in the content of the present specification and the attached drawings, which are included in the scope of the present invention.
Claims (10)
1. A dynamic interface display method is characterized by comprising the following steps:
the method comprises the steps that the electronic equipment receives and installs an interface display template, wherein the interface display template comprises a display style of an interface icon and a menu item corresponding to the interface display icon;
inquiring whether the function corresponding to the menu item in the interface display template exists in a function list of the electronic equipment or not;
if not, deleting the icons corresponding to the menu items in an interface display template, and adjusting the display positions of the icons corresponding to the remaining menu items on the interface according to the weight.
2. The interface dynamic display method according to claim 1, wherein the adjusting the display positions of the icons corresponding to the remaining menu items on the interface according to the weight comprises:
presetting the weight of a menu item, wherein the weight is determined based on the number of times the menu item is clicked, or the weight is determined based on the number of times the menu item is expected to be clicked;
and configuring the positions of the icons on the interface according to the weights of the rest menu items, wherein the heavier the menu item is, the more the corresponding icon is centered at the arrangement position of the interface.
3. The interface dynamic display method according to claim 1, further comprising the steps of:
the method includes the steps of collecting the number of clicks of icons corresponding to menu items in an interface, counting the number of clicks of the icons corresponding to the menu items according to a preset period, rearranging the display positions of the icons corresponding to the menu items on the interface according to the number of clicks of the icons corresponding to the menu items, wherein the more the number of clicks is, the more the positions of the icons corresponding to the menu items on the interface are.
4. The interface dynamic display method according to claim 1, further comprising the steps of:
when the icons corresponding to the menu items are arranged on the interface, the size of the icons arranged in the center of the interface is the largest, and other icons are gradually reduced from the center to the periphery.
5. The interface dynamic display method according to claim 1, further comprising the steps of:
when the interface is slid, the icons move along the sliding direction, the size of the icons sliding to the center of the interface is gradually increased, and the size of the icons far away from the center of the interface is gradually decreased.
6. The interface dynamic display method of claim 5, wherein in the icon sliding process, the width W of the icon at a certain time is: w ═ Wn-1-Wn)*d/D+Wn(ii) a Preset central line LnAnd said middle line Ln-1Said middle line LnThrough the center of the icon, another center line Ln-1Through the center of the adjacent icon n-1 of said icon, said midline LnAnd said middle line Ln-1Parallel, said median line LnAnd said middle line Ln-1The distance between the icons is D, and the center point of the icon is separated from the center line L at a certain moment in the process that the icon slides towards the adjacent icon n-1nD is more than or equal to 0 and less than or equal to D, and the width of the icon is WnThe width of the adjacent icon n-1 is Wn-1。
7. The dynamic interface display method according to claim 1, wherein the interface includes more than two rows or more than two columns of icons, and the icons in the same row or the same column have gradually larger reduction scale values along the direction from the center to the periphery of the interface.
8. The interface dynamic display method according to claim 1, wherein when the interface is slid, the icons in the interface move synchronously along the sliding direction; the movement of the icons configured to be topmost slows or stops when the icons configured to be bottommost are away from a top boundary of the interface or the icons configured to be bottommost are away from a bottom boundary of the interface.
9. The interface dynamic display method according to claim 1, further comprising the steps of: when the icons in the interface do not slide, the icons in the interface are controlled to be gradually enlarged and reduced according to a preset period, the icons are enlarged and reduced for one time in different time, more than one icon is enlarged and reduced at the same time, and the icon breathing display effect is achieved.
10. A device having an interface for human-computer interaction, wherein icons of more than two menu items are displayed on the interface, wherein the icons of the menu items are displayed according to the interface dynamic display method of any one of claims 1 to 9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011172047.8A CN112433656B (en) | 2020-10-28 | 2020-10-28 | Interface dynamic display method and equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011172047.8A CN112433656B (en) | 2020-10-28 | 2020-10-28 | Interface dynamic display method and equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112433656A true CN112433656A (en) | 2021-03-02 |
| CN112433656B CN112433656B (en) | 2023-04-18 |
Family
ID=74696358
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011172047.8A Active CN112433656B (en) | 2020-10-28 | 2020-10-28 | Interface dynamic display method and equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112433656B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116185243A (en) * | 2023-04-28 | 2023-05-30 | 苏州市世为科技有限公司 | Man-machine interaction data processing, evaluating and early warning system |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102163120A (en) * | 2010-02-15 | 2011-08-24 | 捷讯研究有限公司 | Prominent selection cues for icons |
| CN102436473A (en) * | 2011-09-29 | 2012-05-02 | 用友软件股份有限公司 | Menu management device and menu management method |
| CN102662601A (en) * | 2012-05-02 | 2012-09-12 | 李凯 | Graph menu display method |
| US20150370920A1 (en) * | 2014-06-24 | 2015-12-24 | Apple Inc. | Column interface for navigating in a user interface |
| CN105930020A (en) * | 2015-12-29 | 2016-09-07 | 中国银联股份有限公司 | Method and apparatus for function icons of management terminal application program |
| US20160291837A1 (en) * | 2013-12-15 | 2016-10-06 | Yulong Computer Telecommunication Scientific (Shenzhen) Co., Ltd. | Application Icon Adaptive Adjustment Method and Terminal |
| CN107422940A (en) * | 2017-07-31 | 2017-12-01 | 努比亚技术有限公司 | A kind of icon display method, mobile terminal and computer-readable recording medium |
| CN107491248A (en) * | 2017-08-24 | 2017-12-19 | 小草数语（北京）科技有限公司 | Menu display method, device, terminal device and computer-readable recording medium |
| CN107688423A (en) * | 2017-05-19 | 2018-02-13 | 平安科技（深圳）有限公司 | The management method and processing equipment of menu option in a kind of system |
| CN107992301A (en) * | 2017-11-27 | 2018-05-04 | 腾讯科技（上海）有限公司 | User interface implementation method, client and storage medium |
| CN110673908A (en) * | 2019-09-03 | 2020-01-10 | 北京量子保科技有限公司 | Interface generation method, device, medium and electronic equipment |
-
2020
- 2020-10-28 CN CN202011172047.8A patent/CN112433656B/en active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102163120A (en) * | 2010-02-15 | 2011-08-24 | 捷讯研究有限公司 | Prominent selection cues for icons |
| CN102436473A (en) * | 2011-09-29 | 2012-05-02 | 用友软件股份有限公司 | Menu management device and menu management method |
| CN102662601A (en) * | 2012-05-02 | 2012-09-12 | 李凯 | Graph menu display method |
| US20160291837A1 (en) * | 2013-12-15 | 2016-10-06 | Yulong Computer Telecommunication Scientific (Shenzhen) Co., Ltd. | Application Icon Adaptive Adjustment Method and Terminal |
| US20150370920A1 (en) * | 2014-06-24 | 2015-12-24 | Apple Inc. | Column interface for navigating in a user interface |
| CN105930020A (en) * | 2015-12-29 | 2016-09-07 | 中国银联股份有限公司 | Method and apparatus for function icons of management terminal application program |
| CN107688423A (en) * | 2017-05-19 | 2018-02-13 | 平安科技（深圳）有限公司 | The management method and processing equipment of menu option in a kind of system |
| CN107422940A (en) * | 2017-07-31 | 2017-12-01 | 努比亚技术有限公司 | A kind of icon display method, mobile terminal and computer-readable recording medium |
| CN107491248A (en) * | 2017-08-24 | 2017-12-19 | 小草数语（北京）科技有限公司 | Menu display method, device, terminal device and computer-readable recording medium |
| CN107992301A (en) * | 2017-11-27 | 2018-05-04 | 腾讯科技（上海）有限公司 | User interface implementation method, client and storage medium |
| CN110673908A (en) * | 2019-09-03 | 2020-01-10 | 北京量子保科技有限公司 | Interface generation method, device, medium and electronic equipment |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116185243A (en) * | 2023-04-28 | 2023-05-30 | 苏州市世为科技有限公司 | Man-machine interaction data processing, evaluating and early warning system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112433656B (en) | 2023-04-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10831359B2 (en) | Scroll bar control | |
| US8281252B2 (en) | User interface component | |
| JP4880334B2 (en) | Scrollable and resizable formula bar | |
| US10409440B2 (en) | Flexible-page layout | |
| US10175854B2 (en) | Interaction in chain visualization | |
| AU2011375741B2 (en) | Arranging tiles | |
| CN103616980B (en) | A kind of fast finishing desk-top picture calibration method and terminal | |
| US9594432B2 (en) | Electronic device, control setting method and program | |
| US20080120571A1 (en) | Method for displaying icons of digital items | |
| US20140164960A1 (en) | Method for grouping and managing web pages | |
| EP3221778A1 (en) | Tab sweeping and grouping | |
| CN102955671A (en) | Terminal and method for executing application using touchscreen | |
| EP1984854A2 (en) | New object search ui and dragging object results | |
| WO2023045927A1 (en) | Object moving method and electronic device | |
| CN103324387A (en) | System and method for displaying sub-file interfaces | |
| CN112433656B (en) | Interface dynamic display method and equipment | |
| CN113986076A (en) | Icon display control method and device, electronic equipment and storage medium | |
| CN114327105A (en) | Split screen display control method and device, electronic equipment and storage medium | |
| US20180088785A1 (en) | Navigating a set of selectable items in a user interface | |
| JP5939756B2 (en) | Image forming apparatus and control method thereof | |
| JP2000194473A (en) | Display system | |
| US20120174030A1 (en) | Navigating among higher-level and lower-level windows on a computing device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240706 Address after: Building 19-22, juyuanzhou xingwangruijie Science Park, 618 Jinshan Avenue, Cangshan District, Fuzhou City, Fujian Province, 350007 Patentee after: FUJIAN STAR-NET COMMUNICATION Co.,Ltd. Country or region after: China Address before: 350008 4th floor, building 20, xingwangruijie science and Technology Park, No.618 Jinshan Avenue, Cangshan District, Fuzhou City, Fujian Province Patentee before: FUJIAN STAR-NET EVIDEO INFORMATION SYSTEM Co.,Ltd. Country or region before: China |