車載HMI設計近年來成為一個熱門領域。許多朋友對HMI設計感興趣，卻苦于不知如何入手，不了解HMI設計的基本原則和規范。有人誤以為HMI設計僅是設計類似iPad的界面，認為可以直接應用移動端或Web端的規范，這是不正確的。HMI設計擁有其獨特的設計規范。本文旨在介紹HMI端的設計系統和原則。當然，這些規范主要用于參考，特殊情況下可以適當打破這些規則。
在當前的駕駛環境中，自動駕駛尚不能完全取代人工駕駛，駕駛者在行車過程中仍需保持對路況的高度注意，因此確保駕駛安全是設計的首要前提。本文將主要介紹視覺部分的設計考量，關于車載交互的詳細討論將在后續文章中更新。
在以駕駛安全為前提的設計中，需要確保內容的易讀性，目標的易用性，以及界面元素的一致性，從而滿足用戶在全場景下的體驗需求。
一致性
：設計系統提供了一套統一的視覺和功能組件，確保不同的產品、頁面和功能在視覺表現和用戶體驗上具有高度一致性。這不僅減少了用戶的學習成本，也加強了品牌的整體形象和專業性。
提高效率
：設計系統中的可重用組件和明確的設計指南可以大大減少設計和開發的工作量。設計師和開發者可以快速采用預定義的元素來構建新功能或改進現有功能，無需從零開始。這有助于縮短項目時間線，實現產品的快速迭代。
易于維護
：當所有設計元素和代碼都遵循一個統一的系統時，維護和更新變得更加簡單和高效。例如，如果需要更新品牌顏色或修改按鈕樣式，只需在設計系統中進行更改，相關變更即可自動應用到所有使用這些元素的地方。
提高跨團隊協作
：設計系統作為一個共享的資源庫，可以幫助不同的團隊成員（如設計師、開發者、產品經理等）更好地協同工作。一個擁有詳細文檔和標準的系統確保每個團隊成員都能理解和正確使用組件，減少溝通成本和誤解。
適應性和可擴展性
：良好的設計系統具備高度的適應性和可擴展性，能夠隨著公司和產品的發展而成長。隨著新需求的出現，設計系統可以持續更新和擴展，新的設計元素和組件可以被添加進來，而不會破壞現有的系統結構。
提升用戶體驗
：統一和標準化的用戶界面組件不僅可以加速開發流程，還可以直接提升最終用戶的體驗。一致的界面和預測性的交互可以幫助用戶更快地適應軟件，提高用戶滿意度。
談到設計系統，我們不得不提原子設計。原子設計是由Brad Frost于2013年提出的一種設計系統方法論，它將界面設計分解為更小的組件，目的是提高工作效率和保持設計一致性。原子設計包括五個層次：原子、分子、組織、模板和頁面。
原子
：設計中最小的可復用單元，包括顏色、字體、圖標等基礎元素。
分子
：由原子組合形成的更復雜元素，例如按鈕、輸入框等具有特定功能的組件。
組織
：由分子和原子構成的模塊，承載更復雜的功能和信息結構。
模板
：將原子和分子組合成的布局框架，定義頁面結構和內容區域的排版。
接下來步入正題，本文將詳細講述HMI的視覺樣式指南，內容包括顏色、布局、排版和圖標。
由于駕駛環境復雜多變，如地下車庫、隧道、陰雨天、陽光刺眼的晴天、白天及夜晚，設計時需考慮不同光照條件下的可讀性。文本與背景色的對比度應滿足特定標準，建議對比度大于7:1，至少應為4.5:1。這些數字區間的依據是什么呢？參考WCAG（網絡內容無障礙指南），這些標準旨在為視障人士提供更好的體驗，同時也便于普通人使用。汽車作為面向大眾的產品，應考慮視障用戶的需求。在不佳的使用場景下（如強烈陽光或昏暗環境中），我們也可能經歷暫時性的視覺障礙，難以清晰感知內容。
根據WCAG，對比度應符合AA級與AAA級的標準。AA級要求小文本與背景的對比度至少為4.5:1，大文本與背景的對比度至少為3:1。AAA級則要求小文本與背景的對比度至少為7:1，大文本與背景的對比度至少為4.5:1。
根據WCAG，小文本指的是字號在19px以下的粗體文本，或者字號在24px以下的常規體文本。大文本則是指字號至少為19px且為粗體的文本，或者字號為24px以上的常規體文本。在HMI設計中，最小文本字號定為20px，字重為常規。因此，文本與背景的對比度不應低于4.5:1。同時，對比度也不宜過高，因為過高的對比度可能導致閱讀疲勞，降低閱讀效率。在深色背景下，文本與圖形的對比度建議不要超過18:1。您可以通過以下鏈接訪問一個網站，以計算文本與背景的對比度：https://www.siegemedia.com/contrast-ratio#%23272e3b-on-%231868de
HMI設計主流趨勢是采用深色背景，這在夜間或光線較暗的環境中可以減少屏幕亮度對視野的沖擊，并有效減少陽光及其他光源的反射。在深色背景上，鮮艷的色彩（如紅色、藍色等）更加突出，便于駕駛員快速識別重要信息。在使用深色背景時，應避免大面積使用純白色，以免過度吸引用戶注意力。
然而，隨著屏幕硬件技術的進步，越來越多的車機系統開始采用淺色背景。這樣做不僅能在保持高對比度的同時有效控制反射和眩光，還確保了淺色背景在各種光線條件下的良好可讀性。由于手機和平板設備普遍采用淺色背景，用戶已習慣此類界面，這一習慣也推動了車機頁面設計向淺色背景的轉變。
在界面設計中，中性色主要用于文字、背景、邊框和分割線，通過中性色的明度差異來營造空間的縱深感。在視覺感知中，明度較高的顏色在Z軸上的位置看起來更高，這有助于區分不同層次。在深色背景下，應通過調整白色的透明度而非使用灰色來進行對比和層次區分。功能色代表特定的信息狀態，需符合用戶對色彩的基本認知，例如：成功用綠色表示、失敗用紅色表示、提醒用黃色表示、鏈接用藍色表示。同時，還需要設定合理的對比度和飽和度，以確保在駕駛環境下能有效識別這些顏色。
車機配色應避免大量使用鮮艷的色彩，以免過度吸引用戶的注意力。根據Munsell Color原理，顏色的飽和度和明度兩個數值越大，顏色越鮮艷。在車機配色中，我們需要遵循以下兩個規則：
1.越接近右上角的顏色越鮮艷，應避免使用這類顏色；
2.選色時應關注飽和度和明度，這兩個數值之和應盡量小于180（S飽和度 + B明度 ≤ 180）。同時，品牌色的合理應用能有效傳達品牌調性，但不建議大量使用紅色系作為品牌的功能色。
車機的屏幕尺寸與分辨率種類繁多，且車機涵蓋多種屏幕類型，如儀表屏、中控屏、副駕娛樂屏、后排娛樂屏等。接下來介紹幾款熱門車型的屏幕參數。
通過對主要汽車廠商車型的屏幕分辨率進行收集與分析，發現當前市面上主流的屏幕分辨率比例主要為16:9和8:3，這兩種比例合計覆蓋了72.39%的車型。因此，建議將這兩種比例作為屏幕適配的基準。
布局區域大于或等于1600dp時，建議使用12柵格系統。布局區域在720dp到1600dp之間時，建議使用8柵格。而當布局區域小于720dp時，則建議使用4柵格。
間距可以賦予頁面信息更有節奏的感覺，從而提升內容的可讀性和閱讀效率。通過采用不同的間距，可以有效區分頁面的組織和內容。
在設計師層面：制定間距規范可以有效減少決策和思考的時間，提高工作效率。
在開發層面：開發者不一定能夠準確辨識1dp的差異，但能夠明顯區分出8dp的差距。基礎間距以8dp及其倍數為增量（例如8dp、16dp、24dp、32dp、48dp等），這樣開發者無需每次都精確測量，同時也能減少誤差，提高設計稿的還原度。
在用戶層面：具有一致節奏和韻律的頁面更加美觀。依據親密性原則合理調整間距，可以使用戶更加輕松地感知和區分信息，從而提升用戶體驗。
谷歌Android Auto的布局間距采用8dp作為主要增量，而一些較小的組件則采用4dp作為增量。間距規范共設定了九種數值，分別為P0至P8。
小tips：為了更好地對齊并留出足夠的間距，較小的組件可以使用4dp和12dp的間距，但需謹慎使用。對于信息較少的頁面（如缺省頁、登錄頁等），使用96dp的間距可能無法很好地滿足留白需求，此時可以考慮使用120dp、160dp或200dp等其他間距數值。細心的朋友可能會注意到，在以8dp為基準單位定義間距時，40dp和56dp這兩個數值并未包括在內，盡管它們都是8的倍數。例如，16dp是8dp的2倍，間距變化較為明顯。然而，將56dp與64dp進行比較時，64dp僅比56dp大1.4倍，兩者間的差異相對較小。設計師在定義間距規范時需要遵循倍數規則，同時也應考慮頁面的美觀和用戶體驗，避免過于呆板地遵守規則。
定義間距沒有絕對的標準，主要取決于最小單位，如4dp、5dp、6dp、8dp等，具體選擇哪個取決于產品的定位和內容的形式。重要的是，所有間距需要基于最小單位并以倍數的形式規律排列，以保證元素間有良好的節奏感。
文字是界面設計中非常重要的信息元素，其字體選擇、字階、字重、顏色及行高都是影響視覺可讀性和閱讀效率的關鍵因素。對于字體的選擇，建議在中文排版中使用思源黑體，而英文則使用Roboto。在中英文混排的情況下，應統一使用系統中文字體；在純英文排版時，則統一使用系統的英文專用字體。
字階在界面設計中用于區分內容的主次關系，合理的字階應用決定了內容的節奏和秩序。為了構建穩定且具有良好可讀性的字階設計，根據IDX & 同濟（2020）百度Apollo中控視覺基礎研究項目、谷歌Android Auto和華為車機UI設計規范的研究成果，我們可以發現字號通常以4的倍數遞增，且最小字號不應小于20（標簽類輔助文案應謹慎使用），正文字號最小為24。文本的主副層級應通過4至8的字號差距來區分。對于需要用戶閱讀和處理的重要信息，每個段落的文字數量不應超過20字，以確保用戶可以在2秒內閱讀完畢（700字/1分鐘)
對于需要用戶關注的文本信息，可以通過調整字重來突出內容。建議使用Regular或Medium字重，這樣的字重使文本看起來更清晰和舒適。相比之下，更粗的字體不易辨認，可能會影響閱讀速度，導致駕駛員分心，同時也可能引起視覺疲勞。
行高是指上邊框、下邊框加上字號高度的總和，可以想象成一個包裹在字體外面的透明盒子。行高主要針對多行文本；對于單行文本，使用默認的Auto行高即可。在設計頁面時，由于文字會有不同的字號構成，便于閱讀的考慮通常會設定適當的行高。不同的行高對文字的易讀性影響較大。
文本的行高一般設置為字號的120%-150%，然而由于字階規范中包含多個字號，不易確定具體每個字號應使用120%還是150%的行高。行高的具體比例與字號密切相關：字號越小，建議的行高比例越大；反之，字號越大，折行的概率通常越小。
根據Ant Design的經驗，行高可以設置為字號加8。雖然這種動態變化的字號與固定加8的方法看起來可能顯得死板，實際上它非常有效。例如，20px的字號加8等于28px行高，這是字號的1.4倍；56px字號加8則為64px行高，約是字號的1.14倍，符合‘字號越小，行高越大’的原則。這樣的規范使得設計師和開發者可以更方便地調整行高。
為保證普通文本在黑白背景下的清晰可讀，根據WCAG的AA級與AAA級標準，文本與背景的對比度應設定在4.5:1至7:1之間。
在深色背景上，建議通過調整純白色文本的透明度來創建一致且強烈的視覺層次結構，而不是使用純灰色。根據IDX & 同濟 (2020) 百度Apollo中控視覺基礎研究項目、谷歌Android Auto和華為車機UI設計規范，建議設置一級文本的透明度為100%-90%，二級文本的透明度為70%-60%，三級文本的透明度為40%-30%。
在初學圖標尺寸規范時，我發現不同的文章和文檔對圖標尺寸單位的定義各不相同，有的使用像素，有的使用毫米，這讓我一度感到困惑。后來，我查閱了相關的換算方法。根據華為車機UI設計規范，圖標的最小尺寸建議為7mm，推薦9mm。由于不同車企的車機屏幕分辨率各異，計算出的像素值也會有所不同。以三個熱門車型為例，計算一個7mm圖標相當于多少像素：
-
問界M7中控屏：15.6英寸、1920x1080、PPI：142，7mm≈39dp
-
特斯拉Model Y中控屏：15英寸、1920x1080、PPI：147，9mm≈41dp
-
小米SU7中控屏：16.1英寸、3072x1920，PPI：225，9mm≈62dp
-
將7毫米轉換為英寸，即7毫米 ÷ 25.4毫米/英寸 ≈ 0.276英寸。
-
確定屏幕的PPI（每英寸像素密度），問界M7的PPI為142。
-
計算圖標尺寸，即0.276英寸 × 142像素/英寸 ≈ 39.192像素，約為39像素。
盡管這些計算看似復雜，但在設計1倍圖稿時，通常可以將最小圖標尺寸控制在40dp至48dp之間，根據具體需求調整。對于追求精確的設計師，可以使用以下網站一鍵計算屏幕PPI和圖標像素：
-
屏幕PPI計算器：https://config.net.cn/tools/PixelToPpi.html
-
毫米到像素轉換器：https://pixelsconverter.com/millimeters-to-pixels#google_vignette
小tips：圖標的像素大小是基于PPI計算的。PPI是屏幕像素密度的度量標準，與屏幕的物理尺寸或分辨率無關。如果兩個屏幕的PPI相同，則它們顯示的圖標大小也相同。屏幕PPI越高，相同物理尺寸的圖標在屏幕上的像素尺寸也越大。隨著屏幕硬件技術的進步，車機屏幕的PPI將會逐漸提高。
為了確保觸控操作的高效性，車機頁面上的觸摸熱區必須比手機和平板電腦上的熱區大。較小的熱區可能導致駕駛者分心和誤操作。因此，最小熱區尺寸應設置為12x12mm（約等于67dp），而推薦的熱區尺寸為15.3mm以上（約等于86dp）。考慮到駕駛過程中可能的顛簸，可以在不改變觸控總面積的情況下，適當犧牲寬度以確保足夠的高度。
為避免元素熱區過近或重疊，需要在可觸摸目標之間預留足夠的安全距離。至少應保持3.5mm（約等于20dp）的熱區間隔。
有序統一的形狀可以強化圖標的識別性，以及提升品牌表達。通過信息圖形化，可以準確表達圖標的含義，同時避免鋸齒的出現。在確保圖標表意清晰的前提下，形式和筆畫應簡潔明了，去繁從簡，去除多余的細節。同時，需要定期檢測圖標以保證其識別性和可用性。圖標設計應保證大小、線條粗細、端點、拐角、傾斜角度及基本形狀的統一性。
Keyline柵格規范確保了圖標視覺尺寸的統一性，其大小、比例和復雜程度都得到了標準化和清晰化。柵格在圖標元素繪制時提供參考，并幫助建立清晰的內容輪廓邊界。
為保持風格的整體一致性，圖標的所有線段端點默認采用與線段同寬的圓角端點。當端點為圓形時，為保證視覺上的統一性，圓形直徑應略大于線段寬度。通常情況下，線段的端點和可編輯節點坐標最好采用整數坐標。
建議圖標元素之間的間距不得小于默認線寬的4px。對于相對復雜的特殊圖標元素，間距的最小值應為線寬的1/2，即當默認線寬為4px時，間距不得小于2px。在設置間距時，建議使用偶數，并以2的倍數為參考值。
圖標中的線段傾斜角度應為15度的倍數，以保證與Keyline中的對角線或十字垂直交叉線保持平行。
本文主要圍繞HMI視覺樣式展開，整合了我平時遇到的一些問題、思考以及碎片化知識。希望這篇文章能為您提供新的思路，并幫助提升工作效率。如果文章有不足之處，歡迎大家交流和補充。
作者：設計師Ksss鏈接：https://www.zcool.com.cn/article/ZMTYxOTQ5Mg==.html來源：站酷著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
