Color optimization method for vehicle-mounted interface touch button

Abstract

The invention discloses a color optimization method for a touch button of a vehicle-mounted interface. The method comprises the following specific steps: step 1, selecting a bottom background color of the vehicle-mounted interface and a character color of the touch button; step 2, according to the two color contrast relationships, respectively screening out color intersection sets capable of simultaneously meeting the two color contrast relationships in the PCCS system, and taking the color intersection sets as color samples of the touch button; the contrast relationship of the two colors is as follows: the ratio of the character color to the button color is 4.5: 1, and the ratio of the button color to the bottom background color is 3: 1; 3, dividing the vehicle-mounted interface into a plurality of visual areas, and putting texts in the centers of the areas; and 4, carrying out pairwise pairing combination (co, cp) on the color samples of the touch button, and carrying out an orthogonal experiment after o is not equal to p to obtain two colors with the shortest search time. The method has the characteristics that the matching relationship among the color, the text and the background color of the touch button is quickly screened and determined based on a specific color system, and the recognition degree and the image advantage of a brand to which the touch button belongs are enhanced.

Description

Technical Field

[0001] The present invention relates to the technical field of automobile styling, and more specifically, to a method for optimizing the color of a touch button on a vehicle interface. Background Art

[0002] WCAG AA (Web Content Accessibility Guidelines) is a guideline for web content accessibility. It is an industry-recognized guiding standard that can meet the needs of international individuals, organizations, and governments to provide a single shared standard for web content accessibility. The guideline includes real-time live broadcast, UI interaction design requirements, etc.

[0003] The PCCS (Practical Color Coordinate System) color system is a color organization system developed by the Japanese Color Research Institute. It summarizes colors into 12 tones, a total of 144 main colors. From left to right, the saturation increases, and from bottom to top, the lightness increases. It forms vivid tones (v), bright tones (b), strong tones (s), dark tones (dp), light tones (lt), soft tones (sf), turbid tones (d), dark tones (dk), light tones (p), light tones (Itg), gray tones (g), and dark gray tones (dkg). Summary of the invention

[0004] The purpose of the present invention is to design and develop a color optimization method for touch buttons on a vehicle interface, determine the optimal touch button color based on a visual search experiment, and improve recognition efficiency.

[0005] The technical solution provided by the present invention is:

[0006] A method for optimizing the color of a touch button on a vehicle interface comprises the following steps:

[0007] Step 1: Select the underlying background color of the vehicle interface and the text color of the touch buttons;

[0008] Step 2: Screen the colors in the PCCS system according to the two color contrast relationships, and obtain the intersection of colors that simultaneously satisfy the two color contrast relationships as the color sample of the touch button;

[0009] The contrast ratio between the two colors is:

[0010] Text color: button color = 4.5:1, button color: underlying background color = 3:1;

[0011] Step 3: Divide the vehicle interface into multiple visual areas, and place text in the center of the multiple visual areas;

[0012] Step 4: Pair the color samples of the touch buttons in pairs (c o ,c p ), after o≠p, an orthogonal experiment is conducted to obtain the two colors with the shortest search time;

[0013] Among them, c o is the target color, then c p To interfere with the color.

[0014] Preferably, the bottom layer background color is black.

[0015] Preferably, the text color is white.

[0016] Preferably, the step 2 specifically includes:

[0017] Step 1: Screen the colors in the PCCS system according to the two color contrast relationships to obtain the first button color set A that satisfies the text color contrast relationship. 1 ,a 2 ,a 3 ,…,a n} and the second button color set B that satisfies the background color contrast relationship = {b 1 ,b 2 ,b 3 ,…,b m};

[0018] Where n is the number of colors that satisfy the text contrast relationship, and m is the number of colors that satisfy the background color contrast relationship;

[0019] Step 2: The third button color set A is formed by sorting the first button color set and the second button color set in ascending order according to the contrast value, and then using the 10 colors in the middle of the set to form the third button color set A. 1 ={a i ,a i+1 ,a i+2 ,…a i+9} and the fourth button color set B 1 = {b l ,b l+1 ,b l+2 ,…,b l+9};

[0020] Among them, A 1 ∈A,B 1 ∈B;

[0021] Step 3: Taking the intersection of the third button color set and the fourth button color set as the color sample of the touch button.

[0022] Preferably, the step three further comprises:

[0023] Eliminate the visual areas at the four corners and center of the vehicle interface.

[0024] Preferably, the orthogonal experiment satisfies:

[0025]

[0026] Where n i is the total number of people participating in the experiment, y ji1 is the experimental data of the i-th experimenter under the j-th color scheme corresponding to level 1, y ji2 is the experimental data of the i-th experimenter corresponding to level 2 under the j-th color scheme, is the average experimental data of level 1 under the j-th color scheme, is the average experimental data of level 2 under the jth color scheme, R j is the range of different levels under the j-th color scheme.

[0027] Preferably, obtaining the two colors with the shortest search time in step 4 specifically includes:

[0028] Step Ⅰ: Connect the monitor and start debugging the color scheme and button text content of the touch button color search experiment based on the screen display status;

[0029] Step II: Run the PsychoPy main program, and the screen will show the steps of the color search experiment by touching the button;

[0030] Step III: Position the display at the center of the screen for 500ms, showing the standard fixed position of the touch button;

[0031] Step IV: present the text of the touch button to be searched in the center of the screen for 1000ms, and then confirm the text information;

[0032] Step V, switching the screen content to the color scheme of the touch button, searching for the confirmed text information from the color scheme of the touch button, and completing the color confirmation of the touch button;

[0033] Step VI: After the screen is off for 500ms, repeat steps III, IV, and V in sequence, and conduct a color search experiment of the touch button for each random text that appears;

[0034] Step VII: After obtaining the search time of all colors, determine the two colors with the shortest search time.

[0035] Preferably, the resolution of the screen is 1680*1050 and the refresh rate is 60.454 (Hz).

[0036] Preferably, the color search experiment of the touch button selects a 50% gray tone space of 1.5m*1.5m*1.5m.

[0037] The beneficial effects of the present invention are:

[0038] A color optimization method for touch buttons on a vehicle-mounted interface designed and developed by the present invention is based on a visual search experiment. The visual recognition efficiency of the colors of touch buttons with different functions in the vehicle-mounted interface is obtained by calculation. Based on a specific color system, the method can quickly screen and establish the matching relationship between the color, text and background color of the touch button, thereby enhancing the recognition of the brand to which the touch button belongs and improving the brand image advantage. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 The figure is a flow chart of the method for optimizing the color of the touch buttons on the vehicle interface according to the present invention.

[0040] Figure 2 It is a structural schematic diagram of the relationship between the two color contrasts of the present invention.

[0041] Figure 3 Schematic diagram of color samples of a touch button in the embodiment of the present invention.

[0042] Figure 4 A schematic diagram of the areas divided by the color visual search experiment sample of the button color in the embodiment of the present invention.

[0043] Figure 5 Schematic diagram of the color visual search experiment flow of button color in the embodiment of the present invention.

[0044] Figure 6 is the color pairing combination result H of level 1 in the embodiment of the present invention. 1 -1 Schematic diagram of application in vehicle interface.

[0045] Figure 7 is the color pairing combination result H of level 1 in the embodiment of the present invention. 1 -2 Schematic diagram of application in vehicle interface. DETAILED DESCRIPTION

[0046] The present invention is further described in detail below so that those skilled in the art can implement it according to the description.

[0047] The present invention provides a method for optimizing the color of a touch button on a vehicle interface, comprising the following steps:

[0048] Step 1: extract the values ​​of the colors included in the PCCS color system one by one, convert them into RGB colors for numerical marking, and select the underlying background color of the vehicle interface and the text color of the touch button as constants;

[0049] Step 2: The color of the touch buttons on the car interface needs to consider two contrast relationships:

[0050] (1) The contrast between the button color and the underlying background color of the vehicle interface;

[0051] (2) Comparison between the button color and the color of the text it carries;

[0052] Therefore, based on the WCAG AA principle regarding the interface color contrast requirements, the contrast between the text color and the button color must at least meet a 4.5:1 contrast ratio; and the morphological elements contained in the interface, such as button graphics and user interface components, are all non-text materials. The color contrast between these non-text materials (i.e., the button color and the underlying background color) must at least meet a 3:1 contrast ratio. According to the above two color contrast ratios, the colors in the PCCS system are screened respectively to obtain the intersection of colors that meet both color contrast ratios as the color samples of the touch button, including:

[0053] Step 1: Screen the colors in the PCCS system according to the two color contrast relationships to obtain the first button color set A that satisfies the text color contrast relationship. 1 ,a 2 ,a 3 ,…,a n} and the second button color set B that satisfies the background color contrast relationship = {b 1 ,b 2 ,b 3 ,…,b m};

[0054] Where n is the number of colors that satisfy the text contrast relationship, and m is the number of colors that satisfy the background color contrast relationship.

[0055] Step 2: Sort the first button color set and the second button color set according to the contrast value from small to large, and then use the 10 colors in the middle of the set to form the third button color set A. 1 ={a i ,a i+1 ,a i+2 ,…a i+9} and the fourth button color set B 1 = {b l ,b l+1 ,b l+2 ,…,b l+9};

[0056] Among them, A 1 ∈A,B 1 ∈B;

[0057] Step 3: Taking the intersection of the third button color set and the fourth button color set as the color sample of the touch button.

[0058] Step 3: Divide the vehicle interface into multiple visual areas, and place text in the center of the multiple visual areas;

[0059] Wherein, the visual areas at the four corners and the center of the vehicle-mounted interface are eliminated;

[0060] Step 4: Pair the color samples of the touch buttons in pairs (c o ,c p ), after o≠p, an orthogonal experiment is conducted to obtain the two colors with the shortest search time;

[0061] Wherein, the orthogonal experiment satisfies:

[0062]

[0063] Where n i is the total number of people participating in the experiment, y ji1 is the experimental data of the i-th experimenter under the j-th color scheme corresponding to level 1, y ji2 is the experimental data of the i-th experimenter corresponding to level 2 under the j-th color scheme, is the average experimental data of level 1 under the j-th color scheme, is the average experimental data of level 2 under the jth color scheme, R j is the range of different levels under the j-th color scheme.

[0064] The step 4 of obtaining the two colors with the shortest search time specifically includes:

[0065] Step Ⅰ: Connect a monitor with a screen resolution of 1680*1050 and a refresh rate of 60.454 (Hz). Based on the screen display status, start debugging the color scheme and button text content of the touch button color search experiment;

[0066] Step II: Run the PsychoPy (2022.2.5 version) main program, and the screen will show the color search experiment steps for touching the button;

[0067] Step III: Position the display at the center of the screen for 500ms, showing the standard fixed position of the touch button;

[0068] Step IV: present the text of the touch button to be searched in the center of the screen for 1000ms, and then confirm the text information;

[0069] Step V, switching the screen content to the color scheme of the touch button, searching for the confirmed text information from the color scheme of the touch button, and completing the color confirmation of the touch button;

[0070] Step VI: After the screen is off for 500ms, repeat steps III, IV, and V in sequence, and conduct a color search experiment of the touch button for each random text that appears;

[0071] Step VII: After obtaining the search time of all colors, determine the two colors with the shortest search time.

[0072] Example

[0073] Step 1: Figure 1 As shown, the colors included in the PCCS color system are numerically extracted one by one, converted into RGB colors for numerical marking, and the black #000000 (Bk) with the lowest brightness is selected as the bottom background color of the touch button, and the white #FFFFFF (W) with the highest brightness is selected as the text color of the touch button.

[0074] Step 2: Figure 2 As shown in the figure, 144 colors in 12 tones in the PCCS system are set as the colors of the touch buttons of the interface, and the contrast between these button colors and the underlying background color (Bk) is calculated respectively. There are 66 colors that meet the 3:1 color contrast principle, that is, the first button color set A = {a 1 ,a 2 ,a 3 ,…,a 66}; Then, the contrast between the touch button color and the text color on its surface is calculated. There are 104 colors that meet the color contrast principle of 4.5:1, that is, the second button color set B = {b 1 ,b 2 ,b 3 ,…,b 104}.

[0075] The calculation is carried out according to the WCAG AA standard. The 66 colors that meet the background color contrast requirements are sorted from small to large according to the contrast value. The 10 colors with the ranking positions from 29th to 38th are selected and recorded as A. 1 ={a 29 ,a 30 ,a 31 ,…a 38};

[0076] Similarly, the 104 colors that meet the text color contrast are also sorted from small to large in contrast value, and the 10 colors with the sorting positions from 48th to 57th are selected and recorded as B 1 = {b 48 ,b 49 ,b 50 ,…,b 57}, for set A 1 With set B 1 Make A 1 ∩B 1 Calculate and get 7 overlapping colors, denoted as C = {c 1 …c 7}, and use it as the color sample of the touch button, such as Figure 3 shown.

[0077] Step 3: Figure 4 As shown, the in-vehicle interface is divided into 25 visual areas, and the four corners and the middle area where the line of sight is easily concentrated are eliminated, forming a total of 20 areas. In the center of these 20 areas, text containing touch buttons commonly used in the in-vehicle interface is placed.

[0078] Step 4: Pair the color samples of the touch buttons in pairs (c o ,c p ),o≠p, and o,p∈[1,7], where c o is the target color, c p The two are target colors and interference colors, forming There are 42 kinds of arrangement methods, corresponding to 42 kinds of touch button colors (button colors), and the touch buttons with the same two colors are marked in the way of "target color-interference color" as level 1 and level 2 of the pairing combination of the touch button colors, and finally 21 color pairing combination results with two levels are obtained, which are recorded as H 1 -1,H 1 -2,H 2 -1,H 2 -2…H 21 -1, H 21 -2. According to the orthogonal experimental design method, using L 24 (2 21 ) orthogonal matrix, with 21 factors including level 1 and level 2 (H 1 , H 2 , …H 21) will correspond to 24 experimental schemes, set touch button color schemes that combine target colors with interference colors in pairs in 20 visual search areas, remove touch button color combinations that repeat target colors and interference colors, and form a visual search experimental scheme of touch button colors with 24 rows and 21 columns.

[0079] In the orthogonal table experiment, the range calculation formula is used to calculate the two reference levels respectively:

[0080]

[0081] In the formula, represents the 21 test sample color schemes arranged according to the orthogonal table, n i is the total number of people participating in the experiment, and n i =50,y ji1 is the experimental data of the i-th experimenter under the j-th color scheme corresponding to level 1, y ji2 is the experimental data of the i-th experimenter corresponding to level 2 under the j-th color scheme, is the average experimental data of level 1 under the j-th color scheme, is the average experimental data of level 2 under the jth color scheme, R j is the range of different levels under the jth color scheme, and j = 1, 2, …, 21.

[0082] like Figure 5 As shown in the figure, during the experiment, a 50% gray tone space of 1.5m*1.5m*1.5m was selected to exclude other color interferences and conduct a color visual search experiment of the touch button. The specific experimental operation steps are as follows:

[0083] (1) Connect a monitor with a screen resolution of 1680*1050 and a refresh rate of 60.454 (Hz), and start debugging the color scheme and button text content of the touch button color search experiment based on the screen display status;

[0084] (2) Run the PsychoPy (version 2022.2.5) main program, and the screen will show the color search experiment steps for touching buttons;

[0085] (3) Positioning display is performed in the center of the screen for 500 ms, showing the standard fixed position of the touch button;

[0086] (4) Presenting the text of the touch button to be searched in the center of the screen for 1000 ms, and then confirming the text information;

[0087] (5) Figure 6 , Figure 7 As shown, Figure 6The light-medium button is set as the target color, and the dark-colored button is defined as the interference color. Figure 7 The light button and the dark button in Figure 6 The settings of the dark and light buttons are opposite, the screen content is switched to the color scheme of the touch button, and the text information confirmed in step (4) is searched from the color scheme of the button to complete the color confirmation of the touch button;

[0088] (6) After the screen is off for 500 ms, repeat steps (3), (4), and (5) in sequence, and conduct a color search experiment of the touch button for each random text that appears. There are 21 button color schemes in total, and a total of 24 sets (times) of experiments are required;

[0089] (7) Open the information collection library of the PsychoPy main program, identify the validity of the experimental data presented in the information collection library, examine the specific usage time of each step in the experiment, and complete the preliminary organization of the data for subsequent analysis and calculation.

[0090] The corresponding range results obtained by calculating the two reference levels are shown in Table 1, where the larger the range value, the greater the influence of the interference color on the target color. Thus, the most significant pairing result of the target color and the interference color is obtained.

[0091] Table 1 Mean and range results of orthogonal experiment level 1 and level 2

[0092]

[0093]

[0094]

[0095] The data obtained from the color visual search experiment of touch buttons were imported into the SPSS20.0 calculation program, and the K-Means average algorithm was used to complete the cluster analysis of 21 touch button color combinations. The results showed that the color schemes of touch buttons can be divided into six groups of touch button color combinations containing a single target color and an interference color. Among them, the touch button color samples with shorter visual search time and ranked in the top five are: dp12-s24, s16-g14, g14-dk8, dp12-g14, s24-dp12, while the touch button color samples with longer visual search time and ranked in the top three are: dp12-g24, g24-s16, s24-dp4.

[0096] A unified comparison was made on the touch button color samples with shorter and longer visual search times, and it was determined that the colors of the touch buttons with the shortest visual search time were g14 and dk8, indicating that among the 7 touch button color samples, g14 and dk8 were easier to identify, and their visual search superiority was more prominent. The two colors are the color optimization results for the touch buttons of the vehicle interface.

[0097] A color optimization method for touch buttons on a vehicle-mounted interface designed and developed by the present invention is based on a visual search experiment. The visual recognition efficiency of the colors of touch buttons with different functions in the vehicle-mounted interface is obtained by calculation. Based on a specific color system, the method can quickly screen and establish the matching relationship between the color, text and background color of the touch button, thereby enhancing the recognition of the brand to which the touch button belongs and improving the brand image advantage.

[0098] Although the embodiments of the present invention have been disclosed as above, they are not limited to the applications listed in the specification and the implementation modes. They can be fully applied to various fields suitable for the present invention. For those familiar with the art, additional modifications can be easily implemented. Therefore, without departing from the general concept defined by the claims and the scope of equivalents, the present invention is not limited to the specific details and the embodiments shown and described herein.

Claims

1. A method for optimizing the color of a touch button on a vehicle interface, characterized in that: The steps include: Step 1: Select the underlying background color of the vehicle interface and the text color of the touch buttons; Step 2: Screen the colors in the PCCS system according to the two color contrast relationships, and obtain the intersection of colors that simultaneously satisfy the two color contrast relationships as the color sample of the touch button; The contrast ratio between the two colors is: Text color: button color = 4.5:1, button color: underlying background color = 3:1; Step 3: Divide the vehicle interface into multiple visual areas, and place text in the center of the multiple visual areas; Step 4: Pair the color samples of the touch buttons in pairs (c o ,c p ), after o≠p, an orthogonal experiment is conducted to obtain the two colors with the shortest search time; Among them, c o is the target color, then c p To interfere with the color.

2. The method for color optimization of a touch button on a vehicle interface as claimed in claim 1, characterized in that: The bottom layer background color is black.

3. The method for optimizing the color of a touch button on a vehicle interface as claimed in claim 2, characterized in that: The text color is white.

4. The method for color optimization of a touch button on a vehicle interface as claimed in claim 1, characterized in that: The step 2 specifically includes: Step 1: Screen the colors in the PCCS system according to the two color contrast relationships to obtain the first button color set A={a1, a2, a3, …, a n } and the second button color set B that satisfies the background color contrast relationship = {b1, b2, b3, ..., b m }; Where n is the number of colors that satisfy the text contrast relationship, and m is the number of colors that satisfy the background color contrast relationship; Step 2: sort the first button color set and the second button color set according to the contrast value from small to large, and then use the 10 colors in the middle of the set to form a third button color set A1 = {a i , a i+1 , a i+2 , …a i+9 } and the fourth button color set B1 = {b l ,b l+1 ,b l+2 ,…,b l+9 }; Among them, A1∈A, B1∈B; Step 3: Taking the intersection of the third button color set and the fourth button color set as the color sample of the touch button.

5. The method for color optimization of a touch button on a vehicle interface as claimed in claim 4, characterized in that: The step three also includes: Eliminate the visual areas at the four corners and center of the vehicle interface.

6. The method for optimizing the color of a touch button on a vehicle interface as claimed in claim 5, characterized in that: The orthogonal experiment satisfies: Where n i is the total number of people participating in the experiment, y ji1 is the experimental data of the i-th experimenter under the j-th color scheme corresponding to level 1, y ji2 is the experimental data of the i-th experimenter corresponding to level 2 under the j-th color scheme, is the average experimental data of level 1 under the j-th color scheme, is the average experimental data of level 2 under the jth color scheme, R j is the range of different levels under the j-th color scheme.

7. The method for optimizing the color of a touch button on a vehicle interface as claimed in claim 6, characterized in that: The step 4 of obtaining the two colors with the shortest search time specifically includes: Step Ⅰ: Connect the monitor and start debugging the color scheme and button text content of the touch button color search experiment based on the screen display status; Step II: Run the PsychoPy main program, and the screen will show the steps of the color search experiment by touching the button; Step III: Position the display at the center of the screen for 500ms, showing the standard fixed position of the touch button; Step IV: present the text of the touch button to be searched in the center of the screen for 1000ms, and then confirm the text information; Step V, switching the screen content to the color scheme of the touch button, searching for the confirmed text information from the color scheme of the touch button, and completing the color confirmation of the touch button; Step VI: After the screen is off for 500ms, repeat steps III, IV, and V in sequence, and conduct a color search experiment of the touch button for each random text that appears; Step VII: After obtaining the search time of all colors, determine the two colors with the shortest search time.

8. The method for optimizing the color of a touch button on a vehicle interface as claimed in claim 7, characterized in that: The resolution of the screen is 1680*1050 and the refresh rate is 60.454 (Hz).

9. The method for optimizing the color of a touch button on a vehicle interface as claimed in claim 8, characterized in that: The touch button color search experiment selects a 50% gray tone space of 1.5m*1.5m*1.5m.

Images