Patent Publication Number: US-2022214893-A1

Title: Method, system, device for adaptive configuration of a user interface, and medium

Description:
TECHNICAL FIELD 
     The present invention relates to a technical field of user interface display, and in particular to a method, system, and device for adaptive configuration of a user interface, and a medium. 
     BACKGROUND 
     When designing a user interface, user interface designers need to consider various possibilities to adapt the user interface to multiple devices of multiple users since the multiple devices of the multiple users usually have different resolutions. In this case, a lot of work costs are consumed. 
     In the existing solution, an available area is usually set first, and then different user interface logics are designed for different resolutions in the available area. In the existing user interface configuration process, various boundary issues need to be considered, and consequently design steps of user interface are cumbersome, operability is poor, and adaptive configuration of the user interface cannot be implemented. 
     SUMMARY 
     An objective of the present invention is to provide a method, system, and device for adaptive configuration of a user interface, and a medium, to simplify design steps of user interface, enhance operability, and implement adaptive configuration of the user interface. 
     The present invention discloses a method for adaptive configuration of a user interface, the user interface includes a panel and one or more user interface components placed on the panel, and the method includes: 
     respectively making a correspondence between the one or more user interface components and one area of a plurality of areas of the panel; 
     performing a stretching operation on the plurality of areas and the one or more user interface components, and performing a moving operation on the plurality of areas, to generate an adaptive panel and one or more adaptive user interface components adapted to user equipment; and respectively placing the one or more adaptive user interface components in corresponding areas of the adaptive panel to generate an adaptive user interface. 
     Optionally, the panel has N×M areas arranged in a manner of N×M, wherein N and M are both positive integers. 
     Optionally, the respectively making a correspondence between the one or more user interface components and one area of a plurality of areas of the panel includes: according to every center point of each user interface component, making a correspondence between the each user interface component and an area in which the center point is located. 
     Optionally, the performing a stretching operation on the plurality of areas and the one or more user interface components, and performing a moving operation on the plurality of areas, to generate an adaptive panel and one or more adaptive user interface components adapted to user equipment includes: 
     obtaining a panel height and a panel width of the panel; 
     obtaining a screen height and a screen width of the user equipment; 
     calculating a stretching ratio, wherein the stretching ratio is a smaller value in a ratio of the screen height to the panel height and a ratio of the screen width to the panel width; 
     performing a stretching operation on the plurality of areas and the one or more user interface components according to the stretching ratio; 
     if the ratio of the screen height to the panel height is less than the ratio of the screen width to the panel width, moving the leftmost column area to the left to a screen edge of the user equipment, and moving the rightmost column area to the right to a screen edge of the user equipment, to generate an adaptive panel and one or more adaptive user interface components adapted to the user equipment; and if the ratio of the screen height to the panel height is greater than the ratio of the screen width to the panel width, moving the first row area up to a screen edge of the user equipment, and moving the last row area down to a screen edge of the user equipment, to generate an adaptive panel and one or more adaptive user interface components adapted to the user equipment. 
     Optionally, the respectively placing the one or more adaptive user interface components in corresponding areas of the adaptive panel to generate an adaptive user interface includes: 
     when the correspondence between the one or more user interface components and one area of the plurality of areas of the panel is respectively made, determining a positional relationship between every center point of each user interface component and a corresponding area; and according to the positional relationship, placing every center point of each adaptive user interface component in a corresponding area of the adaptive panel to generate the adaptive user interface. 
     The present invention discloses a system for adaptive configuration of a user interface, the user interface includes a panel and one or more user interface components placed on the panel, and the system includes: 
     a component correspondence module, configured to respectively make a correspondence between the one or more user interface components and one area of a plurality of areas of the panel; 
     a stretching and moving module, configured to: perform a stretching operation on the plurality of areas and the one or more user interface components, and perform a moving operation on the plurality of areas, to generate an adaptive panel and one or more adaptive user interface components adapted to user equipment; and 
     an interface generation module, configured to respectively place the one or more adaptive user interface components in corresponding areas of the adaptive panel to generate an adaptive user interface. 
     Optionally, the panel has N×M areas arranged in a manner of N×M, wherein N and M are both positive integers. 
     Optionally, the component correspondence module is configured to: according to every center point of each user interface component, make a correspondence between the each user interface component and an area in which the center point is located. 
     Optionally, the stretching and moving module is configured to: obtain a panel height and a panel width of the panel; obtain a screen height and a screen width of the user equipment; calculate a stretching ratio, wherein the stretching ratio is a smaller value in a ratio of the screen height to the panel height and a ratio of the screen width to the panel width; perform a stretching operation on the plurality of areas and the one or more user interface components according to the stretching ratio; if the ratio of the screen height to the panel height is less than the ratio of the screen width to the panel width, move the leftmost column area to the left to a screen edge of the user equipment, and move the rightmost column area to the right to a screen edge of the user equipment, to generate an adaptive panel and one or more adaptive user interface components adapted to the user equipment; and if the ratio of the screen height to the panel height is greater than the ratio of the screen width to the panel width, move the first row area up to a screen edge of the user equipment, and move the last row area down to a screen edge of the user equipment, to generate an adaptive panel and one or more adaptive user interface components adapted to the user equipment. 
     Optionally, the component correspondence module is configured to: when the correspondence between the one or more user interface components and one area of the plurality of areas of the panel is respectively made, determine a positional relationship between every center point of each user interface component and a corresponding area; and the interface generation module is configured to: according to the positional relationship, place every center point of each adaptive user interface component in a corresponding area of the adaptive panel to generate the adaptive user interface. 
     The present invention discloses a device for adaptive configuration of a user interface, the device includes a memory storing a computer-executable instruction and a processor, the processor is configured to execute the instruction to implement a method for adaptive configuration of a user interface, the user interface includes a panel and one or more user interface components placed on the panel, and the method includes: 
     respectively making a correspondence between the one or more user interface components and one area of a plurality of areas of the panel; 
     performing a stretching operation on the plurality of areas and the one or more user interface components, and performing a moving operation on the plurality of areas, to generate an adaptive panel and one or more adaptive user interface components adapted to user equipment; and 
     respectively placing the one or more adaptive user interface components in corresponding areas of the adaptive panel to generate an adaptive user interface. 
     The present invention discloses a computer storage medium coded with a computer program, the computer program includes an instruction, the instruction is executed by more than one computer to implement a method for adaptive configuration of a user interface, the user interface includes a panel and one or more user interface components placed on the panel, and the method includes:
         respectively making a correspondence between the one or more user interface components and one area of a plurality of areas of the panel;       

     performing a stretching operation on the plurality of areas and the one or more user interface components, and performing a moving operation on the plurality of areas, to generate an adaptive panel and one or more adaptive user interface components adapted to user equipment; and 
     respectively placing the one or more adaptive user interface components in corresponding areas of the adaptive panel to generate an adaptive user interface. 
     Main differences and effects of the embodiments of the present invention relative to the prior art are as follows: 
     In the present invention, a user interface designer can add and modify user interface components on a panel with a uniform resolution by using component correspondence steps, stretching and moving steps, and interface generation steps, to generate a basic user interface. In this way, design steps of user interface are simplified, there is no need to consider too many boundary issues, operability is enhanced, and user interface adaptive configuration can be implemented according to user equipment. 
    
    
     
       BRIEF DESCRIPTION OF DRAWINGS 
         FIGS. 1A-1H  are schematic diagrams of adaptive configuration of a user interface; 
         FIG. 2  is a schematic flowchart of a method for adaptive configuration of a user interface; 
       and 
         FIG. 3  is a schematic structural diagram of a system for adaptive configuration of a user interface. 
     
    
    
     DETAILED DESCRIPTION OF EMBODIMENTS 
     In the following description, many technical details are proposed in order to enable readers to better understand this application. However, a person of ordinary skill in the art can understand that even without these technical details and various changes and modifications based on the following embodiments, technical solutions protected by claims of this application can be implemented. 
     In order to make objectives, technical solutions and advantages of the present invention clearer, embodiments of the present invention are described in further detail below with reference to accompanying drawings. 
     When a user interface is designed, a user interface designer can add and modify user interface components on a panel with a uniform resolution to generate a basic user interface (hereinafter referred to as a user interface). 
       FIGS. 1A-1H  are schematic diagrams of adaptive configuration of a user interface. As shown in  FIG. 1A , a user interface  100  is a confirmation box, and includes a panel  101 , and three user interface components  102 ,  103 ,  104  placed on the panel  101 . 
     Optionally, the user interface  100  may include information of the user interface components  102 ,  103 ,  104  such as ID, category, color, size, content, and position. For example, the information of the user interface components  102 ,  103 ,  104  is recorded in a table: 
     
       
         
           
               
               
               
               
               
               
             
               
                   
               
               
                   
                 User interface 
                   
                   
                   
                   
               
               
                 ID 
                 component category 
                 Color 
                 Size 
                 Content 
                 Position 
               
               
                   
               
             
            
               
                 1 
                 Button 
                 Red 
                 30*10 
                 Cancel 
                 30, 30 
               
               
                 2 
                 Button 
                 Blue 
                 30*10 
                 Confirm 
                 70, 30 
               
               
                 3 
                 Text 
                 Black 
                 50*10 
                 Do you 
                 50, 70 
               
               
                   
                   
                   
                   
                 confirm? 
               
               
                   
               
            
           
         
       
     
     A first embodiment of the present invention relates to a method for adaptive configuration of a user interface.  FIG. 2  is a schematic flowchart of a method for adaptive configuration of a user interface. 
     As shown in  FIG. 2 , a method  200  includes the following steps: 
     Step  202 : Respectively make a correspondence between one or more user interface components and one area of a plurality of areas. 
     Optionally, the panel includes N×M areas arranged in a manner of N×M, wherein N and M are both positive integers, and N and M can be the same or different. 
     Optionally, the panel has nine areas arranged in a manner of 3×3. The panel can be divided into a leftmost column area, a middle column area, and a rightmost column area, and a first row area, a middle row area, and a last row area through this division, so that a moving operation can be performed on the leftmost column area and the rightmost column area or the first row area and the last row area in the following steps, while the position of the middle column area or the middle row area can be kept unchanged. 
     Optionally, sizes of the plurality of areas may be the same or different. 
     Optionally, the plurality of areas may be regular shapes or irregular shapes. 
     As shown in  FIG. 1B , the panel  101  has nine areas arranged in a manner of 3×3, and the nine areas are respectively numbered by 1-9. 
     Optionally, according to every center point of each user interface component, a correspondence between the each user interface component and an area in which the center point is located is made. If a center point of a user interface component is on a common boundary of the plurality of areas, a component correspondence rule can be set or according to an instruction of a user to make a correspondence between the user interface component and one area in the plurality of areas of the panel. 
     Optionally, according to a positioning point of each user interface component, a correspondence between the each user interface component and an area in which the positioning point is located is made. The positioning point is any point of the user interface component. 
     Optionally, according to an instruction of a user, a correspondence between one or more user interface components and one area of a plurality of areas of the panel is respectively made, wherein the one area is any area of the plurality of areas, so that the user interface can be customized in a more advanced way. 
     As shown in  FIG. 1C , according to a center point of the user interface component  102 , a correspondence between the user interface component  102  and an area 7 in which the center point is located is made; according to a center point of the user interface component  103 , a correspondence between the user interface component  103  and an area 9 in which the center point is located is made; according to a center point of the user interface component  104 , a correspondence between the user interface component  104  and an area 2 in which the center point is located is made. 
     Through step  202 , the panel can have a plurality of areas, so that stretching and moving operations can be performed on all or some of the areas selected in the following steps. Compared with that an adaptation operation is performed by using the panel as a whole, different adaptation operations can be performed on a central area and an edge area of the panel in this application. In addition, the correspondence between the one or more user interface components and one area of the plurality of areas of the panel can be respectively made, so that one or more adaptive user interface components can be respectively placed in corresponding areas of an adaptive panel in the following steps, to generate an adaptive user interface. The one or more adaptive user interface components in the adaptive user interface and the one or more user interface components in the user interface can be placed in the same corresponding areas. 
     Step  204 : Perform a stretching operation on the plurality of areas and the one or more user interface components, and perform a moving operation on the plurality of areas, to generate an adaptive panel and one or more adaptive user interface components adapted to user equipment. 
     Optionally, a panel height and a panel width of the panel are obtained; a screen height and a screen width of the user equipment are obtained; a stretching ratio is calculated, wherein the stretching ratio is a smaller value in a ratio of the screen height to the panel height and a ratio of the screen width to the panel width; a stretching operation is performed on the plurality of areas and the one or more user interface components according to the stretching ratio; if the ratio of the screen height to the panel height is less than the ratio of the screen width to the panel width, the leftmost column area is moved to the left to a screen edge of the user equipment, and the rightmost column area is moved to the right to a screen edge of the user equipment, to generate an adaptive panel and one or more adaptive user interface components adapted to the user equipment; and if the ratio of the screen height to the panel height is greater than the ratio of the screen width to the panel width, the first row area is moved up to a screen edge of the user equipment, and the last row area is moved down to a screen edge of the user equipment, to generate an adaptive panel and one or more adaptive user interface components adapted to the user equipment. 
     Optionally, if the ratio of the screen height to the panel height is equal to the ratio of the screen width to the panel width, the moving operation is not performed on the plurality of areas. 
     As shown in  FIG. 1D , a panel height H panel  and a panel width W panel  of the panel  101  are obtained; a screen height H screen  and a screen width W screen  of a screen  111  of the user equipment are obtained; a stretching ratio is calculated, wherein the stretching ratio is a smaller value in a ratio of the screen height H screen  to the panel height H panel  and a ratio of the screen width W screen  to the panel width W panel ; and a stretching operation is performed on the nine areas 1-9 according to the stretching ratio. 
     In addition, not shown in  FIG. 1D , a stretching operation is performed on the three user interface components  102 ,  103 ,  104  according to the stretching ratio, to generate three adaptive user interface components  102 ′,  103 ′,  104 ′. 
     As shown in  FIG. 1E , if the ratio of the screen height H screen  to the panel height H panel  is smaller than the ratio of the screen width W screen  to W panel , W the panel width leftmost column areas 1, 4, 7 are moved to the left to an edge of the screen  111  of the user equipment, and rightmost column areas 3, 6, 9 are moved to the right to an edge of the screen  111  of the user equipment to generate an adaptive panel  101 ′. 
     As shown in  FIG. 1F , if the ratio of the screen height H screen  to the panel height H panel  is greater than the ratio of the screen width W screen  to the panel width W panel , first row areas 1, 2, and 3 are moved up to an edge of the screen  111  of the user equipment, and last row areas 7, 8, and 9 are moved down to an edge of the screen  111  of the user equipment to generate an adaptive panel  101 ′. 
     Through step  204 , an adaptive panel and one or more adaptive user interface components adapted to user equipment can be generated. Compared with the existing user interface configuration, in this application, only the ratio of the screen height H screen  to the panel height H panel  and the ratio of the screen width W screen  to the panel width W panel  need to be calculated, and only the stretching operation and the moving operation are required. In this way, there is no need to consider too many boundary issues, operability is enhanced, and self-adaptive configuration of user interface can be implemented according to the user equipment. 
     Step  206 : Respectively place the one or more adaptive user interface components in corresponding areas of the adaptive panel, to generate an adaptive user interface. 
     Optionally, when the correspondence between the one or more user interface components and one area in the plurality of areas of the panel is respectively made, a positional relationship between every center point of each user interface component and a corresponding area is determined; and according to the positional relationship, every center point of each adaptive user interface component is placed in a corresponding area of the adaptive panel to generate an adaptive user interface. 
     Optionally, the positional relationship between the center point and the corresponding area may refer to percentage coordinates of the center point in the corresponding area. For example, percentage coordinates of a center point are (50% W corresponding area , 10% H corresponding area ), that is, the center point is obtained by taking a point at the lower left corner of the corresponding area as an origin point, moving to the right by 50% W corresponding area , and then moving up by 10% H corresponding area , wherein W corresponding area  is the width of the corresponding area, and H corresponding area  is the height of the corresponding area. After a stretching operation is performed on the plurality of areas and the one or more user interface components, the percentage coordinates can be kept unchanged. 
     Optionally, when the correspondence between the one or more user interface components and one area of the plurality of areas of the panel is respectively made, a positional relationship between a positioning point of each user interface component and a corresponding area is determined; and according to the positional relationship, every positioning point of each adaptive user interface component is placed in a corresponding area of the adaptive panel to generate an adaptive user interface. Similar to the positional relationship between the center point and the corresponding area discussed above, the positional relationship between the positioning point and the corresponding area can be determined. 
     Optionally, when the correspondence between the one or more user interface components and one area in the plurality of areas of the panel is respectively made according to an instruction of a user, a positional relationship between every center point or every positioning point of each user interface component and a corresponding area can be determined; and according to the positional relationship, every center point or every positioning point of each adaptive user interface component is placed in a corresponding area of the adaptive panel to generate an adaptive user interface. 
     Optionally, according to an instruction of a user, one or more adaptive user interface components are respectively placed in one area of the adaptive panel to generate an adaptive user interface, wherein the one area is any area in the plurality of areas, so that the adaptive user interface can be customized in a more advanced way. 
     As shown in  FIGS. 1G and 1H , the adaptive user interface component  102 ′ is placed in the corresponding area 7 of the adaptive panel  101 ′, the adaptive user interface component  103 ′ is placed in the corresponding area 9 of the adaptive panel  101 ′, and the adaptive user interface component  104 ′ is placed in the corresponding area 2 of the adaptive panel  101 ′, to generate an adaptive user interface  100 ′. 
     Optionally, the adaptive user interface  100 ′ may include information of the user interface components  102 ′,  103 ′,  104 ′ such as ID, category, color, size, content, and position. 
     Through step  206 , an adaptive user interface can be generated. One or more adaptive user interface components in the adaptive user interface and one or more user interface components in the user interface can be placed in the same corresponding areas, and further, one or more adaptive user interface components in the adaptive user interface and one or more user interface components in the user interface may be placed at the same positions in the same corresponding areas. 
     A second embodiment of the present invention relates to a system for adaptive configuration of a user interface.  FIG. 3  is a schematic structural diagram of a system for adaptive configuration of a user interface. 
     As shown in  FIG. 3 , a system  300  includes: 
     a component correspondence module  302 , configured to respectively make a correspondence between one or more user interface components and one area of a plurality of areas of a panel; 
     a stretching and moving module  304 , configured to perform a stretching operation on the plurality of areas and the one or more user interface components, and perform a moving operation on the plurality of areas, to generate an adaptive panel and one or more adaptive user interface components adapted to user equipment; and an interface generation module  306 , configured to respectively place the one or more adaptive user interface components in corresponding areas of the adaptive panel to generate an adaptive user interface. 
     Optionally, the panel has N×M areas arranged in a manner of N×M, wherein N and M are both positive integers. 
     Optionally, the component correspondence module  302  is configured to: according to a center point of each user interface component, make a correspondence between the each user interface component and an area in which the center point is located. 
     Optionally, the stretching and moving module  304  is configured to: obtain a panel height and a panel width of the panel; obtain a screen height and a screen width of the user equipment; calculate a stretching ratio, wherein the stretching ratio is a smaller value in a ratio of the screen height to the panel height and a ratio of the screen width to the panel width; perform a stretching operation on the plurality of areas and the one or more user interface components according to the stretching ratio; if the ratio of the screen height to the panel height is less than the ratio of the screen width to the panel width, move the leftmost column area to the left to a screen edge of the user equipment, and move the rightmost column area to the right to a screen edge of the user equipment, to generate an adaptive panel and one or more adaptive user interface components adapted to the user equipment; and if the ratio of the screen height to the panel height is greater than the ratio of the screen width to the panel width, move the first row area up to a screen edge of the user equipment, and move the last row area down to a screen edge of the user equipment, to generate an adaptive panel and one or more adaptive user interface components adapted to the user equipment. 
     Optionally, the component correspondence module  302  is configured to: when the correspondence between the one or more user interface components and one area in the plurality of areas of the panel is respectively made, determine a positional relationship between a center point of each user interface component and a corresponding area; and the interface generation module  306  is configured to: according to the positional relationship, place a center point of each adaptive user interface component in a corresponding area of the adaptive panel to generate the adaptive user interface. 
     The first embodiment is a method embodiment corresponding to this embodiment, and this embodiment can be implemented in cooperation with the first embodiment. The related technical details mentioned in the first embodiment are still valid in this embodiment. In order to reduce repetition, details are not described herein. Correspondingly, the related technical details mentioned in this embodiment can also be applied in the first embodiment. 
     A third embodiment of the present invention relates to a device for adaptive configuration of a user interface. The device includes a memory in which an instruction is stored and a processor. The processor is configured to execute the instruction to implement a method for adaptive configuration of a user interface. The user interface includes a panel and one or more user interface components placed on the panel. The method includes: 
     respectively making a correspondence between the one or more user interface components and one area in a plurality of areas of the panel; 
     performing a stretching operation on the plurality of areas and the one or more user interface components, and performing a moving operation on the plurality of areas, to generate an adaptive panel and one or more adaptive user interface components adapted to user equipment; and 
     respectively placing the one or more adaptive user interface components in corresponding areas of the adaptive panel to generate an adaptive user interface. 
     The first embodiment is a method embodiment corresponding to this embodiment, and this embodiment can be implemented in cooperation with the first embodiment. The related technical details mentioned in the first embodiment are still valid in this embodiment. In order to reduce repetition, details are not described herein. Correspondingly, the related technical details mentioned in this embodiment can also be applied in the first embodiment. 
     A fourth embodiment of the present invention relates to a computer storage medium encoded with a computer program. The computer program includes an instruction, and the instruction is executed by one or more computer to implement a method for adaptive configuration of a user interface. The user interface includes a panel and one or more user interface components placed on the panel. The method includes: 
     respectively making a correspondence between the one or more user interface components and one area in a plurality of areas of the panel; 
     performing a stretching operation on the plurality of areas and the one or more user interface components, and performing a moving operation on the plurality of areas, to generate an adaptive panel and one or more adaptive user interface components adapted to user equipment; and 
     respectively placing the one or more adaptive user interface components in corresponding areas of the adaptive panel to generate an adaptive user interface. 
     The first embodiment is a method embodiment corresponding to this embodiment, and this embodiment can be implemented in cooperation with the first embodiment. The related technical details mentioned in the first embodiment are still valid in this embodiment. In order to reduce repetition, details are not described herein. Correspondingly, the related technical details mentioned in this embodiment can also be applied in the first embodiment. 
     It should be noted that each method embodiment of the present invention can be implemented in software, hardware, firmware, and other manners. Regardless of whether the present invention is implemented in software, hardware, or firmware, instruction codes can be stored in any type of computer-accessible memory (for example, a permanent or modifiable, volatile or non-volatile, solid-state or non-solid, fixed or replaceable medium, etc.). Similarly, the memory may be, for example, programmable array logic (“PAL”), a random access memory (“RAM”), and a programmable read-only memory (“PROM”), a read-only memory (“ROM”), an electrically erasable programmable read-only memory (“EEPROM”), a magnetic disk, an optical disc, and a digital versatile disc (“DVD”). 
     It should be noted that the units/modules mentioned in the device embodiments of this application are logical units/modules. Physically, a logical unit/module may be a physical unit or may be a part of a physical unit, or may be implemented as a combination of multiple physical units. The physical implementation of these logical units is not the most important. The combination of the functions implemented by these logical units is the key to solving the technical problem presented in this application. In addition, in order to highlight the innovation part of this application, the above device embodiments of this application do not introduce units that are not closely related to solving the technical problems raised by this application, and this does not mean that there are no other units in the above device embodiments. 
     It should be noted that in the claims and the description of this application, relational terms such as “first” and “second” are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. Moreover, the terms “comprise”, “include” or any other variants thereof are intended to cover the non-exclusive inclusion, so that a process, method, product, or device that includes a list of elements not only includes those elements but also includes other elements that are not expressly listed, or further includes elements inherent to such a process, method, article, or device. An element defined by “includes a . . . ” does not, without more constraints, preclude the existence of additional identical elements in the process, method, product, or device that includes the element. 
     Although this application has been illustrated and described by reference to some preferred embodiments of this application, a person of ordinary skill in the art should understand that various changes can be made in form and detail without departing from the spirit and scope of this application.