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

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

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

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

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

一、粉絲的疑問 ? ?？

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

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

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

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

1. 儀表盤

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

2. HUD

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

3. 娛樂屏幕

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

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

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

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

1. 交互場景

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

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

第一秒 ?? 視覺

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

注意點(diǎn)：

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

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

第二秒 ?? 行為

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

注意點(diǎn)：

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

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

第三秒 ?? 反饋

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

注意點(diǎn)：

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

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

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

五、交互定義詳解

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

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

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

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

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

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

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

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

小插曲：

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

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

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

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

實(shí)車可用性測試評估：

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

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

操作熱區(qū)：

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

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

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

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

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

交互熱區(qū)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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