一、前言

車載 HMI 設(shè)計(jì)近年來成為一個熱門領(lǐng)域。許多朋友對 HMI 設(shè)計(jì)感興趣，卻苦于不知如何入手，不了解 HMI 設(shè)計(jì)的基本原則和規(guī)范。有人誤以為 HMI 設(shè)計(jì)僅是設(shè)計(jì)類似 iPad 的界面，認(rèn)為可以直接應(yīng)用移動端或 Web 端的規(guī)范，這是不正確的。HMI 設(shè)計(jì)擁有其獨(dú)特的設(shè)計(jì)規(guī)范。本文旨在介紹 HMI 端的設(shè)計(jì)系統(tǒng)和原則。當(dāng)然，這些規(guī)范主要用于參考，特殊情況下可以適當(dāng)打破這些規(guī)則。

二、HMI 設(shè)計(jì)原則

1. 交互原則

在當(dāng)前的駕駛環(huán)境中，自動駕駛尚不能完全取代人工駕駛，駕駛者在行車過程中仍需保持對路況的高度注意，因此確保駕駛安全是設(shè)計(jì)的首要前提。本文將主要介紹視覺部分的設(shè)計(jì)考量，關(guān)于車載交互的詳細(xì)討論將在后續(xù)文章中更新。

2. 視覺原則

在以駕駛安全為前提的設(shè)計(jì)中，需要確保內(nèi)容的易讀性，目標(biāo)的易用性，以及界面元素的一致性，從而滿足用戶在全場景下的體驗(yàn)需求。

三、HMI 設(shè)計(jì)系統(tǒng)

1. 為什么要搭建設(shè)計(jì)系統(tǒng)

一致性：設(shè)計(jì)系統(tǒng)提供了一套統(tǒng)一的視覺和功能組件，確保不同的產(chǎn)品、頁面和功能在視覺表現(xiàn)和用戶體驗(yàn)上具有高度一致性。這不僅減少了用戶的學(xué)習(xí)成本，也加強(qiáng)了品牌的整體形象和專業(yè)性。

提高效率：設(shè)計(jì)系統(tǒng)中的可重用組件和明確的設(shè)計(jì)指南可以大大減少設(shè)計(jì)和開發(fā)的工作量。設(shè)計(jì)師和開發(fā)者可以快速采用預(yù)定義的元素來構(gòu)建新功能或改進(jìn)現(xiàn)有功能，無需從零開始。這有助于縮短項(xiàng)目時間線，實(shí)現(xiàn)產(chǎn)品的快速迭代。

易于維護(hù)：當(dāng)所有設(shè)計(jì)元素和代碼都遵循一個統(tǒng)一的系統(tǒng)時，維護(hù)和更新變得更加簡單和高效。例如，如果需要更新品牌顏色或修改按鈕樣式，只需在設(shè)計(jì)系統(tǒng)中進(jìn)行更改，相關(guān)變更即可自動應(yīng)用到所有使用這些元素的地方。

提高跨團(tuán)隊(duì)協(xié)作：設(shè)計(jì)系統(tǒng)作為一個共享的資源庫，可以幫助不同的團(tuán)隊(duì)成員（如設(shè)計(jì)師、開發(fā)者、產(chǎn)品經(jīng)理等）更好地協(xié)同工作。一個擁有詳細(xì)文檔和標(biāo)準(zhǔn)的系統(tǒng)確保每個團(tuán)隊(duì)成員都能理解和正確使用組件，減少溝通成本和誤解。

適應(yīng)性和可擴(kuò)展性：良好的設(shè)計(jì)系統(tǒng)具備高度的適應(yīng)性和可擴(kuò)展性，能夠隨著公司和產(chǎn)品的發(fā)展而成長。隨著新需求的出現(xiàn)，設(shè)計(jì)系統(tǒng)可以持續(xù)更新和擴(kuò)展，新的設(shè)計(jì)元素和組件可以被添加進(jìn)來，而不會破壞現(xiàn)有的系統(tǒng)結(jié)構(gòu)。

提升用戶體驗(yàn)：統(tǒng)一和標(biāo)準(zhǔn)化的用戶界面組件不僅可以加速開發(fā)流程，還可以直接提升最終用戶的體驗(yàn)。一致的界面和預(yù)測性的交互可以幫助用戶更快地適應(yīng)軟件，提高用戶滿意度。

2. 原子設(shè)計(jì)

談到設(shè)計(jì)系統(tǒng)，我們不得不提原子設(shè)計(jì)。原子設(shè)計(jì)是由 Brad Frost 于 2013 年提出的一種設(shè)計(jì)系統(tǒng)方法論，它將界面設(shè)計(jì)分解為更小的組件，目的是提高工作效率和保持設(shè)計(jì)一致性。原子設(shè)計(jì)包括五個層次：原子、分子、組織、模板和頁面。

原子：設(shè)計(jì)中最小的可復(fù)用單元，包括顏色、字體、圖標(biāo)等基礎(chǔ)元素。

分子：由原子組合形成的更復(fù)雜元素，例如按鈕、輸入框等具有特定功能的組件。

組織：由分子和原子構(gòu)成的模塊，承載更復(fù)雜的功能和信息結(jié)構(gòu)。

模板：將原子和分子組合成的布局框架，定義頁面結(jié)構(gòu)和內(nèi)容區(qū)域的排版。

頁面：結(jié)合模板和具體內(nèi)容，形成最終的界面設(shè)計(jì)。

接下來步入正題，本文將詳細(xì)講述 HMI 的視覺樣式指南，內(nèi)容包括顏色、布局、排版和圖標(biāo)。

四、顏色

1. 顏色對比度

由于駕駛環(huán)境復(fù)雜多變，如地下車庫、隧道、陰雨天、陽光刺眼的晴天、白天及夜晚，設(shè)計(jì)時需考慮不同光照條件下的可讀性。文本與背景色的對比度應(yīng)滿足特定標(biāo)準(zhǔn)，建議對比度大于 7:1，至少應(yīng)為 4.5:1。這些數(shù)字區(qū)間的依據(jù)是什么呢？參考 WCAG（網(wǎng)絡(luò)內(nèi)容無障礙指南），這些標(biāo)準(zhǔn)旨在為視障人士提供更好的體驗(yàn)，同時也便于普通人使用。汽車作為面向大眾的產(chǎn)品，應(yīng)考慮視障用戶的需求。在不佳的使用場景下（如強(qiáng)烈陽光或昏暗環(huán)境中），我們也可能經(jīng)歷暫時性的視覺障礙，難以清晰感知內(nèi)容。

根據(jù) WCAG，對比度應(yīng)符合 AA 級與 AAA 級的標(biāo)準(zhǔn)。AA 級要求小文本與背景的對比度至少為 4.5:1，大文本與背景的對比度至少為 3:1。AAA 級則要求小文本與背景的對比度至少為 7:1，大文本與背景的對比度至少為 4.5:1。

根據(jù) WCAG，小文本指的是字號在 19px 以下的粗體文本，或者字號在 24px 以下的常規(guī)體文本。大文本則是指字號至少為 19px 且為粗體的文本，或者字號為 24px 以上的常規(guī)體文本。在 HMI 設(shè)計(jì)中，最小文本字號定為 20px，字重為常規(guī)。因此，文本與背景的對比度不應(yīng)低于 4.5:1。同時，對比度也不宜過高，因?yàn)檫^高的對比度可能導(dǎo)致閱讀疲勞，降低閱讀效率。在深色背景下，文本與圖形的對比度建議不要超過 18:1。您可以通過以下鏈接訪問一個網(wǎng)站，以計(jì)算文本與背景的對比度： https://www.siegemedia.com/contrast-ratio

2. 顏色分類

HMI 設(shè)計(jì)主流趨勢是采用深色背景，這在夜間或光線較暗的環(huán)境中可以減少屏幕亮度對視野的沖擊，并有效減少陽光及其他光源的反射。在深色背景上，鮮艷的色彩（如紅色、藍(lán)色等）更加突出，便于駕駛員快速識別重要信息。在使用深色背景時，應(yīng)避免大面積使用純白色，以免過度吸引用戶注意力。

然而，隨著屏幕硬件技術(shù)的進(jìn)步，越來越多的車機(jī)系統(tǒng)開始采用淺色背景。這樣做不僅能在保持高對比度的同時有效控制反射和眩光，還確保了淺色背景在各種光線條件下的良好可讀性。由于手機(jī)和平板設(shè)備普遍采用淺色背景，用戶已習(xí)慣此類界面，這一習(xí)慣也推動了車機(jī)頁面設(shè)計(jì)向淺色背景的轉(zhuǎn)變。

在界面設(shè)計(jì)中，中性色主要用于文字、背景、邊框和分割線，通過中性色的明度差異來營造空間的縱深感。在視覺感知中，明度較高的顏色在 Z 軸上的位置看起來更高，這有助于區(qū)分不同層次。在深色背景下，應(yīng)通過調(diào)整白色的透明度而非使用灰色來進(jìn)行對比和層次區(qū)分。功能色代表特定的信息狀態(tài)，需符合用戶對色彩的基本認(rèn)知，例如：成功用綠色表示、失敗用紅色表示、提醒用黃色表示、鏈接用藍(lán)色表示。同時，還需要設(shè)定合理的對比度和飽和度，以確保在駕駛環(huán)境下能有效識別這些顏色。

車機(jī)配色應(yīng)避免大量使用鮮艷的色彩，以免過度吸引用戶的注意力。根據(jù) Munsell Color 原理，顏色的飽和度和明度兩個數(shù)值越大，顏色越鮮艷。在車機(jī)配色中，我們需要遵循以下兩個規(guī)則：

1. 越接近右上角的顏色越鮮艷，應(yīng)避免使用這類顏色；
2. 選色時應(yīng)關(guān)注飽和度和明度，這兩個數(shù)值之和應(yīng)盡量小于 180（S 飽和度 + B 明度 ≤ 180）。同時，品牌色的合理應(yīng)用能有效傳達(dá)品牌調(diào)性，但不建議大量使用紅色系作為品牌的功能色。

3. 大廠顏色規(guī)范

五、布局

1. 屏幕種類與屏幕分辨率

車機(jī)的屏幕尺寸與分辨率種類繁多，且車機(jī)涵蓋多種屏幕類型，如儀表屏、中控屏、副駕娛樂屏、后排娛樂屏等。接下來介紹幾款熱門車型的屏幕參數(shù)。

①小米 SU7

儀表屏：7.1 英寸

中控屏：16.1 英寸、3072x1920

②特斯拉 Model Y

中控屏：15 英寸、1920x1080

③問界 M7

儀表屏：10.25 英寸、1920x720

中控屏：15.6 英寸、1920x1080

④蔚來 ES6

儀表屏：10.2 英寸、1920x532

中控屏：12.8 英寸、1728x1888

⑤小鵬 G9

儀表屏：10.25 英寸、1920x720

中控屏：14.96 英寸、2400x1200

副駕娛樂屏：14.96 英寸、2400x1200

⑥理想 L7

儀表屏：4.82 英寸、800x166

中控屏：15.7 英寸、2880x1620

副駕娛樂屏：15.7 英寸、2880x1620

通過對主要汽車廠商車型的屏幕分辨率進(jìn)行收集與分析，發(fā)現(xiàn)當(dāng)前市面上主流的屏幕分辨率比例主要為 16:9 和 8:3，這兩種比例合計(jì)覆蓋了 72.39%的車型。因此，建議將這兩種比例作為屏幕適配的基準(zhǔn)。

2. 柵格系統(tǒng)

布局區(qū)域大于或等于 1600dp 時，建議使用 12 柵格系統(tǒng)。布局區(qū)域在 720dp 到 1600dp 之間時，建議使用 8 柵格。而當(dāng)布局區(qū)域小于 720dp 時，則建議使用 4 柵格。

3. 間距規(guī)范

間距可以賦予頁面信息更有節(jié)奏的感覺，從而提升內(nèi)容的可讀性和閱讀效率。通過采用不同的間距，可以有效區(qū)分頁面的組織和內(nèi)容。

在設(shè)計(jì)師層面：制定間距規(guī)范可以有效減少決策和思考的時間，提高工作效率。

在開發(fā)層面：開發(fā)者不一定能夠準(zhǔn)確辨識 1dp 的差異，但能夠明顯區(qū)分出 8dp 的差距?；A(chǔ)間距以 8dp 及其倍數(shù)為增量（例如 8dp、16dp、24dp、32dp、48dp 等），這樣開發(fā)者無需每次都精確測量，同時也能減少誤差，提高設(shè)計(jì)稿的還原度。

在用戶層面：具有一致節(jié)奏和韻律的頁面更加美觀。依據(jù)親密性原則合理調(diào)整間距，可以使用戶更加輕松地感知和區(qū)分信息，從而提升用戶體驗(yàn)。

谷歌 AndROId Auto 的布局間距采用 8dp 作為主要增量，而一些較小的組件則采用 4dp 作為增量。間距規(guī)范共設(shè)定了九種數(shù)值，分別為 P0 至 P8。

小 tips：為了更好地對齊并留出足夠的間距，較小的組件可以使用 4dp 和 12dp 的間距，但需謹(jǐn)慎使用。對于信息較少的頁面（如缺省頁、登錄頁等），使用 96dp 的間距可能無法很好地滿足留白需求，此時可以考慮使用 120dp、160dp 或 200dp 等其他間距數(shù)值。細(xì)心的朋友可能會注意到，在以 8dp 為基準(zhǔn)單位定義間距時，40dp 和 56dp 這兩個數(shù)值并未包括在內(nèi)，盡管它們都是 8 的倍數(shù)。例如，16dp 是 8dp 的 2 倍，間距變化較為明顯。然而，將 56dp 與 64dp 進(jìn)行比較時，64dp 僅比 56dp 大 1.4 倍，兩者間的差異相對較小。設(shè)計(jì)師在定義間距規(guī)范時需要遵循倍數(shù)規(guī)則，同時也應(yīng)考慮頁面的美觀和用戶體驗(yàn)，避免過于呆板地遵守規(guī)則。

定義間距沒有絕對的標(biāo)準(zhǔn)，主要取決于最小單位，如 4dp、5dp、6dp、8dp 等，具體選擇哪個取決于產(chǎn)品的定位和內(nèi)容的形式。重要的是，所有間距需要基于最小單位并以倍數(shù)的形式規(guī)律排列，以保證元素間有良好的節(jié)奏感。

六、排版

文字是界面設(shè)計(jì)中非常重要的信息元素，其字體選擇、字階、字重、顏色及行高都是影響視覺可讀性和閱讀效率的關(guān)鍵因素。對于字體的選擇，建議在中文排版中使用思源黑體，而英文則使用 Roboto。在中英文混排的情況下，應(yīng)統(tǒng)一使用系統(tǒng)中文字體；在純英文排版時，則統(tǒng)一使用系統(tǒng)的英文專用字體。

1. 字階

字階在界面設(shè)計(jì)中用于區(qū)分內(nèi)容的主次關(guān)系，合理的字階應(yīng)用決定了內(nèi)容的節(jié)奏和秩序。為了構(gòu)建穩(wěn)定且具有良好可讀性的字階設(shè)計(jì)，根據(jù) IDX & 同濟(jì)（2020）百度 Apollo 中控視覺基礎(chǔ)研究項(xiàng)目、谷歌 Android Auto 和華為車機(jī) UI 設(shè)計(jì)規(guī)范的研究成果，我們可以發(fā)現(xiàn)字號通常以 4 的倍數(shù)遞增，且最小字號不應(yīng)小于 20（標(biāo)簽類輔助文案應(yīng)謹(jǐn)慎使用），正文字號最小為 24。文本的主副層級應(yīng)通過 4 至 8 的字號差距來區(qū)分。對于需要用戶閱讀和處理的重要信息，每個段落的文字?jǐn)?shù)量不應(yīng)超過 20 字，以確保用戶可以在 2 秒內(nèi)閱讀完畢（700 字/1 分鐘)

2. 字重

對于需要用戶關(guān)注的文本信息，可以通過調(diào)整字重來突出內(nèi)容。建議使用 Regular 或 Medium 字重，這樣的字重使文本看起來更清晰和舒適。相比之下，更粗的字體不易辨認(rèn)，可能會影響閱讀速度，導(dǎo)致駕駛員分心，同時也可能引起視覺疲勞。

3. 行高

行高是指上邊框、下邊框加上字號高度的總和，可以想象成一個包裹在字體外面的透明盒子。行高主要針對多行文本；對于單行文本，使用默認(rèn)的 Auto 行高即可。在設(shè)計(jì)頁面時，由于文字會有不同的字號構(gòu)成，便于閱讀的考慮通常會設(shè)定適當(dāng)?shù)男懈?。不同的行高對文字的易讀性影響較大。

文本的行高一般設(shè)置為字號的 120%-150%，然而由于字階規(guī)范中包含多個字號，不易確定具體每個字號應(yīng)使用 120%還是 150%的行高。行高的具體比例與字號密切相關(guān)：字號越小，建議的行高比例越大；反之，字號越大，折行的概率通常越小。

根據(jù) Ant Design 的經(jīng)驗(yàn)，行高可以設(shè)置為字號加 8。雖然這種動態(tài)變化的字號與固定加 8 的方法看起來可能顯得死板，實(shí)際上它非常有效。例如，20px 的字號加 8 等于 28px 行高，這是字號的 1.4 倍；56px 字號加 8 則為 64px 行高，約是字號的 1.14 倍，符合‘字號越小，行高越大’的原則。這樣的規(guī)范使得設(shè)計(jì)師和開發(fā)者可以更方便地調(diào)整行高。

4. 字色

為保證普通文本在黑白背景下的清晰可讀，根據(jù) WCAG 的 AA 級與 AAA 級標(biāo)準(zhǔn)，文本與背景的對比度應(yīng)設(shè)定在 4.5:1 至 7:1 之間。

在深色背景上，建議通過調(diào)整純白色文本的透明度來創(chuàng)建一致且強(qiáng)烈的視覺層次結(jié)構(gòu)，而不是使用純灰色。根據(jù) IDX & 同濟(jì) (2020) 百度 Apollo 中控視覺基礎(chǔ)研究項(xiàng)目、谷歌 Android Auto 和華為車機(jī) UI 設(shè)計(jì)規(guī)范，建議設(shè)置一級文本的透明度為 100%-90%，二級文本的透明度為 70%-60%，三級文本的透明度為 40%-30%。

七、圖標(biāo)

1. 圖標(biāo)尺寸

在初學(xué)圖標(biāo)尺寸規(guī)范時，我發(fā)現(xiàn)不同的文章和文檔對圖標(biāo)尺寸單位的定義各不相同，有的使用像素，有的使用毫米，這讓我一度感到困惑。后來，我查閱了相關(guān)的換算方法。根據(jù)華為車機(jī) UI 設(shè)計(jì)規(guī)范，圖標(biāo)的最小尺寸建議為 7mm，推薦 9mm。由于不同車企的車機(jī)屏幕分辨率各異，計(jì)算出的像素值也會有所不同。以三個熱門車型為例，計(jì)算一個 7mm 圖標(biāo)相當(dāng)于多少像素：

1. 問界M7中控屏：15.6英寸、1920x1080、PPI：142，7mm≈39dp
2. 特斯拉Model Y中控屏：15英寸、1920x1080、PPI：147，9mm≈41dp
3. 小米SU7中控屏：16.1英寸、3072x1920，PPI：225，9mm≈62dp

計(jì)算方法示例（以問界 M7 為例）：

1. 將 7 毫米轉(zhuǎn)換為英寸，即 7 毫米 ÷ 25.4 毫米/英寸 ≈ 0.276英寸。
2. 確定屏幕的 PPI（每英寸像素密度），問界 M7 的 PPI 為 142。
3. 計(jì)算圖標(biāo)尺寸，即 0.276 英寸 × 142 像素/英寸 ≈ 39.192像素，約為39像素。

盡管這些計(jì)算看似復(fù)雜，但在設(shè)計(jì) 1 倍圖稿時，通?？梢詫⒆钚D標(biāo)尺寸控制在 40dp 至 48dp 之間，根據(jù)具體需求調(diào)整。對于追求精確的設(shè)計(jì)師，可以使用以下網(wǎng)站一鍵計(jì)算屏幕 PPI 和圖標(biāo)像素：

1. 屏幕PPI計(jì)算器： https://config.net.cn/tools/PixelToPpi.Html
2. 毫米到像素轉(zhuǎn)換器： https://pixelsconverter.com/millimeters-to-pixels#google_vignette

小 tips：圖標(biāo)的像素大小是基于 PPI 計(jì)算的。PPI 是屏幕像素密度的度量標(biāo)準(zhǔn)，與屏幕的物理尺寸或分辨率無關(guān)。如果兩個屏幕的 PPI 相同，則它們顯示的圖標(biāo)大小也相同。屏幕 PPI 越高，相同物理尺寸的圖標(biāo)在屏幕上的像素尺寸也越大。隨著屏幕硬件技術(shù)的進(jìn)步，車機(jī)屏幕的 PPI 將會逐漸提高。

2. 圖標(biāo)熱區(qū)

為了確保觸控操作的高效性，車機(jī)頁面上的觸摸熱區(qū)必須比手機(jī)和平板電腦上的熱區(qū)大。較小的熱區(qū)可能導(dǎo)致駕駛者分心和誤操作。因此，最小熱區(qū)尺寸應(yīng)設(shè)置為 12x12mm（約等于 67dp），而推薦的熱區(qū)尺寸為 15.3mm 以上（約等于 86dp）?？紤]到駕駛過程中可能的顛簸，可以在不改變觸控總面積的情況下，適當(dāng)犧牲寬度以確保足夠的高度。

為避免元素?zé)釁^(qū)過近或重疊，需要在可觸摸目標(biāo)之間預(yù)留足夠的安全距離。至少應(yīng)保持 3.5mm（約等于 20dp）的熱區(qū)間隔。

3. 圖標(biāo)設(shè)計(jì)原則

有序統(tǒng)一的形狀可以強(qiáng)化圖標(biāo)的識別性，以及提升品牌表達(dá)。通過信息圖形化，可以準(zhǔn)確表達(dá)圖標(biāo)的含義，同時避免鋸齒的出現(xiàn)。在確保圖標(biāo)表意清晰的前提下，形式和筆畫應(yīng)簡潔明了，去繁從簡，去除多余的細(xì)節(jié)。同時，需要定期檢測圖標(biāo)以保證其識別性和可用性。圖標(biāo)設(shè)計(jì)應(yīng)保證大小、線條粗細(xì)、端點(diǎn)、拐角、傾斜角度及基本形狀的統(tǒng)一性。

Keyline 柵格規(guī)范確保了圖標(biāo)視覺尺寸的統(tǒng)一性，其大小、比例和復(fù)雜程度都得到了標(biāo)準(zhǔn)化和清晰化。柵格在圖標(biāo)元素繪制時提供參考，并幫助建立清晰的內(nèi)容輪廓邊界。

為保持風(fēng)格的整體一致性，圖標(biāo)的所有線段端點(diǎn)默認(rèn)采用與線段同寬的圓角端點(diǎn)。當(dāng)端點(diǎn)為圓形時，為保證視覺上的統(tǒng)一性，圓形直徑應(yīng)略大于線段寬度。通常情況下，線段的端點(diǎn)和可編輯節(jié)點(diǎn)坐標(biāo)最好采用整數(shù)坐標(biāo)。

建議圖標(biāo)元素之間的間距不得小于默認(rèn)線寬的 4px。對于相對復(fù)雜的特殊圖標(biāo)元素，間距的最小值應(yīng)為線寬的 1/2，即當(dāng)默認(rèn)線寬為 4px 時，間距不得小于 2px。在設(shè)置間距時，建議使用偶數(shù)，并以 2 的倍數(shù)為參考值。

圖標(biāo)中的線段傾斜角度應(yīng)為 15 度的倍數(shù)，以保證與 Keyline 中的對角線或十字垂直交叉線保持平行。

總結(jié)

本文主要圍繞 HMI 視覺樣式展開，整合了我平時遇到的一些問題、思考以及碎片化知識。希望這篇文章能為您提供新的思路，并幫助提升工作效率。如果文章有不足之處，歡迎大家交流和補(bǔ)充。

我將繼續(xù)更新關(guān)于 HMI 的相關(guān)文章，敬請關(guān)注并期待下一篇。

設(shè)計(jì)師Ksss