編輯導(dǎo)讀：HMI是“人機(jī)接口”的縮寫，也叫人機(jī)界面，凡參與人機(jī)信息交流的領(lǐng)域都存在著人機(jī)界面。本文以汽車場(chǎng)景為例，分析其HMI交互設(shè)計(jì)，希望對(duì)你有幫助。

本文章會(huì)涉及到一些專業(yè)術(shù)語(yǔ)，我會(huì)詳細(xì)給大家講解，如還有疑問(wèn)就給我留言討論啦，我可是一個(gè)顏值和才華并存的知識(shí)博主，哈哈哈 開玩笑?。

智慧城市的建設(shè)趨勢(shì)越來(lái)越顯著，政府對(duì)于汽車智能化、信息化發(fā)展非常重視，汽車駕駛體驗(yàn)感與個(gè)性化的設(shè)計(jì)也會(huì)成為我們對(duì)于汽車選購(gòu)的參考和方向，自從人們對(duì)于用戶體驗(yàn)的重視，人機(jī)交互設(shè)計(jì)工作內(nèi)容也成為重要環(huán)節(jié)。

再談到HMI交互之前先給大家拔一下笨蛋栓，我們做的交互場(chǎng)景是有車輛行駛的，所以首先是要考慮安全因素，美觀其次，因此在特殊環(huán)境下操作車載系統(tǒng)，我們無(wú)法用傳統(tǒng)移動(dòng)端沉浸式的設(shè)計(jì)思維來(lái)設(shè)計(jì)車載的界面與功能，需要放下所謂的美學(xué)，緊扣實(shí)際場(chǎng)景下的交互方式與用戶需求來(lái)設(shè)計(jì)，因?yàn)樵跇O短時(shí)間內(nèi)導(dǎo)致我們必須對(duì)所有可能用到的功能入口一步即達(dá)，對(duì)信息的布局必須做到一眼即見。

尤其是UI設(shè)計(jì)師轉(zhuǎn)交互崗的時(shí)候，第一想法就是怎么把設(shè)計(jì)做好看，然后再去反推交互，在很多項(xiàng)目緊急的時(shí)候我們就是這么干的（因?yàn)槲覀冺?xiàng)目已經(jīng)做了很多，就避免那些錯(cuò)誤）剛?cè)胄械脑O(shè)計(jì)師可千萬(wàn)別這么干奧，謹(jǐn)記！??！

一、粉絲的疑問(wèn) ? ?？

之前很多小伙伴會(huì)經(jīng)常問(wèn)到我怎么做HMI設(shè)計(jì)呀？參考那里去找呀？HMI的用戶體驗(yàn)該怎么去做？ 競(jìng)品分析怎么做？等等好多好多問(wèn)題呀?? ，我也會(huì)經(jīng)常和同行進(jìn)行多交流學(xué)習(xí)。

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

二、車內(nèi)的顯示屏分布

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

1. 儀表盤

當(dāng)今純液晶屏的儀表盤占市場(chǎng)主導(dǎo)地位，純機(jī)械、燈顯、段碼將退出歷史舞臺(tái)。我這邊就不介紹儀表盤的發(fā)展歷史了，如果你們感興趣，就告訴我，我在安排小文章。

2. HUD

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

3. 娛樂(lè)屏幕

后排娛樂(lè)屏更像是一個(gè)平板，主要功能點(diǎn)為視頻、音樂(lè)、游戲等等，幫助后排乘客打發(fā)時(shí)間，所以后排的娛樂(lè)系統(tǒng)就是為娛樂(lè)而生，后排乘客在互不干擾的情況下觀看各自喜愛的視頻影片，體驗(yàn)感覺還是蠻好的。

三、交互基礎(chǔ)內(nèi)容

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

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

1. 交互場(chǎng)景

在不同運(yùn)用場(chǎng)景下，交互方式也會(huì)有所不同，比如靜止?fàn)顟B(tài)、駕駛中（這是關(guān)于駕駛位置的場(chǎng)景），還有一些關(guān)于環(huán)境和駕駛中的狀態(tài)都要考慮進(jìn)去（晴天、雨天、下雪、大霧、超速、疲勞等），都需要細(xì)致的定義，第一考慮要素就是安全駕駛，不注重安全的交互設(shè)計(jì)都是耍流氓。

四、車載交互“三秒設(shè)計(jì)”原則

第一秒 ?? 視覺

用戶在0-1s的時(shí)間內(nèi)，對(duì)中控進(jìn)行掃視，在這個(gè)過(guò)程中，中控屏幕重要信息與功能入口必須能被用戶在這個(gè)時(shí)間以內(nèi)發(fā)現(xiàn)，這邊就可以通過(guò)大小、顏色、在屏幕中的位置，后期可以通過(guò)眼動(dòng)儀來(lái)進(jìn)行可用性測(cè)試，最后可以適當(dāng)調(diào)整，達(dá)到安全駕駛標(biāo)準(zhǔn)。

注意點(diǎn)：

1.? 不可以讓用戶多次將視角中心移動(dòng)到中控屏幕，來(lái)查看內(nèi)容

2.? 不可以讓用戶花費(fèi)過(guò)多的時(shí)間來(lái)搜尋屏幕上的信息

第二秒 ?? 行為

用戶在交互行為過(guò)程中 ?Start ～ End 結(jié)束，時(shí)間不能超過(guò)2秒，2秒已經(jīng)比較危險(xiǎn)了，1秒內(nèi)為最佳交互時(shí)間，這塊內(nèi)容下面會(huì)有詳細(xì)講解。

注意點(diǎn)：

1.? ?避免讓用戶點(diǎn)擊兩次才能完成，功能要一步即達(dá)

2.? ?不要讓用戶進(jìn)行滑動(dòng)或長(zhǎng)按的交互方式

第三秒 ?? 反饋

在交互行為過(guò)后，在第三秒則必須要有反饋內(nèi)容，比如明確的點(diǎn)擊效果反饋，可通過(guò)聲音或者界面動(dòng)畫，一旦超過(guò)3秒后的動(dòng)畫，反饋將脫離用戶的有效感知時(shí)間，將不能很好的體現(xiàn)反饋本身的價(jià)值。

注意點(diǎn)：

1.屏幕顯示內(nèi)容變化反饋需要明顯的引導(dǎo)動(dòng)畫轉(zhuǎn)場(chǎng)支撐

2.去掉過(guò)多裝飾性的動(dòng)畫，別整那些花里胡哨的動(dòng)畫效果，讓反饋效果更加聚焦，車載的動(dòng)畫效果和移動(dòng)端是不一樣的

按照三秒原則設(shè)計(jì)，車載系統(tǒng)才可以符合可用性。這塊內(nèi)容先普及一下大家，這次先以介紹交互內(nèi)容為主，車載視覺、動(dòng)效內(nèi)容再后續(xù)跟進(jìn)輸出文章。

五、交互定義詳解

我們就直接奔入本章節(jié)的主題吧，本文我會(huì)從八個(gè)小點(diǎn)出發(fā)，詳細(xì)的講解車載的交互內(nèi)容。

1. 單次交互操作時(shí)間

直接拋出結(jié)果 ?? 單次交互操作動(dòng)作不能超過(guò)2秒（1秒內(nèi)為最佳）在前面我們也簡(jiǎn)單的提到了交互的行為內(nèi)容，如果一個(gè)在行駛過(guò)程中需要交互操作的動(dòng)作 用時(shí)2-3秒就已經(jīng)是一個(gè)危險(xiǎn)狀況。

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

以此計(jì)算當(dāng)高速路上行駛車速100-120km/h 可想而知，極其危險(xiǎn)，可能車毀人亡，所以我們呼吁安全駕駛，謹(jǐn)慎變道尾，保護(hù)自己也是保護(hù)他人。

經(jīng)過(guò)實(shí)際調(diào)研過(guò)，用戶將視線從路面移動(dòng)到車內(nèi)屏幕上，這個(gè)過(guò)程通常需要 0.5-1.5 秒對(duì)焦，所以可交互的內(nèi)容需要明確被標(biāo)出來(lái)，與不可交互內(nèi)容保持足夠的對(duì)比。

統(tǒng)計(jì)下來(lái)平均每次操作，即視線與注意力專注在車載上的時(shí)間，無(wú)法超過(guò)三秒。事實(shí)上，當(dāng)進(jìn)入第三秒時(shí)，已不得不需要利用余光開始注意前方路況了。

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

小插曲：

這邊就有人會(huì)說(shuō)了現(xiàn)在都有緊急剎車（AEB）系統(tǒng)了，那我們簡(jiǎn)單介紹一下，AEB（Autonomous Emergency Braking，自主緊急制動(dòng)）通過(guò)傳感器(攝像頭、雷達(dá)、激光等)識(shí)別車輛前方障礙物，當(dāng)車速與障礙物距離低于預(yù)設(shè)安全值時(shí)，制動(dòng)系統(tǒng)介入，避免碰撞，AEB是用來(lái)幫助駕駛員避免或減輕碰撞事故的系統(tǒng)。

AEB系統(tǒng)主要干兩件事：

1. 及早識(shí)別緊急情況并警告駕駛員
2. 如果駕駛員沒有反應(yīng)，系統(tǒng)會(huì)通過(guò)降低碰撞速度來(lái)避免碰撞，或減少無(wú)法避免的碰撞的嚴(yán)重程度。

后續(xù)關(guān)于ADAS輔助駕駛這塊我也會(huì)單獨(dú)出一篇文章供大家了解。

實(shí)車可用性測(cè)試評(píng)估：

現(xiàn)在我們?cè)俳Y(jié)合看一下實(shí)際中的實(shí)車在每一個(gè)交互中體驗(yàn)如何，是否存在危險(xiǎn)，這是Thoughtworks機(jī)構(gòu)對(duì)特斯拉做的一個(gè)可用性評(píng)估評(píng)分：

2. 操作熱區(qū)和交互熱區(qū)

操作熱區(qū)：

駕駛場(chǎng)景的特殊性，駕駛員只能用距離中控屏最近的一只手去操作（為什么我不說(shuō)用右手去操作，因?yàn)槲以谧龊Ｍ忭?xiàng)目的時(shí)候，主駕駛位置的是在右邊，那么只能用左手來(lái)操作屏幕了）

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

以離屏幕最近的一只手臂，左駕駛艙為案例：手肘部位為中心點(diǎn)畫圈，分為三個(gè)等級(jí)，最佳觸控區(qū)、易觸控區(qū)、較難觸控區(qū)。

下面我們拿實(shí)際車載案例 來(lái)給大家說(shuō)明：

針對(duì)觸控交互方式，屏幕區(qū)域內(nèi)的觸控操作便利性，以駕駛員為中心向右逐漸衰減，重要的功能操作應(yīng)放置在最佳觸控交互區(qū)域內(nèi)。

交互熱區(qū)：

再考慮這塊內(nèi)容的時(shí)候，我就有一個(gè)疑問(wèn)，這塊內(nèi)容是交互設(shè)計(jì)師來(lái)定義or設(shè)計(jì)師來(lái)定義？不管了我就要做全棧的人我要的就是啥都可干 ??????

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

增加交互熱區(qū)，是為了降低操作的難度，用戶在駕駛場(chǎng)景下的注意力和活動(dòng)范圍有限，進(jìn)行精準(zhǔn)點(diǎn)擊和小區(qū)域觸點(diǎn)操作需要付出更多的操作成本，且會(huì)分散駕駛注意力，需要更大面積的操控?zé)釁^(qū)來(lái)承載觸控行為，保證核心操作在不同場(chǎng)景下的易用性，下面舉一些案列和大家說(shuō)明（上一期文章只是簡(jiǎn)略帶過(guò)一下圖標(biāo)的點(diǎn)擊區(qū)域大小）

案列1:音樂(lè)控件的操作熱區(qū)

如何從音樂(lè)小控件進(jìn)入音樂(lè)詳情頁(yè)面？

• 點(diǎn)擊專輯封面
• 點(diǎn)擊信息內(nèi)容
• 專輯封面+信息內(nèi)容 組合

根據(jù)上面的上面結(jié)論 ? ?? ? 組合增加操作區(qū)域才是最佳選擇

案列2:編輯狀態(tài)勾選的操作熱區(qū)

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

• 點(diǎn)擊勾選框
• 點(diǎn)擊勾選框+專輯封面+信息

當(dāng)然 選擇方案二

總結(jié)一下：為了給用戶帶來(lái)良好的駕駛體驗(yàn)感，我們就應(yīng)該多去考慮增大觸控區(qū)域，在某些某塊內(nèi)容中盡量減少精確操作，多做一些模糊操作，大白話的意思 ?? 大致就是這個(gè)區(qū)域內(nèi)的都可以操作。

還有一個(gè)小注意點(diǎn)需要謹(jǐn)記：

在對(duì)接開發(fā)的時(shí)候，對(duì)于這塊內(nèi)容一定要和他交代清楚，不然他就不會(huì)以組合來(lái)寫操作熱區(qū)了。

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

下期文章預(yù)告：HMI交互設(shè)計(jì)詳解（下）

作者：設(shè)計(jì)界的影帝

本文由@設(shè)計(jì)界的影帝 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議嗎