車載設計萬字干貨！超全面的 HMI 交互設計指南

哈嘍好久不見，文章鴿了好久，最近項目快要 sop，才有空騰出時間輸出點行業文章，這次所講內容還是圍繞 HMI 中控交互設計為主。

前言：

本文章會涉及到一些專業術語，我會詳細給大家講解，如還有疑問就給我留言討論啦，我可是一個顏值和才華并存的知識博主，哈哈哈，開玩笑。

智慧城市的建設趨勢越來越顯著，政府對于汽車智能化、信息化發展非常重視，汽車駕駛體驗感與個性化的設計也會成為我們對于汽車選購的參考和方向，自從人們對于用戶體驗的重視，人機交互設計工作內容也成為重要環節。

再談到 HMI 交互之前先給大家拔一下傻逼栓，我們做的交互場景是有車輛行駛的，所以首先是要考慮安全因素，美觀其次，因此在特殊環境下操作車載系統，我們無法用傳統移動端沉浸式的設計思維來設計車載的界面與功能，需要放下所謂的美學，緊扣實際場景下的交互方式與用戶需求來設計，因為在極短時間內導致我們必須對所有可能用到的功能入口一步即達，對信息的布局必須做到一眼即見。

尤其是 UI 設計師轉交互崗的時候，第一想法就是怎么把設計做好看，然后再去反推交互，在很多項目緊急的時候我們就是這么干的（因為我們項目已經做了很多，就避免那些錯誤）剛入行的設計師可千萬別這么干奧，謹記！！！

1. 粉絲的疑問 ？

之前很多小伙伴會經常問到我怎么做 HMI 設計呀？參考那里去找呀？HMI 的用戶體驗該怎么去做？ 競品分析怎么做？等等好多好多問題呀 ，我也會經常和同行進行多交流學習。

我這邊的方法就是，多去參加車展、或者去預約門店進行試駕體驗，然后拍照就有素材，也可以去找一些車評人看他們視頻，對于車的功能測評，最后就是可以去各大車的官網去尋找素材，還有一點就是要和同行的小伙伴們一起探討、分享，如果實在不想找了，那大家就多多關注我唄，我收集很多資料，以后都可以分享給大家。

2. 車內的顯示屏分布

接下來我們簡單的介紹一下車內屏幕的類型，主駕駛前面的儀表盤、HUD 和中控屏幕，副駕駛和后排的娛樂屏幕。

儀表盤

當今純液晶屏的儀表盤占市場主導地位，純機械、燈顯、段碼將退出歷史舞臺。我這邊就不介紹儀表盤的發展歷史了，如果你們感興趣，就告訴我，我再安排小文章。

HUD

平視顯示器（Head Up Display），最早是航空器上的飛行輔助儀器，運用在戰斗機上，由于戰斗機上很多信息需要飛機駕駛員隨時查看，避免駕駛員低頭看儀表而分心，隨后又普及在民航客機上，由于 HUD 的方便性以及能夠提高飛行安全，這項技術后來也發展到汽車行業，汽車搭載的 HUD 抬頭數字顯示功能，是利用光學反射的原理，將重要的行駛信息胎壓、速度和轉速等信息投射到駕駛艙前段玻璃上面，在駕駛過程中不用分心看儀表盤，減輕眼睛的疲勞，給駕駛帶來便利和安全。

娛樂屏幕

后排娛樂屏更像是一個平板，主要功能點為視頻、音樂、游戲等等，幫助后排乘客打發時間，所以后排的娛樂系統就是為娛樂而生，后排乘客在互不干擾的情況下觀看各自喜愛的視頻影片，體驗感覺還是蠻好的。

3. 交互基礎內容

駕駛員和屏幕之間交互必須簡單，不分散注意力，并且易于中斷，因此駕駛員的注意力可以迅速回到道路上。

導致 HMI 的交互和其他移動端不同的交互方式，因素有很多，例如：操作區域的面積、主駕駛與屏幕的角度、位置、運用場景等等，也有共同特征比如可用性、易用性、用戶體驗流程之類的。

交互場景

在不同運用場景下，交互方式也會有所不同，比如靜止狀態、駕駛中（這是關于駕駛位置的場景），還有一些關于環境和駕駛中的狀態都要考慮進去（晴天、雨天、下雪、大霧、超速、疲勞等），都需要細致的定義，第一考慮要素就是安全駕駛，不注重安全的交互設計都是耍流氓。

4. 車載交互“三秒設計”原則

第一秒 視覺

用戶在 0-1s 的時間內，對中控進行掃視，在這個過程中，中控屏幕重要信息與功能入口必須能被用戶在這個時間以內發現，這邊就可以通過大小、顏色、在屏幕中的位置，后期可以通過眼動儀來進行可用性測試，最后可以適當調整，達到安全駕駛標準。

注意點：

• 不可以讓用戶多次將視角中心移動到中控屏幕，來查看內容
• 不可以讓用戶花費過多的時間來搜尋屏幕上的信息

第二秒 行為

用戶在交互行為過程中 Start～End 結束，時間不能超過 2 秒，2 秒已經比較危險了，1 秒內為最佳交互時間，這塊內容下面會有詳細講解。

注意點：

• 避免讓用戶點擊兩次才能完成，功能要一步即達
• 不要讓用戶進行滑動或長按的交互方式

第三秒 反饋

在交互行為過后，在第三秒則必須要有反饋內容，比如明確的點擊效果反饋，可通過聲音或者界面動畫，一旦超過 3 秒后的動畫，反饋將脫離用戶的有效感知時間，將不能很好的體現反饋本身的價值。

注意點：

• 屏幕顯示內容變化反饋需要明顯的引導動畫轉場支撐
• 去掉過多裝飾性的動畫，別整那些花里胡哨的動畫效果，讓反饋效果更加聚焦，車載的動畫效果和移動端是不一樣的

按照三秒原則設計，車載系統才可以符合可用性。這塊內容先普及一下大家，這次先以介紹交互內容為主，車載視覺、動效內容再后續跟進輸出文章。

交互定義詳解

我們就直接奔入本章節的主題吧，本文我會從八個小點出發，詳細的講解車載的交互內容。

1. 單次交互操作時間

直接拋出結果。單次交互操作動作不能超過 2 秒（1 秒內為最佳）在前面我們也簡單的提到了交互的行為內容，如果一個在行駛過程中需要交互操作的動作 用時 2-3 秒就已經是一個危險狀況。

為什么這么定義，假設一輛以 60km/h 的車速 如果 2-3s 盲開就會開出 35-50m，一旦需要急剎車那么剎車距離至少 15-20m

以此計算當高速路上行駛車速 100-120km/h 可想而知，極其危險，可能車毀人亡，所以我們呼吁安全駕駛，謹慎變道，保護自己也是保護他人。

經過實際調研過，用戶將視線從路面移動到車內屏幕上，這個過程通常需要 0.5-1.5 秒對焦，所以可交互的內容需要明確被標出來，與不可交互內容保持足夠的對比。統計下來平均每次操作，即視線與注意力專注在車載上的時間，無法超過三秒。事實上，當進入第三秒時，已不得不需要利用余光開始注意前方路況了。

因此，在三秒以內，無論是用戶第一次操作失敗，重新注意路況后，再重復操作，還是用戶持續操作直到任務完成，都是非常危險的行為，在這里，由于用戶試錯的成本非常巨大，也因此交互的設計與信息布局的設計都需要做到最極致。

小插曲：

這邊就有人會說了現在都有緊急剎車（AEB）系統了，那我們簡單介紹一下，AEB（Autonomous Emergency Braking，自主緊急制動）通過傳感器(攝像頭、雷達、激光等)識別車輛前方障礙物，當車速與障礙物距離低于預設安全值時，制動系統介入，避免碰撞，AEB 是用來幫助駕駛員避免或減輕碰撞事故的系統。

AEB 系統主要干兩件事：

• 及早識別緊急情況并警告駕駛員
• 如果駕駛員沒有反應，系統會通過降低碰撞速度來避免碰撞，或減少無法避免的碰撞的嚴重程度。

后續關于 ADAS 輔助駕駛這塊我也會單獨出一篇文章供大家了解。

實車可用性測試評估

現在我們再結合看一下實際中的實車在每一個交互中體驗如何，是否存在危險，這是 Thoughtworks 機構對特斯拉做的一個可用性評估評分：

2. 操作熱區和交互熱區

操作熱區

駕駛場景的特殊性，駕駛員只能用距離中控屏最近的一只手去操作（為什么我不說用右手去操作，因為我在做海外項目的時候，主駕駛位置的是在右邊，那么只能用左手來操作屏幕了）

這是全球駕駛位置不同的分布圖：

以離屏幕最近的一只手臂，左駕駛艙為案例：手肘部位為中心點畫圈，分為三個等級，最佳觸控區、易觸控區、較難觸控區。

下面我們拿實際車載案例 來給大家說明：

針對觸控交互方式，屏幕區域內的觸控操作便利性，以駕駛員為中心向右逐漸衰減，重要的功能操作應放置在最佳觸控交互區域內。

交互熱區

再考慮這塊內容的時候，我就有一個疑問，這塊內容是交互設計師來定義 or 設計師來定義？不管了我就要做全棧的人我要的就是啥都可干

在講交互熱區之前我們了解一下手指觸控內容，手指的觸摸為 12mm X 12mm，屏幕像素密度按 160dpi 來計算，可以換算成 76 x 76px 的屏幕元素尺寸，如果不懂計算的話可以查看我上一篇文章，在計算屏幕 ppi 和下面最小圖標尺寸計算方式都有。

增加交互熱區，是為了降低操作的難度，用戶在駕駛場景下的注意力和活動范圍有限，進行精準點擊和小區域觸點操作需要付出更多的操作成本，且會分散駕駛注意力，需要更大面積的操控熱區來承載觸控行為，保證核心操作在不同場景下的易用性，下面舉一些案例和大家說明。

案列 1:音樂控件的操作熱區

如何從音樂小控件進入音樂詳情頁面？

• 點擊專輯封面
• 點擊信息內容
• 專輯封面+信息內容 組合

根據上面的上面結論組合增加操作區域才是最佳選擇

案列 2:編輯狀態勾選的操作熱區

編輯狀態下，如何做到高效的勾選（我這邊都不用說，大家也都肯定知道如何定義了）

• 點擊勾選框
• 點擊勾選框+專輯封面+信息

當然選擇方案二

總結一下：為了給用戶帶來良好的駕駛體驗感，我們就應該多去考慮增大觸控區域，在某些某塊內容中盡量減少精確操作，多做一些模糊操作，大白話的意思大致就是這個區域內的都可以操作。

還有一個小注意點需要謹記：

在對接開發的時候，對于這塊內容一定要和他交代清楚，不然他就不會以組合來寫操作熱區了。

3. 高效的交互方式

再講到 HMI 高效的交互方式之前，我們還需要了解一下多模態交互。

多模態交互

“多模態交互”包括了視覺、聽覺、嗅覺、觸覺以及味覺等方面的感官交互，也就是通過眼睛、耳朵、鼻子、嘴巴以及皮膚觸摸實現，其技術應用在實際生活中也是圍繞這些感官進行設計，將多個感官的交互技術融合在一起，形成一種多模態的交互形式。

在車內所用到的交互，通過語音、觸覺、觸控、嗅覺、視覺、手勢、體感等多種交互，以更接近人和人之間交互的一種方式，使人車交互變得更加自然和輕松。

拋出一個問題？

什么交互方式才是算是高效的交互方式？什么樣子的交互才是王道？每個人都有每人的定義方法，我和很多設計師有談過這樣的話題，在這個話題最后我會給大家一個結論。

常用的交互方式

先介紹一下現在市場上車機中含有的交互方式，硬按鍵 / 觸控 / 語音 / 手勢

硬按鍵交互方式

在最初的原始車機，基本上都是通過硬按鍵來解決，都是成千上萬次的肌肉型記憶，才得已做起來那么的順暢，這個也有它的優點所在，下面展示一下硬按鍵的車內

觸控交互方式：

當液晶大屏的出現，使其交互方式也隨之改變，下面展示一下大屏幕車內

我們在駕駛車的過程中，點擊是最有效的交互方式就是點擊，長按、滑動、雙擊、單/雙手指拖拽等交互方式都會超過 2 秒的安全時間范圍，這樣極大的增加了操作難度系數和駕駛中的風險，其余操作方式可以用在非駕駛狀態中，如果有的功能無法通過觸控實現，那么下面即將提到語音交互。

講完上訴的交互方式，這下我們應該討論一些實質性的事情了，這些交互方式，該用在什么模塊，那些場景里面較為穩妥合適，趕緊坐上我的小火車要加速了 du~ du ~ du~ ...

點擊交互方式：按鈕、復選框的勾選、tab 欄目切換、icon 的點擊、搜索欄、控件類型等

• 滑動交互方式：負一屏、首頁功能卡片、所有包含進度條（音樂、視屏、在線電臺、音量、顯示亮度、空調風量、溫度等）、列表類型、空調風向、車模轉動等
• 長按交互方式：選中編輯 、輸入法中的部分按鍵
• 雙擊交互方式：導航地圖、圖片放大
• 單/雙手指拖拽：單手可編輯狀態觸發后改變位置， 雙手控制圖片的縮放、導航地圖的縮放

語音交互方式

語音交互是我最喜歡的交互之一，它可以盡量減少用戶的分心，可以安全駕駛

在車載語音交互中最為常用的非導航莫屬了，那就以導航為例：

第一步：語音輸入所需要去的目的地信息，如果不知道具體地址信息的話可以模糊導航

用戶：“導航到最近的停車場”

第二步：根據用戶所給的語音輸入導航需求，系統匹配導航目的地，讓用戶進行選擇所需要目的地，

語音助手：“選擇第幾個呢？”

（先吐槽一下：有的產品經理就會在語音助手對話下功夫，搞的很復雜，添加語音助手昵稱或者多說一下語氣助詞）以上面這個例子添加內容：“siri 為您已經找到多個停車場，需要選擇第幾個呢？”這邊只是舉一個個例，只希望大家能夠簡化內容）

其他場景：音樂、電話、空調模塊（這邊查詢一下 之前語音文檔 補充完整）

音樂：“我要聽 XXXXX”、“上一首”、 “下一首”、 “音量大一點” “音量小一點”

電話：“打電話給 XXX”、“打開聯系人”、“打開通訊錄”、“查找 XXX”

空調：“關閉、開啟空調”、“溫度高一點”、“溫度低一點”、“打開內/外循環”、“風量大一點”、“風量小一點”等

上述語音內容講完，肯定會有人說我溫度想要精確調到某個溫度，是不是還要說很多遍“溫度低一點”，我想說的是現在已經有研發技術可以直接編寫代碼，讓語音可以控制車內空調，達到精確溫度了，這就是程序員的魅力所在，反正我是被吸引了。

手勢交互方式

手勢交互，目前來說運用在汽車里，最大的優勢在于動作是相對的，無需精準操作（精準操作不僅要用手，還要靠眼睛尋找，很危險的）但是手勢最大的弊端就是操作會比較少（操作太多可能需要回憶操作方式，大腦開小差也很危險）所以在上述中有說道我是偏向于語音控制的選擇，我也比較看好這個。

利用車載手勢控制系統，通過不同的手勢組合，可以讓車主更加快捷地實現各種操作，例如：切換歌曲、接掛電話、調節音量大小、翻動列表頁、縮放地圖等，這些手勢有的也是從觸控手勢進行提煉出來的，有的也是結合生活習慣，比如閉嘴狀態，可以用在掛斷電話，那手勢就可以用握拳樣式。

最后總結：

駕駛之外的車內任務會不同程度地分散駕駛員的注意力，為保障行車安全，功能的操作設計需要考慮觸控、語音、圖像等多模交互相結合，并根據不同使用場景靈活組合輸入形式，也適當保留一些物理按鍵（硬按鍵）為用戶提供最自然的使用體驗。

還有一點我想說的是，如果我們設計師能夠參與到對于整車的交互設計定義的話，那就擁有更多話語權了，對于從雛形到落地都可以去定義這款車，不然等車已經定型，對于交互定義的內容就有了很多限制。

4. 交互中的內容排版和信息呈現

交互中內容排版

在駕駛過程中，用戶大部分精力用在于聚焦駕駛行為上，用戶只能抽取僅 5%左右的精力與時間來操控車載。因此也就決定了車載系統的信息布局都必須在極短的時間內以最好的方式呈現。而如果用戶沒有在這個時間以內完成操作任務，要么用戶選擇放棄，重新再來，要么用戶花費更多時間和精力，但這樣駕駛的危險系數會成倍增長。

提高操作的效率

功能的信息布局設計要充分考慮駕駛環境的特點，并結合具體場景，對界面信息進行合理布局。駕駛員在駕駛位置和屏幕、按鍵等之間的相對位置是比較固定的，所以要考慮到駕駛員容易看到，最容易觸及的區域，把最重要的信息放在這個區域內。

按照車載的操作熱區，在功能與入口的布局上盡可能的根據熱區分布來設計。功能布局盡量設計在離手最近的位置，縮短操作距離，將信息展示區放置在右側。

通用的信息布局

在不同的駕駛場景下，同一功能的信息布局應始終保持一致，避免因布局的變動對駕駛者造成困擾。相同或相似功能之間，頁面布局應具備通用性，幫助駕駛者通過位置聯想，減少記憶成本。

在上訴三秒原則中的視覺掃視，所以頁面內信息要聚集，做到集中查看，確保頁面內容可準確傳遞出當前進行中任務的相關內容信息，讓用戶能在 1-2 秒內完成對信息的掌握，并快速回到正常的駕駛狀態。

交互中文案：

對于交互文案的定義一定要短，簡明易懂，保持信息的最新狀態和可瀏覽性；

1/傳達信息明確清晰

對于交互文案不要含糊不清，不要有歧義。

比如：在車機中掃碼登錄酷我音樂，如果登錄失敗

方案 1:彈窗信息內容為“登錄失敗”

方案 2:彈窗信息內容為“登錄失敗”，并附加是什么原因才導致失敗的

2/文案簡潔明了

身處用戶的角度你會發現，很多用戶是不看彈窗內容的，看到彈窗上有按鈕就馬上點擊按鈕，所以彈窗中的文案，越簡潔越 OK

舉個例子：這兩個彈窗表達的意思相同，一個簡短直接說現狀和行動點，用戶能抓住重點，另外一個文案過長用戶不喜歡看，而且抓不住重點

3/一致性

要確保產品的一致性，相似的文案，表達方式要一致。

比如：導航中的按鈕“開始導航” “修改默認” 動詞+名詞，就不能變成名詞+動詞

4/主次分明

每段文字都會有主次分明，若能做出區分，將更好地幫助用戶理解文案內容。

在電話模塊通話記錄，我們一般查找需要打電話給某人，肯定第一時間是去找“XXX”然后才會再去核對手機號碼，所以在這信息，要做好主次的區分。

5/形成閉環

若文案不可避免會很長，那么有沒有讓用戶快捷操作的途徑呢？

實現方案：我們交互方案的定義下面就是“知道了”

我期待的：如果是我定義按鈕功能會將按鈕變成“去設置“（我會在下個版本更新的時候我會提出我的方案）

5. 多任務處理

高效的任務流程功能設計應以提高任務完成成功率為目標，減少認知和操作的成本，避免設計過于復雜的信息架構和功能流程路徑，且所有功能需有固定且完整的進入和退出路徑。

在什么場景下才會出現多任務處理，我們試想一下，在導航中播放著車載應用中的音樂、電臺，還有導航中來電話，得接聽，后續我們還增加了導航中組隊出行功能；音樂、電臺、電話、組隊在展開分屏后，可以進行切換，還是以做到，我們開發暫時還不能做出隨意拖拽的（項目時間緊張）所以在體驗這一塊就打了折扣。

我為什么要講隨意拖拽這個功能點？

按照現階段版本功能點，只有在導航模塊中才會出現多任務處理狀態，上訴已經講過幾個功能的切換，但是我們分屏方案還是 2 年前，從未修改，展示一下之前的交互內容（和斑馬以前分屏差不多）

由于多了這個內容，右邊占據的空間，縮小了左邊導航的內容，一旦導航出現路標、路況、導航線路圖、縮放地圖按鈕等等，導航頁面需要承載的內容偏多。

按照這個方案的話可能會干擾駕駛任務，后續我們設計師內部出了一個方案，叫做小控件，可以隨意拖動，而且暫用控件比之前方案小很多，下面我就給大家展示一下這個方案的 UE 雛形。

最終這個 方案是得到了領導的認可，但由于開發成本過高，如果編寫的話，需要將這個新的方案編入下一個 IOT 升級包里面。

結論：

不管在什么場景下最高優先級的是駕駛任務，任何多任務處理都要考慮對駕駛的影響。

6. 車載交互層級

避免在駕駛過程中常使用到的功能藏的很深，一定不能多于 3 個層級，否則對于駕駛安全會有很大的威脅。

車機使用功能的頻率

在車機中有哪些功能是駕駛過程中使用頻率較高、重要等級較高的，我們來看一下

使用頻率較低：系統設置、第三方 APP

使用頻率較高：音樂、電臺、空調、電話、倒車影像、導航

下面就拿電話舉例子：

電話模塊：

傳統車機沒有語音的狀態，需要給 “周杰倫” 打電話 。

• 第一步打開 電話功能
• 第二步打開 點擊聯系人 列表
• 第三步 滑動列表找到“Z”開頭的 進行撥打

這么看來傳統的車機也就 2 層就可以到達聯系人并可以撥打

如果是帶語音搜索聯系人

第一步 直接說：“打電話給周杰倫”

PS：如果可以直接說全名并且沒有重復就直接進入通話模式 一步即達

如果聯系人中同名同姓 or 沒說全稱只是說了姓、名 、備注的名稱，則需要進行第二步

第二步 選擇搜索后的結果 再進行通話

7. 選項數目

盡可能的減少選項數目，在駕駛過程中進行翻頁操作是很危險的。

舉一個導航的案列：

在導航的時候語音輸入需要到達的目的地， 最后顯示出來的「信息」該展示多少為合適 ？

再來一個實戰例子：

在做項目的時候，因為酷我音樂獲取到的資源很多，因為第三方而導致需要滑頁的情況是不可避免的，在橫屏設計上就會有很多的限制，由于高度有限，所以在滑動的時候最多就只能展示兩行音樂內容。

但在做豎屏方案的時候，情況就會好很多，給大家展示一下 豎屏中的交互稿子

8. 反饋的定義

從反饋輸出來看，以視覺、語音、觸控為主。為了安全，車機反饋一定要夠讓用戶清晰地理解任務的重要等級，而且要告訴用戶下一步應該怎么做。

視覺反饋

直接舉例說明：

比如汽車在倒車，當快要碰到后面墻壁的時候，就會發出警告聲音，并且在顯示屏上面也有會紅色警告標記，就是告訴駕駛者需要立刻響應。

觸控反饋

汽車操控界面的觸覺反饋機制，實質上是人與操控界面進行信息交換。用戶通過手指點觸摸屏進行輸入操作，操控界面系統對輸入信息進行處理和存儲，憑借顯示屏呈現給用戶。而信息的傳遞是借助圖形信息這個媒介，經由人的視覺感知系統完成對視覺信息的識別和再加工，并對信息進行分類處理，如空間、時間、顏色、形狀等。而視覺大腦皮層對相匹配的視覺信息加工，會在人的腦海里形成短期和長期記憶，最終對人的操作形成觸覺反饋機制。上述的整個信息處理過程就是人機交互過程，它是人行為對大腦里的視覺和觸覺信息的反饋過程。

語音反饋

語音交互是一個相對重要的一種交互方式，除了能夠讓用戶能夠體驗到語音操控功能，還能讓用戶輕松、自然的接受車機的反饋信息，下面根據置信度不同劃分反饋的類型和應用場景。

文章中如有不足之處，歡迎補充交流，我們下期見

下期文章預告：HMI 競品分析