深度解讀丨車載HUD交互&視覺設(shè)計知識

6 評論 9774 瀏覽 66 收藏 30 分鐘

編輯導(dǎo)語:AR技術(shù)的出現(xiàn),讓HUD的使用場景有了更多可能,也讓HUD技術(shù)被業(yè)界重新重視。本文作者車載HUD知識進行了解讀,闡述HUD的發(fā)展階段,探索AR-HUD用戶體驗設(shè)計、HUD設(shè)計中需要注意的點,一起來學(xué)習(xí)一下吧。

本次文章的主題是圍繞HUD講解,大家拿好小本子記好筆記奧。我今年還會輸出更多車載HMI行業(yè)知識,敬請期待吧!

最近理想L9新車發(fā)布,將車輛中的儀表盤取消掉了,取而代之的是在方向盤上面裝載HUD,現(xiàn)在國內(nèi)乃至全球都在針對AR-HUD的探索中,今天我就帶大家解讀一下車載HUD知識吧,本篇文章就展開對HUD的發(fā)展階段、探索AR-HUD用戶體驗設(shè)計、HUD設(shè)計中需要注意的點。

HUD (Head Up Display,平視顯示器)這種顯示系統(tǒng),原來是軍用戰(zhàn)斗機上的顯示系統(tǒng),飛行員不必低頭,就能在擋風(fēng)玻璃上看到所需的重要信息,是為了幫助飛機駕駛員減輕認知負荷,從而提高感知能力的應(yīng)用。

近些年來將這個技術(shù)運用到和汽車上,它的作用,就是把時速、導(dǎo)航等重要的行車信息,投影到駕駛員前面的擋風(fēng)玻璃上,這樣的好處是不需要駕駛員低頭看導(dǎo)航信息、不轉(zhuǎn)頭就能看到,大大提高駕駛員的駕駛安全,這就是HUD的主要作用。

HUD技術(shù)被業(yè)界重新重視,不僅僅因為它能提高駕駛安全性和顯示效果,更重要的是AR技術(shù)的出現(xiàn),讓HUD的使用場景有了更多可能,能更加有效的提高駕駛安全性。導(dǎo)航的時候可以直接將信息顯示到HUD上,并融合實際的路況場景進行顯示,左轉(zhuǎn)右轉(zhuǎn)一目了然。更能結(jié)合ADAS功能,及時預(yù)告路況和行人信息。

進入我們今天的正題吧。

01 HUD發(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)格上偏向于簡潔一些,為了最大程度上對于信息傳達。

這個階段的HUD有下面幾種:C-HUD、W-HUD

我們先來說一下C-HUD(Combiner HUD)中文名字:組合式抬頭顯示系統(tǒng),它是被安裝在一塊透明玻璃上,通過光學(xué)圖像三次折射到這塊玻璃片上,在距離駕駛者視線1.8-2.5米的位置形成一個圖像。

他的優(yōu)點:便于安裝,由于C-HUD的投影介質(zhì)主要是放置于儀表上方的一個半透明的樹脂板,比較適合用于后裝市場。

缺點:成像區(qū)域小,顯示的內(nèi)容有限;成像距離比較近,位置低;最后一點就是發(fā)生車輛碰撞可能導(dǎo)致車內(nèi)人員二次傷害,不利于車內(nèi)安全。

W-HUD全稱是(Windshield HUD),中文的意思是:直投擋風(fēng)玻璃的HUD,是當前HUD前裝市場主流方案,它的原理是通過擋風(fēng)玻璃作為投影介質(zhì)來反射成像。

他的優(yōu)點:可以支持更大的成像區(qū)域和更遠的投影距離,比C-HUD成像更遠,而且展示信息的區(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。

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)容。將這些顯示信息、圖像可以和交通狀況進行融合并且提醒駕駛者,從而有效的的防止交通事故的發(fā)上。

AR-HUD分為近投影and遠投影成像,近投影主要顯示車輛速度、油量等一些車輛信息之類的;而遠投影擁有更大的視角,成像距離更遠,可以有更大顯示尺寸,那么可以將虛擬的圖形和現(xiàn)實的路況相結(jié)合到一起,加入導(dǎo)航信息,及時的將路況顯示在擋風(fēng)玻璃并與路面進行融合,提供駕駛者良好的體驗環(huán)境,給大家說這么多,給大家展示一些實際概念案例搭配起來看,這樣會更好理解。

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

1)解讀:BMW VISION NEXT 100

這款車型是在2016年寶馬百歲生日時發(fā)布的一款概念車,我們來看一下它的HUD界面風(fēng)格設(shè)計偏向于數(shù)字可視化,扁平、顏色主要以產(chǎn)品色+白色為主+警報色,整體的風(fēng)格非常簡潔明了,和它車的內(nèi)飾完美的搭配。

我們看一下他的警報提示用了白色的外框+紅色警報類型的icon,在觸發(fā)警報的同時,內(nèi)飾臺面也會出現(xiàn)相對應(yīng)的提示,真的很大程度上提醒了駕駛者,小心駕駛,提高了安全性。

在行駛的過程中,在斑馬線上遇到行人會觸發(fā)安全警報,提示前面有人需要降速停車,當車停下來的時候,前方會信號燈會發(fā)出綠色通行的信號給到行人,傳達可以通行的示意,當行人走完恢復(fù)正常,車輛方可啟動通行。

這款HUD也會在屏幕上顯示目標地點,還有沿街商店的一個提示,比如你和它語音交流,幫我導(dǎo)航到附近花店,那么當快接近花店附近的時候,它會出現(xiàn)提示。

2)解讀:WayRay

WayRay是一家專門制作顯示器(HUD)以及最終用于自動駕駛汽車的完全沉浸式AR和虛擬現(xiàn)實(VR)系統(tǒng)的公司,WayRay他整體的設(shè)計風(fēng)格偏向游戲化、光影效果、3D空間感,整體的顏色以綠色+黃色+警報色為主。他設(shè)計的HUD界面非常有科技、未來、酷炫的感覺。

WayRay對于導(dǎo)航的設(shè)計創(chuàng)造性十足,放棄了二維導(dǎo)航界面中的設(shè)計元素,而是用了箭頭貼合現(xiàn)實路況中,模擬出駕駛員的行駛軌跡。

到達目的還會給你推薦附近的停車場,并且標注出每小時多少美金,當?shù)竭_指定目標位置,前方HUD會呈現(xiàn)出導(dǎo)航結(jié)束,還有給出你行駛的路線軌跡。

當在等待紅綠燈場景中,HUD會根據(jù)用戶需求,比如用戶想購買東西,那么可以通過語音進行對話,“我要購買藥品”投射出購買場景,例如途中用戶想購買藥品、便利店的商品等,當紅燈快結(jié)束的時候此類場景消失,恢復(fù)正常駕駛狀態(tài)。類似這種的體驗還會出現(xiàn)很多,這些都需要靠我們不斷去深度挖掘用戶需求。

我們在路面上行駛的時候,如果在碰撞危險距離,那么HUD會鎖定到前方車輛,并且提醒駕駛者小心駕駛,警報距離的界面視覺元素用了紅、黃、藍這些偏向于高飽和的顏色,每一段距離都會相對應(yīng)的顏色定義,紅色代表危險距離、黃色代表提醒距離、藍色代表安全距離。

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

現(xiàn)在C-HUD目前已逐漸被市場淘汰,W-HUD與AR- HUD成為市面上比較主流的,接下來我們深度的對AR-HUD用戶體驗設(shè)計進行探索。

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)玻璃進行設(shè)計,所以在設(shè)計適配方面還存在很大的問題。

AR-HUD需要準確的識別圖像信息,如:車輛、人、紅綠燈、周圍建筑場景等等,而且在導(dǎo)航中是否具備不延遲。

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

信息布局原則,控制同一時間內(nèi)顯示信息的內(nèi)容和數(shù)量,將重要的信息優(yōu)先展示出來,比如與安全駕駛相關(guān)的信息,去掉無用的信息內(nèi)容,盡量減少擋風(fēng)玻璃上面的信息和數(shù)量,保證用戶駕駛。

??硕上嘈糯蠹叶加新犨^,他描述了用戶決定所需的時長,增加選擇的數(shù)量將會增加人們做出決策反應(yīng)的時間。如果分布信息過多,注意力受到干擾,認知負擔會增加。

根據(jù)研究報告,駕駛者一次在視覺上可以感知5-9內(nèi)容,而這個數(shù)量包含了駕駛者視野內(nèi)的全部內(nèi)容,因此在設(shè)計 AR-HUD人機交互界面,請合理的安排界面信息的布局和頁面當中元素的數(shù)量,別給駕駛者增加負擔和決策時間,增加了就會可能導(dǎo)致提高危險駕駛系數(shù)。所以AR-HUD呈現(xiàn)的設(shè)計元素數(shù)量最好維持1-3個之間。

綜合天氣和道路狀況等因素進行設(shè)計,因為惡劣的天氣和復(fù)雜的路況都會影響到信息展示,因此在設(shè)計之初一定要綜合考慮天氣環(huán)境、視野條件等因素的影響。

AR-HUD系統(tǒng)設(shè)計盡量簡單易理解,能夠讓駕駛者迅速能看懂AR-HUD界面展示的內(nèi)容,把用戶駕駛體驗提高,使界面的設(shè)計符合駕駛員的心理認知,避免引起駕駛員更多的認知負荷。

AR-HUD界面中的視覺符號的色彩和亮度需要考慮駕駛環(huán)境的變化對于可見度的影響,以達到有效的警示效果。

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

在交互方式方面,AR-HUD可以實現(xiàn)通過視覺顯示、語音交互、手勢交互等方式。想要做好交互設(shè)計,那么我們得提前了解清楚駕駛?cè)蝿?wù)等級,在Michon駕駛模型中有提到,駕駛?cè)蝿?wù)被分為三個等級,這三級任務(wù)重要性逐步增加。

  • 一般任務(wù):維持汽車正常駕駛
  • 機動控制任務(wù):維持正常駕駛,并且根據(jù)交通法規(guī)和駕車環(huán)境,于其他車輛或者行人進行安全交互任務(wù)
  • 策略任務(wù):比如導(dǎo)航路線規(guī)劃這一類需要駕駛者推理和構(gòu)思

兩級以上的交互層級不適合在AR-HUD中使用,頁面的信息需要展示簡潔明了、信息主次分明,不需要多余信息來呈現(xiàn),能夠快速獲取關(guān)鍵車輛信息是AR-HUD界面設(shè)計布局的出發(fā)點,盡量減少駕駛者的思考時間。只要把用戶最在意的信息設(shè)計到HUD界面當中,這樣才能提高駕駛者的信息獲取效率。

當前主流的AR- HUD產(chǎn)品,他們功能基本上都包含了:當前車速、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的顏色方案,藍、綠、黃、紅居多。

AR-HUD特別容易受到車外部環(huán)境的影響,外部環(huán)境的光線強度、天氣狀況等因素都會直接影響到AR- HUD的設(shè)計,所以AR- HUD界面設(shè)計更加偏向于強的對比。

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

視覺空間感可以通過尺寸的大小、色彩的變化、空間透視角度來,在AR- HUD界面中可以通過明暗變化來判斷對象遠近。

由于AR- HUD界面大部分都是實時動態(tài)產(chǎn)生的,并且與真實環(huán)境相合成的,所以設(shè)計過程中,不僅僅考慮圖形本事,更需要把不同HUD的界面做到很好的切換。AR- HUD重要的特點就是將信息直接顯示在真實的道路上,想要將這個實現(xiàn)出來就需要通過前方攝像頭對道路進行解析并建模,從而得出距離、位置、大小等等,再把HUD上面需要的信息投影到相對應(yīng)的位置上去。讓人的視線、HUD界面、實際道路都在一條線上,這才能達到滿足AR的體驗。

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

總結(jié)12條HUD在設(shè)計中需要注意的內(nèi)容,也歡迎大家在留言區(qū)中進行補充說明。

1. 字體選擇

對于HUD字體選擇一個最基本的原則就是:能夠讓用戶一目了然的理解這個內(nèi)容和當前狀態(tài)。字體是界面基本元素之一,選擇字體既要體現(xiàn)出設(shè)計感,還要保持可讀性和易讀性,從而降低事故風(fēng)險。

給大家推薦一些字體:

Roboto因為它符合我們的所有標準,并且已被Google車載測試過,我在做圖的時候英文和數(shù)字都比較喜歡用這款字體的;Avenir Next字體的易讀性極高,這使其成為汽車HMI儀表盤和顯示器等快速掃視環(huán)境下最理想的選擇;還有一些:Burlingame 、Tipperary、Daytona、Akko、Unitext、TradeGothic如果讀者們還有那些推薦的,大家可以在評論區(qū)留言。

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

圖形信息是視覺交互界面中一個合理的表達方式,只有icon辨識度高了才能使駕駛者通過掃視過程中能夠準確獲取車載信息作用,如果icon辨識度低,會造成嚴重的駕駛者的分心,他會在想這個是什么?同時相同內(nèi)容,不同圖標形狀對駕駛者也有不同的認知差異,比如警示信息,經(jīng)過研究發(fā)現(xiàn),含有尖角輪廓的警示會更優(yōu)于圓形的圖標。

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

HUD作為安全駕駛輔助設(shè)備,所以HUD界面當中應(yīng)該顯示和駕駛密切相關(guān)的信息,現(xiàn)在HUD中除了車速、轉(zhuǎn)速和導(dǎo)航信息,剩余其他的功能點基本上各個制造商都各不相同。從用戶角度出發(fā),挖掘駕駛者真正意義上需要的功能需求。以深度挖掘用戶的潛在需求、用戶行為、使用習(xí)慣為前提。

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

HUD顯示區(qū)域面積很寶貴的,所以HUD當中顯示重要信息,千萬別和儀表盤、中控屏幕有重復(fù),假設(shè)我上車的時候沒有系上安全帶,這時候儀表盤中會提醒我們,并且儀表盤中會出現(xiàn)相對應(yīng)icon閃爍還有警報提示音。

如果這時候HUD上面也出現(xiàn)一個警告的提示,那么就出現(xiàn)了重復(fù)的,雖然你覺得HUD上面顯示會比儀表盤更方便看到,但是儀表盤中有一些固定的功能沒辦法刪減,所以在設(shè)計HUD初,你得考慮好HUD需要顯示那些功能,和其他屏幕有所差異。

5. 避免信息重疊問題

在HUD設(shè)計中避免出現(xiàn)信息重疊內(nèi)容,尤其是出現(xiàn)一個警告彈窗的時候,如果用文字來表達的話,極有可能會出現(xiàn)重疊的問題,重疊后會導(dǎo)致駕駛者無法看到后面的信息內(nèi),可能會引發(fā)一些危險,所以我們在設(shè)計HUD界面的時候,盡量要保證設(shè)計的元素不要重疊在一起,你可以將文字轉(zhuǎn)化成icon或者可識別的圖形化,這一點后面會詳細的說明。

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

上一點也簡單的提到了,設(shè)計HUD的時候盡可能的少用文字,多用一些圖形化的設(shè)計,因為圖形化傳達的效果會比純文字會更好,我們舉一個例子:行走在斑馬線上的行人、騎自行車的、前方有異常物體等,如果都用文字來體現(xiàn),那么用戶需要先閱讀HUD中的文字,然后再做出判斷。將文字轉(zhuǎn)化為圖形化設(shè)計,那么就很大程度提高了駕駛者快速做出決斷,一個警示外框+物體的圖形化設(shè)計。

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

在HUD中為啥要做這些引導(dǎo)性的動畫呢?不難理解這個需求,我們都看過一些駕駛者走神錯過下高速路口的、也有走錯路口,肯定有人說了不是有手機高德導(dǎo)航的么?我想說的是:有的復(fù)雜性的路段高德也難,手機導(dǎo)航你有時候還需要低頭看手機導(dǎo)航,而HUD可以直接引導(dǎo)你走那一條路,其實比手機導(dǎo)航方便許多。晚上燈光弱的時候道路沒法看清,HUD也可發(fā)揮出它的強大功能引導(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è)計當中,所有內(nèi)容最好都在2層內(nèi)的交互結(jié)構(gòu)中全部顯示出來,因為交互結(jié)構(gòu)層越多,讓用戶使用起來越復(fù)雜,其次就是隱藏很深的話用戶沒辦法找到。

假設(shè)一個未來可以實現(xiàn)的場景:在行駛的過程中出現(xiàn)一些商店或者是加油站,如果有二級菜單中顯示可以顯示這個加油站每種油量的一個剩余,如果剩余不足,可以推薦導(dǎo)航到附近有庫存的加油站,而不是再給你第三層級,列出附近加油站的列表讓你再一次選擇,這樣用戶體驗也不是最好的??梢栽诙墝蛹壷型瓿傻娜蝿?wù)就別增加交互邏輯了。

10. 每次操作后的反饋感

建議每次在操作最后都需要一個反饋感,反饋感包含從視覺方面、聽覺方面、甚至還有一些震動的觸感。用戶在操作的時候都需要一個及時的反饋感,反饋該操作是正確還是錯誤,它下一步需要怎么一個操作等等。

這邊提到了一個聲音的反饋,聲音可以很拉升這款車的品質(zhì)感,一個專屬這款車的聲音會感覺到很酷,這方面聲音系統(tǒng)都是需要制作音樂的音樂人來私人訂制化的,而不是在網(wǎng)上找的那些簡單的音效,沒有什么亮點和記憶點。

11. 聚焦在一個點上,不能超過兩秒

聚焦在某一個單個信息模塊上的時間,不能超過兩秒,一旦超過這個數(shù)值就有可能會發(fā)生交通事故。

在動畫設(shè)計中我們也提到時間的概念,假設(shè)一輛以60km/h的車速 如果2-3s盲開就會開出 35-50m,一旦需要急剎車那么剎車距離至少15-20m,所以我們建議在設(shè)計HUD內(nèi)容中,盡量要設(shè)計出讓用戶一目了然的設(shè)計,避免在查看的時間花費過多的時間,比如在顏色運用上增強對比度等等。

12. 不要在HUD中加入輸入字符功能

為什么會提到這個點,雖然HUD的高度比儀表盤還要高出一點,觀察HUD視角距離正常道路視線還是有10度之差的,所以聚焦的時間也不能超過2秒,我們試想一下這個場景,需要去輸入準確的內(nèi)容,可能會占據(jù)時間很長,并且駕駛的危險系數(shù)也會隨之提高,因此建議HUD上面別做輸入字符的功能。

04 總結(jié)

本篇文章主要圍繞了探索AR-HUD的用戶體驗設(shè)計、最后還列出了十二個設(shè)計HUD需要的注意事項,我們在設(shè)計HUD的時候還是需要多考慮用戶場景、還有環(huán)境對我們設(shè)計造成的影響等等。

有一句話想對大家說“我們設(shè)計優(yōu)化一小步,就是對我們駕駛者安全的一大步”所以讓我們共同為了這一個愿景而努力吧。

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

#專欄作家#

設(shè)計界的影帝,微信公眾號:king設(shè)計研究所,人人都是產(chǎn)品經(jīng)理專欄作家。專注于車載HMI領(lǐng)域,想讓更多的設(shè)計和關(guān)注到這個行業(yè),將自己所學(xué)到、看到的知識都通過以文章形式展現(xiàn)給大家看。

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. HUD是什么?

    來自浙江 回復(fù)
  2. 寫的特別好,想往車聯(lián)網(wǎng)和智艙轉(zhuǎn)

    來自上海 回復(fù)
  3. 寫的很好666

    來自江蘇 回復(fù)
  4. 哇塞!!

    來自上海 回復(fù)
  5. 打CALL,大兄弟

    來自美國 回復(fù)
  6. 好評,從使用者的體驗和設(shè)計的完美結(jié)合。
    大神!

    來自亞太地區(qū) 回復(fù)