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

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

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

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

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

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

1. 安全性原則

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

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

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

人的大腦每天通過(guò)五種感官接受外部信息的比例分別為：味覺(jué)1%；觸覺(jué)1.5%；嗅覺(jué)3.5%；聽(tīng)覺(jué)11%；視覺(jué)83%。

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

隨著大屏、多屏化的發(fā)展趨勢(shì)，除了依賴(lài)視覺(jué)反饋，以及減少或避免觸摸屏的誤觸功能，聽(tīng)覺(jué)和觸覺(jué)也可以輔助視覺(jué)反饋。

1）不同場(chǎng)景下的提示

除以上正常駕駛場(chǎng)景外，還有部分對(duì)特殊場(chǎng)景的提示，如油耗、故障、雨雪天、超速、疲勞等。

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

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

2）信息獲取效率

同樣，現(xiàn)在的智能汽車(chē)，信息呈現(xiàn)的方式，主要也還是視覺(jué)為主，聽(tīng)覺(jué)為輔。在還沒(méi)有完全實(shí)現(xiàn)自動(dòng)駕駛前，信息呈現(xiàn)層級(jí)保持不變。

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

3. 完整性原則

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

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

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

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

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

5. 信息可視化原則

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

6. 情感化原則

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

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

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

汽車(chē)IP

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

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

1. 顏色

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

1）關(guān)于背景

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

隨著車(chē)輛越來(lái)越智能化，會(huì)出現(xiàn)更多的沉浸式體驗(yàn)場(chǎng)景，這時(shí)候就需要更多的配色、更多的主題來(lái)滿(mǎn)足車(chē)主的需求。

2）關(guān)于色彩

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

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

文本與底圖對(duì)比度建議大于7：1（至少4.5：1）。背景推薦使用深色，避免大面積使用純白色，過(guò)度吸引用戶(hù)注意。

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

下圖來(lái)自https://color.review/?？稍诖随溄硬殚喩蕦?duì)比度關(guān)系。

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

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

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

2. 字體

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

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

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

3. ICON

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

4. 內(nèi)容排版

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

層次和數(shù)量

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

5. 品牌

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

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

相關(guān)閱讀：

• HMI設(shè)計(jì)必看！車(chē)載HMI設(shè)計(jì)入門(mén)
• HMI設(shè)計(jì)必看！車(chē)載中控的前世今生
• 設(shè)計(jì)要知道-入局車(chē)載的最好路徑，高質(zhì)量十問(wèn)十答！

參考來(lái)源：

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

http://www.codemsi.com/ucd/1015530.html

注：圖片來(lái)源于網(wǎng)絡(luò)，侵刪。

#專(zhuān)欄作家#

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

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

題圖來(lái)自Unsplash，基于 CC0 協(xié)議