熱評 Summer_夏沫汐

有一個小問題 那個車機提示應(yīng)該在判斷車輛狀態(tài)的前提下給用戶反饋 還是要避免說明簡單導(dǎo)致類似蔚來長安街升級那種尷尬的事情

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

前言:

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

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

1. 粉絲的疑問 ?

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

2. 車內(nèi)的顯示屏分布

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

儀表盤

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

HUD

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

娛樂屏幕

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

3. 交互基礎(chǔ)內(nèi)容

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

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

交互場景

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

4. 車載交互“三秒設(shè)計”原則

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

第一秒 視覺

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

注意點:

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

第二秒 行為

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

注意點:

  • 避免讓用戶點擊兩次才能完成,功能要一步即達(dá)
  • 不要讓用戶進(jìn)行滑動或長按的交互方式

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

第三秒 反饋

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

注意點:

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

交互定義詳解

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

1. 單次交互操作時間

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

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

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

小插曲:

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

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

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

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

實車可用性測試評估

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

操作熱區(qū)

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

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

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

交互熱區(qū)

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

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

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

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

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

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

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

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

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

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

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

3. 高效的交互方式

再講到 HMI 高效的交互方式之前,我們還需要了解一下多模態(tài)交互。

多模態(tài)交互

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

拋出一個問題?

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

常用的交互方式

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

硬按鍵交互方式

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

觸控交互方式:

當(dāng)液晶大屏的出現(xiàn),使其交互方式也隨之改變,下面展示一下大屏幕車內(nèi)

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

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

  • 滑動交互方式:負(fù)一屏、首頁功能卡片、所有包含進(jìn)度條(音樂、視屏、在線電臺、音量、顯示亮度、空調(diào)風(fēng)量、溫度等)、列表類型、空調(diào)風(fēng)向、車模轉(zhuǎn)動等
  • 長按交互方式:選中編輯 、輸入法中的部分按鍵
  • 雙擊交互方式:導(dǎo)航地圖、圖片放大
  • 單/雙手指拖拽:單手可編輯狀態(tài)觸發(fā)后改變位置, 雙手控制圖片的縮放、導(dǎo)航地圖的縮放

語音交互方式

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

在車載語音交互中最為常用的非導(dǎo)航莫屬了,那就以導(dǎo)航為例:

第一步:語音輸入所需要去的目的地信息,如果不知道具體地址信息的話可以模糊導(dǎo)航

用戶:“導(dǎo)航到最近的停車場”

第二步:根據(jù)用戶所給的語音輸入導(dǎo)航需求,系統(tǒng)匹配導(dǎo)航目的地,讓用戶進(jìn)行選擇所需要目的地,

語音助手:“選擇第幾個呢?”

(先吐槽一下:有的產(chǎn)品經(jīng)理就會在語音助手對話下功夫,搞的很復(fù)雜,添加語音助手昵稱或者多說一下語氣助詞)以上面這個例子添加內(nèi)容:“siri 為您已經(jīng)找到多個停車場,需要選擇第幾個呢?”這邊只是舉一個個例,只希望大家能夠簡化內(nèi)容)

其他場景:音樂、電話、空調(diào)模塊(這邊查詢一下 之前語音文檔 補充完整)

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

電話:“打電話給 XXX”、“打開聯(lián)系人”、“打開通訊錄”、“查找 XXX”

空調(diào):“關(guān)閉、開啟空調(diào)”、“溫度高一點”、“溫度低一點”、“打開內(nèi)/外循環(huán)”、“風(fēng)量大一點”、“風(fēng)量小一點”等

上述語音內(nèi)容講完,肯定會有人說我溫度想要精確調(diào)到某個溫度,是不是還要說很多遍“溫度低一點”,我想說的是現(xiàn)在已經(jīng)有研發(fā)技術(shù)可以直接編寫代碼,讓語音可以控制車內(nèi)空調(diào),達(dá)到精確溫度了,這就是程序員的魅力所在,反正我是被吸引了。

手勢交互方式

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

最后總結(jié):

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

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

4. 交互中的內(nèi)容排版和信息呈現(xiàn)

交互中內(nèi)容排版

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

提高操作的效率

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

通用的信息布局

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

在上訴三秒原則中的視覺掃視,所以頁面內(nèi)信息要聚集,做到集中查看,確保頁面內(nèi)容可準(zhǔn)確傳遞出當(dāng)前進(jìn)行中任務(wù)的相關(guān)內(nèi)容信息,讓用戶能在 1-2 秒內(nèi)完成對信息的掌握,并快速回到正常的駕駛狀態(tài)。

交互中文案:

對于交互文案的定義一定要短,簡明易懂,保持信息的最新狀態(tài)和可瀏覽性;

1/傳達(dá)信息明確清晰

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

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

方案 1:彈窗信息內(nèi)容為“登錄失敗”

方案 2:彈窗信息內(nèi)容為“登錄失敗”,并附加是什么原因才導(dǎo)致失敗的

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

2/文案簡潔明了

身處用戶的角度你會發(fā)現(xiàn),很多用戶是不看彈窗內(nèi)容的,看到彈窗上有按鈕就馬上點擊按鈕,所以彈窗中的文案,越簡潔越 OK

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

3/一致性

要確保產(chǎn)品的一致性,相似的文案,表達(dá)方式要一致。

比如:導(dǎo)航中的按鈕“開始導(dǎo)航” “修改默認(rèn)” 動詞+名詞,就不能變成名詞+動詞

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

4/主次分明

每段文字都會有主次分明,若能做出區(qū)分,將更好地幫助用戶理解文案內(nèi)容。

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

5/形成閉環(huán)

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

實現(xiàn)方案:我們交互方案的定義下面就是“知道了”

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

5. 多任務(wù)處理

高效的任務(wù)流程功能設(shè)計應(yīng)以提高任務(wù)完成成功率為目標(biāo),減少認(rèn)知和操作的成本,避免設(shè)計過于復(fù)雜的信息架構(gòu)和功能流程路徑,且所有功能需有固定且完整的進(jìn)入和退出路徑。

在什么場景下才會出現(xiàn)多任務(wù)處理,我們試想一下,在導(dǎo)航中播放著車載應(yīng)用中的音樂、電臺,還有導(dǎo)航中來電話,得接聽,后續(xù)我們還增加了導(dǎo)航中組隊出行功能;音樂、電臺、電話、組隊在展開分屏后,可以進(jìn)行切換,還是以做到,我們開發(fā)暫時還不能做出隨意拖拽的(項目時間緊張)所以在體驗這一塊就打了折扣。

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

按照現(xiàn)階段版本功能點,只有在導(dǎo)航模塊中才會出現(xiàn)多任務(wù)處理狀態(tài),上訴已經(jīng)講過幾個功能的切換,但是我們分屏方案還是 2 年前,從未修改,展示一下之前的交互內(nèi)容(和斑馬以前分屏差不多)

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

由于多了這個內(nèi)容,右邊占據(jù)的空間,縮小了左邊導(dǎo)航的內(nèi)容,一旦導(dǎo)航出現(xiàn)路標(biāo)、路況、導(dǎo)航線路圖、縮放地圖按鈕等等,導(dǎo)航頁面需要承載的內(nèi)容偏多。

按照這個方案的話可能會干擾駕駛?cè)蝿?wù),后續(xù)我們設(shè)計師內(nèi)部出了一個方案,叫做小控件,可以隨意拖動,而且暫用控件比之前方案小很多,下面我就給大家展示一下這個方案的 UE 雛形。

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

最終這個 方案是得到了領(lǐng)導(dǎo)的認(rèn)可,但由于開發(fā)成本過高,如果編寫的話,需要將這個新的方案編入下一個 IOT 升級包里面。

結(jié)論:

不管在什么場景下最高優(yōu)先級的是駕駛?cè)蝿?wù),任何多任務(wù)處理都要考慮對駕駛的影響。

6. 車載交互層級

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

車機使用功能的頻率

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

使用頻率較低:系統(tǒng)設(shè)置、第三方 APP

使用頻率較高:音樂、電臺、空調(diào)、電話、倒車影像、導(dǎo)航

下面就拿電話舉例子:

電話模塊:

傳統(tǒng)車機沒有語音的狀態(tài),需要給 “周杰倫” 打電話 。

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

這么看來傳統(tǒng)的車機也就 2 層就可以到達(dá)聯(lián)系人并可以撥打

如果是帶語音搜索聯(lián)系人

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

PS:如果可以直接說全名并且沒有重復(fù)就直接進(jìn)入通話模式 一步即達(dá)

如果聯(lián)系人中同名同姓 or 沒說全稱只是說了姓、名 、備注的名稱,則需要進(jìn)行第二步

第二步 選擇搜索后的結(jié)果 再進(jìn)行通話

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

7. 選項數(shù)目

盡可能的減少選項數(shù)目,在駕駛過程中進(jìn)行翻頁操作是很危險的。

舉一個導(dǎo)航的案列:

在導(dǎo)航的時候語音輸入需要到達(dá)的目的地, 最后顯示出來的「信息」該展示多少為合適 ?

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

再來一個實戰(zhàn)例子:

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

8. 反饋的定義

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

視覺反饋

直接舉例說明:

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

觸控反饋

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

語音反饋

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

車載設(shè)計萬字干貨!超全面的 HMI 交互設(shè)計指南

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

下期文章預(yù)告:HMI 競品分析

收藏 267
點贊 64

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。