CN110727496B - Layout method and device of graphical user interface, electronic equipment and storage medium - Google Patents
Layout method and device of graphical user interface, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN110727496B CN110727496B CN201911005156.8A CN201911005156A CN110727496B CN 110727496 B CN110727496 B CN 110727496B CN 201911005156 A CN201911005156 A CN 201911005156A CN 110727496 B CN110727496 B CN 110727496B
- Authority
- CN
- China
- Prior art keywords
- coordinate information
- layout
- track
- determining
- sliding
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 42
- 230000004044 response Effects 0.000 claims abstract description 8
- 230000006870 function Effects 0.000 claims description 35
- 238000012545 processing Methods 0.000 claims description 15
- 238000004590 computer program Methods 0.000 claims description 13
- 230000008569 process Effects 0.000 claims description 9
- 238000010586 diagram Methods 0.000 description 22
- 230000008859 change Effects 0.000 description 12
- 230000000694 effects Effects 0.000 description 5
- 230000003993 interaction Effects 0.000 description 4
- 238000012544 monitoring process Methods 0.000 description 4
- 238000013507 mapping Methods 0.000 description 3
- 230000000750 progressive effect Effects 0.000 description 3
- 238000012216 screening Methods 0.000 description 3
- 230000001133 acceleration Effects 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 241000699670 Mus sp. Species 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000006073 displacement reaction Methods 0.000 description 1
- 238000005265 energy consumption Methods 0.000 description 1
- 238000011156 evaluation Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000008188 pellet Substances 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 230000003238 somatosensory effect Effects 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- 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/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a layout method and device of a graphical user interface, electronic equipment and a storage medium, wherein the method comprises the following steps: acquiring sliding track coordinate information on an image user interface, wherein the track coordinate information at least comprises: starting point coordinate information and end point coordinate information; judging whether the sliding track is effective or not according to a preset initial threshold value and initial point coordinate information; determining sliding offset information according to the start point coordinate information and the end point coordinate information in response to the sliding track being valid; determining a layout instruction corresponding to the sliding offset information according to the sliding offset information; and carrying out layout adjustment operation on the toolbar area and the content display area according to the layout instruction, wherein the layout adjustment operation of the toolbar area is realized in an animation form. By the method and the device, the experience of the user can be improved.
Description
Technical Field
The present invention relates to the field of terminal operating systems, and in particular, to a method and apparatus for layout of a graphical user interface, an electronic device, and a storage medium.
Background
With the popularization of intelligent devices, more and more mobile applications are deployed on mobile terminal devices (such as mobile phones), and due to the inherent small screen characteristics of the mobile terminal device screen, toolbar function jumps and page content browsing need to be reasonably arranged and arranged, and the aesthetic property, rationality and practicability of the toolbar function jumps and page content browsing directly affect the appearance and evaluation of users.
However, the existing graphical user interface (Graphical User Interface, GUI) layout is generally a toolbar, which is a fixed setting, occupies a large amount of screen display space, affects effective browsing of page content by a user, and reduces experience of the user.
Disclosure of Invention
In view of the above, the present invention provides a layout method, apparatus, electronic device and storage medium for a graphical user interface, so as to solve the above-mentioned problem that the toolbar on the display screen of the current mobile terminal occupies a large amount of display space and affects the user's experience of browsing pages.
According to a first aspect of the present invention, there is provided a layout method of a graphical user interface, the graphical user interface comprising: a toolbar area and a content display area, the toolbar area comprising: a plurality of functional components, the method comprising: acquiring sliding track coordinate information on the image user interface, wherein the track coordinate information at least comprises: starting point coordinate information and end point coordinate information; judging whether the sliding track is effective or not according to a preset starting threshold value and the starting point coordinate information; determining sliding offset information according to the starting point coordinate information and the end point coordinate information in response to the sliding track being valid; determining a layout instruction corresponding to the sliding offset information according to the sliding offset information; and carrying out layout adjustment operation on the toolbar area and the content display area according to the layout instruction, wherein the layout adjustment operation of the toolbar area is realized in an animation form.
According to a second aspect of the present invention, there is provided a layout apparatus of a graphical user interface, the graphical user interface comprising: a toolbar area and a content display area, the toolbar area comprising: a plurality of functional components, the apparatus comprising: a track coordinate acquiring unit, configured to acquire sliding track coordinate information on the image user interface, where the track coordinate information at least includes: starting point coordinate information and end point coordinate information; the track effectiveness judging unit is used for judging whether the sliding track is effective or not according to a preset initial threshold value and the initial point coordinate information; a sliding offset determining unit, configured to determine sliding offset information according to the start point coordinate information and the end point coordinate information in response to the sliding track being valid; a layout instruction determining unit for determining a layout instruction corresponding to the sliding offset information according to the sliding offset information; and the layout operation unit is used for carrying out layout adjustment operation on the toolbar area and the content display area according to the layout instruction, wherein the layout adjustment operation of the toolbar area is realized in an animation form.
According to a third aspect of the present invention there is provided an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the method of layout of a graphical user interface described above when the program is executed.
According to a fourth aspect of the present invention there is provided a computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of the above-described method of layout of a graphical user interface.
According to the technical scheme, the sliding offset information is determined according to the obtained effective sliding track, the corresponding layout instruction is determined, and the layout adjustment operation is performed on the toolbar area and the content display area according to the determined layout instruction, wherein the layout adjustment operation on the toolbar area can be realized through an animation form, and the problem that the toolbar area occupies a larger display space on a screen to affect effective browsing of page content of a user in the prior art can be solved by re-arranging the toolbar area and the content display area, so that the experience of the user can be improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, and it is obvious that the drawings in the following description are some embodiments of the present invention, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic illustration of a graphical user interface;
FIG. 2 is a flow chart of a method of layout of a graphical user interface according to an embodiment of the invention;
FIG. 3 is another schematic diagram of a graphical user interface according to an embodiment of the invention;
FIGS. 4 (a) and 4 (b) are schematic diagrams of animation functions according to embodiments of the invention;
FIG. 5 is a block diagram of a layout apparatus of a graphical user interface according to an embodiment of the present invention;
fig. 6 is a block diagram of the configuration of the layout instruction determining unit 54 according to the embodiment of the present invention;
FIG. 7 is a detailed structural block diagram of a layout apparatus of a graphic user interface according to an embodiment of the present invention;
FIG. 8 is a diagram illustrating an example of the structure of an iOS operating system based GUI layout device in accordance with an embodiment of the present invention;
fig. 9 is a block diagram of the structure of the user intention recognition engine 1 according to the embodiment of the present invention;
fig. 10 is a block diagram of the structure of the progressive variation apparatus 3 according to the embodiment of the present invention;
FIG. 11 is a schematic diagram of a touch trajectory in accordance with an embodiment of the invention;
fig. 12 is a schematic diagram of an electronic device according to an embodiment of the invention.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the embodiments of the present invention more apparent, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention, and it is apparent that the described embodiments are some embodiments of the present invention, but not all embodiments of the present invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
Whereas the GUI layout of existing mobile terminals is typically a toolbar and content display area that are fixedly arranged, the toolbar area comprises: for a plurality of functional components, see the GUI layout diagram shown in fig. 1, as shown in fig. 1, the toolbar area includes, from left to right: the screening function button can jump to a screening page after clicking; a search function entry, clicking can jump to a search page; the shopping cart function button can jump to a shopping cart page after being clicked; the order function button, clicking can jump to the order page.
Because the toolbar area occupies a larger display space on the screen, effective browsing of page contents by a user is affected, and thus experience of the user is reduced. Based on the above, the embodiment of the invention provides a layout scheme of a graphical user interface, so as to overcome the defects in the prior art and improve the experience of a user. Embodiments of the present invention are described in detail below with reference to the accompanying drawings.
An embodiment of the present invention provides a method for arranging a graphical user interface, and fig. 2 is a flowchart of the method, as shown in fig. 2, where the method includes:
step 101, acquiring sliding track coordinate information on the image user interface, wherein the track coordinate information at least comprises: starting point coordinate information and end point coordinate information;
102, judging whether the sliding track is effective or not according to a preset initial threshold value and the initial point coordinate information;
step 103, determining sliding offset information according to the starting point coordinate information and the end point coordinate information in response to the sliding track being effective;
step 104, determining a layout instruction corresponding to the sliding offset information according to the sliding offset information;
and 105, performing layout adjustment operation on the toolbar area and the content display area according to the layout instruction, wherein the layout adjustment operation of the toolbar area is realized in an animation form.
As can be seen from the above description, the sliding offset information is determined according to the obtained effective sliding track, the corresponding layout instruction is determined, and the layout adjustment operation is performed on the toolbar area and the content display area according to the determined layout instruction, where the layout adjustment operation on the toolbar area can also be implemented in an animation form, and by re-laying out the toolbar area and the content display area, the problem that the toolbar area occupies a larger display space on the screen to affect the effective browsing of the page content of the user in the prior art can be overcome, so that the experience of the user can be improved.
In the implementation process, the starting threshold may be preset, for example, a threshold range may be set, and the sliding track of the screen portion corresponding to the range may be considered as an effective sliding track.
In one embodiment, the slip offset information may be determined from a difference in vertical distance of the start point coordinate information and the end point coordinate information. Specifically, the slip offset information y_offset can be calculated by the following formula:
Y_offset＝Begin_LocationY-End_LocationY
wherein begin_location is the vertical distance from the start point coordinate to the position above the predetermined screen, and end_location is the vertical distance from the End point coordinate to the position above the predetermined screen.
When the y_offset value is positive, it indicates that the slide track is sliding upward, and when the y_offset value is negative, it indicates that the slide track is sliding downward.
In actual operation, the correspondence between the sliding offset information and the layout instruction may be preset.
For example, when the slide offset information indicates that the slide trajectory is from below the screen to above the screen (i.e., slides up), the layout instruction is to perform a zoom-out operation on the toolbar area and a zoom-in operation on the content display area. Specifically, the display area of each functional component in the toolbar area is subjected to a zoom-out operation and the zoomed-out functional component is displayed in a predetermined area; and expanding the content display area accordingly.
In one example, when the y_offset value is positive, the upward sliding motion is identified, at this time, it may be determined that the user intends to browse more interface contents, the components such as the filter function button, the search function button, etc. on the toolbar shown in fig. 1 are moved to the right and reduced into three small ball (for example, small red ball) areas, after the right movement is completed, the small balls are progressively enlarged and reduced with physical spring, and at the same time, the filter function button, the search function button, and the order function button icons are progressively reduced, and after the whole GUI layout adjustment is completed, as shown in fig. 3. In this example, the shopping cart function buttons are hidden when the toolbar is zoomed out, and in actual operation, other one or more function buttons, such as a search function button, may also be hidden to further reduce the toolbar area.
When the slide offset information indicates that the slide trajectory is from above the screen to below the screen (i.e., slides down), the layout instruction is determined to be an operation of expanding and restoring the reduced toolbar area to the initial state, and an operation of expanding and restoring the enlarged content display area to the initial state.
That is, when the y_offset value is negative, a down-slide action can be recognized, and at this time, it can be determined that the user intends to seek a function navigation entry to leave the interface, and three pellets in the interface shown in fig. 3 are progressively enlarged, reduced, and hidden with a physical spring effect. The screening function button, the searching function button and the order function button icons are progressively enlarged, reduced and moved left to present a complete toolbar, and finally the complete toolbar is shown in figure 1.
In the embodiment of the invention, the animation layout adjustment operation of each functional component can be performed according to the initial position information, the end position information, the middle point position information and the duty ratio information of the unit time in the preset whole animation time of each functional component.
In one embodiment, the animation layout may be implemented by defining a class of Objective-C (an object oriented programming language that extends C). Creating a CADisplayLink (timer for synchronizing screen refresh frequency) at class initialization, registering the CADisplayLink into an iOS (Mobile operating System developed by apple Inc.) running cycle; when judging that the user intends to trigger the right-shift reduction animation, starting a CADisplayLink timer, executing a selector (a function) rate function according to a certain frame rate, recalculating the position value of the intelligent toolbar element along with time by the selector rate function, and calling a setneedledsDisplay redrawing interface to realize the animation effect.
Specifically, objective-C is mainly applied to writing of iOS operating systems and iOS applications. It is a very small runtime library written with C that can make the size increase of the application very small, and the program written with Objective-C will not be much larger than its original code.
In practice, the animation effect may be achieved by the animation speed, that is, the change of the interface element in a period of time, and the representation change must be performed at a specific speed.
The above-mentioned animation layout adjustment operation can be implemented by a rate curve function, through which a translation effect closer to the physical world can be implemented, and the curvature function is as follows:
Offet(t)＝(1-t) 2 P 0 +2t(1-t)P 1 +t 2 P 2
wherein offset is the offset, t is the duty ratio of the unit time in the animation time period, for example, the left moving picture time is completed within 3 seconds, and then the t value every 0.5 seconds is 0.16; p (P) 0 To change the initial position of the component, P 1 To vary component midpoint position, P 2 The function curves are shown in fig. 4 (a) and 4 (b) for changing the end position of the component.
According to the layout scheme of the graphical user interface provided by the embodiment of the invention, the user operation intention can be identified by monitoring the touch track of the user, specifically, the user intention is mapped by sliding the finger (or other touch equipment such as a touch pen) of the user, the GUI layout is adjusted, the toolbar area is reduced and set, and the content display area is correspondingly enlarged and set, so that the defects in the prior art can be overcome, and in the layout adjustment, the embodiment of the invention also provides a smooth and real switching animation effect, so that the experience of the user is improved.
In actual operation, when it is determined that the sliding track is in the vortex shape shown in fig. 11 according to the start point coordinate information, the end point coordinate information, and any point coordinate information in at least one track, the current display content of the content display area may be voice-broadcast. This may facilitate a particular group (e.g., blind) to learn about the page content.
Specifically, a predetermined number (for example, 1000) of swirl template images may be preset, pixel-pixel processing is performed on the images, each pixel point is respectively projected to the X-axis and the Y-axis, average processing is performed on 1000 vector data sets of the X-axis, and average processing is performed on 1000 vector data sets of the Y-axis, so as to obtain a standard swirl image. When the obtained coordinate data of the track touch point and the vector difference of the coordinate data of the point corresponding to the standard vortex image are smaller than a preset threshold value, the touch track can be identified to be vortex-shaped, and at the moment, the current display content of the content display area is broadcasted through voice.
Specifically, the identification process is as follows: coordinate data of the track touch point is (x 1, y 1), (x 2, y 2), … … (x 7, y 7), coordinate data of a corresponding point of the standard vortex image is (xa, ya), (xb, yb), … … (xh, yh), and vector difference d of the coordinate data of the track touch point and the coordinate data of a point corresponding to the standard vortex image is calculated by the following formula:
when the calculated vector difference d is smaller than a predetermined threshold value, the recognition track is indicated to be vortex-shaped.
The embodiment of the invention also provides a layout device of the graphical user interface, which is preferably used for realizing the method embodiment. Fig. 5 is a block diagram of the structure of the apparatus, as shown in fig. 5, including: a trajectory coordinate acquisition unit 51, a trajectory validity judgment unit 52, a slip offset determination unit 53, a layout instruction determination unit 54, and a layout operation unit 55, wherein:
a track coordinate acquiring unit 51, configured to acquire sliding track coordinate information on the image user interface, where the track coordinate information includes at least: start point coordinate information, end point coordinate information, and arbitrary point coordinate information in at least one track;
a track valid judging unit 52, configured to judge whether the sliding track is valid according to a preset start threshold and the start point coordinate information;
a slip offset determination unit 53 for determining slip offset information according to the start point coordinate information and the end point coordinate information in response to the slip trajectory being valid;
a layout instruction determining unit 54 for determining a layout instruction corresponding thereto according to the sliding offset information;
and a layout operation unit 55, configured to perform a layout adjustment operation on the toolbar area and the content display area according to the layout instruction, where the layout operation of the toolbar area is implemented in an animation form.
As is apparent from the above description, the sliding offset determining unit 53 determines the sliding offset information according to the obtained effective sliding track and determines the corresponding layout instruction by the layout instruction determining unit 54, and the layout operation unit 55 performs the layout adjustment operation on the toolbar area and the content display area according to the determined layout instruction, wherein the layout operation on the toolbar area can also be implemented in an animation form, and by re-laying out the toolbar area and the content display area, the problem that the toolbar area occupies a larger display space on the screen to affect the effective browsing of the page content of the user in the prior art can be overcome, so that the experience of the user can be improved.
In the implementation process, the start threshold may be set in advance, for example, a threshold range may be set, and the track valid determination unit 52 may determine that the track is a valid track in the sliding track of the screen portion corresponding to the range.
In one embodiment, the slip offset determination unit 53 may determine the slip offset information according to a vertical distance difference between the start point coordinate information and the end point coordinate information.
In actual operation, the animation form of the layout operation unit 55 is realized by: and carrying out animation layout operation of each functional component according to the initial position information, the end position information, the middle position information and the duty ratio information of the unit time in the preset whole animation time of each functional component.
Specifically, as shown in fig. 6, the layout instruction determining unit 54 includes: a first sliding track determination module 541, a first layout instruction determination module 542, wherein:
a first sliding track determining module 541, configured to determine, according to the sliding offset information, that the sliding track is from below the screen to above the screen;
the first layout instruction determining module 542 is configured to determine that the layout instruction is to perform a zoom-out operation on the toolbar area and an zoom-in operation on the content display area. Specifically, the first layout instruction determination module 542 may perform a zoom-out operation on the display area of each functional component and display the zoomed-out functional component in a predetermined area; and expanding the content display area accordingly.
The layout instruction determination unit 54 further includes: a second sliding track determining module 543, a second layout instruction determining module 544, wherein:
a second sliding track determining module 543 configured to determine, according to the sliding offset information, that the sliding track is from above the screen to below the screen;
a second layout instruction determining module 544, configured to determine that the layout instruction is an operation of expanding and restoring the contracted toolbar area to the initial state, and an operation of contracting and restoring the expanded content display area to the initial state.
In one embodiment, as shown in fig. 7, the layout apparatus of the graphical user interface further includes: a swirl locus determination unit 56 and a voice broadcast unit 57, wherein:
a swirl trajectory determining unit 56, configured to determine that the sliding trajectory is swirl-shaped according to the start point coordinate information, the end point coordinate information, and any point coordinate information in at least one trajectory;
and a voice broadcasting unit 57 for voice broadcasting the current display content of the content display area.
By the swirl trajectory determination unit 56 and the voice broadcast unit 57, it is possible to facilitate a special group (for example, blind person) to understand the page content.
In the implementation process, the units and the modules can be integrated or singly arranged, and the invention is not limited to the above.
The specific execution process of each unit and each module may be referred to the description in the above method embodiment, and will not be repeated here.
For a better understanding of the embodiments of the present invention, an example of a layout apparatus for a graphical user interface is given below based on the iOS operating system.
Fig. 8 is a diagram illustrating a structure of an iOS operating system-based GUI layout apparatus, which may be preferably applied to a mobile smart terminal (e.g., a tablet PAD, a smart phone, etc.), according to an embodiment of the present invention.
As shown in fig. 8, the apparatus includes: the user intention recognition engine 1, the track acquisition device 2, the gradual change device 3, the processor 4, the storage controller 5, the memory 6, the touch screen 7, the acceleration calculator 8 and the power supply 9. Wherein, the user intention recognition engine 1 is connected with the memory 6 through the memory controller 5 for data interaction; the user intention recognition engine 1 is connected with the processor 4 for data interaction; the user intention recognition engine 1 is connected with the touch screen 7 and the acceleration calculator 8 through the track acquisition device 2 and the gradual change device 3 for data interaction; the power supply 9 supplies power to other components by being connected with the track acquisition device 2.
Fig. 9 is a block diagram of the structure of the user intention recognition engine 1, and as shown in fig. 9, the user intention recognition engine 1 includes: a screen interface chip 201, and a setting module 202, a monitoring module 203, an acquisition module 204, an identification module 205 and an execution module 206 connected with the screen interface chip, wherein:
the setting module 202 is configured to preset a response threshold of the start position of the touch trajectory, that is, set a start threshold. For example, a touch trajectory where the starting touch point is greater than a certain threshold in the Y-axis direction may be considered a valid trajectory.
The monitoring module 203 is configured to monitor plane coordinates of all touch track points of the terminal, determine whether the coordinates of the initial touch track points are greater than a threshold set by the setting module 202, and discard the touch operation data if not, thereby avoiding invalid data acquisition and recognition operations, improving monitoring efficiency and reducing energy consumption; if yes, the acquisition module 204 is started to acquire the track characteristic data, and the identification module 205 is started to identify the track characteristic data.
The acquisition module 204 is configured to acquire a plane coordinate data set (represented by x-axis and y-axis data) of a touch track of the terminal screen, for example, may acquire motion coordinate data of each touch point in the touch track according to a gyro sensor disposed in the terminal.
The recognition module 205 is configured to calculate a vertical track offset of the touch track according to the coordinate data of each touch point acquired by the acquisition module 204, and recognize a corresponding user intention according to the vertical track offset, so as to determine a corresponding layout mode. The specific vertical trajectory offset can be calculated by the following formula:
Y_offset＝Begin_LocationY-End_LocationY
wherein begin_location is the vertical distance from the start point coordinate to the position above the predetermined screen, and end_location is the vertical distance from the End point coordinate to the position above the predetermined screen. If the vertical trajectory offset is positive, then the mode shown in FIG. 3 is identified, the user is intended to browse more content on the page, and then the execution module 206 is notified to perform GUI layout adjustment. If the vertical trajectory offset is negative, then the mode of FIG. 1 is identified, informing the execution module 206 to perform GUI layout adjustment.
And the execution module 206 is configured to execute the corresponding instruction set in the memory after receiving the GUI layout adjustment instruction identified by the identification module 205, and complete the corresponding GUI layout adjustment through progressive change.
Fig. 10 is a block diagram of the structure of a progressive variation apparatus 3 according to an embodiment of the present invention, as shown in fig. 10, including: an acquisition module 301, a calculation module 302, a drawing module 303, a display module 304, wherein:
the acquisition module 301 is configured to be responsible for acquiring GUI layout adjustment instructions provided by the user intention recognition engine 1.
The calculating module 302 is configured to calculate a layout change of the GUI element with time, including but not limited to a layout change of pan, zoom-in, zoom-out, hiding, displaying, etc., and the calculating module 302 calculates coordinate values of the GUI element at intervals of 0.5s by using a cadisplay timer.
And the drawing module 303 is used for drawing the two-dimensional display of the rendering GUI elements in the screen according to the GUI layout values such as the coordinate points, the length and the width calculated by the calculating module 302. The position of the change in coordinates of the GUI element varies with time, and the change in the displacement becomes nonlinear and more closely approximates to the spring characteristic curve of the real physical world, and more specifically, the description of the curvature function and the curve shown in fig. 4 (b) can be seen.
The display module 304 is configured to be responsible for displaying the GUI element drawn by the drawing module 303.
Through the gradual change device 3, the layout change of the GUI can be animated, and the experience of the user is improved.
In order to facilitate a special group (for example, the blind person), the embodiment of the present invention further provides a voice broadcast mode, when the touch track calculated by the recognition module 205 is in a vortex shape, the user is recognized to be the voice broadcast mode, the execution module 206 is notified to execute the voice broadcast mode, and the execution module 206 will call a corresponding API (Application Programming Interface ) module to broadcast the content of the current page in a voice manner.
In actual operation, when the track contact is swiped from left to right, the user intention can also be mapped to view the last history interface; when the track contact strokes from right to left, the mapping user intends to exit to the home page. Mapping the content of the display area which the user intends to expand by expanding the multi-finger contact of the user from the central area, and mapping the content of the display area which the user intends to reduce when the multi-finger contact is converged from the expanded area to the center.
Fig. 12 is a schematic diagram of an electronic device according to an embodiment of the invention. The electronic device shown in fig. 12 is a general-purpose data processing apparatus comprising a general-purpose computer hardware structure including at least a processor 1201 and a memory 1202. The processor 1201 and the memory 1202 are connected by a bus 1203. The memory 1202 is adapted to store one or more instructions or programs executable by the processor 1201. The one or more instructions or programs are executed by the processor 1201 to implement the steps in the GUI layout method described above.
The processor 1201 may be a separate microprocessor or a collection of one or more microprocessors. Thus, the processor 1201 performs the process of processing data and control of other devices by executing the commands stored by the memory 1202, thereby performing the method flow of the embodiment of the present invention as described above. The bus 1203 connects the above components together, and connects the above components to the display controller 1204 and to the display device and input/output (I/O) device 1205. Input/output (I/O) devices 1205 may be mice, keyboards, modems, network interfaces, touch input devices, somatosensory input devices, printers, and other devices which are well known in the art. Typically, an input/output (I/O) device 1205 is connected to the system through an input/output (I/O) controller 1206.
The memory 1202 may store software components such as an operating system, communication modules, interaction modules, and application programs, among others. Each of the modules and applications described above corresponds to a set of executable program instructions that perform one or more functions and methods described in the embodiments of the invention.
The embodiments of the present invention also provide a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the above-described GUI layout method.
In summary, according to the graphical user interface layout scheme for intelligently identifying user intention provided by the embodiment of the invention, the operation touch point can be used as the identification input of the user intention by receiving the operation touch point of the user, and the layout is intelligently adjusted according to different user intentions, so that the problem that the display area of the interface content of the small-screen device is too small is effectively solved, and the use efficiency of the effective display screen area of the small-screen device is effectively improved. The embodiment of the invention also provides a specific layout GUI adjustment switching animation based on the CADisplayLink, and can improve the experience of the user.
Preferred embodiments of the present invention are described above with reference to the accompanying drawings. The many features and advantages of the embodiments are apparent from the detailed specification, and thus, it is intended by the appended claims to cover all such features and advantages of the embodiments which fall within the true spirit and scope thereof. Further, since numerous modifications and changes will readily occur to those skilled in the art, it is not desired to limit the embodiments of the invention to the exact construction and operation illustrated and described, and accordingly, all suitable modifications and equivalents may be resorted to, falling within the scope thereof.
It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
The principles and embodiments of the present invention have been described in detail with reference to specific examples, which are provided to facilitate understanding of the method and core ideas of the present invention; meanwhile, as those skilled in the art will have variations in the specific embodiments and application scope in accordance with the ideas of the present invention, the present description should not be construed as limiting the present invention in view of the above.
Claims (12)
1. A method of layout of a graphical user interface, the graphical user interface comprising: a toolbar area and a content display area, the toolbar area comprising: a plurality of functional components, the method comprising:
acquiring sliding track coordinate information on the graphical user interface, wherein the track coordinate information at least comprises: start point coordinate information and end point coordinate information;
judging whether the sliding track is effective or not according to a preset starting threshold value and the starting point coordinate information;
determining sliding offset information according to the starting point coordinate information and the end point coordinate information in response to the sliding track being valid;
determining a layout instruction corresponding to the sliding offset information according to the sliding offset information;
performing layout adjustment operation on the toolbar area and the content display area according to the layout instruction, wherein the layout adjustment operation of the toolbar area is realized in an animation form;
the animation form is realized by the following modes:
according to the initial position information, the end position information, the middle point position information, the duty ratio information of unit time in the preset whole animation time and the speed curve function of each functional component, the layout adjustment operation of each functional component is carried out, wherein the speed curve function is as follows:
Offet(t)＝(1-t) 2 P 0 +2t(1-t)P 1 +t 2 P 2
wherein Offet isOffset, t is the duty ratio of unit time in animation time period, P 1 For the midpoint position of the functional part, P 2 Is the end position of the functional component;
the determining whether the sliding track is valid according to the preset starting threshold and the starting point coordinate information includes: if the starting point coordinate information is in the sliding track of the screen part corresponding to the threshold range, determining that the sliding track is effective;
the track coordinate information further includes: coordinate information of any point in at least one track, the method further comprising: when the sliding track is determined to be vortex-shaped according to the initial point coordinate information, the end point coordinate information and any point coordinate information in at least one track, the current display content of the content display area is broadcast by voice;
the process of determining that the sliding track is vortex-shaped comprises the following steps: presetting a preset number of vortex sample plate images, carrying out pixel processing on the images, respectively projecting each pixel point to an X axis and a Y axis, carrying out average processing on a vector data set of the preset number of X axes, and carrying out average processing on a vector data set of the preset number of Y axes to obtain a standard vortex image; when the obtained coordinate data of the track touch point and the vector difference of the coordinate data of the point corresponding to the standard vortex image are smaller than a preset threshold value, determining that the sliding track is vortex-shaped, and broadcasting the current display content of the content display area through voice.
2. The method of claim 1, wherein determining sliding offset information based on the start point coordinate information and the end point coordinate information comprises:
and determining the sliding offset information according to the vertical distance difference value between the starting point coordinate information and the end point coordinate information.
3. The method of claim 1, wherein determining a layout instruction corresponding thereto according to the sliding offset information comprises:
when the slide offset information indicates that the slide trajectory is from below the screen to above the screen, the layout instruction is determined to be a zoom-out operation of the toolbar area and a zoom-in operation of the content display area.
4. A layout method of a graphical user interface according to claim 3, wherein the contracting the toolbar area and the expanding the content display area comprises:
performing a zoom-out operation on the display area of each functional component and displaying the zoomed-out functional component in a preset area; and
the content display area is correspondingly enlarged.
5. A method of laying out a graphical user interface according to claim 3, wherein determining a layout instruction corresponding thereto from the sliding offset information further comprises:
when the slide offset information indicates that the slide trajectory is from above the screen to below the screen, the layout instruction is determined to be an operation of expanding and restoring the contracted toolbar area to an initial state, and an operation of contracting and restoring the expanded content display area to an initial state.
6. A layout apparatus of a graphical user interface, the graphical user interface comprising: a toolbar area and a content display area, the toolbar area comprising: a plurality of functional components, wherein the apparatus comprises:
a track coordinate obtaining unit, configured to obtain sliding track coordinate information on the graphical user interface, where the track coordinate information at least includes: start point coordinate information and end point coordinate information;
the track effectiveness judging unit is used for judging whether the sliding track is effective or not according to a preset initial threshold value and the initial point coordinate information;
a sliding offset determining unit, configured to determine sliding offset information according to the start point coordinate information and the end point coordinate information in response to the sliding track being valid;
a layout instruction determining unit for determining a layout instruction corresponding to the sliding offset information according to the sliding offset information;
a layout operation unit, configured to perform layout adjustment operation on the toolbar area and the content display area according to the layout instruction, where the layout adjustment operation of the toolbar area is implemented in an animation form;
the animation form is realized by the following modes:
according to the initial position information, the end position information, the middle point position information, the duty ratio information of unit time in the preset whole animation time and the speed curve function of each functional component, the layout adjustment operation of each functional component is carried out, wherein the speed curve function is as follows:
Offet(t)＝(1-t) 2 P 0 +2t(1-t)P 1 +t 2 P 2
wherein Offet is offset, t is the duty ratio of unit time in animation time period, P 1 For the midpoint position of the functional part, P 2 Is the end position of the functional component;
the determining whether the sliding track is valid according to the preset starting threshold and the starting point coordinate information includes: if the starting point coordinate information is in the sliding track of the screen part corresponding to the threshold range, determining that the sliding track is effective;
the track coordinate information further includes: coordinate information of any point in at least one track, the apparatus further comprising: the vortex-shaped track determining unit is used for determining that the sliding track is vortex-shaped according to the initial point coordinate information, the end point coordinate information and any point coordinate information in at least one track; the voice broadcasting unit is used for broadcasting the current display content of the content display area in a voice manner;
the process of determining that the sliding track is vortex-shaped comprises the following steps: presetting a preset number of vortex sample plate images, carrying out pixel processing on the images, respectively projecting each pixel point to an X axis and a Y axis, carrying out average processing on a vector data set of the preset number of X axes, and carrying out average processing on a vector data set of the preset number of Y axes to obtain a standard vortex image; when the obtained coordinate data of the track touch point and the vector difference of the coordinate data of the point corresponding to the standard vortex image are smaller than a preset threshold value, determining that the sliding track is vortex-shaped, and broadcasting the current display content of the content display area through voice.
7. The arrangement device of a graphical user interface according to claim 6, wherein the sliding offset determination unit is specifically configured to:
and determining the sliding offset information according to the vertical distance difference value between the starting point coordinate information and the end point coordinate information.
8. The layout apparatus of a graphical user interface according to claim 6, wherein the layout instruction determination unit comprises:
the first sliding track determining module is used for determining the sliding track to be from the lower side of the screen to the upper side of the screen according to the sliding offset information;
and the first layout instruction determining module is used for determining the layout instruction to perform the operation of shrinking the toolbar area and the operation of expanding the content display area.
9. The graphical user interface layout device of claim 8, wherein the first layout instruction determination module is specifically configured to:
performing a zoom-out operation on the display area of each functional component and displaying the zoomed-out functional component in a preset area; and expanding the content display area accordingly.
10. The layout apparatus of a graphical user interface according to claim 8, wherein the layout instruction determination unit further comprises:
the second sliding track determining module is used for determining the sliding track to be from the upper side of the screen to the lower side of the screen according to the sliding offset information;
and the second layout instruction determining module is used for determining the layout instruction to expand the contracted toolbar area and restore to the initial state, and reducing the expanded content display area and restore to the initial state.
11. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements the steps of the method of layout of a graphical user interface as claimed in any of claims 1 to 5 when said program is executed by said processor.
12. A computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, carries out the steps of the layout method of a graphical user interface as claimed in any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911005156.8A CN110727496B (en) | 2019-10-22 | 2019-10-22 | Layout method and device of graphical user interface, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911005156.8A CN110727496B (en) | 2019-10-22 | 2019-10-22 | Layout method and device of graphical user interface, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110727496A CN110727496A (en) | 2020-01-24 |
| CN110727496B true CN110727496B (en) | 2024-01-23 |
Family
ID=69220646
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911005156.8A Active CN110727496B (en) | 2019-10-22 | 2019-10-22 | Layout method and device of graphical user interface, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110727496B (en) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116820289A (en) * | 2020-03-31 | 2023-09-29 | 腾讯科技（深圳）有限公司 | Information display method, device, equipment and storage medium |
| CN112578967B (en) * | 2020-12-24 | 2022-04-15 | 深圳市联谛信息无障碍有限责任公司 | Chart information reading method and mobile terminal |
| CN113419661B (en) * | 2021-06-30 | 2024-10-18 | 北京小米移动软件有限公司 | Display interface control method and device, mobile terminal and storage medium |
| CN113656034B (en) * | 2021-08-24 | 2024-03-12 | 北京百度网讯科技有限公司 | Information processing method, information processing device, electronic equipment and storage medium |
| CN114237425B (en) * | 2021-12-21 | 2024-01-16 | 深圳市普锐高科实业有限公司 | Screen controllable method based on handwriting pen |
| CN114675920B (en) * | 2022-03-25 | 2024-02-02 | 北京字跳网络技术有限公司 | Control method and device for layout objects, electronic equipment and storage medium |
| CN116107686B (en) * | 2023-04-13 | 2023-07-11 | 福建自贸试验区厦门片区Manteia数据科技有限公司 | Interface processing method and device of medical software, storage medium and electronic equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107734183A (en) * | 2017-10-31 | 2018-02-23 | 惠州Tcl移动通信有限公司 | A kind of method, storage medium and the mobile terminal of one-handed performance mobile terminal |
| CN108762601A (en) * | 2018-03-29 | 2018-11-06 | 威海新北洋技术服务有限公司 | Display methods, device and the mobile terminal of application function |
| CN108874356A (en) * | 2018-05-31 | 2018-11-23 | 珠海格力电器股份有限公司 | Voice broadcasting method and device, mobile terminal and storage medium |
| CN109947326A (en) * | 2017-12-21 | 2019-06-28 | 广州市动景计算机科技有限公司 | Toolbar methods of exhibiting, device and client device |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR101012300B1 (en) * | 2008-03-07 | 2011-02-08 | 삼성전자주식회사 | User interface apparatus of mobile station having touch screen and method thereof |
-
2019
- 2019-10-22 CN CN201911005156.8A patent/CN110727496B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107734183A (en) * | 2017-10-31 | 2018-02-23 | 惠州Tcl移动通信有限公司 | A kind of method, storage medium and the mobile terminal of one-handed performance mobile terminal |
| CN109947326A (en) * | 2017-12-21 | 2019-06-28 | 广州市动景计算机科技有限公司 | Toolbar methods of exhibiting, device and client device |
| CN108762601A (en) * | 2018-03-29 | 2018-11-06 | 威海新北洋技术服务有限公司 | Display methods, device and the mobile terminal of application function |
| CN108874356A (en) * | 2018-05-31 | 2018-11-23 | 珠海格力电器股份有限公司 | Voice broadcasting method and device, mobile terminal and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110727496A (en) | 2020-01-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110727496B (en) | Layout method and device of graphical user interface, electronic equipment and storage medium | |
| CN102541537B (en) | Method and device for realizing menu container controls with surrounding effect | |
| CN102446032B (en) | Information input method and terminal based on camera | |
| CN103455496B (en) | A kind of exchange method based on browser and equipment | |
| JP2021089761A (en) | Method and apparatus for controlling electronic device based on gesture | |
| WO2020082275A1 (en) | Method and device for processing drawn content on terminal apparatus, and terminal apparatus | |
| KR102373021B1 (en) | Global special effect conversion method, conversion device, terminal equipment and storage medium | |
| KR20130088104A (en) | Mobile apparatus and method for providing touch-free interface | |
| CN108920066B (en) | Touch screen sliding adjustment method and device and touch equipment | |
| CN102760026A (en) | Touch screen interface display method and device, and touch screen apparatus | |
| CN105824531A (en) | Method and device for adjusting numbers | |
| KR20150074145A (en) | Method, apparatus and terminal device for controlling movement of application interface | |
| CN103885685A (en) | Method and device for processing pages | |
| CN110941337A (en) | Control method of avatar, terminal device and computer readable storage medium | |
| CN105824553A (en) | Touch method and mobile terminal | |
| CN103150093A (en) | Operation prompt identifier moving method, device and terminal | |
| CN106155540B (en) | Electronic brush pen pen shape treating method and apparatus | |
| CN103455262A (en) | Pen-based interaction method and system based on mobile computing platform | |
| CN102915193A (en) | Method, device and intelligent terminal for browsing web pages | |
| CN105808129B (en) | Method and device for quickly starting software function by using gesture | |
| CN105278825A (en) | Screen capturing method and mobile terminal | |
| CN102929527A (en) | Device with picture switching function and picture switching method | |
| CN111984151B (en) | Whiteboard canvas size and position roaming control method for improving processing efficiency | |
| CN113296616B (en) | Pen point selection method and device and intelligent terminal | |
| CN114610155A (en) | Gesture control method and device, display terminal and storage medium |
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 |