車載HUD交互與視覺設(shè)計知識

車載HUD交互&視覺設(shè)計知識

本次文章的主題是圍繞HUD講解，大家拿好小本子記好筆記奧。我今

年還會輸出更多車載HMI行業(yè)知識，敬請期待吧！

最近理想L9新車發(fā)布，將車輛中的儀表盤取消掉了，取而代之的是在

方向盤上面裝載HUD現(xiàn)在國內(nèi)乃至全球都在針對AR-HUD的探索中，

今天我就帶大家解讀一下車載HUD知識吧，本篇文章就展開對HUD

的發(fā)展階段、探索AR-HUD用戶體驗設(shè)計、HUD設(shè)計中需要注意的點。

俏HUD發(fā)展階段&種類詳解

我們來講一下HUD的發(fā)展主要三個階段，并在每一個階

段介紹相對應(yīng)的HUD種類，這段知識可能比較專業(yè)…

?探索AR-HUD用戶體驗設(shè)計

現(xiàn)在C-HUD目前已逐漸被市場淘汰，W-HUD與AR-

HUD成為市面上比較主流的，接下來我們深度的…

0HUD設(shè)計中需要注意的事項

總結(jié)12條HUD在設(shè)計中需要注意的內(nèi)容，也歡迎大家在

留言區(qū)中進(jìn)行補(bǔ)充說明…

HUD（HeadUpDisplay,平視顯示器）這種顯示系統(tǒng)，原來是軍用

戰(zhàn)斗機(jī)上的顯示系統(tǒng)，飛行員不必低頭，就能在擋風(fēng)玻璃上看到所需的

重要信息，是為了幫助飛機(jī)駕駛員減輕認(rèn)知負(fù)荷，從而提高感知能力的

應(yīng)用。

近些年來將這個技術(shù)運用到和汽車上，它的作用，就是把時速、導(dǎo)航等

重要的行車信息，投影到駕駛員前面的擋風(fēng)玻璃上，這樣的好處是不需

要駕駛員低頭看導(dǎo)航信息、不轉(zhuǎn)頭就能看到，大大提高駕駛員的駕駛安

全，這就是HUD的主要作用。

HUD技術(shù)被業(yè)界重新重視，不僅僅因為它能提高駕駛安全性和顯示效

果，更重要的是AR技術(shù)的出現(xiàn)，讓HUD的使用場景有了更多可能，

能更加有效的提高駕駛安全性。導(dǎo)航的時候可以直接將信息顯示到

HUD上，并融合實際的路況場景進(jìn)行顯示，左轉(zhuǎn)右轉(zhuǎn)一目了然。更能

結(jié)合ADAS功能，及時預(yù)告路況和行人信息。

進(jìn)入我們今天的正題吧。

01HUD發(fā)展階段和種類詳解

我們來講一下HUD的發(fā)展主要三個階段，并在每一個階段介紹相對應(yīng)

的HUD種類，這段知識可能比較專業(yè)，但我們設(shè)計師也要稍微了解一

些硬件設(shè)備的知識，那我們開始吧。

L1/L2階段

L1/L2這個階段的HUD設(shè)計，信息都是在前面擋風(fēng)玻璃上展示，上面

呈現(xiàn)的信息也相對較少，上面有的信息包含有：車速、限速、簡單的導(dǎo)

航、車道偏離、后面來車、警報提示相關(guān)內(nèi)容，在設(shè)計風(fēng)格上偏向于簡

潔一些，為了最大程度上對于信息傳達(dá)。

這個階段的HUD有下面幾種：C-HUD.W-HUD

我們先來說一下C-HUD(CombinerHUD)中文名字：組合式抬頭顯

示系統(tǒng)，它是被安裝在一塊透明玻璃上，通過光學(xué)圖像三次折射到這塊

玻璃片上，在距離駕駛者嬤1.8-2.5米的位置形成一個圖像。

他的優(yōu)點：便于安裝，由于C-HUD的投影介質(zhì)主要是放置于儀表上方

的一個半透明的樹脂板，匕徽適合用于后裝市場。

缺點：成像區(qū)域小，顯示的內(nèi)容有限；成像距離比較近，位置低；最后

一點就是發(fā)生車輛碰撞可能導(dǎo)致車內(nèi)人員二次傷害，不利于車內(nèi)安全。

W-HUD全稱是(WindshieldHUD),中文的意思是：直投擋風(fēng)玻璃

的HUD,是當(dāng)前HUD前裝市場主流方案，它的原理是通過擋風(fēng)玻璃

作為投影介質(zhì)來反射成像。

他的優(yōu)點：可以支持更大的成像區(qū)域和更遠(yuǎn)的投影距離，比C-HUD成

像更遠(yuǎn)而且展示信息的區(qū)域比C-HUD更大顯示的效果更為一體化，

也有助于駕駛者的安全行駛。

缺點：但擋風(fēng)玻璃一般為曲面玻璃，所以W-HUD一定要根據(jù)擋風(fēng)玻璃

的尺寸和曲率搭配高精度非球面反射鏡導(dǎo)致了W-HUD的成本相對較

高，W-HUD一般是在我們購車的時候就已經(jīng)配置好。

L3階段AR-HUD

現(xiàn)在逐步向L3這個階段發(fā)展，這個階段我們發(fā)展的方向是AR-HUD,

有人也稱它叫做3D-AR-HUD。

AF

AR-HUD即AR和抬頭顯示的融合，AR技術(shù)全稱(Augmented

Reality)，使用擋風(fēng)玻璃作為投影介質(zhì)來反射成像。將胎壓、速度、

轉(zhuǎn)速等信息投射到前擋風(fēng)玻璃上，使車主在行車中，無需低頭就能查看

汽車相關(guān)信息。

這個階段的設(shè)計不僅僅在前擋風(fēng)玻璃上面展示，還結(jié)合和車外部環(huán)境合

成，像道路，前方行人、車輛、建筑、甚至連摩托車、自行車都可以展

現(xiàn)出來，未來可能展現(xiàn)更多的內(nèi)容。將這些顯示信息、圖像可以和交通

狀況進(jìn)行融合并且提醒駕駛者，從而有效的的防止交通事故的發(fā)上。

AR-HUD分為近投影and遠(yuǎn)投影成像，近投影主要顯示車輛速度、油

量等一些車輛信息之類的；而遠(yuǎn)投影擁有更大的視角，成像距離更遠(yuǎn),

可以有更大顯示尺寸，那么可以將虛擬的圖形和現(xiàn)實的路況相結(jié)合到一

起，加入導(dǎo)航信息，及時的將路況顯示在擋風(fēng)玻璃并與路面進(jìn)行融合,

提供駕駛者良好的體驗環(huán)境，給大家說這么多，給大家展示一些實際概

念案例搭配起來看，這樣會更好理解。

解讀下面的案例，我們也會從視覺層面給大家分析其中的設(shè)計方案。

1)解讀：BMWVISIONNEXT100

這款車型是在2016年寶馬百歲生日時發(fā)布的一款概念車，我們來看一

下它的HUD界面風(fēng)格設(shè)計偏向于數(shù)字可視化，扁平、顏色主要以產(chǎn)品

色+白色為主+警報色，整體的風(fēng)格非常簡潔明了，和它車的內(nèi)飾完美

的搭配。

我們看一下他的警報提示用了白色的外框+紅色警報類型的icon，在觸

發(fā)警報的同時，內(nèi)飾臺面也會出現(xiàn)相對應(yīng)的提示，真的很大程度上提醒

了駕駛者，小心駕駛，提高了安全性。

在行駛的過程中，在斑馬線上遇到行人會觸發(fā)安全警報，提示前面有人

需要降速停車，當(dāng)車停下來的時候，前方會信號燈會發(fā)出綠色通行的信

號給到行人，傳達(dá)可以通行的示意，當(dāng)行人走完恢復(fù)正常，車輛方可啟

動通行。

這款HUD也會在屏幕上顯示目標(biāo)地點，還有沿街商店的一個提示，比

如你和它語音交流，幫我導(dǎo)航到附近花店，那么當(dāng)快接近花店附近的時

候，它會出現(xiàn)提示。

2）解讀:WayRay

WayRay是一家專門制作顯示器(HUD)以及最終用于自動駕駛汽車的

完全沉浸式AR和虛擬現(xiàn)實(VR)系統(tǒng)的公司，WayRay他整體的設(shè)

計風(fēng)格偏向游戲化、光影效果、3D空間感，整體的顏色以綠色+黃色+

警報色為主。他設(shè)計的HUD界面非常有科技、未來、酷炫的感覺。

280

Mt

WayRay對于導(dǎo)航的設(shè)計創(chuàng)造性十足，放棄了二維導(dǎo)航界面中的設(shè)計元

素，而是用了箭頭貼合現(xiàn)實路況中，模擬出駕駛員的行駛軌跡。

到達(dá)目的還會給你推薦附近的停車場，并且標(biāo)注出每小時多少美金，當(dāng)

到達(dá)指定目標(biāo)位置，前方HUD會呈現(xiàn)出導(dǎo)航結(jié)束，還有給出你行駛的

路線軌跡。

當(dāng)在等待紅綠燈場景中，HUD會根據(jù)用戶需求，比如用戶想購買東西，

那么可以通過語音進(jìn)行對話，"我要購買藥品"投射出購買場景，例如

途中用戶想購買藥品、便利店的商品等，當(dāng)紅燈快結(jié)束的時候此類場景

消失，恢復(fù)正常駕駛狀態(tài)。類似這種的體驗還會出現(xiàn)很多，這些都需要

靠我們不斷去深度挖掘用戶需求。

我們在路面上行駛的時候，如果在碰撞危險距離，那么HUD會鎖定到

前方車輛，并且提醒駕駛者小心駕駛，警報距離的界面視覺元素用了紅、

黃、藍(lán)這些偏向于高飽和的顏色，每一段距離都會相對應(yīng)的顏色定義,

紅色代表危險距離、黃色代表提醒距離、藍(lán)色代表安全距離。

02探索AR-HUD用戶體驗設(shè)計

現(xiàn)在C-HUD目前已逐漸被市場淘汰,W-HUD與AR-HUD成為市面

上比較主流的，接下來我們深度的對AR-HUD用戶體驗設(shè)計進(jìn)行探索。

1.目前HUD發(fā)展的過程中存在的問題

1）從設(shè)計方面考慮

多場景下AR-HUD的圖像顯示的問題包含：亮度、顏色、清晰度、對

比度、重影這些，因為不同場景下HUD上顯示的設(shè)計內(nèi)容也會跟隨著

變化。

如何將各種信息及功能集合在一起，讓整體的AR-HUD界面做一目了

然，能夠讓用戶清晰、便捷地看到AR-HUD中的內(nèi)容。

FOV（視場角度）與虛擬成像距離和圖形大小的呈現(xiàn)，這個需要我們頻

繁的去調(diào)整角度、大小，因為車是一個行駛的狀況，它與周圍環(huán)境的都

會因為距離改變大小和角度，這個在設(shè)計方面我們?nèi)绾稳タ剂克?/p>

2）從硬鍵和其他方面考慮

AR-HUD需要針對不同車型的擋風(fēng)玻璃進(jìn)行設(shè)計,所以在設(shè)計適配方

面還存在很大的問題。

AR-HUD需要準(zhǔn)確的識別圖像信息，如：車輛、人、紅綠燈、周圍建

筑場景等等，而且在導(dǎo)航中是否具備不延遲。

2.AR-HUD的界面設(shè)計原則

信息布局原則，控制同一時間內(nèi)顯示信息的內(nèi)容和數(shù)量，將重要的信息

優(yōu)先展示出來，比如與安全駕駛相關(guān)的信息，去掉無用的信息內(nèi)容，盡

量減少擋風(fēng)玻璃上面的信息和數(shù)量，保證用戶駕駛。

?？硕上嘈糯蠹叶加新犨^，他描述了用戶決定所需的時長，增加選擇

的數(shù)量將會增加人們做出決策反應(yīng)的時間。如果分布信息過多，注意力

受到干擾，認(rèn)知負(fù)擔(dān)會增加。

根據(jù)研究報告，駕駛者一次在視覺上可以感知5-9內(nèi)容，而這個數(shù)量包

含了駕駛者視野內(nèi)的全部內(nèi)容，因此在設(shè)計AR-HUD人機(jī)交互界面，

請合理的安排界面信息的布局和頁面當(dāng)中元素的數(shù)量，別給駕駛者增加

負(fù)擔(dān)和決策時間，增加了就會可能導(dǎo)致提高危險駕駛系數(shù)。所以

AR-HUD呈現(xiàn)的設(shè)計元素數(shù)量最好維持1-3個之間。

ReactionTime(RT)

綜合天氣和道路狀況等因素進(jìn)行設(shè)計，因為惡劣的天氣和復(fù)雜的路況都

會影響到信息展示，因此在設(shè)計之初一定要綜合考慮天氣環(huán)境、視野條

件等因素的影響。

晴天

AR-HUD系統(tǒng)設(shè)計盡量簡單易理解，能夠讓駕駛者迅速能看懂

AR-HUD界面展示的內(nèi)容，把用戶駕駛體驗提高，使界面的設(shè)計符合

駕駛員的心理認(rèn)知，避免引起駕駛員更多的認(rèn)知負(fù)荷。

AR-HUD界面中的視覺符號的色彩和亮度需要考慮駕駛環(huán)境的變化對

于可見度的影響，以達(dá)到有效的警示效果。

傍晚M

2.AR-HUD交互設(shè)計方面

在交互方式方面，AR-HUD可以實現(xiàn)通過視覺顯示、語音交互、手勢

交互等方式。想要做好交互設(shè)計，那么我們得提前了解清楚駕駛?cè)蝿?wù)等

級，在Michon駕駛模型中有提到，駕駛?cè)蝿?wù)被分為三個等級，這三級

任務(wù)重要性逐步增加。

?一般任務(wù)：維持汽車正常駕駛

.機(jī)動控制任務(wù)：維持正常駕駛，并且根據(jù)交通法規(guī)和駕車環(huán)境，

于其他車輛或者行人進(jìn)行安全交互任務(wù)

.策略任務(wù)：比如導(dǎo)航路線規(guī)劃這一類需要駕駛者推理和構(gòu)思

兩級以上的交互層級不適合在AR-HUD中使用，頁面的信息需要展示

簡潔明了、信息主次分明，不需要多余信息來呈現(xiàn)，能夠快速獲取關(guān)鍵

車輛信息是AR-HUD界面設(shè)計布局的出發(fā)點，盡量減少駕駛者的思考

時間。只要把用戶最在意的信息設(shè)計到HUD界面當(dāng)中，這樣才能提高

駕駛者的信息獲取效率。

當(dāng)前主流的AR-HUD產(chǎn)品，他們功能基本上都包含了：當(dāng)前車速、ACC

（自適應(yīng)巡航輔助）、車距警告、變道提示、環(huán)境行人警告、車道偏離

預(yù)警、前方車輛預(yù)警，在導(dǎo)航中這些信息呈現(xiàn)的方式都是不一樣的。

3.AR-HUD視覺設(shè)計方面

從設(shè)計的角度來講，AR-HUD也包含和很多復(fù)雜的視覺內(nèi)容：亮度、

圖形、色彩、布局、信息的數(shù)量等，AR-HUD的交互設(shè)計直接影響到

駕駛安全和駕駛者的體驗。對于顏色的選擇，要找到合適的顏色作為提

示和警報的用色，上面給大家講解的兩款A(yù)R-HUD的顏色方案，藍(lán)、

綠、黃、紅居多。

AR-HUD特別容易受到車外部環(huán)境的影響，外部環(huán)境的光線強(qiáng)度、天

氣狀況等因素都會直接影響到AR-HUD的設(shè)計，所以AR-HUD界面

設(shè)計更加偏向于強(qiáng)的對比。

如何營造出AR-HUD空間感？

視覺空間感可以通過尺寸的大小、色彩的變化、空間透視角度來，在

AR-HUD界面中可以通過明暗變化來判斷對象遠(yuǎn)近。

由于AR-HUD界面大部分都是實時動態(tài)產(chǎn)生的，并且與真實環(huán)境相合

成的，所以設(shè)計過程中，不僅僅考慮圖形本事，更需要把不同HUD的

界面做到很好的切換。AR-HUD重要的特點就是將信息直接顯示在真

實的道路上，想要將這個實現(xiàn)出來就需要通過前方攝像頭對道路進(jìn)行解

析并建模,從而得出距離、位置、大小等等，再把HUD上面需要的信

息投影到相對應(yīng)的位置上去。讓人的視線、HUD界面、實際道路都在

一條線上，這才能達(dá)到滿足AR的體驗。

03HUD設(shè)計中需要注意的點

總結(jié)12條HUD在設(shè)計中需要注意的內(nèi)容，也歡迎大家在留言區(qū)中進(jìn)

行補(bǔ)充說明。

1.字體選擇

對于HUD字體選擇一個最基本的原則就是：能夠讓用戶一目了然的理

解這個內(nèi)容和當(dāng)前狀態(tài)。字體是界面基本元素之一，選擇字體既要體現(xiàn)

出設(shè)計感，還要保持可讀性和易讀性，從而降低事故風(fēng)險。

55km

正確字體

給大家推薦一些字體:

Roboto因為它符合我們的所有標(biāo)準(zhǔn)，并且已被Google車載測試過，

我在做圖的時候英文和數(shù)字都比較喜歡用這款字體的；AvenirNext

字體的易讀性極高，這使其成為汽車HMI儀表盤和顯示器等快速掃視

環(huán)境下最理想的選擇；還有一些Burlingame、Tipperary、Daytona、

Akk。、Unitext、TradeGothic如果讀者們還有那些推薦的，大家可

以在評論區(qū)留言。

2.圖形不直觀，辨識度下降

圖形信息是視覺交互界面中一個合理的表達(dá)方式，只有icon辨識度高

了才能使駕駛者通過掃視過程中能夠準(zhǔn)確獲取車載信息作用如果icon

辨識度低，會造成嚴(yán)重的駕駛者的分心，他會在想這個是什么？同時相

同內(nèi)容，不同圖標(biāo)形狀對駕駛者也有不同的認(rèn)知差異，比如警示信息，

經(jīng)過研究發(fā)現(xiàn)，含有尖角輪廓的警示會更優(yōu)于圓形的圖標(biāo)。

▲

左側(cè)車門未關(guān)

推薦使用

3.需要拾掘用戶真正的需求點

HUD作為安全駕駛輔助設(shè)備，所以HUD界面當(dāng)中應(yīng)該顯示和駕駛密

切相關(guān)的信息，現(xiàn)在HUD中除了車速、轉(zhuǎn)速和導(dǎo)航信息，剩余其他的

功能點基本上各個制造商都各不相同。從用戶角度出發(fā)，挖掘駕駛者真

正意義上需要的功能需求。以深度挖掘用戶的潛在需求、用戶行為、使

用習(xí)慣為前提。

4.HUD顯示內(nèi)容和其他屏幕需差異化

HUD顯示區(qū)域面積很寶貴的，所以HUD當(dāng)中顯示重要信息，千萬別

和儀表盤、中控屏幕有重復(fù)，假設(shè)我上車的時候沒有系上安全帶，這時

候儀表盤中會提醒我們，并且儀表盤中會出現(xiàn)相對應(yīng)icon閃爍還有警

報提示音。

如果這時候HUD上面也出現(xiàn)一個警告的提示，那么就出現(xiàn)了重復(fù)的,

雖然你覺得HUD上面顯示會比儀表盤更方便看到，但是儀表盤中有一

些固定的功能沒辦法刪減，所以在設(shè)計HUD初，你得考慮好HUD需

要顯示那些功能，和其他屏幕有所差異。

▲

請系上安全帶!

10:45AM

5.避免信息重疊問題

在HUD設(shè)計中避免出現(xiàn)信息重疊內(nèi)容，尤其是出現(xiàn)一個警告彈窗的時

候，如果用文字來表達(dá)的話，極有可能會出現(xiàn)重疊的問題，重疊后會導(dǎo)

致駕駛者無法看到后面的信息內(nèi)，可能會引發(fā)一些危險，所以我們在設(shè)

計HUD界面的時候，盡量要保證設(shè)計的元素不要重疊在一起，你可以

將文字轉(zhuǎn)化成icon或者可識別的圖形化，這一點后面會詳細(xì)的說明。

6.盡可能的少用字，多用圖形化設(shè)計

上一點也簡單的提到了，設(shè)計HUD的時候盡可能的少用文字，多用一

些圖形化的設(shè)計，因為圖形化傳達(dá)的效果會比純文字會更好，我們舉一

個例子：行走在斑馬線上的行人、騎自行車的、前方有異常物體等，如

果都用文字來體現(xiàn)，那么用戶需要先閱讀HUD中的文字，然后再做出

判斷。將文字轉(zhuǎn)化為圖形化設(shè)計，那么就很大程度提高了駕駛者快速做

出決斷，一個警示外框+物體的圖形化設(shè)計。

7.HUD中需要做引導(dǎo)性的動畫

在HUD中為啥要做這些引導(dǎo)性的動畫呢？不難理解這個需求，我們都

看過一些駕駛者走神錯過下高速路口的、也有走錯路口，肯定有人說了

不是有手機(jī)高德導(dǎo)航的么？我想說的是：有的復(fù)雜性的路段高德也難,

手機(jī)導(dǎo)航你有時候還需要低頭看手機(jī)導(dǎo)航，而HUD可以直接引導(dǎo)你走

那一條路，其實比手機(jī)導(dǎo)航方便許多。晚上燈光弱的時候道路沒法看清,

HUD也可發(fā)揮出它的強(qiáng)大功能引導(dǎo)駕駛者安全行駛。

8.設(shè)計HUD動畫，時間建議都小于500毫秒

我們簡單科普一下500ms=0.5S我們在做HUD動畫的時候每一段動

畫時間都需要小于0.5s,我們來計算一下,以這邊一輛以60km/h的

車速，0.5S會開出10m-15m左右，所以動畫時間需一個合理的區(qū)間

是非常重要的。

這里還需要提到一個詞”及時反饋感”因為在駕駛過程中，這一點非常

的重要，不管在HUD還是中控上面設(shè)計動畫時長都不能太長，車載端

的動畫設(shè)計和移動端APP動畫設(shè)計是不一樣。

9.HUD中最多使用兩個層級的交互結(jié)構(gòu)

在HUD設(shè)計當(dāng)中，所有內(nèi)容最好都在2層內(nèi)的交互結(jié)構(gòu)中全部顯示出

來，因為交互結(jié)構(gòu)層越多，讓用戶使用起來越復(fù)雜，其次就是隱藏很深

的話用戶沒辦法找到。

假設(shè)一個未來可以實現(xiàn)的場景：在行駛的過程中出現(xiàn)一些商店或者是加

油站，如果有二級菜單中顯示可以顯示這個加油站每種油量的一個剩余,

如果剩余不足，可以推薦導(dǎo)航到附近有庫存的加油站，而不是再給你第

三層級，列出附近加油站的列表讓你再一次選擇，這樣用戶體驗也不是

最好的?？梢栽诙墝蛹壷型瓿傻娜蝿?wù)就別增加交互邏輯了。

10.每次操作后的反饋感

建議每次在操作最后都需要一個反饋感，反饋感包含從視覺方面、聽覺

方面、甚至還有一些震動的觸感。用戶在操作的時候都需要一個及時的

反饋感，反饋該操作是正確還是錯誤，它下一步需要怎么一個操作等等