Determining presentation data for graphical user interface

Abstract

A computer-implemented method (100) for determining presentation data for a graphical user interface (10), GUI. The method comprises: obtaining (110) a modular scale (30) for a plurality of design elements (20) of the GUI (10); determining (120) a scaling factor (50) for the modular scale (30); applying (130) the scaling factor (50) to the design element (20) such that the modular scale (30) is propagated to reflect a dimensioning attribute (32) of the design element (20) with respect to the at least one set of pixels (42); and determining (140) presentation data based on the scaling coefficient (50) applied to the design element (20), where the GUI (10) including the presentation data may be presented on a computer display (62) associated with one of the baseline set of pixels (40) or a set of pixels (42) different from the baseline set of pixels (40).

Description

Technical Field

[0001] This invention relates to a computer implementation method for determining presentation data for a graphical user interface (GUI). The invention also relates to an associated computerized system, a non-transitory computer-readable storage medium, and a computer program product. Background Technology

[0002] Design systems are the fundamental tools for creating GUIs. GUIs can implement the functionality of various programs, such as web applications, mobile applications, native applications, or hybrid applications. Existing technologies teach various different ways to manage the creation of design systems, and are generally categorized into static methods, dynamic methods, or combinations thereof.

[0003] Static design methods often rely on static grids, predefined scales, and fixed templates, and cannot easily adapt to changes in screen size, context, or user preferences. While static design methods may offer a consistent and standardized design language, making them suitable for projects with clearly defined requirements, they struggle to adapt to the diverse devices, screen sizes, and platforms of today's digital age. Therefore, it is difficult to create consistent and responsive designs when using static design methods.

[0004] Dynamic design methodologies typically employ various algorithms, automation techniques, or real-time adaptive mechanisms to adjust design elements based on constantly changing contexts, user preferences, and device constraints. While dynamic design methodologies offer adaptability and responsiveness, their inherent complexity and resource-intensive nature can present implementation challenges. This complexity stems from the need for sophisticated algorithms to dynamically adjust design elements in real time, which can be computationally demanding and require specialized knowledge. Furthermore, the demands on resources such as processing power and memory can be substantial, potentially leading to increased costs and technical limitations during implementation. Finding a proper balance between dynamic adaptability and efficient resource utilization is a key consideration in the development of dynamic design systems.

[0005] Whether using static or dynamic methods, existing design systems suffer from numerous problems. The inventors have identified these problems and developed innovative methods aimed at eliminating or at least mitigating one or more deficiencies of the prior art. Summary of the Invention

[0006] In view of the above problems, in a first aspect of this disclosure, a computer implementation method for determining presentation data for a GUI is provided, the method comprising: obtaining a modular scale for a plurality of design elements for the GUI, the modular scale defining corresponding size setting attributes of the design elements with respect to a baseline pixel set; determining a scaling factor of the modular scale, the scaling factor indicating a factor by which the design elements will be adapted in response to an established relationship between the size setting attributes and at least one pixel set different from the baseline pixel set, and wherein the scaling factor determines positional relationships between the design elements; applying the scaling factor to the design elements such that the modular scale is propagated to reflect the size setting attributes of the design elements with respect to the at least one pixel set; and determining presentation data based on the scaling factor applied to the design elements, wherein the GUI containing the presentation data can be presented on a computer display associated with either the baseline pixel set or a pixel set different from the baseline pixel set.

[0007] In some examples, a scaling factor is applied to the design element by multiplying the above factor by the corresponding size setting attribute of the design element, and the design element is adapted by this factor.

[0008] In some examples, the scaling factor is a predetermined value that is between 0.500 and 1.500, more preferably between 0.800 and 1.200.

[0009] In some examples, the positional relationship between design elements is defined as one or more of the change rate, change direction, and change magnitude.

[0010] In some examples, obtaining a modular scale involves applying an initial scaling factor to the baseline size setting property of a baseline design element from multiple design elements, such that the modular scale is obtained as the baseline size setting property of that baseline design element propagates to the remaining design elements.

[0011] In some examples, the method further includes: determining one or more variation factors of the scaling factor, which, when applied to the scaling factor, causes the modular scale to propagate at a predefined rate.

[0012] In some examples, each variation factor includes two or more fixed values ​​that are different from each other.

[0013] In some examples, the scaling factor is automatically determined based on the type of GUI, the statistics associated with the GUI, the type of computer monitor on which the GUI is displayed, personal preferences, and their combination.

[0014] In some examples, design elements are one or more of the following: text, icons, images, tables, buttons, forms, navigation menus, blank areas, animations, columns, grids, hover effects, sliders, selectors, and combinations thereof.

[0015] In some examples, the size setting properties are one or more of the following: width, height, padding, margin, border, box model control, line height, font type, font size, font style, transformation, scaling, aspect ratio, position, floating, and combinations thereof.

[0016] In some examples, the method also includes: using presentation data to render the GUI as a dynamic design system on a computer monitor.

[0017] In some examples, the method also includes: using presentation data to render the GUI as a static design system on a computer monitor.

[0018] In a second aspect of this disclosure, a computerized system is provided, which includes a processor configured to perform the functions of the method according to the first aspect.

[0019] In a third aspect of this disclosure, a non-transitory computer-readable storage medium is provided, comprising instructions that, when executed by one or more processors of a computerized system, cause the processor to perform the function of the method according to the first aspect.

[0020] In a fourth aspect of this disclosure, a computer program product is provided, which includes computer code for performing functions according to the method of the first aspect.

[0021] It should be emphasized that, when used in this specification, the term "comprising / including" is used to specify the presence of the stated feature, integer, step, or component, but does not exclude the presence or addition of one or more other features, integers, steps, components, or groups thereof. Unless otherwise expressly defined herein, all terms used in the claims should be interpreted according to their ordinary meaning in the art. Unless otherwise expressly stated, all references to "a / an" or "the [element, device, component, apparatus, step, etc.]" should be interpreted in an open-ended manner as referring to at least one instance of that element, device, component, apparatus, step, etc. Unless otherwise expressly stated, the steps of any method disclosed herein need not be performed in the exact order disclosed. Attached Figure Description

[0022] The above will become apparent from the following more detailed description of the exemplary embodiments illustrated in the accompanying drawings, in which the same reference numerals denote the same parts in different views. These drawings are not necessarily drawn to scale, but are intended to illustrate exemplary embodiments.

[0023] Figure 1 This is a schematic diagram based on an example of a computerized system.

[0024] Figures 2A to 2D This is a schematic diagram based on an example used to determine the presentation data for a graphical user interface.

[0025] Figure 3 This is a further example Figure 2D A schematic diagram of an example in the image.

[0026] Figure 4 This is a further example Figure 2D The example is illustrated in the diagram.

[0027] Figure 5A This is a schematic diagram of a computer implementation method for determining the presented data, based on an example.

[0028] Figure 5B yes Figure 5A An exemplary graphical illustration of the presented data.

[0029] Figure 6A This is a schematic diagram of a computer implementation method for determining the presented data, based on an example.

[0030] Figure 6B yes Figure 6A An exemplary graphical illustration of the presented data.

[0031] Figure 7A This is a schematic diagram of a computer implementation method for determining the presented data, based on an example.

[0032] Figure 7B yes Figure 7A An exemplary graphical illustration of the presented data.

[0033] Figure 8 This is a schematic flowchart illustrating a computer implementation method for determining presentation data for a graphical user interface, based on an example.

[0034] Figure 9 This is a schematic diagram based on an example of a computerized system.

[0035] Figure 10 This is a schematic diagram based on an example of a computer-readable storage medium. Detailed Implementation

[0036] Embodiments of the invention will now be described with reference to the accompanying drawings. However, the invention may be embodied in many different forms and should not be construed as limited to the embodiments described herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the invention to those skilled in the art. The terminology used in the detailed description of the specific embodiments illustrated in the drawings is not intended to limit the invention. In the drawings, the same reference numerals denote the same elements.

[0037] A major problem with display technology today is the lack of well-defined standards for computer monitors in areas such as screen size, resolution, and aspect ratio. For example, Apple's iPhone 14 has a 6.1-inch screen with a resolution of approximately 1170x2532 pixels, resulting in a pixel density of approximately 460 PPI (pixels per inch); while Google's Pixel tablet has a 10.95-inch screen with a resolution of approximately 2560x1600 pixels, resulting in a pixel density of approximately 276 PPI. Therefore, monitor manufacturers often have considerable freedom in designing devices to meet their specific needs, standards, and compatibility requirements. This results in a large number of different devices on the market, varying significantly in their size-related characteristics. Consequently, determining the rendering data for a GUI that can easily adapt to a given device becomes particularly challenging. Typically, designing a new GUI is a laborious process involving trial and error. Developers and designers may need to spend considerable time experimenting with different layouts and configurations to achieve the desired user experience. This extended design phase can increase development costs and time-to-market, posing challenges for companies seeking efficient product development. Without properly tailoring the GUI to specific devices with predetermined size and configuration attributes, inconsistent and suboptimal user experiences may occur across different devices, ultimately limiting the software's applicability and usability, and weakening cross-platform compatibility.

[0038] Furthermore, due to the lack of universal applicability of design systems in this regard, some computer monitors fail to effectively convey the distinctions between different functions or elements within the interface. This lack of clarity can make it difficult for users to understand the goals and uses of various GUI components. Consequently, user errors can occur due to unclear elements or improper labeling, potentially leading to data loss or unexpected behavior, which reduces the robustness of the system.

[0039] In addition to the above, older GUI design methodologies may fail to efficiently allocate system resources such as screen space, memory, and processing power. This is especially true for resource-intensive applications that require fine-grained arrangement and control of a large number of design elements simultaneously and in an interconnected manner. When the layout of GUI design elements lacks proper control, it can adversely affect the system's performance, stability, and robustness. Inefficient GUI layouts often lead to wasteful use of system resources, resulting in sluggish performance and decreased responsiveness. This resource mismatch can also cause slowdowns or system crashes, especially under high demand. Over time, maintaining the GUI layout becomes cumbersome and costly, as updates can introduce unforeseen problems. Inadequate layouts can also conflict with accessibility tools or introduce security vulnerabilities, jeopardizing the system's reliability and security. A common outcome is user dissatisfaction, potentially leading to a decreased user base and damaged system reputation. In general, a well-controlled GUI layout is essential for maintaining the system's speed, stability, and overall robustness, ensuring efficient resource utilization and a positive user experience.

[0040] Therefore, this disclosure aims to address the aforementioned problems by providing a solution that establishes standards for computer displays, simplifies the GUI design process, optimizes resource allocation, and enhances universal applicability. This solution offers technical advantages to ensure efficient resource utilization, consistent performance, and a positive user experience while maintaining system stability and reliability. While static and dynamic approaches are often associated with different types of problems, the topics described herein can be advantageously applied to any type of system that actually has some kind of computer display, regardless of the design methodology employed.

[0041] Figure 1A computerized system 200 is illustrated, in which some of the innovative concepts of this disclosure can be applied. System 200 includes various types of computing devices 60. These computing devices include typical end-user devices 60 or client devices, such as tablet computers (e.g., surf pads), mobile terminals (e.g., smartphones or personal digital assistants), personal computers (e.g., laptops, PCs, or workstations), or information terminals (e.g., electronic billboards, digital signage displays, or static self-service kiosks). Note that the computing devices 60 included in system 200 can be used for two different purposes. The first purpose is to perform the computer implementation method 100 by generating presentation data for a computer display 62. The second purpose is to present a GUI on the computer display 62 using the presentation data. In some examples, the computing device 60 that generates the presentation data is the same device as the computing device 60 that uses the presentation data to present the GUI, but this is not necessary. This disclosure is not limited to the specific configuration of the computing device 60 for the purpose of generating or presenting presentation data.

[0042] Each computing device 60 includes a computer display 62, but this is an optional feature for generating and presenting data. The computer display 62 can be associated with a specific set of pixels. In the context of this disclosure, a set of pixels is a group of pixels arranged in a specific configuration or pattern to display information. A set of pixels can be defined as a resolution, that is, the number of pixels in the horizontal and vertical directions of the computer display 62. Some common computer display resolutions include Full HD (1920x1080), 2K (2560x1440), 4K (3840x2160), 5K (5120x2880), and 8K DCI (8192x4320). However, it is conceivable that the computer display 62 can be associated with any computer display resolution, regardless of whether that resolution is standardized in the art. For example, the simple monochrome LCD display of the Nokia 1011, released in 1992, had a resolution of approximately 48x48 pixels. It is at least conceivable that this disclosure also applies to such prior art computer display resolutions, as well as resolutions up to 8K and even higher resolutions than those in conceivable future display technologies. While the pixel set is typically defined as the resolution of the computer monitor 62, alternatively, the pixel set can be defined with respect to other properties of the computer monitor 62, including but not limited to width, height, PPI, aspect ratio, screen size, orientation (portrait / landscape mode), subpixel arrangement (one or more portions of the computer monitor 62), border size, viewport, virtual screen, or perceived pixel set.

[0043] Computer display 62 is configurable to display visual information via GUI 10. GUI 10 can be visualized through the presentation of presentation data. GUI 10 can be presented on computer display 62 as a dynamic design system. GUI 10 can also be presented on computer display 62 as a static design system. GUI 10 can be presented using one or more presentation techniques known in the art, using presentation data. For example, such presentation techniques include CPU / GPU rendering, ray tracing, screen-space reflections, baked lighting, parallax mapping, rendering pipeline, vertex processing, rasterization, texture processing, shading, and framebuffering. GUI 10 allows users to interact with visual information. User interaction can be purely visual, i.e., by the user viewing the information provided by GUI 10. Optionally, the user can interact with GUI 10 through one or more input devices (such as a mouse, touchscreen, digital pen, touchpad, etc.). Therefore, it should be understood that, within the context of this disclosure, GUI 10 can be presented statically on computer display 62, and optionally with the inclusion of one or more dynamic elements.

[0044] GUI 10 includes multiple design elements 20-1, 20-2, and 20-n. Typically, design element 20 is an element containing visual information that can be displayed and viewed on a computer monitor 62 via the GUI. Design element 20 can be one or more of text, icons, images, tables, buttons, forms, navigation menus, blank areas, animations, bars, grids, hover effects, sliders, selectors, and combinations thereof. Those skilled in the art will recognize other similar design elements 20 that can be displayed on the GUI.

[0045] Design element 20 includes at least one size setting attribute. The size setting attribute can define the size, form, shape, etc., of design element 20. Additionally or alternatively, the size setting attribute can define the relationship between the first design element 20-1 and one or more additional design elements 20-2, 20-n. The size setting attribute can be one or more of the following: width, height, padding, margin, border, box-sizings, line height, font type, font size, font style, transformation, scaling, aspect ratio, position, floating, and combinations thereof.

[0046] Now refer to Figures 2A to 2DThe diagram illustrates a computer implementation method 100 for determining presentation data for a GUI, based on various examples. The examples in this document consider a design element 20 as typography, which has a size setting attribute as font size. However, as will be understood from the above description, other types of design elements and associated size setting attributes can be conceived in other examples. In this particular example, the diagram is shown as a table, but this is for illustrative purposes only. Alternatively, certain other types of data structures (e.g., charts, graphs, distribution maps, diagrams, graphics, etc.) can be used to provide presentation data. The rows of the table show multiple design elements 20, labeled as... Base , Neg1-n , Pos1-n ,in n This is an arbitrary value depending on the number of different types of design elements 20 with different size setting attributes 32. The table lists multiple pixel sets 40; 42-1, 42-n. In these examples, the pixel sets 40; 42-1, 42-n used range from 300 to 1500 and represent the pixel width of different types of computer monitors. The baseline pixel set 40 represents a starting point that serves as a reference for future comparisons and evaluations, i.e., the benchmark upon which measurements of size adjustments to design element 20 are based. In this particular example, the baseline pixel set 40 is the smallest pixel set in the table, but in other examples, it can be any pixel set, such as any pixel set from the additional pixel sets 42-1, 42-n. The additional pixel sets 42-1, 42-n correspond to other pixel sets to which design element 20 can be adapted.

[0047] exist Figure 2A In this example, a modular scale 30 is obtained for design element 20. The modular scale 30 defines the corresponding size setting attribute 32 of design element 20 with respect to the baseline pixel set 40. This means that for a computer display 62 having a pixel set corresponding to a pixel width of 300, the modular scale 30 correspondingly defines the size setting attribute 32 of design element 20. In this example, the size setting attribute 32 of design element 20 and the modular scale 30 with respect to the baseline pixel set 40 is as follows: Neg1 (14) Neg2 (12) Base (16) Pos1 (18) Pos2 (20) Pos3 (twenty three), Pos4 (27) Pos5 (31) and Pos6 (35). In this example, Neg Value and Pos The values ​​are respectively scaled by the initial scaling factor from... Base Value export. Design elements. Negn , Posn and related size setting attributes snn and spn The following explains that for any given set of pixels 42, the modular scale 30 can define the size setting attribute 32 of any given design element 20.

[0048] Typically, the modular scale 30 can be viewed as an initial size setting chart or setup, thereby defining the corresponding size setting attributes 32 of the design element 20. The modular scale 30 can be obtained in various different ways, such as by receiving a fixed scale with fixed size setting attributes or by determining a specific scale. In this exemplary modular scale 30, there is a direct relationship between the corresponding size setting attributes 32. This relationship is determined by an initial scaling factor. Other exemplary initial scaling factors will be explained later in this disclosure. However, in other examples, the size setting attributes 32 of the modular scale are arbitrarily chosen. Therefore, there does not necessarily need to be any fixed relationship between the corresponding size setting attributes 32 of the design element 20. In some examples, the size setting attributes 32 of the modular scale 30 are related to each other through an initial scaling factor. This initial scaling factor can be a fixed value. This initial scaling factor can be a value that varies depending on various factors, including but not limited to the type of design element 20, the type of size setting attributes 32, the type of GUI, the type of computer monitor, etc. In other examples, the size setting attributes 32 of the modular scale 30 are related to each other in any way. In another example, these examples can be combined, i.e., two or more dimension setting attributes 32 of the modular scale 30 are related to each other, and at least one of the dimension setting attributes 32 of the modular scale 30 is arbitrarily selected.

[0049] Figure 2B The scaling factor 50 (denoted as) for modular scale 30 was determined. Sr ( x The scaling factor of 50 indicates a factor. x Design element 20 will be passed through this factor xThe scaling factor 50 is adapted in response to the size setting attribute 32, which is relating to pixel sets 42-1, 42-n other than the baseline pixel set 40. Therefore, the scaling factor 50 is applied to modify the size setting attribute 32 of the design element 20 by a specific factor, so that the design element 20 can be adapted to, for example, a computer display with any given pixel set. The scaling factor 50 can decrease the size of the design element 20. The scaling factor 50 can increase the size of the design element 20. For values ​​below 1.000, the scaling factor 50 can modify the size setting attribute of the design element 20, thereby decreasing the size of the design element 20. Correspondingly, for values ​​above 1.000, the scaling factor 50 can modify the size setting attribute of the design element 20, thereby increasing the size of the design element 20. The scaling factor 50 can be a predetermined value between 0.500 and 1.500. More advantageously, the scaling factor 50 is a predetermined value between 0.800 and 1.200. Alternatively, other suitable predetermined values ​​can be achieved, even those less than or greater than 0.500 and 1.500, respectively.

[0050] The scaling factor 50 determines the positional relationship between design elements 20. This means that the scaling factor 50 can represent the change or relative movement of the value of the first design element relative to the second design element over a certain period of time or under specific conditions. In other words, the scaling factor 50 can provide information about the values ​​of design elements 20, typically the size setting attribute 32, and how they are positioned or arranged relative to each other. Therefore, the positional relationship can be defined as the rate of change (e.g., a ratio or fraction describing how a change in the first design element affects the second design element), the direction of change (e.g., a positive factor can imply an increase in the first design element relative to the second design element, while a negative factor implies a decrease), the magnitude of change (e.g., the quantifiable degree of change or the steepness of the positional relationship), etc.

[0051] The scaling factor of 50 can be automatically determined based on several different factors. In some examples, it can be automatically determined based on the type of GUI, such as desktop GUI, web-based GUI, mobile GUI, self-service terminal GUI, embedded GUI, virtual / augmented reality GUI, etc. In some examples, it can be automatically determined based on statistics associated with the GUI, such as user analytics data, performance metrics, bug and defect tracking data, test data, resource utilization data, security-related data, geospatial data, health and medical data, etc. In some examples, it can be automatically determined based on the type of computer monitor on which the GUI will be displayed, such as a reference monitor. Figure 1The scaling factor 50 can be automatically determined using one or more computer monitor types. In some examples, the scaling factor 50 can be automatically determined based on personal preferences such as color preference, font and text preference, accessibility preference, language preference, notification preference, privacy preference, gesture and input preference, and data display preference. In some examples, one or more of the above factors can be considered in combination to automatically determine the scaling factor 50. In other examples, the scaling factor 50 can be defined manually, for example, by a system developer, designer, or technical lead.

[0052] exist Figure 2C In this context, a scaling factor of 50 has been applied to design element 20. Therefore, a modular scale 30 has been propagated to reflect the size setting attribute 32 of design element 20 with respect to the other pixel sets 42-1, 42-n. The propagation of the modular scale 30 generally means that the data of the size setting attribute 32 will be increased or decreased according to the scaling factor 50, which in... Figure 2C It was described in the text, in Figure 2C In this example, a scaling factor of 50 greater than 1.000 has been applied to design element 20. Therefore, the font size for the baseline pixel set 40 is 16. Base It will grow according to the coefficient defined by the scaling factor 50. For a pixel width of 400 (42-1), the change in pixel width does not cause a change in the corresponding size setting attribute, because it remains 16 (i.e., the same rounded value). A change in pixel width from 400 (42-1) to 500 (42-2) causes the size setting attribute to change from 16 to 17, a change in pixel width from 500 (42-2) to 600 (42-3) causes no change, a change in pixel width from 600 (42-3) to 700 (42-4) causes the size setting attribute to change from 17 to 18, and so on, until for any pixel width resn The font size is 23. In this example, the scaling factor 50 is configured to adapt design element 20 by the same factor. However, this is only one exemplary scaling factor 50. As will be understood from the following additional examples of this disclosure, possible variations can be incorporated into the scaling factor 50.

[0053] See also Figure 2D A scaling factor of 50 has been applied to all design elements. Negn to PosnTherefore, the modular scale 30 is propagated to reflect the size setting attribute 32 of all design elements 42. However, this is not necessary. In other examples, it is conceivable that the scaling factor 50 can be applied to two or more design elements 20, thus omitting the propagation of the modular scale 30, for example, for one or more design elements 20. These examples may involve certain types of design elements 20, such as images or tables, which do not necessarily need to change the size setting attribute 32 for one or more pixel sets 42-1, 42-n.

[0054] exist Figures 2A to 2D In the example, scaling factor 50 is applied to design element 20 by multiplying the factor—the design element to be adapted through—by the corresponding size setting attribute 32 of design element 20. Other possible applications of scaling factor 50 are conceivable, such as by applying mathematical functions based on addition, exponential growth, logarithms, reciprocals, percentages, square roots, geometric series, matrix operations, function composition, etc.

[0055] Once the scaling factor 50 has been applied to one or more design elements 20, rendering data can be generated. As described above, this rendering data can optionally be rendered on a computer monitor with a given set of pixels. For this purpose, the rendering data can be rendered on a computer monitor with a set of pixels corresponding to the baseline pixel set 40 or any set of pixels 42-1, 42-n. Advantageously, the rendering data can be rendered on a computer monitor with either a static pixel set or a dynamic pixel set, thus making the rendering data applicable to any graphical visualization on the computer monitor while maintaining a consistent scaling scheme for its design elements 20. This achieves the aforementioned advantageous technical effects, including providing a standard for computer monitors that simplifies the GUI design process, optimizes resource allocation, and enhances universal applicability. This standard further provides technical advantages to ensure efficient resource utilization, consistent performance, and a positive user experience while maintaining system stability and reliability.

[0056] Figure 3 Corresponding to Figure 2D The example is shown, but the difference is that the value of the size setting property 32 of design element 20 has been replaced with the text "Font size as size setting property 32". Rag As shown in the image, some of the lettering is so small that it is almost invisible in this particular illustration.

[0057] Figure 4 yes Figure 2DAnother visualization, but presented in a graphical format. For each design element 20, the curve indicates how the design element 20 is manipulated when a scaling factor 50 is applied, allowing the modular scale 30 to propagate and reflect the size setting attribute 32 of the design element 20 with respect to pixel sets 42-1, 42-n, excluding the baseline pixel set 40. Larger design elements 20 will exhibit greater variation compared to smaller design elements 20, but the scaling factor will remain the same.

[0058] Figure 5A and Figure 5B , Figure 6A and Figure 6B as well as Figure 7A and Figure 7B Different examples of scaling factor 50 applied to modular scale 30 are shown. In addition to scaling factor 50, these examples also illustrate the application of an initial scaling factor 70 and one or more variation factors 80. For each example, three different types of data visualizations are shown: 502, 504, 506; 602, 604, 606; 702, 704, 706, which are presented as data visualizations generated from the corresponding examples.

[0059] exist Figure 5A In this process, obtaining the modular scale 30 includes the initial step of applying an initial scaling factor 70 to the baseline size setting attribute 32-1 of the baseline design element 20-1. The baseline design element 20-1—whose baseline size setting attribute value 32-1 is utilized—can vary in different examples. In this example, the baseline design element 20-1 corresponds to... Base00 Design element 20, however, any of the remaining design elements 20 may be used as baseline design element 20-1. The initial scaling factor 70 should not be confused with scaling factor 50, as they serve different purposes. The initial scaling factor 70 is used to obtain the modular scale 30, while scaling factor 50 is applied to the modular scale 30 to obtain rendering data for various types of pixel sets.

[0060] The initial scaling factor 70 can be applied to baseline design element 20-1 in a manner similar to applying scaling factor 50 to a modular scale, i.e., through multiplication or other suitable methods, such as those defined with respect to scaling factor 50. The initial scaling factor 70 used in this example is 1.1414, but this is merely an example. In other examples, any predetermined value within the same range (and preferred sub-ranges) defined with respect to scaling factor 50 can be used. When the initial scaling factor 70 is applied to baseline size setting property 32-1, the baseline size setting property 32-1 of baseline design element 20-1 propagates to the remaining design elements 20, thus obtaining modular scale 30. Figures 2A to 2D Compared to the modular scale 30 used in the previous example, the modular scale 30 in this example therefore depends on the value used for the initial scaling factor 70 (i.e., 16 × 1.1414 = 18.26; 18.26 × 1.1414 = 20.84; 20.84 × 1.1414 = 23.79, and so on). A chart illustrating the size control of the modular scale 30 obtained in this way is shown in data visualization form 502.

[0061] Figure 5A A scaling factor of 1.0275 is also shown, which is depicted in data visualization form 504.

[0062] Figure 5B Show Figure 5A Example data visualization form 506. A scaling factor 50 has been applied to design element 20 so that a modular scale 30 obtained by using an initial scaling factor 70 has been propagated to reflect the size setting properties of design element 20 with respect to multiple different pixel sets (300 to 1600).

[0063] Figure 6A Examples and Figure 5A The example is similar, except that a variation factor 80 is added to the scaling factor 50. The variation factor 80 applied to the scaling factor 50 causes the modular scale 30 to propagate at a predefined rate. If the scaling factor 50 is understood as the “speed” of propagation, then the variation factor 80 applied to the scaling factor 50 can be understood as a change in speed, or in other words, the “acceleration” of propagation.

[0064] In this particular example, three individual variation factors, 80-1, 80-2, and 80-3, are explicitly shown. As this example illustrates, the largest variation factor, 80-1, is indicated by the label... Pos+07 How should the propagation of design element 20 be adapted, with the intermediate variation factor 80-2 indicated by the marker? Base00 How should the propagation of design element 20 be adapted, and what is the minimum variation factor 80-3 indicated by the marking? Neg-07How should the propagation of design element 20 be adapted? Multiple additional variation factors are implemented between these variation factors 80-1, 80-2, and 80-3 for each design element in the corresponding design element 20. This is visualized in data visualization form 604.

[0065] Figure 6B Show Figure 6A Example data visualization format 606. (Compared to...) Figure 5B Compared to the corresponding data visualization form 506, different manipulation methods were obtained for design element 20, which indicates that the corresponding curve grows at a greater rate, i.e., with greater acceleration.

[0066] Figure 7A Examples and Figure 6A The example is similar, where two or more fixed values ​​are added for each variation factor 80. These fixed values ​​are different from each other, but the number of fixed values ​​can vary for different variation factors 80. In this particular example, variation factors 80-1, 80-2, and 80-3 include the same number of fixed values, i.e., three fixed values: 80-1a, 80-1b, 80-1c; 80-2a, 80-2b, 80-2c; 80-3a, 80-3b, 80-3c. These fixed values ​​can be understood as suffixes added to each variation factor, which are labeled in data visualization form 704 as follows: steep , normal and gentle Therefore, three different types of presentation data permutations will be generated, one for... steep Suffix, another type of suffix used for normal Suffixes, while the third type is used for gentle Suffix. As shown in data visualization form 704, it has steep The scaling factor 50 of variation factors 80-1a, 80-2a, and 80-3a will generate the first presentation data permutation, which can manipulate design element 20 in a certain way; normal The scaling factor 50, with variation factors of 80-1b, 80-2b, and 80-3b, will generate a second type of presentation data permutation, which can manipulate design element 20 in another way; gentle Scaling factors of 50, with variation factors of 80-1c, 80-2c, and 80-3c, will generate a third type of presentation data permutation, which can manipulate design element 20 in a third way. These different permutations can be combined with each other and are applicable to different types of computer monitors, GUIs, and other conditions that depend on the prevailing environment surrounding the GUI presentation (e.g., operating conditions, timeliness, latency, static / dynamic methods, etc.).

[0067] Figure 7B Show Figure 7AExample data visualization format 706. (Compared to...) Figure 6B Compared to the corresponding data visualization format 606, a reference is shown. Figure 7A The three different permutations are defined, with one permutation for each design element 20.

[0068] In some examples, a variation factor 80 of the same type described above can also be applied to the initial scaling factor 70. In this case, following the same principle as the variation factor applied to the scaling factor 50, it can optionally have two or more fixed values ​​that are different from each other.

[0069] Similar to scaling factor 50, initial scaling factor 70 and / or variation factor 80 can be automatically determined based on one or more factors discussed in the automatic determination of scaling factor 50. Therefore, customization options can be provided not only for scaling factor 50, but also for the initial scaling factor 70 used to obtain modular scale 30 and for the variation factor 80 applied to scaling factor 50.

[0070] Figure 8 An exemplary computer implementation method 100 for determining presentation data for GUI 10 is shown. The dashed boxes should be understood as optional steps 115, 135, 150, 152, and 154, which may or may not be performed.

[0071] Method 100 includes step 110: obtaining a modular scale 30 for a plurality of design elements 20 of GUI 10, the modular scale 30 defining a corresponding size setting attribute 32 of the design elements 20 with respect to a baseline pixel set 40. Method 100 further includes step 120: determining a scaling factor 50 for the modular scale 30, the scaling factor 50 indicating a factor by which the design elements 20 will be adapted in response to the relationship between the size setting attribute 32 being established and at least one pixel set 42 different from the baseline pixel set 40. Method 100 further includes step 130: applying the scaling factor 50 to the design elements 20 such that the modular scale 30 propagates to reflect the size setting attribute 32 of the design elements 20 with respect to the at least one pixel set 42. Method 100 further includes step 140: determining rendering data based on the scaling factor 50 applied to the design elements 20, including rendering data that the GUI 10 can be rendered on a computer display 62 associated with either the baseline pixel set 40 or a pixel set 42 different from the baseline pixel set 40.

[0072] Method 100 includes an optional step 115, which may be a sub-step of obtaining step 110. Step 115 includes: applying an initial scaling factor 70 to a baseline size setting attribute 32-1 of a baseline design element 20-1 from a plurality of design elements 20, such that a modular scale 30 is obtained as the baseline size setting attribute 32-1 of the baseline design element 20-1 propagates to the remaining design elements. The method includes an optional step 135, which may be introduced after step 130 but before step 140. Step 135 includes: determining one or more variation factors of the scaling factor, which are applied to the variation factors of the scaling factor to cause the modular scale to propagate at a predefined rate. Method 100 includes an optional step 150: rendering a GUI on a computer display 62 of a computing device 60. The presentation step 150 may include one of optional steps 152 and 154, which may include: presenting the GUI 10 as a dynamic design system on the computer display 62 using presentation data, or presenting the GUI 10 as a static design system on the computer display 62 using presentation data.

[0073] Figure 9An exemplary computerized system 200 is illustrated. This computerized system may include computerized units configured to generate presentation data by implementing the computer implementation method 100 discussed herein. System 200 may include multiple units known to those skilled in the art for implementing the functions described herein. System 200 may include one or more computing units capable of including firmware, hardware, and / or executing software instructions to implement the functions described herein. System 200 may include one or more processor devices (also referred to as control units) 230, one or more memories 235, and one or more buses 240. System 200 may include at least one computing device having processor devices 230. System buses 240 may provide interfaces for system components, including but not limited to memories 235 and processor devices 230. Processor devices 230 may include any number of hardware components for performing data or signal processing or for executing computer code stored in memory. For example, processor device 230 may include a general-purpose processor, a special-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), a circuit containing processing components, a distributed processing component group, a distributed computer group configured for processing, or other programmable logic devices, discrete gate or transistor logic, discrete hardware components, or any combination of the above designed to perform the functions described herein. Processor device 230 may also include computer-executable code that controls the operation of the programmable device.

[0074] System bus 240 can be any of several types of bus structures, and can be further interconnected to a memory bus (with or without a memory controller), a peripheral bus, and / or a local bus using any of a variety of different bus architectures. Memory 235 can be one or more devices for storing data and / or computer code used to perform or facilitate the methods described herein. Memory 235 may include database components, object code components, scripting components, or other types of information structures used to support the various activities described herein. Any distributed or local memory device may be utilized in conjunction with the systems and methods described herein. Memory 235 may be communicatively connected to processor device 230 (e.g., via circuitry or any other wired, wireless, or network connection) and may include computer code for performing one or more processes described herein. Memory may include non-volatile memory (e.g., read-only memory (ROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), etc.) and volatile memory (e.g., random access memory (RAM)) or any other medium that can be used to carry or store required program code in the form of machine-executable instructions or data structures and can be accessed by a computer or other machine with a processor device. The Basic Input / Output System (BIOS) may be stored in non-volatile memory and may include basic routines that help transfer information between components within a computer system.

[0075] Storage device 245 can be operatively connected to system 200 via, for example, I / O interfaces (e.g., cards, devices) 250 and I / O ports 255. Storage device 245 can be, but is not limited to, devices such as disk drives, solid-state drives, optical drives, flash memory cards, memory cards, etc. Storage device 245 can also include a cloud-based server implemented using any known cloud computing platform, as described above. Storage device 245 or memory 235 can store an operating system that controls and allocates resources of system 200.

[0076] System 200 can interact with network device 260 via I / O interface 250 or I / O port 255. Through network device 260, system 200 can interact with a network. Through the network, system 200 can logically connect to a remote computer. Through the network, server platform 210 can communicate with client platform 220, as described above. Networks that system 200 can interact with include, but are not limited to, local area networks (LANs), wide area networks (WANs), and other networks.

[0077] See Figure 10A schematic diagram of a (non-transitory) computer-readable (storage) medium 300 is shown according to an exemplary embodiment. The computer-readable medium 300 may be associated with or connected to the system 200 described herein and is capable of storing a computer program product 310. In the disclosed embodiment, the computer-readable medium 300 is a memory card, such as a Universal Serial Bus (USB) card. The USB card 300 includes a housing 330 having an interface such as a connector 340 and a storage chip 320. In the disclosed embodiment, the storage chip 320 is flash memory, i.e., a non-volatile data storage device that can be electrically erased and reprogrammed. The storage chip 320 stores a computer program product 310 programmed with computer program code (instructions) that, when loaded into a processor device, will execute methods, such as referring to… Figure 8 Method 100 is described. The USB card 300 is configured to connect to and be read by a reading device for loading instructions into the processor device. It should be noted that the computer-readable medium can also be other media, such as optical discs, digital video discs, hard disk drives, or other common storage technologies. Computer program code (instructions) can also be downloaded from the computer-readable medium via a wireless interface for loading into the processor device.

[0078] The present invention has been described above primarily with reference to several embodiments. However, those skilled in the art will readily recognize that other embodiments, besides those disclosed above, are also possible within the scope of the invention as defined by the appended claims.

Claims

1. A computer implementation method (100) for determining presentation data for a graphical user interface (GUI), the method comprising: Obtain (110) a modular scale (30) for a plurality of design elements (20) of the GUI (10), the modular scale (30) defining the corresponding size setting attributes (32) of the design elements (20) with respect to the baseline pixel set (40). Determine (120) the scaling factor (50) of the modular scale (30), the scaling factor (50) indicating a factor by which the design element (20) will be adapted in response to the relationship between the size setting attribute (32) being established and at least one pixel set (42) different from the baseline pixel set (40), and wherein the scaling factor (50) determines the positional relationship between the design elements (20); The scaling factor (50) is applied (130) to the design element (20) so that the modular scale (30) is propagated to reflect the size setting attribute (32) of the design element (20) with respect to the at least one pixel set (42); and The rendering data (140) is determined based on the scaling factor (50) applied to the design element (20), wherein the GUI (10) including the rendering data can be rendered on a computer display (62) associated with either the baseline pixel set (40) or a pixel set (42) different from the baseline pixel set (40).

2. The method according to claim 1, wherein, The scaling factor (50) is applied to the design element (20) by multiplying the factor with the corresponding size setting attribute (32) of the design element (20), and the design element (20) is adapted by the factor.

3. The method according to any one of the preceding claims, wherein, The scaling factor (50) is a predetermined value that is between 0.500 and 1.500, more preferably between 0.800 and 1.

200.

4. The method according to any one of the preceding claims, wherein, The positional relationship between the design elements (20) is defined as one or more of the change rate, change direction, and change magnitude.

5. The method according to any one of the preceding claims, wherein, Obtaining (110) modular scale (30) includes: applying (115) an initial scaling factor (70) to the baseline size setting attribute (32-1) of the baseline design element (20-1) from the plurality of design elements (20), such that the modular scale (30) is obtained as the baseline size setting attribute (32-1) of the baseline design element (20-1) propagates to the remaining design elements (20).

6. The method according to any one of the preceding claims further comprises: Determine (135) one or more variation factors (80) of the scaling factor (50), and apply the variation factors (80) of the scaling factor (50) to cause the modular scale (30) to propagate at a predefined rate.

7. The method according to claim 6, wherein, Each variation factor (80) includes two or more fixed values, which are different from each other.

8. The method according to any one of the preceding claims, wherein, The scaling factor (50) is automatically determined based on the type of the GUI (10), the statistics associated with the GUI (10), the type of computer monitor (62) on which the GUI (10) is displayed, personal preferences, and their combination.

9. The method according to any one of the preceding claims, wherein, The design element (20) is one or more of the following: text, icon, image, table, button, form, navigation menu, blank area, animation, column, grid, hover effect, slider, selector, and combinations thereof.

10. The method according to any one of the preceding claims, wherein, The size setting attribute (32) is one or more of the following: width, height, inner margin, outer margin, border, box model control, line height, font type, font size, font style, transformation, scaling, aspect ratio, position, floating, and combinations thereof.

11. The method according to any one of the preceding claims, further comprising: The GUI (10) is presented (152) as a dynamic design system on the computer display (62) using the presentation data.

12. The method according to any one of claims 1 to 10, further comprising: The GUI (10) is presented (154) as a static design system on the computer display (62) using the presentation data.

13. A computerized system (200) comprising: A processor (230) configured to perform the function of the method (100) according to any one of claims 1 to 12.

14. A non-transitory computer-readable storage medium (300) comprising instructions that, when executed by one or more processors (230) of a computerized system (200), cause the processors (230) to perform the functions of the method (100) according to any one of claims 1 to 12.

15. A computer program product comprising computer code for performing the function of the method (100) according to any one of claims 1 to 12.

Images