HMI交互設計詳解(下)

3 評論 12449 瀏覽 65 收藏 23 分鐘

編輯導語:伴隨著研發技術的進步,人車交互也變得越來越高效。這篇文章講述了車內常用的幾種交互模式,以及交互中的內容排版和信息呈現,多任務處理、車載交互層級、選項數目和反饋的定義等內容。一起來看看吧!

一、高效的交互方式

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

1. 多模態交互

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

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

2. 拋出一個問題??????

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

3. 常用的交互方式

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

(1)硬按鍵交互方式

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

(2)觸控交互方式

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

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

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

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

滑動交互方式:負一屏、首頁功能卡片、所有包含進度條(音樂、視屏、在線電臺、音量、顯示亮度、空調風量、溫度等)、列表類型、空調風向、車模轉動等

長按交互方式:選中編輯 、輸入法中的部分按鍵

雙擊交互方式:導航地圖、圖片放大

單/雙手指拖拽:單 ?? 可編輯狀態觸發后改變位置, 雙 ?? 圖片的縮放、導航地圖的縮放

(3)語音交互方式

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

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

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

用戶:“導航到最近的停車場?!?/p>

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

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

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

其他場景:音樂、電話、空調模塊

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

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

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

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

(4)手勢交互方式

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

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

4. 最后總結

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

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

二、交互中的內容排版和信息呈現

1. 交互中內容排版

在駕駛過程中,用戶大部分精力用在于聚焦駕駛行為上,用戶只能抽取僅5%左右的精力與時間來操控車載。因此也就決定了車載系統的信息布局,都必須在極短的時間內以最好的方式呈現。

而如果用戶沒有在時間內完成操作任務,要么用戶選擇放棄、重新再來,要么用戶花費更多時間和精力,但這樣駕駛的危險系數會成倍增長。

2. 提高操作的效率

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

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

3. 通用的信息布局

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

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

4. 交互中文案

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

(1)傳達信息明確清晰

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

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

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

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

(2)文案簡潔明了

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

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

(3)一致性

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

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

(4)主次分明

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

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

(5)形成閉環

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

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

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

三、多任務處理

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

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

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

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

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

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

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

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

四、車載交互層級

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

1. 車機使用功能的頻率

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

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

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

下面就拿電話舉例子:

2. 電話模塊

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

第一步,打開電話功能。

第二步,點擊聯系人列表。

第三步,滑動列表找到“Z”開頭的,進行撥打。

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

如果是帶語音搜索聯系人:

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

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

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

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

五、選項數目

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

舉一個導航的案例:

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

再來一個實戰例子:

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

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

六、反饋的定義

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

1. 視覺反饋

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

2. 觸控反饋

汽車操控界面的觸覺反饋機制,實質上是人與操控界面進行信息交換。

用戶通過手指點觸摸屏進行輸入操作,操控界面系統對輸入信息進行處理和存儲,憑借顯示屏呈現給用戶。而信息的傳遞是借助圖形信息這個媒介,經由人的視覺感知系統完成對視覺信息的識別和再加工,并對信息進行分類處理,如空間、時間、顏色、形狀等。

而視覺大腦皮層對相匹配的視覺信息加工,會在人的腦海里形成短期和長期記憶,最終對人的操作形成觸覺反饋機制。上述的整個信息處理過程就是人機交互過程,它是人行為對大腦里的視覺和觸覺信息的反饋過程。

3. 語音反饋

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

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

 

作者:設計界的影帝

本文由@設計界的影帝 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議嗎

專欄作家

設計界的影帝,微信公眾號:king設計研究所,人人都是產品經理專欄作家。專注于車載HMI領域,想讓更多的設計和關注到這個行業,將自己所學到、看到的知識都通過以文章形式展現給大家看。

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

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 可以加您微信深入了解一下嗎

    來自浙江 回復
  2. 推薦這文章真不錯,干貨滿滿,有趣又有料,例子多多,簡單易懂,感謝,收藏了!

    來自廣東 回復
  3. Get到了,就差一輛瑪莎拉蒂哈哈哈,讓我用這文章的理論用于實踐!哈哈哈哈

    來自廣東 回復