編輯導語：HMI被稱為人機界面。在其策劃行業中，HMI有著絕對的地位，是車輛中必不可少的一部分。在造車新勢力崛起的今天，HMI變得越來越重要。說到HMI設計，雖然所有人都很容易理解，HMI設計要考慮注重安全，需要在設計上適應車載的使用場景。那做HMI設計應該從哪里下手？本文主要講述的是車載設計原則，干貨滿滿，感興趣的朋友一起來看看吧。

如果想做HMI體驗設計了解開發流程后，首先開始設計前最需要知道的是以什么為基準去設計，以及設計的限制，也就是設計原則。

尤其HMI體驗設計是整車體驗的一部分，也變得越來越重要。

剛開始進入車載行業的同學都會存在一個誤區，會拿互聯網那一套設計規范套路汽車HMI設計，但其實汽車HMI有自己的設計原則和設計規范以及美學理念。

汽車行業本身是一個有著強烈美學理念和設計規范的行業，其實準確的說應該是汽車HMI中控設計是基于自身傳統規范，結合互聯網移動端和Web端的基礎上，慢慢形成了一種新的設計規范。

加上龐大的行業從業者的外溢，互聯網的美學理念和設計規范，已經在入侵進來形成HMI設計新興的細分領域。

那很多同學問了我們想去做HMI設計應該從哪里下手啊，在這里我建議大家無論做任何的設計都應該從用戶場景、用戶痛點下手。

一、了解與用戶溝通的設計語言

在設計HMI的過程當中，都是基于用戶在智能車的場景里。就像設計APP會基于用戶痛點和用戶場景來的一樣。在智能車的體驗里，首先是駕駛員、其次是車、以及系統三個要元素組成了車內場景。

在結合了現有的互聯網車機設計原則，主要考慮的還是簡單易用和高效專注。

1. 簡單易用

在設計上應該為駕駛員提供更完善的包容機制，操作和信息的統一性和延續性，幫助用戶降低操作成本，提升用戶體驗。

2. 高效專注

考慮駕駛員的實際場景的多樣性，注意力容易分散或暫時中斷。所以在設計的時候 要考慮除非重要的警報，盡量用聽覺給到用戶的提示。操作上可以滿足單手操作，并為用戶的每一步操作提供及時的反饋。

二、三秒原則

之前看過一個“三秒原則”的理論，開車時在高速上要保持和前面通過一個參照物三秒的距離，才是安全的，說明人在高速行駛的反應時間是三秒。

用戶的注意力管理對減少由注意力分散導致的交通事故十分必要，據統計，車載系統的單次操作行為不能超過3秒。

開車過程中，必要操作需要遵循3秒原則，用戶必須在第1秒內找到應用場景的重點信息與功能入口，然后第2秒進行交互動作，最后第3秒得到想要的信息結果。

準確把握每個過程中的時間，排除多余元素干擾，避免分散注意力。

在三秒原則里，一秒視覺、兩秒交互。排除車的硬件體驗，那HMI設計師在系統里要給到用戶一個什么樣的視覺原則和交互原則是我們今天要研究的問題。

三、HMI視覺設計原則

1. 顏色

車載的美學他們大多是深色的，金屬質感，邊框和陰影。

早期的車載用戶界面都是硬性的感覺。

但是現在行業已經成熟到一個包羅萬象的男女皆宜的當代審美。

所以現在的視覺可以在以往的傳統上，是汽車界面更新潮更科技。

（1）關于色彩

主流的背景以深色為主，那是因為深色的背景更不容易分散司機注意力，減少了眩光的問題。

現在一些新能源車可以切換白天黑夜模式，也會出現淺色的背景，淺色模式的整體色調不好把控，處理不好會使屏幕一直處于高亮狀態，會讓駕駛員產生一定視覺疲勞。

色彩規則以 中華人民共和國國家標準 關于駕駛安全的基礎標準為大前提，設定符合車載場景的取色類型。

（2）色彩對比度

由于駕駛環境的復雜光線條件，需要滿足在不同照明條件（日間/夜間/暗光/眩光）下的可讀性，對比度需滿足以下條件：

• 文本與底圖對比度建議大于7：1（至少4.5：1）。背景推薦使用深色，避免大面積使用純白色，過度吸引用戶注意。
• 過高的對比度導致視覺疲勞和閱讀效率的降低。深色模式下背景與文本或圖形的對比度建議不大于18：1。

（3）飽和度與明度的合理搭配

長時間駕駛本身精神與視覺會更加需要集中注意力在前方，此時車內環境中，不宜有過于強烈明顯的色彩干擾視線，可試想你在電影院中看電影時，身邊的人的手機亮度最高，此時會嚴重影響視覺的余光，難以聚焦在前方畫面上。

因此視覺設計的整體色彩體系應當適當的降低飽和度，同樣的，車載系統視覺的設計也應避免使用同一色系的方案，這樣無法在1秒的安全時間以內讓用戶有效果的判斷識別信息。

根據 Munsell Color 原理得出，飽和度和明度的兩個數值越大，顏色越鮮艷。在車機配色選擇上請遵循以下規則：

• 越靠右上角的色值越鮮艷，所以不建議選取。
• 取色時，同時考慮飽和度和明度，這兩個因素的值之和盡量小于180（即：S + B ≤ 180）。

（4）不建議選擇單色，建議增加輔助色

更好的可以幫助我們分組，提高信息的獲取能力。

結合 ISO 15008 （道路車輛.運輸信息和控制系統的人類工效學方面.車輛目視顯示用規范和試驗程序）。

車載界面色彩傾向度定義了適合作為品牌主要控件的色調的功能色，強調品牌視覺形象。

并結合 GB 4094 相關信號顏色規定同樣定義不適合的色彩闕值。

按照功能色分類可以根據常規場景將功能定位一級色、二級色、三級色。

（5）狀態顏色

反饋成功及警戒提醒在駕駛場景中至關重要，結合 GB4094相關信號顏色規定，狀態定義需要與相關法規及駕駛者習慣思維的明確色相相結合。

（6）狀態用色分類

此處顏色以 HSV 顏色模型參數為標準。

百度主題案例：

阿里顏色規范：

華為顏色設計規范：

（7）設計走查自測表

為方便車載小程序設計，提供輕量化的小程序設計走查表以供參考。

可用于項目前期設計自測、項目中研發自測檢查、項目上線后設計/產品協同開發同學完成自測問題，查缺補漏規避風險點。

2. 字體

中控與駕駛員的距離處在70cm-85cm之間，設計稿一定要在實車上感受，是否足夠清晰，是否能快速識別，中控屏搭載的更多是各種應用，顯示的文字相對會多一點，除了文字需要保證在可視區間里，文字內容應當通過字號字重來區分主次關系，用戶在掃一眼的過程中即可準確的看到重點信息。保證易讀性。

字體的顏色盡量選擇對比度高的，參考wwac標準。方便用戶能快速掃視。

字體的大小，層級，對比度等都是影響視覺可讀性和閱讀效率的重要因素，為保障文本的易讀性，界面文字需滿足以下要求：

• 最小可識別文字尺寸：5.4mm。
• 字體層級：區分文本主副層級，字號差距需保持4-6sp。
• 需要用戶閱讀和處理的重要段落文字不超過20個字（700字/分鐘，2秒內讀完）。
• 對于需要用戶關注的文本信息可通過增加字重的方式突出內容。
• 適合車載顯示的10款字體。

百度字體設計規范：

阿里字體設計規范：

3. ICON

ICON的設計形式，可更多結合應用的內容，應注意在內容與形式結合時，視線上要保持一致性，可有助于在一秒的安全時間內讓用戶快速瀏覽并判斷信息

點擊是交互行為中最為常用的動作，為確保用戶點擊操作的易用性和成功率，操作按鈕及熱區需滿足以下規則：

• 圖標：最小的圖標尺寸為6.9mm，推薦圖標大小為9.2mm。
• 熱區：最小10.7mm，推薦熱區15.3mm以上，熱區間隔3mm以上。

4. 內容排版

車載以駕駛員的操作為主，功能布局盡量設計在離手最近的位置，縮短操作距離，盡可能將熱區放大，展示信息放在右側。

（1）層次和數量

所有的信息按照使用場景、功能。

分組展示，確保信息按照的優先級進行交付。

在任何場景下展示盡可能少的信息。

避免過多信息的干擾，必須做到界面顯示輕量化。

數量盡量不超過3-4個。

（2）閱讀排版

可以根據閱讀瀏覽模型Z字型和F字型?；炫诺臅r候建議使用一種字體。

（3）預留安全熱區

避免元素熱區過近或重疊，需要使可觸摸目標之間預留足夠的安全距離，至少保持 3.5mm 的熱區間隔。

5. 品牌IP

用戶對傳統汽車的品牌感認知，還是停留在車標、車造型等硬件外觀，而智能汽車，搭載了一個智能系統，除了駕駛需求，人和車的交互更多的會停留在HMI，所以，對于HMI融入品牌元素也相當重要，品牌化是智能座艙視覺設計重要的發展趨勢之一。

現在主要品牌的體現形式是車載的IP管家，他有具體的名字，可以用語音喚醒。

四、HMI的設計六大交互原則

說到HMI設計，雖然所有人都很容易理解，HMI設計要考慮注重安全，需要在設計上適應車載的使用場景。

但是UI設計原則和UX設計原則很少有人系統性的回答過。對比原有的交互六大原則，適配到車載的場景下，提煉出六大交互設計原則。

1. 基本原則

（1）安全性原則

HMI涉及到的載體都是汽車零部件中的安全件，HMI設計首先考慮的必須是以安全為第一導向， 所有顯示信息都應該按照人機工程學進行合理排布，按照駕駛者的行為習慣進行設計。

與移動端的視覺顯示不同，HMI設計師需要注意除了基礎的視覺顯示規范外，還需格外注意與安全相關信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

（2）及時反饋原則

人的大腦每天通過五種感官接受外部信息的比例分別為：味覺1%；觸覺1.5%；嗅覺3.5%；聽覺11%；視覺83%。

時刻保障關鍵信息是最高優先級的，保證在各種環境場景下具有良好的可見性和易讀性，無需駕駛員費力尋找和識別。

隨著大屏、多屏化的發展趨勢，除了依賴視覺反饋，以及減少或避免觸摸屏的誤觸功能，聽覺和觸覺也可以輔助視覺反饋。

不同場景下的提示：

除以上正常駕駛場景外，還有部分對特殊場景的提示，如油耗、故障、雨雪天、超速、疲勞等。

車載系統需要有能力面對復雜的應用場景，處理需要更加智能，（比如復雜路況+不良天氣的提示），以及車內的環境控制（如聲音、氣溫）需要更加敏感。

車載系統的設計相比于移動端有著更明顯的約束，不論是從空間（使用環境）、時間（三秒原則）、行為（交互方式）、心智（心理訴求），都有著明顯獨特的場景和特點，要做好車載系統設計，我們需要有豐富的同理心以及親身體驗并反復驗證設計。

信息獲取效率：

同樣，現在的智能汽車，信息呈現的方式，主要也還是視覺為主，聽覺為輔。在還沒有完全實現自動駕駛前，信息呈現層級保持不變。

在汽車行駛的過程中當中最高優先級是視覺，時刻要觀察道路，查看導航。

聽覺輔助也是很有必要考慮的場景，通過語音反饋司機需要獲取的信息，能讓司機盡量保持視覺焦點在路況上。

多場景的融合考慮信息獲取的效率，能減少在開車過程中的安全隱患。

（3）完整性原則

將頁面信息根據某些關聯性，分區塊進行顯示，這將有助于用戶更容易的建立信息位置記憶，用極少量的時間查看車輛狀態，減少搜索信息帶來的注意力分散，保障駕駛安全。

（4）簡單學習原則

面對C端用戶，設計師要考慮盡最大可能使用符合用戶習慣交互方式，減少學習和適應。

讓駕駛員更有安全感和便捷的操作。

如果交互界面改變了，用戶極有可能必須從頭開始學習一些基本操做。

在市場競爭壓力這么大的情況下，用戶很容易就轉向自己接受程度高的產品。

隨著屏幕越做越大，需要駕駛員操做的功能也越來越多，所以駕駛員會因為復雜操做，面臨交通路況擁擠的情況下的額外壓力。

（5）信息可視化原則

盡可能的采用圖像化/擬物化風格，避免或減少使用復雜的、過于專業的、技術性的圖標和術語。

（6）情感化原則

馬斯洛需求指出，人們需要動力實現某些需求，有些需求優先于其他需求。

我們當下在滿足基礎需求后需要的更高階的需求。

情感化設計是用戶體驗和需求金字塔的最高層級，情感化需求也是必然的需求。

在移動端，情感化的體現主要還是視覺層面，比如加載過程中的動效、缺省頁的插畫、異常狀態的提示等，還有就是和品牌的結合，增加用戶對品牌的認知。

而對于汽車而言，它是一個空間，就靠屏幕里的視覺元素是遠遠不夠的，應該從整車的角度去分析，通過五感（視、聽、觸、嗅、知）創造更豐富的全局體驗，比如可以根據自己的駕駛需求和個人行為習慣，自定義氛圍燈，香氛、語音等。

汽車IP：

汽車IP用虛擬的人物語音來扮演管家的角色，功能包括了記錄車主的駕駛習慣，不斷優化程序來契合車主習慣，讓車主有更好的駕駛體驗。

比如蔚來的nomi，既可以陪玩陪聊，還有表情互動，若是加上管家功能，汽車豈不立馬變身駕駛員最好的伙伴？看這小表情，是不是還挺可愛、暖心的哇？

2. 分場景

在討論如何對超寬一體屏進行體驗設計前，我們需要對人在不同場景下的多樣化需求有大致的了解。

為此，我們將人與車空間關系的場景劃分為四大方向依次是：生活、娛樂、辦公和共享。

1. 在生活場景下，全家出游，疲憊的人可以直接在車上睡覺休息，無聊的人可以玩游戲，車內空間采用多音道技術，不同的音道技術可以避免彼此干擾。除此之外，還可以起到保護隱私的作用，滿足每個人對個人空間的需求。
2. 在娛樂場景下，人可以進行多項休閑娛樂，比如：看電影或者讀書看報，其中使用超寬一體屏觀看電影時，大屏會給人以良好的觀感體驗。
3. 在辦公場景下，人可以在駕艙內進行各項辦公活動，諸如：視頻會議、電腦辦公、商務信息處理等。
4. 在共享場景下，車不僅可以是運輸人的移動工具，還能成為運輸貨物的移動工具、移動商城、移動酒店等等。

3. 交互方式

（1）觸控

這里分兩種，一種是通過按鍵控制；一種是通過觸屏控制。

都是通過不斷的觸控功能按鈕行程鍛煉肌肉記憶，現在的趨勢越來越趨向重觸屏，輕按鈕，這樣不僅系統迭代成本小，功能可以動態分布。

但是對于一些精準調節的功能還是按鍵控制好一些。

微軟 的Surface Dial可以給我們很好的啟發，智能旋鈕可以解決大部分屏幕調節的不精準的痛點，而效率又高。

（2）語音

在汽車人機交互中，語音交互被認為是車內場景下最自然的交互方式，而語音交互需要一個載體來傳達多樣化的情感。

語音控制的前景主要在于兩個因素，一個是可以把除了界面以外的利用起來，一個可以與HMI自由交談，二是最小化HMI手動操作產生的干擾，增加安全性。

（3）手勢

手勢交互是對語音交互、觸控交互的很好補充，能夠讓車主通過簡單的手勢和語音就能完成車內的交互任務，也是能夠增加交互趣味性、表達情感、傳達情緒的另一個自然交互方式。

常用的手勢：單指滑動（上下左右）、雙指滑動（左右）、五指抓取等。

HMI的交互手勢不同于手機和IPAD，手機和IPAD握在手里，左右手都可以操作，多指組合的可能性也多，而HMI的手勢定義，更多的是需要滿足駕駛員的使用場景，屏幕是固定在車上的，要規避掉一些不方便的手勢。

比如雙指往上滑動就很不方便，向上推不靈活，也有阻力。

五、六大系統的開源地址

1. 阿里 Alios 開放平臺

https://miniapp.alios.cn/index#/document

2. 百度車載生態開放平臺

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

3. 騰訊-車載小場景

4. 谷歌駕駛

https://developers.google.com/cars/design/design-foundations

5. 蘋果 Apple Car Play

https://www.apple.com.cn/ios/carplay/

6. 華為車機三方應用交互設計規范

https://developer.huawei.com/consumer/cn/doc/50902

六、HMI的視覺設計開眼

?

#專欄作家#

郝小七，微信公眾號：七醬設計筆記，人人都是產品經理專欄作家。蜻蜓FM高級UI設計師，5年工作經驗。專注于體驗設計，歡迎各位同學一起交流。

本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 pexels，基于 CC0 協議。