Method and device for adjusting application interface
By obtaining and adjusting the interface design parameters of the mobile application interface, using color pickers and auxiliary elements to improve the interface experience of color blind users, the problem of unfriendly user experience of mobile application interfaces in the face of color vision disorders is solved, and unified color conversion and beautiful interface display is achieved.
Patent Information
- Application Number
- CN202210847598.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-07-19
- Publication Date
- 2025-08-15
- Estimated Expiration
- 2042-07-19
AI Technical Summary
In the prior art, the mobile application interface is unfriendly to the user experience of color vision users, and the color correction effects of different mobile phone systems are not uniform, resulting in poor user experience and inability to adapt to the growing software development process, and lacks aesthetics.
By obtaining the interface design parameters of the mobile application interface, using the color picker to divide equally, adjust the saturation and brightness of the area color value, and add auxiliary elements such as text, icons and shading to realize color conversion to colors suitable for color blind users.
In the background of the mobile application, directly convert the interface color into a color suitable for color blind users, improve the viewing experience of users with color vision disorders, improve the interface display effect, meet the accessibility design standards, and improve the user experience.
Smart Images

Figure CN115167858B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of artificial intelligence technology, and in particular to a method and device for adjusting an application interface. Background Art
[0002] This section is intended to provide a background or context to the embodiments of the invention that are recited in the claims. No statement herein is admitted to be prior art by virtue of its inclusion in this section.
[0003] Recently, barrier-free design for special groups has been frequently mentioned. Using barrier-free design methods can not only improve the user experience of mobile applications, but also accommodate more users and scenarios.
[0004] Color blindness is a significant demographic within a special group. Color blindness is the inability to distinguish between all or certain colors in the natural spectrum. Poor color discrimination is called color weakness. While those with color weakness can see the same colors as normal people, their ability to distinguish colors is slow or very poor. The distinction between color blindness and color blindness is subtle, making a strict distinction difficult. There are actually several types of color blindness, including protanopia, deuteranopia, blue-yellow color blindness, and total color blindness, with deuteranopia being the most common. For ease of reference, we will refer to color blindness and color weakness as those with color vision impairment.
[0005] At present, mobile phone systems can enable color correction mode to help users with color vision impairments identify content in mobile applications. However, the system's correction effect is not uniform, and different mobile phones have different display effects, resulting in software applications displaying different colors on different mobile phones, making it difficult to provide unified services for different users. At the same time, due to differences in mobile phone performance, it is easy for the application software interface to have problems adapting to users with color vision impairments, resulting in a poor user experience. At the same time, the same application software needs to be switched and adapted for different devices, and undesigned corrections lack aesthetics and are not friendly to users with color vision impairments. In addition, color correction alone is difficult to adapt to the ever-evolving software development process, making it impossible to convert the page colors of normal mobile applications into pages suitable for users with color vision impairments, resulting in a large number of websites or application software being unfriendly to users with color vision impairments. Summary of the Invention
[0006] An embodiment of the present invention provides a method for adjusting an application interface to address the problem in the prior art that mobile application interfaces are not user-friendly for users with color vision impairments, thereby improving the user experience of users with color vision impairments and improving the display effect of the mobile application interface. The method includes:
[0007] Obtaining interface design parameters of a target interface in a mobile application; the interface design parameters include contact relationships between different areas in the interface, and area color values and area labels for different areas; the area labels are used to describe the importance and type of the areas;
[0008] For each region, input the region color value of the region into a color picker to obtain a display window of the color picker for the region color value; divide the display window into equal areas to obtain partitions of different colors; determine the color value of the partition at a preset position as the target color value; and associate the preset position with the region label of the region;
[0009] According to the contact relationship between different regions and the target color values and region labels of different regions, the saturation and brightness of the target color value of each region are adjusted to obtain the adjusted target color value of each region;
[0010] The adjusted target color value of each area is used to replace the area color value of the area; and auxiliary elements are added to different areas according to the area labels of different areas to obtain the adjusted target interface; the auxiliary elements include text, icons and shading.
[0011] The present invention also provides an application interface adjustment device to address the problem in the prior art that mobile application interfaces are not user-friendly for users with color vision impairments, improve the user experience of users with color vision impairments, and improve the display effect of mobile application interfaces. The device includes:
[0012] An interface design parameter acquisition module is used to acquire interface design parameters of a target interface in a mobile application; the interface design parameters include the contact relationship between different areas in the interface, and the area color values and area labels of different areas; the area labels are used to describe the importance and type of the area;
[0013] The target color value determination module is configured to input the regional color value of each region into a color picker to obtain a display window of the color picker for the regional color value; divide the display window into equal areas to obtain different colored partitions; determine the color value of the partition at a preset position as the target color value; and associate the preset position with the regional label of the region;
[0014] A target color value adjustment module is used to adjust the saturation and brightness of the target color value of each region according to the contact relationship between different regions and the target color values and region labels of different regions, so as to obtain the adjusted target color value of each region;
[0015] The target interface generation module is used to replace the regional color value of each area with the adjusted target color value of the area; and add auxiliary elements to different areas according to the regional labels of different areas to obtain the adjusted target interface; the auxiliary elements include text, icons and background patterns.
[0016] An embodiment of the present invention further provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned application interface adjustment method when executing the computer program.
[0017] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the computer program implements the above-mentioned application interface adjustment method.
[0018] An embodiment of the present invention further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the computer program implements the above-mentioned application interface adjustment method.
[0019] In an embodiment of the present invention, interface design parameters of a target interface in a mobile application are obtained; the interface design parameters include the contact relationship between different areas in the interface, and the: area color values and area labels of different areas; the area labels are used to describe the primary and secondary degree of the area and the area type; for each area, the area color value of the area is input into a color picker to obtain a display window of the color picker for the area color value; the display window is divided into equal areas to obtain partitions of different colors; the color value of the partition at a preset position is determined as the target color value; the preset position is associated with the area label of the area; according to the contact relationship between different areas and the target color values and area labels of different areas, the saturation and brightness of the target color value of each area are adjusted to obtain the adjusted target color value of each area; the adjusted target color value of each area is obtained color value, replace the regional color value of the area; and according to the regional labels of different areas, add auxiliary elements to different areas to obtain the adjusted target interface; the auxiliary elements include text, icons and background textures. Compared with the technical solution in the prior art that can only use the mobile phone system to turn on the color correction mode, the colors of different areas in the interface can be directly converted into colors suitable for color-blind users in the background of the mobile application, presenting a display interface without color-blind colors, thereby improving the viewing experience of users with color vision impairment; at the same time, it no longer relies on the mobile phone system itself to perform color conversion on the mobile application interface, which solves the problem that the correction effect of the mobile phone system is not uniform under the prior art, resulting in the inability to convert the interface color of the normal mobile application into the color of the page suitable for users with color vision impairment, which not only improves the user experience of users with color vision impairment, but also improves the display effect of the mobile application interface. BRIEF DESCRIPTION OF THE DRAWINGS
[0020] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work. In the drawings:
[0021] Figure 1 Schematic diagram of a flow chart of a method for adjusting an application interface according to an embodiment of the present invention;
[0022] Figure 2 This is a specific example diagram of a mobile application interface in an embodiment of the present invention;
[0023] Figure 3 This is a specific example diagram of dividing a display window into equal areas in an embodiment of the present invention;
[0024] Figure 4 This is a specific example diagram of a color picker partitioning a display window for regional color values in an embodiment of the present invention;
[0025] Figure 5 This is a specific schematic diagram of adding auxiliary elements to a region in an embodiment of the present invention;
[0026] Figure 6 This is a specific example diagram of a method for adjusting an application interface in an embodiment of the present invention;
[0027] Figure 7 This is a structural example diagram of an application interface adjustment device according to an embodiment of the present invention;
[0028] Figure 8 This is a specific example diagram of a device for adjusting an application interface according to an embodiment of the present invention;
[0029] Figure 9 This is a specific example diagram of a device for adjusting an application interface according to an embodiment of the present invention;
[0030] Figure 10 Schematic diagram of a computer device used for adjusting an application interface in an embodiment of the present invention;
[0031] Figure 11 This is a specific schematic diagram of adding auxiliary elements to a region in an embodiment of the present invention. DETAILED DESCRIPTION
[0032] To make the purpose, technical solutions and advantages of the embodiments of the present invention more clear, the embodiments of the present invention are further described in detail below with reference to the accompanying drawings. Here, the exemplary embodiments of the present invention and their descriptions are used to explain the present invention, but are not intended to limit the present invention.
[0033] The term "and / or" herein simply describes an association relationship, indicating that three relationships can exist. For example, A and / or B can represent the existence of A alone, the simultaneous existence of A and B, and the existence of B alone. In addition, the term "at least one" herein refers to any combination of at least two of any one or more of a plurality of items. For example, "at least one of A, B, and C" can represent any one or more elements selected from the set consisting of A, B, and C.
[0034] In the description of this specification, the terms "include", "including", "have", "contain", etc. are all open terms, which mean including but not limited to. The descriptions with reference to the terms "one embodiment", "a specific embodiment", "some embodiments", "for example", etc. mean that the specific features, structures or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic expressions of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures or characteristics described can be combined in a suitable manner in any one or more embodiments or examples. The order of steps involved in each embodiment is used to schematically illustrate the implementation of the present application, and the order of steps therein is not limited and can be appropriately adjusted as needed.
[0035] The acquisition, storage, use, and processing of data in this application's technical solution comply with relevant national laws and regulations.
[0036] Recently, barrier-free design for special groups has been frequently mentioned. Using barrier-free design methods can not only improve the user experience of mobile applications, but also accommodate more users and scenarios.
[0037] Color blindness is a significant demographic within a special group. Color blindness is the inability to distinguish between all or certain colors in the natural spectrum. Poor color discrimination is called color weakness. While those with color weakness can see the same colors as normal people, their ability to distinguish colors is slow or very poor. The distinction between color blindness and color blindness is subtle, making a strict distinction difficult. There are actually several types of color blindness, including protanopia, deuteranopia, blue-yellow color blindness, and total color blindness, with deuteranopia being the most common. For ease of reference, we will refer to color blindness and color weakness as those with color vision impairment.
[0038] At present, mobile phone systems can enable color correction mode to help users with color vision impairments identify content in mobile applications. However, the system's correction effect is not uniform, and different mobile phones have different display effects, resulting in software applications displaying different colors on different mobile phones, making it difficult to provide unified services for different users. At the same time, due to differences in mobile phone performance, it is easy for the application software interface to have problems adapting to users with color vision impairments, resulting in a poor user experience. At the same time, the same application software needs to be switched and adapted for different devices, and undesigned corrections lack aesthetics and are not friendly to users with color vision impairments. In addition, color correction alone is difficult to adapt to the ever-evolving software development process, making it impossible to convert the page colors of normal mobile applications into pages suitable for users with color vision impairments, resulting in a large number of websites or application software being unfriendly to users with color vision impairments.
[0039] In order to solve the above problems, the embodiment of the present invention provides an application interface adjustment method to solve the problem that the mobile application interface in the prior art is not user-friendly to users with color vision impairment, improve the user experience of users with color vision impairment, and improve the display effect of the mobile application interface. Figure 1 , the method may include:
[0040] Step 101: Obtain interface design parameters of a target interface in a mobile application. The interface design parameters include the contact relationship between different areas in the interface, and the area color values and area labels of different areas. The area labels are used to describe the importance and type of the areas.
[0041] Step 102: For each region, input the region color value of the region into a color picker to obtain a color picker display window for the region color value; divide the display window into equal areas to obtain different color partitions; determine the color value of the partition at a preset position as the target color value; and associate the preset position with the region label of the region;
[0042] Step 103: adjusting the saturation and brightness of the target color value of each region according to the contact relationship between different regions, the target color values of different regions, and the region labels, to obtain an adjusted target color value for each region;
[0043] Step 104: Replace the region color value of each region with the adjusted target color value of the region; and add auxiliary elements to different regions according to the region labels of different regions to obtain the adjusted target interface; the above auxiliary elements include text, icons and background textures.
[0044] In an embodiment of the present invention, interface design parameters of a target interface in a mobile application are obtained; the interface design parameters include the contact relationship between different areas in the interface, and the area color values and area labels of different areas; the area labels are used to describe the primary and secondary degree of the area and the area type; for each area, the area color value of the area is input into a color picker to obtain a display window of the color picker for the area color value; the display window is divided into equal areas to obtain partitions of different colors; the color value of the partition at a preset position is determined as the target color value; the preset position is associated with the area label of the area; according to the contact relationship between different areas and the target color values and area labels of different areas, the saturation and brightness of the target color value of each area are adjusted to obtain the adjusted target color value of each area; the adjusted target color value of each area is obtained. color value, replace the regional color value of the area; and according to the regional labels of different areas, add auxiliary elements to different areas to obtain the adjusted target interface; the above-mentioned auxiliary elements include text, icons and background textures. Compared with the technical solution in the prior art that can only use the mobile phone system to turn on the color correction mode, the colors of different areas in the interface can be directly converted into colors suitable for color-blind users in the background of the mobile application, presenting a display interface without color-blind colors, thereby improving the viewing experience of users with color vision impairment; at the same time, it no longer relies on the mobile phone system itself to perform color conversion on the mobile application interface, which solves the problem that the correction effect of the mobile phone system is not uniform under the prior art, resulting in the inability to convert the interface color of the normal mobile application into the color of the page suitable for users with color vision impairment, which not only improves the user experience of users with color vision impairment, but also improves the display effect of the mobile application interface.
[0045] During the specific implementation, the interface design parameters of the target interface in the mobile application are first obtained; the above interface design parameters include the contact relationship between different areas in the interface, and the area color values and area labels of different areas; the above area labels are used to describe the primary and secondary degree of the area and the area type.
[0046] In the embodiment, the interface design parameters of the target interface in the mobile application can be obtained from the development background of the mobile application, which is used to describe the design scheme of the interface in the mobile application, and the area refers to the area covered by different color blocks, which can be seen in Figure 2 , such as the click button and background frame that may exist in the interface. The above area labels include: main area, slave area, background area and logo area, which can be seen in Figure 2 .
[0047] In an embodiment, the contact relationship includes a region stacking relationship and a region proximity relationship, wherein the region stacking relationship indicates that color blocks in different regions are stacked together, and the region proximity relationship indicates that color blocks in different regions are adjacent to each other.
[0048] In specific implementation, after obtaining the interface design parameters of the target interface in the mobile application, for each area, the regional color value of the area is input into the color picker to obtain a display window of the color picker for the color value of the area; the above display window is divided into equal areas to obtain partitions of different colors; the color value of the partition at the preset position is determined as the target color value; the above preset position is associated with the regional label of the area.
[0049] In one embodiment, the display window is divided into equal areas to obtain partitions of different colors, including:
[0050] The display window is divided into four equal parts horizontally and three equal parts vertically to obtain twelve partitions with different colors; the twelve partitions with different colors include a primary color partition, a first secondary color partition, a second secondary color partition, a neutral color partition and a color transition zone.
[0051] In the above embodiment, the color picking method used can be called the "color picking twelve-part method", which can use a scientific and quantifiable method to obtain the main color, auxiliary color, secondary auxiliary color, transition color and neutral color, and can ensure that the extracted single color has ease of use and maintains coordination in the entire product; compared with relying on subjective feelings to extract colors, it has greater advantages in recognition by users with color vision impairment and saving labor costs.
[0052] Currently, UI design uses the RGB model, but the color pickers in various design software use the HSB model (H Hue, S Saturation, B Lightness). HSB is a theoretical division of color attributes in color science that can be used to explain any color and can be converted to and from RGB. Therefore, the following color explanations are based on HSB.
[0053] In one embodiment, the area labels include: a main area, a secondary area, a background area, and a logo area; the preset positions corresponding to the main area and the logo area are the primary color area or the first secondary color area; the preset positions corresponding to the secondary area and the background area are the second secondary color area, the neutral color area, or the color transition area;
[0054] In the above embodiment, the primary color refers to the base color of the product, which is usually used in areas that need to be highlighted on the page, such as logos and buttons, to convey brand value;
[0055] Secondary colors are auxiliary colors, which mainly emphasize and highlight the primary color and enrich the page details;
[0056] Secondary colors are weaker than auxiliary colors and have a smaller usage area. They are mostly used for page embellishment and decorative images.
[0057] Transition color: the intermediate color used for slow and smooth transition from light to dark, from dark to light, from one color to another;
[0058] Neutral colors: also known as achromatic colors, refer to black, white, and different shades of gray blended from black and white.
[0059] In the embodiment, see Figure 3 and Figure 4 As shown, the area of the color picker can be divided into twelve equal parts. Based on the fact that users with color vision impairment can more quickly identify color areas with higher brightness and saturation, combined with the research results of major Internet competitors, it is concluded that the primary colors and commonly used auxiliary colors are concentrated in area a, the secondary auxiliary colors are concentrated in area a1, b and b1 can be used as transition zone colors, and the colors in area c (c, c1, c2, c3) are used as neutral color picking areas. a2, a3, b2, b3 are colored areas with reduced saturation and brightness. It is not convenient for color blind users to distinguish them, so they are used as avoidance areas with caution.
[0060] In the above embodiment, the color region with higher brightness and saturation refers to a color region with a brightness H value ranging from 0 to 100, where a larger value indicates a brighter color and a higher brightness. Corresponding to the vertical axis in the left color picker, in the present invention, the brightness is divided into four equal parts, and the brightness range of 75-100 can be considered as a higher brightness region.
[0061] The saturation B value ranges from 0 to 100. The larger the value, the brighter the color and the higher the saturation. Corresponding to the horizontal axis in the left color picker, in the present invention, the brightness is divided into three equal parts, and the brightness range of 66-100 can be considered as a higher range.
[0062] For an example, see Figure 5 As shown, the embodiment of the present invention also provides Figure 5 The reference color values of different colors are as follows:
[0063] Main color - red: H346 S100 B86;
[0064] Commonly used auxiliary colors - blue: H214 S100 B94;
[0065] Commonly used auxiliary colors - yellow-orange: H10 S87 B96;
[0066] Commonly used auxiliary colors - orange: H24 S100 B96;
[0067] Secondary color - green: H161 S100 B50.
[0068] In one embodiment, determining the color value of the partition at the preset position as the target color value includes:
[0069] According to the area label of the area, determining a preset position corresponding to the area label;
[0070] Determine the color value range of the partition at the preset position as the target color value range;
[0071] Send a notification message with the target color value range;
[0072] The target color value is determined according to the feedback information of the received notification information; the feedback information carries the target color value selected from the target color value range.
[0073] In the above embodiment, the preset position corresponding to the area label can be determined based on the area label of the area; and then the color value range of the partition of the preset position can be determined as the target color value range; the target color value range indicates that the color values of all colors in the range can be used as target color values; further, a notification message carrying the target color value range can be issued, so that relevant staff can select the color in the target color value range, so that they can select a more beautiful color; thereafter, the target color value can be determined based on the feedback information of the received notification message; the above feedback information carries the target color value selected from the target color value range, so that the selection of the target color value for the area can be realized.
[0074] In specific implementation, after the color value of the partition at the preset position is determined as the target color value, the saturation and brightness of the target color value of each area are adjusted according to the contact relationship between different areas and the target color values and area labels of different areas to obtain the adjusted target color value of each area.
[0075] In an embodiment, the saturation and brightness of the target color value of each region are adjusted according to the contact relationship between different regions and the target color values and region labels of different regions to obtain the adjusted target color value of each region, thereby achieving adjustment of the luminosity of the colors of different regions.
[0076] In the above embodiment, in order to maintain the same color luminosity so that it can be displayed evenly in the same product and not mislead the user in receiving and judging key information due to the excessively high luminosity of a certain color, the saturation and brightness of the target color value of each area can be adjusted to obtain the adjusted target color value of each area.
[0077] For example, in Photoshop, you can overlay a pure black block on each color and select the Hue color mode to determine the color's luminosity. Then, fine-tune the S (saturation) and B (brightness) values in increments of ±5% until all colors have the same luminosity.
[0078] In one embodiment, the above method further includes:
[0079] According to the color accessibility design standard WCAG2.0, the target color value is corrected and the corrected target color value is output;
[0080] According to the contact relationship between different regions and the target color values and region labels of different regions, the saturation and brightness of the target color value of each region are adjusted to obtain the adjusted target color value of each region, including:
[0081] According to the contact relationship between different regions and the target color values and region labels of different regions, the saturation and lightness of the corrected target color value of each region are adjusted to obtain the adjusted target color value of each region.
[0082] In the above embodiment, the target color values are corrected according to the WCAG2.0 color accessibility standard, and the corrected target color values are output to meet the 4.5:1 contrast ratio requirement of the WCAG2.0 color accessibility standard. The color values obtained using this method must be verified against white and black during calibration. Colors are typically used with white backgrounds or white text or black text, so the obtained colors can be verified and tested using relevant auxiliary tools.
[0083] In one embodiment, according to the color accessibility design standard WCAG2.0, the target color value is corrected and the corrected target color value is output, including:
[0084] According to the WCAG2.0 color accessibility standard, the correction standard is determined to be a contrast ratio of 4.5:1;
[0085] Based on the HSB color model, keep the hue of the target color value unchanged on the preset background color, and adjust the lightness and / or saturation of the target color value until the contrast ratio between the adjusted target color value and the preset background color meets 4.5:1;
[0086] The adjusted target color value is output as the calibrated target color value.
[0087] For example, if the contrast ratio is lower than 4.5:1, you can fine-tune S (saturation) and B (brightness) in units of ±5% until the requirements of the color accessibility design standard WCAG2.0 are met.
[0088] In the above-mentioned embodiments, relevant barrier-free construction regulatory documents provide clear requirements for indicators such as contrast. However, the technical field still lacks a systematic method to provide targeted solutions for color discrimination for users with color vision impairments. This invention corrects the target color value according to the WCAG 2.0 color accessibility design standard and outputs the corrected target color value, which helps to achieve target color value correction in accordance with relevant standards.
[0089] During specific implementation, the saturation and brightness of the target color value of each area are adjusted according to the contact relationship between different areas and the target color values and area labels of different areas. After obtaining the adjusted target color value of each area, the area color value of the area is replaced with the adjusted target color value of each area; and auxiliary elements are added to different areas according to the area labels of different areas to obtain the adjusted target interface; the above-mentioned auxiliary elements include text, icons and background textures.
[0090] In the embodiment, auxiliary elements such as text, icons and shading are added to different areas according to the area labels of different areas to obtain an adjusted target interface, which can assist users with color vision impairment in obtaining interface information.
[0091] For example, Figure 5 As shown in the following example, in special scenarios, to ensure smoother use for users with color vision impairment, information should be conveyed using color and other elements rather than relying solely on color. Adding an additional identification signal can further improve the user experience of users with color vision impairment. The added elements can be text, icons, shading, etc. Figure 5 In the switch button, add text (such as ON, OFF) to assist; Figure 11 As shown in the figure, the customer uses shading to help users identify the chart; in addition, as ... Figure 2 As shown, arrows can also be used to represent rises and falls to assist users in identification.
[0092] In specific implementation, the above-mentioned contact relationship includes a regional stacking relationship and a regional proximity relationship;
[0093] An application interface adjustment method provided by an embodiment of the present invention may further include: for each area, taking other areas that are in a contact relationship with the area and are in an area adjacent relationship as adjacent areas of the area;
[0094] When it is determined that the adjusted target color value of the area and the adjusted target color value of the adjacent area are not complementary color values and / or cold-warm color contrast color values, a notification message is issued that the target color values of the area and the adjacent area need to be reset.
[0095] In the embodiment, the monochrome target color value picked up in the above step can meet the usage requirements of a single scene and ensure that users with color vision impairment can distinguish it. However, if it is necessary to use color to distinguish information (different states, different trends, different functions, etc.), then it is possible to determine whether the adjusted target color value of the area and the adjusted target color value of the adjacent area are complementary color values and / or cold and warm color contrast values. The adjusted target color value of the area can be used as the primary color, and the adjusted target color value of the adjacent area can be used as the secondary color to verify different color combinations.
[0096] In one embodiment, the above method may further include:
[0097] Determine whether the adjusted target color value of the region and the adjusted target color value of the adjacent region are complementary color values and / or cold-warm contrasting color values.
[0098] In one embodiment, determining whether the adjusted target color value of the region and the adjusted target color value of the adjacent region are complementary color values may include:
[0099] Complementary colors can be found by selecting colors that are 180 degrees apart on a color wheel (such as a computer color wheel). Complementary colors create strong visual recognition, helping users quickly identify them. Alternatively, complementary colors can be calculated using the HSB mode. The HSB mode calculates complementary colors as follows: When H ≤ 180, the complementary color H' = H + 180; when H > 180, the complementary color H' = H - 180.
[0100] In the above embodiment, when determining whether the adjusted target color value of the region and the adjusted target color value of the adjacent region are cold or warm color contrast values, colors can be psychologically perceived as cold or warm. Red, purple, orange, yellow, and yellow-green are warm colors, while purple, blue-purple, blue, blue-green, and green are cold colors. The extreme cold and warm colors, namely blue and orange, offer the strongest contrast and are therefore preferred. Dark cold colors and light warm colors offer even better results.
[0101] In specific implementation, the method for adjusting an application interface provided by an embodiment of the present invention may further include:
[0102] For each area, other areas that have a contact relationship with the area and are in a regional proximity relationship are regarded as adjacent areas of the area;
[0103] The adjusted target color value of the area and the adjusted target color value of the adjacent area are matched with a preset color value sensitivity list. When the match is successful, an alarm message is issued that the target color values of the area and the adjacent area need to be reset; the above-mentioned color value sensitivity list includes the association relationship between different color values that are difficult for color-blind users to recognize.
[0104] In an embodiment, examples of associations between different color values included in the color value sensitive list that are difficult for color-blind users to identify may be: green with red, grass green with yellow, green with purple, blue with purple, green with brown, blue with gray, green with gray, and green with black, etc.
[0105] For example, red and green should be used with caution. People with red and green color blindness will not be able to distinguish red text on a green background, and vice versa.
[0106] The following is a specific example to illustrate the specific application of the method of the present invention. The embodiment of the present invention can also be applied to the design and development process of mobile application interfaces to provide assistance for the design and development process of mobile application interfaces, as shown below:
[0107] Compared with existing technologies: mobile phone systems can enable color correction mode to help users with color vision impairments identify content in mobile applications. However, the correction effect of the system is not uniform, and different mobile phones have different display effects, resulting in software applications displaying different colors on different mobile phones, making it difficult to provide unified services for different users. At the same time, due to differences in mobile phone performance, it is easy to cause problems in adapting the application software interface to users with color vision impairments, resulting in a bad user experience for users; at the same time, the same application software needs to be switched and adapted for different devices, and undesigned corrections lack aesthetics and are not friendly to users with color vision impairments. In addition, it is difficult to adapt to the ever-evolving software development process through color correction alone, resulting in the inability to convert the page colors of normal mobile applications into pages suitable for users with color vision impairments, resulting in a large number of websites or application software being unfriendly to users with color vision impairments.
[0108] To address the above issues, a visually friendly interface design for users with color vision impairment can be implemented in the background of mobile applications. To address this pain point, the embodiments of the present invention propose a feasible color accessibility method designed for users with color vision impairment. This method avoids unrecognizable designs at the beginning of product design, ensuring the product's aesthetics and user experience.
[0109] The embodiment of the present invention, as Figure 6 As shown, the following steps may be included:
[0110] Step 1: Partition color selection + verification to ensure that the single color value meets the recognition experience of users with color vision impairment;
[0111] The second step is the color contrast method. Based on the appropriate color values obtained in the first step, the color contrast of multiple colors is guaranteed to ensure that the contrast between multiple colors meets the recognition level that users with color vision impairment can recognize.
[0112] The third step: element blessing method, to ensure that the single / multi-color meets the requirements, and to emphasize and focus on key information when used in special scenarios.
[0113] The specific instructions are as follows:
[0114] Step 1: Use the "Twelve-Division Color Picker" to select a color, or place the selected color in a partitioned color picker for reverse verification. If the color meets the recommended usage scenarios for each color zone (primary color zone / common auxiliary color, secondary auxiliary color, transition zone, neutral zone, avoidance zone), you can continue with the following steps. If not, you need to make adjustments. After selecting a color, according to the WCAG verification method, obtain a contrast ratio of at least 4.5:1 with white and black.
[0115] Step 2: Follow the principles of color matching when using multiple colors. Prioritize the use of complementary color contrast and cool and warm color contrast. After matching the colors, it is necessary to maintain the same luminosity among the multiple colors. Then, use the taboo color palette to check and eliminate taboo combinations.
[0116] Step 3: Use text, icons, background textures and other supporting methods in special scenarios to avoid missing key information.
[0117] The systematic solution provided by the present invention uses a three-step approach, and the results obtained can fully meet the needs of users with color vision impairment to distinguish the colors of mobile applications, meeting the concept of barrier-free construction.
[0118] As mentioned above, at this stage, designers usually make subjective color selections, and then carry out a series of color matching and design, which cannot take into account various details, and usability testing often ignores users with color vision impairments. Modifications are made after the product is launched, which wastes time and manpower. In order to solve this problem, the present invention provides a systematic solution: 1) Starting from selecting a single color, a scientific and quantitative method is used to pick up colors and perform verification; 2) When multiple colors are used, a variety of optional methods are provided, and unusable color matching is carried out, and multi-color luminosity verification is performed, and color palettes are avoided to help designers avoid low information recognition caused by unreasonable color matching; 3) Finally, the element blessing method is used to avoid the omission of key information in special scenarios. The use of this invention method can avoid the problem of color vision impairment users being unable to recognize due to unreasonable use of colors.
[0119] Of course, it is understandable that the above detailed process may have other variations, and all relevant variations should fall within the scope of protection of the present invention.
[0120] In an embodiment of the present invention, interface design parameters of a target interface in a mobile application are obtained; the interface design parameters include the contact relationship between different areas in the interface, and the area color values and area labels of different areas; the area labels are used to describe the primary and secondary degree of the area and the area type; for each area, the area color value of the area is input into a color picker to obtain a display window of the color picker for the area color value; the display window is divided into equal areas to obtain partitions of different colors; the color value of the partition at a preset position is determined as the target color value; the preset position is associated with the area label of the area; according to the contact relationship between different areas and the target color values and area labels of different areas, the saturation and brightness of the target color value of each area are adjusted to obtain the adjusted target color value of each area; the adjusted target color value of each area is obtained. color value, replace the regional color value of the area; and according to the regional labels of different areas, add auxiliary elements to different areas to obtain the adjusted target interface; the above-mentioned auxiliary elements include text, icons and background textures. Compared with the technical solution in the prior art that can only use the mobile phone system to turn on the color correction mode, the colors of different areas in the interface can be directly converted into colors suitable for color-blind users in the background of the mobile application, presenting a display interface without color-blind colors, thereby improving the viewing experience of users with color vision impairment; at the same time, it no longer relies on the mobile phone system itself to perform color conversion on the mobile application interface, which solves the problem that the correction effect of the mobile phone system is not uniform under the prior art, resulting in the inability to convert the interface color of the normal mobile application into the color of the page suitable for users with color vision impairment, which not only improves the user experience of users with color vision impairment, but also improves the display effect of the mobile application interface.
[0121] As described above, the embodiments of the present invention can ensure the experience of color-blind users in using the product, while meeting the usage habits of ordinary users, bringing a visual experience that is easier to identify, and achieving the purpose of paying attention to special groups.
[0122] The present invention also provides an application interface adjustment device, as described in the following embodiments. Since the principle of the device to solve the problem is similar to that of the application interface adjustment method, the implementation of the device can refer to the implementation of the application interface adjustment method, and the repeated parts will not be repeated.
[0123] The embodiment of the present invention provides an application interface adjustment device to solve the problem that the mobile application interface in the prior art is not user-friendly to users with color vision impairment, improve the user experience of users with color vision impairment, and improve the display effect of the mobile application interface, such as Figure 7 As shown, the device includes:
[0124] The interface design parameter acquisition module 701 is used to acquire interface design parameters of a target interface in a mobile application. The interface design parameters include the contact relationship between different regions in the interface, and the region color values and region labels of different regions. The region labels are used to describe the importance and type of the regions.
[0125] The target color value determination module 702 is configured to input the region color value of each region into a color picker to obtain a display window of the color picker for the region color value; divide the display window into equal areas to obtain different color regions; determine the color value of the region at a preset position as the target color value; and associate the preset position with the region label of the region;
[0126] The target color value adjustment module 703 is used to adjust the saturation and lightness of the target color value of each region according to the contact relationship between different regions, the target color values of different regions, and the region labels, to obtain the adjusted target color value of each region;
[0127] The target interface generation module 704 is used to replace the regional color value of each area with the adjusted target color value of the area; and add auxiliary elements to different areas according to the area labels of different areas to obtain the adjusted target interface; the above auxiliary elements include text, icons and background textures.
[0128] In one embodiment, the target color value determination module is specifically configured to:
[0129] The display window is divided into four equal parts horizontally and three equal parts vertically to obtain twelve partitions with different colors; the twelve partitions with different colors include a primary color partition, a first secondary color partition, a second secondary color partition, a neutral color partition and a color transition zone.
[0130] In one embodiment, the area labels include: a main area, a secondary area, a background area, and a logo area; the preset positions corresponding to the main area and the logo area are the primary color area or the first secondary color area; the preset positions corresponding to the secondary area and the background area are the second secondary color area, the neutral color area, or the color transition area;
[0131] The target color value determination module is specifically used to:
[0132] According to the area label of the area, determining a preset position corresponding to the area label;
[0133] Determine the color value range of the partition at the preset position as the target color value range;
[0134] Send a notification message with the target color value range;
[0135] The target color value is determined according to the feedback information of the received notification information; the feedback information carries the target color value selected from the target color value range.
[0136] In one embodiment, Figure 8 As shown, it also includes:
[0137] The target color value correction module 801 is used to:
[0138] According to the color accessibility design standard WCAG2.0, the target color value is corrected and the corrected target color value is output;
[0139] The target color value adjustment module is specifically used for:
[0140] According to the contact relationship between different regions and the target color values and region labels of different regions, the saturation and lightness of the corrected target color value of each region are adjusted to obtain the adjusted target color value of each region.
[0141] In one embodiment, the target color value correction module is specifically configured to:
[0142] According to the WCAG2.0 color accessibility standard, the correction standard is determined to be a contrast ratio of 4.5:1;
[0143] Based on the HSB color model, keep the hue of the target color value unchanged on the preset background color, and adjust the lightness and / or saturation of the target color value until the contrast ratio between the adjusted target color value and the preset background color meets 4.5:1;
[0144] The adjusted target color value is output as the calibrated target color value.
[0145] In one embodiment, the contact relationship includes a region stacking relationship and a region proximity relationship;
[0146] The above device, such as Figure 9 As shown, it also includes:
[0147] Color comparison module 901 is used to:
[0148] For each area, other areas that have a contact relationship with the area and are in a regional proximity relationship are regarded as adjacent areas of the area;
[0149] When it is determined that the adjusted target color value of the area and the adjusted target color value of the adjacent area are not complementary color values and / or cold-warm color contrast color values, a notification message is issued that the target color values of the area and the adjacent area need to be reset.
[0150] In one embodiment, it further includes:
[0151] Color matching module for:
[0152] For each area, other areas that have a contact relationship with the area and are in a regional proximity relationship are regarded as adjacent areas of the area;
[0153] The adjusted target color value of the area and the adjusted target color value of the adjacent area are matched with a preset color value sensitivity list. When the match is successful, an alarm message is issued that the target color values of the area and the adjacent area need to be reset; the above-mentioned color value sensitivity list includes the association relationship between different color values that are difficult for color-blind users to recognize.
[0154] In an embodiment of the present invention, interface design parameters of a target interface in a mobile application are obtained; the interface design parameters include the contact relationship between different areas in the interface, and the: area color values and area labels of different areas; the area labels are used to describe the primary and secondary degree of the area and the area type; for each area, the area color value of the area is input into a color picker to obtain a display window of the color picker for the area color value; the display window is divided into equal areas to obtain partitions of different colors; the color value of the partition at a preset position is determined as the target color value; the preset position is associated with the area label of the area; according to the contact relationship between different areas and the target color values and area labels of different areas, the saturation and brightness of the target color value of each area are adjusted to obtain the adjusted target color value of each area; the adjusted target color value of each area is obtained color value, replace the regional color value of the area; and according to the regional labels of different areas, add auxiliary elements to different areas to obtain the adjusted target interface; the auxiliary elements include text, icons and background textures. Compared with the technical solution in the prior art that can only use the mobile phone system to turn on the color correction mode, the colors of different areas in the interface can be directly converted into colors suitable for color-blind users in the background of the mobile application, presenting a display interface without color-blind colors, thereby improving the viewing experience of users with color vision impairment; at the same time, it no longer relies on the mobile phone system itself to perform color conversion on the mobile application interface, which solves the problem that the correction effect of the mobile phone system is not uniform under the prior art, resulting in the inability to convert the interface color of the normal mobile application into the color of the page suitable for users with color vision impairment, which not only improves the user experience of users with color vision impairment, but also improves the display effect of the mobile application interface.
[0155] An embodiment of the present invention provides an embodiment of a computer device for implementing all or part of the content of the above-mentioned application interface adjustment method. The computer device specifically includes the following content:
[0156] A processor, a memory, a communications interface, and a bus; wherein the processor, the memory, and the communications interface communicate with each other via the bus; the communications interface is used to implement information transmission between related devices; the computer device can be a desktop computer, a tablet computer, a mobile terminal, etc., but this embodiment is not limited thereto. In this embodiment, the computer device can be implemented with reference to the embodiment of the method for implementing the adjustment of the application interface and the embodiment of the device for implementing the adjustment of the application interface, the contents of which are incorporated herein and repeated parts are not repeated.
[0157] Figure 10 1 is a schematic block diagram of the system structure of the computer device 1000 according to an embodiment of the present application. Figure 10 As shown, the computer device 1000 may include a central processor 1001 and a memory 1002; the memory 1002 is coupled to the central processor 1001. Figure 10 is exemplary; other types of structures may also be used to supplement or replace this structure to implement telecommunication functions or other functions.
[0158] In one embodiment, the application interface adjustment function may be integrated into the central processing unit 1001. The central processing unit 1001 may be configured to perform the following control:
[0159] Obtaining interface design parameters of a target interface in a mobile application; the interface design parameters include contact relationships between different areas in the interface, and area color values and area labels for different areas; the area labels are used to describe the importance and type of the areas;
[0160] For each region, input the region color value of the region into a color picker to obtain a display window of the color picker for the region color value; divide the display window into equal areas to obtain partitions of different colors; determine the color value of the partition at a preset position as the target color value; and associate the preset position with the region label of the region;
[0161] According to the contact relationship between different regions and the target color values and region labels of different regions, the saturation and brightness of the target color value of each region are adjusted to obtain the adjusted target color value of each region;
[0162] The adjusted target color value of each area is used to replace the area color value of the area; and auxiliary elements are added to different areas according to the area labels of different areas to obtain the adjusted target interface; the auxiliary elements include text, icons and shading.
[0163] In another embodiment, the application interface adjustment device can be configured separately from the central processing unit 1001. For example, the application interface adjustment device can be configured as a chip connected to the central processing unit 1001, and the application interface adjustment function can be realized through the control of the central processing unit.
[0164] like Figure 10 As shown, the computer device 1000 may further include: a communication module 1003, an input unit 1004, an audio processor 1005, a display 1006, and a power supply 1007. It is worth noting that the computer device 1000 does not necessarily have to include Figure 10 In addition, the computer device 1000 may also include all components shown in Figure 10 For components not shown, reference may be made to the prior art.
[0165] like Figure 10 As shown, the central processing unit 1001 is sometimes also referred to as a controller or an operation control unit, and may include a microprocessor or other processor device and / or logic device. The central processing unit 1001 receives inputs and controls the operations of various components of the computer device 1000 .
[0166] Memory 1002 can be, for example, one or more of a cache, flash memory, hard drive, removable media, volatile memory, non-volatile memory, or other suitable devices. It can store the aforementioned failure-related information and a program that executes the relevant information. The CPU 1001 can execute the program stored in memory 1002 to implement information storage or processing.
[0167] Input unit 1004 provides input to CPU 1001. Input unit 1004 may be, for example, a keypad or touch input device. Power supply 1007 is used to provide power to computer device 1000. Display 1006 is used to display objects such as images and text. This display may be, for example, an LCD display, but is not limited thereto.
[0168] The memory 1002 may be a solid-state memory, such as a read-only memory (ROM), random access memory (RAM), or SIM card. Alternatively, it may be a memory that retains information even when power is off, can be selectively erased, and is provided with more data. Examples of such memory are sometimes referred to as EPROMs. The memory 1002 may also be some other type of device. The memory 1002 includes a buffer memory 1021 (sometimes referred to as a buffer). The memory 1002 may include an application / function storage unit 1022 for storing application programs and function programs or processes used by the central processing unit 1001 to execute the operations of the computer device 1000.
[0169] The memory 1002 may also include a data storage unit 1023 for storing data, such as contacts, digital data, pictures, sounds, and / or any other data used by the computer device. The driver storage unit 1024 of the memory 1002 may include various driver programs for the computer device for communication functions and / or for executing other functions of the computer device (such as messaging applications, address book applications, etc.).
[0170] The communication module 1003 is a transmitter / receiver 1003 that sends and receives signals via the antenna 1008. The communication module (transmitter / receiver) 1003 is coupled to the central processor 1001 to provide input signals and receive output signals, which may be the same as the case of a conventional mobile communication terminal.
[0171] Based on different communication technologies, multiple communication modules 1003 can be provided in the same computer device, such as a cellular network module, a Bluetooth module, and / or a wireless local area network module. The communication module (transmitter / receiver) 1003 is also coupled to a speaker 1009 and a microphone 1010 via an audio processor 1005 to provide audio output via the speaker 1009 and receive audio input from the microphone 1010, thereby implementing common telecommunication functions. The audio processor 1005 may include any suitable buffer, decoder, amplifier, etc. Furthermore, the audio processor 1005 is coupled to the central processing unit 1001, enabling local recording via the microphone 1010 and playback of stored audio via the speaker 1009.
[0172] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the computer program implements the above-mentioned application interface adjustment method.
[0173] An embodiment of the present invention further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the computer program implements the above-mentioned application interface adjustment method.
[0174] In an embodiment of the present invention, interface design parameters of a target interface in a mobile application are obtained; the interface design parameters include the contact relationship between different areas in the interface, and the: area color values and area labels of different areas; the area labels are used to describe the primary and secondary degree of the area and the area type; for each area, the area color value of the area is input into a color picker to obtain a display window of the color picker for the area color value; the display window is divided into equal areas to obtain partitions of different colors; the color value of the partition at a preset position is determined as the target color value; the preset position is associated with the area label of the area; according to the contact relationship between different areas and the target color values and area labels of different areas, the saturation and brightness of the target color value of each area are adjusted to obtain the adjusted target color value of each area; the adjusted target color value of each area is obtained color value, replace the regional color value of the area; and according to the regional labels of different areas, add auxiliary elements to different areas to obtain the adjusted target interface; the auxiliary elements include text, icons and background textures. Compared with the technical solution in the prior art that can only use the mobile phone system to turn on the color correction mode, the colors of different areas in the interface can be directly converted into colors suitable for color-blind users in the background of the mobile application, presenting a display interface without color-blind colors, thereby improving the viewing experience of users with color vision impairment; at the same time, it no longer relies on the mobile phone system itself to perform color conversion on the mobile application interface, which solves the problem that the correction effect of the mobile phone system is not uniform under the prior art, resulting in the inability to convert the interface color of the normal mobile application into the color of the page suitable for users with color vision impairment, which not only improves the user experience of users with color vision impairment, but also improves the display effect of the mobile application interface.
[0175] It will be understood by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Thus, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0176] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowcharts and / or block diagrams. Figure 1a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0177] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.
[0178] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.
[0179] The specific embodiments described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.
Claims
1. A method for adjusting an application interface, characterized in that: include: Obtain interface design parameters of the target interface in the mobile application; The interface design parameters include the contact relationship between different areas in the interface, and the area color values and area labels of different areas; the area labels are used to describe the primary and secondary levels of the areas and the area types; For each region, input the region color value of the region into a color picker to obtain a display window of the color picker for the region color value; divide the display window into equal areas to obtain partitions of different colors; determine the color value of the partition at a preset position as the target color value; and associate the preset position with the region label of the region; According to the contact relationship between different regions and the target color values and region labels of different regions, the saturation and brightness of the target color value of each region are adjusted to obtain the adjusted target color value of each region; The adjusted target color value of each area is used to replace the area color value of the area; and auxiliary elements are added to different areas according to the area labels of different areas to obtain the adjusted target interface; The auxiliary elements include text, icons and shading; Dividing the display window into equal areas to obtain zones of different colors includes: dividing the display window into quarters horizontally and thirds vertically to obtain twelve zones of different colors; the twelve zones of different colors include a primary color zone, a first secondary color zone, a second secondary color zone, a neutral color zone, and a color transition zone; The area labels include: a main area, a secondary area, a background area and a logo area; the preset positions corresponding to the main area and the logo area are a primary color partition or a first secondary color partition; the preset positions corresponding to the secondary area and the background area are a second secondary color partition, a neutral color partition or a color transition area; the color value of the partition at the preset position is determined as a target color value, including: determining a preset position corresponding to the area label according to the area label of the area; determining a color value range of the partition at the preset position as a target color value range; issuing a notification message carrying the target color value range; determining the target color value according to feedback information of the received notification message; the feedback information carries a target color value selected from the target color value range.
2. The method according to claim 1, wherein Also includes: According to the color accessibility design standard WCAG2.0, the target color value is corrected and the corrected target color value is output; According to the contact relationship between different regions and the target color values and region labels of different regions, the saturation and brightness of the target color value of each region are adjusted to obtain the adjusted target color value of each region, including: According to the contact relationship between different regions and the target color values and region labels of different regions, the saturation and lightness of the corrected target color value of each region are adjusted to obtain the adjusted target color value of each region.
3. The method according to claim 2, wherein According to the color accessibility design standard WCAG2.0, the target color value is corrected and the corrected target color value is output, including: According to the WCAG2.0 color accessibility standard, the correction standard is determined to be a contrast ratio of 4.5:1; Based on the HSB color model, keep the hue of the target color value unchanged on the preset background color, and adjust the lightness and / or saturation of the target color value until the contrast ratio between the adjusted target color value and the preset background color meets 4.5:1; The adjusted target color value is output as the calibrated target color value.
4. The method according to claim 1, wherein The contact relationship includes a regional stacking relationship and a regional proximity relationship; The method further comprises: For each area, other areas that have a contact relationship with the area and are in a regional proximity relationship are regarded as adjacent areas of the area; When it is determined that the adjusted target color value of the area and the adjusted target color value of the adjacent area are not complementary color values and / or cold-warm color contrast color values, a notification message is issued that the target color values of the area and the adjacent area need to be reset.
5. The method according to claim 1, wherein Also includes: For each area, other areas that have a contact relationship with the area and are in a regional proximity relationship are regarded as adjacent areas of the area; The adjusted target color value of the area and the adjusted target color value of the adjacent area are matched with a preset color value sensitivity list. When the match is successful, an alarm message is issued indicating that the target color values of the area and the adjacent area need to be reset; the color value sensitivity list includes the association relationship between different color values that are difficult for color-blind users to recognize.
6. A device for adjusting an application interface, characterized in that: include: The interface design parameter acquisition module is used to obtain the interface design parameters of the target interface in the mobile application; The interface design parameters include the contact relationship between different areas in the interface, and the area color values and area labels of different areas; the area labels are used to describe the primary and secondary levels of the areas and the area types; The target color value determination module is configured to input the regional color value of each region into a color picker to obtain a display window of the color picker for the regional color value; divide the display window into equal areas to obtain different colored partitions; determine the color value of the partition at a preset position as the target color value; and associate the preset position with the regional label of the region; A target color value adjustment module is used to adjust the saturation and brightness of the target color value of each region according to the contact relationship between different regions and the target color values and region labels of different regions, so as to obtain the adjusted target color value of each region; The target interface generation module is used to replace the region color value of each region with the adjusted target color value of the region; and to add auxiliary elements to different regions according to their region labels to obtain the adjusted target interface; the auxiliary elements include text, icons and shading; a target color value determination module, specifically configured to: divide the display window into four equal parts horizontally and three equal parts vertically to obtain twelve different color zones; the twelve different color zones include a primary color zone, a first secondary color zone, a second secondary color zone, a neutral color zone, and a color transition zone; The area labels include: a main area, a secondary area, a background area and a logo area; the preset positions corresponding to the main area and the logo area are the main color partition or the first secondary color partition; the preset positions corresponding to the secondary area and the background area are the second secondary color partition, the neutral color partition or the color transition area; the target color value determination module is specifically used to: determine the preset position corresponding to the area label according to the area label of the area; determine the color value range of the partition at the preset position as the target color value range; issue a notification message carrying the target color value range; determine the target color value according to the feedback information of the received notification message; the feedback information carries the target color value selected from the target color value range.
7. The device according to claim 6, characterized in that Also includes: Target color value correction module, used for: According to the color accessibility design standard WCAG2.0, the target color value is corrected and the corrected target color value is output; The target color value adjustment module is specifically used for: According to the contact relationship between different regions and the target color values and region labels of different regions, the saturation and lightness of the corrected target color value of each region are adjusted to obtain the adjusted target color value of each region.
8. The device according to claim 7, wherein The target color value correction module is specifically used for: According to the WCAG2.0 color accessibility standard, the correction standard is determined to be a contrast ratio of 4.5:1; Based on the HSB color model, keep the hue of the target color value unchanged on the preset background color, and adjust the lightness and / or saturation of the target color value until the contrast ratio between the adjusted target color value and the preset background color meets 4.5:1; The adjusted target color value is output as the calibrated target color value.
9. The device according to claim 6, wherein The contact relationship includes a regional stacking relationship and a regional proximity relationship; The device further comprises: Color matching module for: For each area, other areas that have a contact relationship with the area and are in a regional proximity relationship are regarded as adjacent areas of the area; When it is determined that the adjusted target color value of the area and the adjusted target color value of the adjacent area are not complementary color values and / or cold-warm color contrast color values, a notification message is issued that the target color values of the area and the adjacent area need to be reset.
10. The device according to claim 6, wherein Also includes: Color matching module for: For each area, other areas that have a contact relationship with the area and are in a regional proximity relationship are regarded as adjacent areas of the area; The adjusted target color value of the area and the adjusted target color value of the adjacent area are matched with a preset color value sensitivity list. When the match is successful, an alarm message is issued indicating that the target color values of the area and the adjacent area need to be reset; the color value sensitivity list includes the association relationship between different color values that are difficult for color-blind users to recognize.
11. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the method according to any one of claims 1 to 5 is implemented.
12. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.
13. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.
Citation Information
Patent Citations
Interface processing method and device for application program
CN113760418A
Color correction in computing systems for color vision deficiency
US11302287B1