How to Build an Automotive HMI: Design Specifications (Part 1)
Introduction
The automotive HMI (Human-machine-interface) industry is still a blue ocean. Many designers dare not enter this new industry. They think it is difficult and the threshold is high. This article will take you into the industry first and explain some basic knowledge of automotive HMI. I will add many actual design cases to the content of design specifications.
Let's give you a preventive shot first: (specifications are used to break, and this article is only for reference)
1. Text specification
Text is an important element in UI interface design. The use of text is the time to test the basic skills of designers. Text will directly affect the user's experience in the process of using the product. The use of text starts from these dimensions: font selection, font size, color, font weight and line height.
1. Font selection
I want to be a conscientious blogger, so that you can avoid the infringement problem.
When designing the HMI, you need to choose what font HMI needs to use: English, numbers or multi-national languages.
If you are in a consulting company, the client will assign you a font package and insert a small episode (workplace experience): after the client selects the font, if the font is a paid font, you must first confirm with the client whether they have obtained the use license to avoid subsequent litigation disputes).
- The company has defined the font (hired a professional font designer to design a set);
- Open source font is recommended (English / Number: Roboto). If there are overseas projects, Noto sans font is recommended for languages not covered by Roboto. Noto sans is derived from metrics similar to Roboto and aims to achieve visually harmonious internationalization.
Some people here will definitely ask why you can't use Apple fonts? Isn't it a free font?
Let's popularize it: first of all, the automotive HMI system belongs to commercial use and is used without permission, which is infringement. The app published on the app store can be used for free, because it is used under the apple ecosystem, so it is not infringement.
2. Font size
2.1 Font size
The font size of automobile HMI should also follow the rules. The font size must be much larger than that of mobile terminal and Web terminal, in order to ensure the scanning of text information. Our project combines: Baidu Apollo central control vision basic research project, setting clear text parameters, and Google Android automotive OS research. The following is the text specification (the red area is the difference between them):
When we do the project, the specified font size is maintained at a multiple of 4PX (refer to Google specification), which helps to maintain consistency and visual hierarchy.
2.2 Notes on using words
The font size should be controlled at 20px, which should be used with caution. It is generally used on the text of small label auxiliary class, and the minimum text font size is 24px.
The minimum font size should be controlled at 20px and should be used with caution. It is usually used for the text of auxiliary text. The minimum body font size is 24px.
- The reuse of text style is a great thing to improve the work efficiency for both designers and coders;
- For interface design, there are rules to follow to avoid reducing the overall sense of harmony.
3. Font color rules
- The contrast between the text and the background color should follow the WCAG standard, and accessibility should be taken into account. Therefore, the contrast should be maintained at 4.5:1 – 7:1 to ensure that the text is clear and easy to read;
- Focus on the most important areas;
- Convey a sense of visual hierarchy between text elements.
4. Font weight
Word weight refers to the thickness style of a text. The font weight are shown below:
Explanation of the actual case:
Be careful to use medium font size and try not to use the bold font, which will make the page feel very different, the transition is unnatural, and there is no sense of delicacy and lightness.
Therefore, when formulating the font specification, try to remove the bold font weight. If you want to distinguish it from the following information by bold font, please select the medium font weight (it is determined according to the actual project requirements, and my specification is only for your reference).
5. Font line height
Why add this paragraph, because this problem has been asked by my friends, and I solved it at one time. The text module needs to increase the safety distance, which is also explained in detail below.
If the development is carried out according to this, the developer needs to pay attention to the actual difference between the image and the text in the CSS property. This kind of design with inconsistent heights will directly lead to more cumbersome development and layout process.
The final conclusion: communicate with coder according to the line height of the text.
Popularize the small knowledge points: the line height of automotive HMI paragraphs is generally 140% - 180% of the font size, providing a comfortable reading environment for users (round to integer). Here are some professional knowledge: in the process of font design, font designers generally reserve a safe distance for fonts to make the font display more stable.
When designing, we set the font size to 30px, but the space of the actual font needs to include the safe distance between the upper and lower parts. Finally, the actual height becomes 42px (font: San Francisco) .the line heights of different fonts is different, and the line height of Ant Design's font size 30 is 38px (see the calculation method in the figure for details).
2. Color specification
1. Usage scenario
There are many uncertain factors when driving a car outdoors. The interference of light intensity is particularly important. The lighting will vary greatly according to the time of the day, the weather, the hue of windows and so on. When used in the real world, the color is not always the same as that seen on the computer at designing time.
Consider how color brightness affects driving conditions and how low contrast colors are washed away in direct sunlight. Always preview your app in multiple lighting conditions to see how colors are displayed. If necessary, make adjustments to provide the best viewing experience in most use cases.
In the beginning, most of the car manufacturers’ systems prefer dark backgrounds. The two representative systems are Google’s Android Auto system and Apple’s Carplay system. I also used dark colors at the beginning of my project.
2. Combination in color
The color specification of an automotive HMI system includes brand color, semantic color and neutral color.
1) Brand color
Also known as "accent color", usually an HMI system has only one brand color, which is also a color with high frequency. The general use scenarios of accent color are: tab switching, ON state of a button, motion of notes in music playing, etc.
3. How to make HMI color specification?
Avoid having the same color scheme for interactive and non-interactive elements (if interactive and non-interactive elements have the same color, it can be hard to know where to click).
Maintain color consistency (do not arbitrarily use different colors to distinguish duplicate components in a single screen. When colors cannot add value, please use them with caution).
Establish a visual hierarchy (through opacity values or the same color system, but don't overuse them by applying too many opacity or contrast values to too many elements).
Try to use dark background, which is the choice of many car manufacturers in the market (however ,Carplay have successively launched white versions to adapt to the daytime. We also added the daytime mode in the middle and later stages of the project. After road test, when the sun is very dazzling, the black color will reflect light and driver cannot see the content of the screen). Finally, the application color scheme is tested under various actual lighting conditions.
Sufficient color contrast is used in the HMI UI system, which is mentioned in the use scenario above.
Let's talk about a concept: the contrast of two white is #1:1, and the contrast of white (#FFFFFF) and black (#000000) is # 21:1.
To meet the AAA standard, the text visual presentation and text image shall have a contrast of at least 7:1, and the contrast for large text and large text image shall be at least 4.5:1.
Summary:
The detail in the use of color is a testament to a designer's depth and durability.
All of the above-mentioned rules for color do not apply to all design schemes, but should be analyzed in detail for specific projects. Different user groups have different application scenarios. For example, the screen design content of drivers and people in the back seat will definitely be different.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Recommendation of Related Axure Products
 |
Introduction This app template is used for smart driving. Features include vehicle condition monitoring, vehicle control, navigation, driving record, etc.
|
Leave a comment