設(shè)計(jì)要知道:HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

0 評論 12157 瀏覽 57 收藏 16 分鐘

編輯導(dǎo)語:汽車HMI設(shè)計(jì)不同于傳統(tǒng)互聯(lián)網(wǎng)的設(shè)計(jì)規(guī)范,在注重安全性的同時(shí),汽車HMI也有適配的UI、UX設(shè)計(jì)規(guī)則,提升用戶的視覺交互體驗(yàn)。本篇文章里,作者就總結(jié)了HMI的六大交互視覺設(shè)計(jì)原則,一起來看一下。

上篇講到《HMI設(shè)計(jì)必看!車載HMI的設(shè)計(jì)入門》開發(fā)流程,我們接下來的文章將深入拆分HMI的設(shè)計(jì)流程。HMI體驗(yàn)設(shè)計(jì)是整車體驗(yàn)的一部分,也變得越來越重要。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

剛開始進(jìn)入車載行業(yè)的同學(xué)都會存在一個(gè)誤區(qū),會拿互聯(lián)網(wǎng)那一套設(shè)計(jì)規(guī)范套路汽車HMI設(shè)計(jì),但其實(shí)汽車HMI有自己的設(shè)計(jì)原則和設(shè)計(jì)規(guī)范,以及美學(xué)理念。

汽車行業(yè)本身是一個(gè)有著強(qiáng)烈美學(xué)理念和設(shè)計(jì)規(guī)范的行業(yè),其實(shí)準(zhǔn)確地說應(yīng)該是汽車HMI中控設(shè)計(jì)是基于自身傳統(tǒng)規(guī)范,結(jié)合互聯(lián)網(wǎng)移動端和Web端的基礎(chǔ)上,慢慢形成了一種新的設(shè)計(jì)規(guī)范。加上龐大的行業(yè)從業(yè)者的外溢,互聯(lián)網(wǎng)的美學(xué)理念和設(shè)計(jì)規(guī)范,已經(jīng)在入侵進(jìn)來形成HMI設(shè)計(jì)新興的細(xì)分領(lǐng)域。

一、HMI的設(shè)計(jì)六大交互原則

說到HMI設(shè)計(jì),雖然所有人都很容易理解,HMI設(shè)計(jì)要考慮注重安全,需要在設(shè)計(jì)上適應(yīng)車載的使用場景。但是UI設(shè)計(jì)原則和UX設(shè)計(jì)原則很少有人系統(tǒng)性地回答過。對比原有的交互六大原則,適配到車載的場景下,提煉出六大交互設(shè)計(jì)原則。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

1. 安全性原則

HMI涉及到的載體都是汽車零部件中的安全件,HMI設(shè)計(jì)首先考慮的必須是以安全為第一導(dǎo)向, 所有顯示信息都應(yīng)該按照人機(jī)工程學(xué)進(jìn)行合理排布,按照駕駛者的行為習(xí)慣進(jìn)行設(shè)計(jì)。

與移動端的視覺顯示不同,HMI設(shè)計(jì)師需要注意除了基礎(chǔ)的視覺顯示規(guī)范外,還需格外注意與安全相關(guān)信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

2. 及時(shí)反饋原則

人的大腦每天通過五種感官接受外部信息的比例分別為:味覺1%;觸覺1.5%;嗅覺3.5%;聽覺11%;視覺83%。

時(shí)刻保障關(guān)鍵信息是最高優(yōu)先級的,保證在各種環(huán)境場景下具有良好的可見性和易讀性,無需駕駛員費(fèi)力尋找和識別。

隨著大屏、多屏化的發(fā)展趨勢,除了依賴視覺反饋,以及減少或避免觸摸屏的誤觸功能,聽覺和觸覺也可以輔助視覺反饋。

1)不同場景下的提示

除以上正常駕駛場景外,還有部分對特殊場景的提示,如油耗、故障、雨雪天、超速、疲勞等。

車載系統(tǒng)需要有能力面對復(fù)雜的應(yīng)用場景,處理需要更加智能,(比如復(fù)雜路況+不良天氣的提示),以及車內(nèi)的環(huán)境控制(如聲音、氣溫)需要更加敏感。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

車載系統(tǒng)的設(shè)計(jì)相比于移動端有著更明顯的約束,不論是從空間(使用環(huán)境)、時(shí)間(三秒原則)、行為(交互方式)、心智(心理訴求),都有著明顯獨(dú)特的場景和特點(diǎn),要做好車載系統(tǒng)設(shè)計(jì),我們需要有豐富的同理心以及親身體驗(yàn)并反復(fù)驗(yàn)證設(shè)計(jì)。

2)信息獲取效率

同樣,現(xiàn)在的智能汽車,信息呈現(xiàn)的方式,主要也還是視覺為主,聽覺為輔。在還沒有完全實(shí)現(xiàn)自動駕駛前,信息呈現(xiàn)層級保持不變。

在汽車行駛的過程中當(dāng)中最高優(yōu)先級是視覺,時(shí)刻要觀察道路,查看導(dǎo)航。聽覺輔助也是很有必要考慮的場景,通過語音反饋司機(jī)需要獲取的信息,能讓司機(jī)盡量保持視覺焦點(diǎn)在路況上。多場景的融合考慮信息獲取的效率,能減少在開車過程中的安全隱患。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

3. 完整性原則

將頁面信息根據(jù)某些關(guān)聯(lián)性,分區(qū)塊進(jìn)行顯示,這將有助于用戶更容易的建立信息位置記憶,用極少量的時(shí)間查看車輛狀態(tài),減少搜索信息帶來的注意力分散,保障駕駛安全。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

4. 簡單學(xué)習(xí)原則

面對C端用戶,設(shè)計(jì)師要考慮盡最大可能使用符合用戶習(xí)慣交互方式,減少學(xué)習(xí)和適應(yīng),讓駕駛員更有安全感和便捷的操作。

如果交互界面改變了,用戶極有可能必須從頭開始學(xué)習(xí)一些基本操作。在市場競爭壓力這么大的情況下,用戶很容易就轉(zhuǎn)向自己接受程度高的產(chǎn)品。

隨著屏幕越做越大,需要駕駛員操作的功能也越來越多,所以駕駛員會因?yàn)閺?fù)雜操作,面臨交通路況擁擠的情況下的額外壓力。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

5. 信息可視化原則

盡可能地采用圖像化/擬物化風(fēng)格,避免或減少使用復(fù)雜的、過于專業(yè)的、技術(shù)性的圖標(biāo)和術(shù)語。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

6. 情感化原則

馬斯洛需求指出,人們需要動力實(shí)現(xiàn)某些需求,有些需求優(yōu)先于其他需求,我們當(dāng)下在滿足基礎(chǔ)需求后需要更高階的需求。

情感化設(shè)計(jì)是用戶體驗(yàn)和需求金字塔的最高層級,情感化需求也是必然的需求。在移動端,情感化的體現(xiàn)主要還是視覺層面,比如加載過程中的動效、缺省頁的插畫、異常狀態(tài)的提示等,還有就是和品牌的結(jié)合,增加用戶對品牌的認(rèn)知。

而對于汽車而言,它是一個(gè)空間,就靠屏幕里的視覺元素是遠(yuǎn)遠(yuǎn)不夠的,應(yīng)該從整車的角度去分析,通過五感(視、聽、觸、嗅、知)創(chuàng)造更豐富的全局體驗(yàn),比如可以根據(jù)自己的駕駛需求和個(gè)人行為習(xí)慣,自定義氛圍燈、香氛、語音等。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

汽車IP

汽車IP用虛擬的人物語音來扮演管家的角色,功能包括了記錄車主的駕駛習(xí)慣,不斷優(yōu)化程序來契合車主習(xí)慣,讓車主有更好的駕駛體驗(yàn)。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

二、HMI視覺設(shè)計(jì)五大元素

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

1. 顏色

車載的美學(xué)他們大多是深色的,金屬質(zhì)感,邊框和陰影。早期的車載用戶界面都是硬性的感覺。但是現(xiàn)在行業(yè)已經(jīng)成熟到一個(gè)包羅萬象的、男女皆宜的當(dāng)代審美。所以現(xiàn)在的視覺可以在以往的傳統(tǒng)上,使汽車界面更新潮更科技。

1)關(guān)于背景

主流的背景以深色為主,那是因?yàn)樯钌谋尘案蝗菀追稚⑺緳C(jī)注意力,減少了眩光的問題。現(xiàn)在一些新能源車可以切換白天黑夜模式,也會出現(xiàn)淺色的背景,淺色模式的整體色調(diào)不好把控,處理不好會使屏幕一直處于高亮狀態(tài),會讓駕駛員產(chǎn)生一定視覺疲勞。

隨著車輛越來越智能化,會出現(xiàn)更多的沉浸式體驗(yàn)場景,這時(shí)候就需要更多的配色、更多的主題來滿足車主的需求。

2)關(guān)于色彩

深色背景下不宜過多使用高飽和的顏色。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

不建議選擇單色,建議增加輔助色,可以更好地幫助我們分組,提高信息的獲取能力。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

文本與底圖對比度建議大于7:1(至少4.5:1)。背景推薦使用深色,避免大面積使用純白色,過度吸引用戶注意。

過高的對比度導(dǎo)致視覺疲勞和閱讀效率的降低。深色模式下背景與文本或圖形的對比度建議不大于18:1。

下圖來自https://color.review/??稍诖随溄硬殚喩蕦Ρ榷汝P(guān)系。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

由于駕駛環(huán)境的變化,車載系統(tǒng)的視覺整體色彩需要跟隨場景智能調(diào)整,當(dāng)進(jìn)入夜晚模式時(shí),長時(shí)間駕駛本身精神與視覺會更加需要集中注意力在前方,此時(shí)車內(nèi)環(huán)境中,不宜有過于強(qiáng)烈明顯的色彩干擾視線。

可試想你在電影院中看電影時(shí),身邊的人的手機(jī)亮度最高,此時(shí)會嚴(yán)重影響視覺的余光,難以聚焦在前方畫面上。

因此視覺設(shè)計(jì)的整體色彩體系應(yīng)當(dāng)適當(dāng)?shù)慕档惋柡投?,同樣的,車載系統(tǒng)視覺的設(shè)計(jì)也應(yīng)避免使用同一色系的方案,這樣無法在1秒的安全時(shí)間以內(nèi)讓用戶有效果地判斷識別信息。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

2. 字體

文字內(nèi)容應(yīng)當(dāng)通過字號字重來區(qū)分主次關(guān)系,用戶在掃一眼的過程中即可準(zhǔn)確地看到重點(diǎn)信息。應(yīng)當(dāng)遵循可讀性和易讀性。

中控與駕駛員的距離處在70cm-85cm之間,設(shè)計(jì)稿一定要在實(shí)車上感受,是否足夠清晰,是否能快速識別。中控屏搭載的更多是各種應(yīng)用,顯示的文字相對會多一點(diǎn),除了文字需要保證在可視區(qū)間里,文字的信息層級也要排列清晰,保證易讀性。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

因?yàn)橥ǔ4钆涞氖前沧肯到y(tǒng),所以都是用思源字體。

3. ICON

ICON的設(shè)計(jì)形式,可更多結(jié)合應(yīng)用的內(nèi)容,應(yīng)注意在內(nèi)容與形式結(jié)合時(shí),視線上要保持一致性,可有助于在一秒的安全時(shí)間內(nèi)讓用戶快速瀏覽并判斷信息。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

4. 內(nèi)容排版

車載以駕駛員的操作為主,功能布局盡量設(shè)計(jì)在離手最近的位置,縮短操作距離,盡可能將熱區(qū)放大,展示信息放在右側(cè)。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

層次和數(shù)量

所有的信息按照使用場景、功能,分組展示,確保信息按照優(yōu)先級進(jìn)行交付。在任何場景下展示盡可能少的信息。避免過多信息的干擾,必須做到界面顯示輕量化。數(shù)量盡量不超過3-4個(gè)。

設(shè)計(jì)要知道-HMI設(shè)計(jì)六大交互視覺設(shè)計(jì)原則

5. 品牌

用戶對傳統(tǒng)汽車的品牌感認(rèn)知,還是停留在車標(biāo)、車造型等硬件外觀,而智能汽車,搭載了一個(gè)智能系統(tǒng),除了駕駛需求,人和車的交互更多地會停留在HMI。所以,對于HMI融入品牌元素也相當(dāng)重要,品牌化是智能座艙視覺設(shè)計(jì)重要的發(fā)展趨勢之一。

隨著車聯(lián)網(wǎng)和自動化駕駛技術(shù)日趨成熟,視覺上也需要考慮用戶從安全訴求為主、轉(zhuǎn)變到娛樂及其他訴求為主的可能性,這樣也為挖掘新的視覺展現(xiàn)形式提供了很大的空間。

相關(guān)閱讀:

參考來源:

https://www.zhihu.com/question/24571674/answer/547687723

http://www.aharts.cn/ucd/1015530.html

注:圖片來源于網(wǎng)絡(luò),侵刪。

#專欄作家#

郝小七,微信公眾號:七醬設(shè)計(jì)筆記,人人都是產(chǎn)品經(jīng)理專欄作家。蜻蜓FM高級UI設(shè)計(jì)師,5年工作經(jīng)驗(yàn)。專注于體驗(yàn)設(shè)計(jì),歡迎各位同學(xué)一起交流。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!