HMI交互設計詳解(下)
編輯導語:伴隨著研發技術的進步,人車交互也變得越來越高效。這篇文章講述了車內常用的幾種交互模式,以及交互中的內容排版和信息呈現,多任務處理、車載交互層級、選項數目和反饋的定義等內容。一起來看看吧!
一、高效的交互方式
再講到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協議。
可以加您微信深入了解一下嗎
推薦這文章真不錯,干貨滿滿,有趣又有料,例子多多,簡單易懂,感謝,收藏了!
Get到了,就差一輛瑪莎拉蒂哈哈哈,讓我用這文章的理論用于實踐!哈哈哈哈