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.
This is the second part of the article：How to Build an Automotive HMI: Design Specifications (Part 1)
3. Layout specification
The biggest difference between HMI design and other terminal design lies in layout. Layout is the framework of the whole page design and one of the most important contents. When talking about the content of this module, I will start from the actual project case.
To start making the HMI system, we need to confirm with the automobile manufacturer the size area of the HMI that can be designed in the screen (Note: the "screen" refers to the normal working space of the app rather than the whole space to the edge, and some manufacturers embed the fixed buttons in this area).
1. How many categories of screen sizes are there?
Model3 1920*1200 15 inches (the size of the bottom control is 120 pixels, which is fixed). Model S / X is designed with a vertical screen, with a resolution of 1200 * 1920.
CarPlay system resolution: 800*480, 1280*720, 960*540, 1920*720.
2. Specification of spacing
Specify a set of spacing values for the fixed vertical and horizontal spacing between elements and components in the layout, built on an 8-pixel grid, which means that the UI components and elements in the specification are separated by multiples of 8px .
The Google Android Auto spacing specification has a total of nine commonly used values, P0 – P8:
Note: The 4px and 12px spacing sizes are provided to align the distance between smaller elements. These two values should be used with caution. In the large-screen vehicle system, there are also many spacings that need to be larger than 96px. Therefore, the requirement is that multiples of 8px can be used.
When it comes to this, some people will have questions: can we not set the spacing to a multiple of 8, and whether it is feasible to set the spacing to a multiple of 4, 5, 6... Etc. of course, it is OK, If one multiple is selected, don't use other multiples. If multiple spacing appear on the page, it will make the page have no sense of rhythm and break the principle of intimacy.
3. Layout in the HMI module
For students who want to contact vehicle design, let's talk about the general layout. This time, we will simply talk 1920 × 720 resolution.
4. Adaptive layout
After talking about the general layout of each module, let's discuss the adaptive layout, which is really very, very!!! Super important. This problem is often encountered later in the work. The client want to increase the screen resolution. We spend a lot of time on layout in the early stage, but we can reduce a lot of maintenance workload in the later stage. Therefore, the basic framework needs to be planned in the early stage.
Let's take the actual case to state: throw a question: how do we convert the content of a page with a resolution of 1920 × 720 to 1280 × 720?
(Some product managers may say let coder write adaptive layout directly) Navigation related pages need to call the map interface. Coder can write adaptive layout directly, but other elements still need to be rearranged by designers.
(Some people say that scaling the columns directly and adjusting the page layout) this scheme doesn't work when the proportion is very different, but it's completely OK if it's similar in proportion. It happens that there are 800 in our project × 480 resolution, and 1280 × 720 is very similar.
(others expressed dissatisfaction: fold the content of a certain area, make the content of the area into an icon, and click it to pop it up.) this method can be used in some contents.
If the first two methods do not work, some content requires flexible layout controls. Such as setting pages, the middle space is large, when be putted into small page, the length of the control can be stretched according to the flexible layout, to a size that fits the screen.
Be careful when changing the layout: the first is that it will increase the coding workload, and the second is to increase the learning cost of users. Of course, when the screen is vertical, it needs to be rearranged, because the height width ratio becomes the opposite value.
4. the specification of rounded corners
1. How to make size rules for rounded corners
1) The use of more rounded corners and fully rounded corners
Use more rounded corners (larger corner radius or full rounded corners) for main actions and components, which needs to be highlighted. The rounded shapes have a greater visual impact on most straight shapes. If there is enough space on the page, the full rounded corner form will be more contrasted with other buttons, encouraging users to click.
For example, the global message notification button, the hang up button in the telephone module, the button in the negative screen, etc. (the following is the list of exercise draft):
2) Use of lower rounded corners and right angles
For elements that don't need or low emphasis, use a lower corner radius or 0px rounded corners = right angles.
For example, the toolbar or list can use small rounded corners. The album cover does not need to be emphasized, so it is directly reduced to 0px. The large cover of our project's music album uses a right angle. Specific problems need to be analyzed specifically. For example, the outer contour of the music control is with rounded corners. Therefore, the album cover must have rounded corners in the container, otherwise the design style will not be unified.
Another module is that there will be many album covers in the case of music category. Let's compare two schemes: with rounded corners or without rounded corners. Compared with the two images, the album cover with rounded corners has more obvious edges at the corners, resulting in a sense of visual contrast, while the album with right angles doesn't seem to be prominent, so it's unlikely to attract our attention. Therefore, in the grid layout, the effect of round corner is better.
3) Google's definition of round corners
When setting the rules for rounded corners, there is one thing to pay attention to: there should not be too many types of sizes, otherwise it will be cluttered.
Note: Even though the app layout is built on an 8dp grid, a 4dp radius size is still provided to help shape elements in smaller components. This value should be used with caution as it is not a multiple of 8dp.
Conclusion: there is no right or wrong between rounded corners and right angles. The suitable one is the best.
5. Icon Specifications
1. Types of icons (HMI icons are divided into application icons and system icons)
1) Application icon
At present, the design trend of HMI has removed the application icon and replaced it with the card design scheme. To put it simply, the card design has two advantages: first, to minimize the learning cost; second, the increased contact area minimizes the false action rate during driving, and the most intuitive experience for users is simple and easy to use. However, some auto manufacturers still have a demand for application icon, so let's mention it a little more.
I have worked on projects that have application icons. On a 1920x720 screen, the 160px resolution is the same as the Apple @3x resolution; on a relatively smaller screen it should be scaled down with the same scale. For example, in a screen resolution of 800×480, the application icon in the home page is 80px. How is this calculated?
There is also a vehicle model in the project with a screen resolution of 1280 × 720. Due to the narrowing of the screen, the application icon needs to be reduced to 120px, and the height of 720 and 480 has a common multiple of 240, so the final small screen application icon is 80px, The round corner size also changes accordingly: R: 24/18/12. The rest of the resolutions are used according to the actual situation.
2) System icon (I will explain it in detail in the subsequent articles on building HMI component library)
The system provides many small icons (representing common tasks and content types) for use in the navigation bar and tab bar. It's best to use these built-in icons as much as possible because they are familiar to people.
2. Icon size
1) How does the big company formulate the icon size
According to Baidu IDX driving experience center, based on the visual distance of 50cm, the minimum icon is 9mm, and 12mm is recommended.
What is the actual pixel of 1cm visually? This is a wrong idea. The above article also mentioned that the screen resolution cannot be converted with the physical length unit (the actual project experience tells me that the results cannot be shared because the same screen size but different resolution).
2) Calculation of PPI
I will briefly talk about the calculation principle. According to the resolution of the screen, I have made a car with the same screen size, all of which are 8-inch screens, a screen resolution is 1280×720 and the other is 800×480. A grid is a pixel.
3) Minimum icon size calculation
Next, find the greatest common divisor of 80 for a screen with a resolution of 1280×720. Finally, it is concluded that the ratio of the screen is 16:9. The sum of the squares on both sides = the square of the screen length. According to the Pythagorean theorem (16X)^2 + (9X )^2=8×8 The final calculated result is 0.4357.
16:9 8-inch screen length (unit: inches) = 0.4357 × 16 = 6.9712 Width = 0.4357 × 9 = 3.9213, international unit of calculation 1 inch = 2.54cm, the resulting screen length (unit: cm) = 6.9712 × 2.54 ≈17.7cm, width=3.9213×2.54≈9.96cm.
- Resolution: 1280 × 720 is calculated with a width equal to about 10cm, 720 / 10 = 72px
- Resolution: 800 × 480 because they have the same screen size (inches) 480 / 10 = 48px
It is concluded that the actual pixel of 1cm is visually different.
According to the design rules, it is formulated in multiples of 4, so the minimum icon is 40px (this conclusion is only used as a recommendation. When doing a project, there are many variables. )
4) Let's show it
Google Android Auto icon size specification:
- Basic icons: primary icons: 44px, secondary icons: 36px, third-party icons: 24px;
- Use of Avatar: small Avatar: 56px, medium Avatar: 76px, large Avatar: 96px;
- Base icon: 48px # secondary icon 40px (minimum icon size).
Let's also say here that for the size setting of large icons, there will be many size. Later, I will output detailed contents about HMI icons. Please pay attention to it.
3. Click area of Icon
1) The icon touch area is divided into driving use and stationary use.
For example, it is necessary to adjust the internal and external circulation of the air conditioner during driving. The original hard buttons of the old car have been replaced by buttons on the screen. The original hard buttons have been used for a long time and have memory, and they are tactile and the size of the hard buttons is moderate, so the operation time is reduced and the risk coefficient is reduced.
New energy vehicles can be designed to reduce misoperation and inability to click by increasing the touch area, so that the driver's field of vision is not far away from the steering wheel for a long time. Research shows that it is dangerous to stay on the HMI for more than 2 seconds.
2) Google makes rules for touch areas
The minimum touch target size is 76 x 76px. It is necessary to add an additional touch area on the basis of a single icon design, which is easy to operate in driving. If it is used at rest, we can follow the Apple design specification that the minimum finger touch area is 44x44px.
This is my conclusion based on the actual project and the road test (road test: driving test) in the car. There is another special case: text + icon combination click area. When the icon is very small, you can also consider combining text together to increase the click area.
4. Unified rules for icon design
- Unified style
- Unified light source
- Unified line thickness
- Unified rounded/right corner
- Unified tilt angle
- The distance and size of breakpoints are uniform
5. The last episode: naming norms
Before, my friends often asked me how to make the icon images naming norms of the project? Take the home page of the style draft I made before. How to name the icon of "Next song" in the music card on the home page.
First, analyze where the icon is used in that page, then what its attribute is, icon or button, then what the icon represents and the size of the icon. Because there will be duplicate icons in a system, it is necessary to add the size (this content is an optional item). Finally, when adding the state of the icon, the state is divided into: disabled, normal, pressed and selected.
Final presentation: Home_Song_Next_Normal
Recommendation of Related Axure Products