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

6 評論 8761 瀏覽 65 收藏 30 分鐘

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

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

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

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

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

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

進入我們今天的正題吧。

01 HUD發展階段和種類詳解

我們來講一下HUD的發展主要三個階段,并在每一個階段介紹相對應的HUD種類,這段知識可能比較專業,但我們設計師也要稍微了解一些硬件設備的知識,那我們開始吧。

L1/L2階段

L1/L2這個階段的HUD設計,信息都是在前面擋風玻璃上展示,上面呈現的信息也相對較少,上面有的信息包含有:車速、限速、簡單的導航、車道偏離、后面來車、警報提示相關內容,在設計風格上偏向于簡潔一些,為了最大程度上對于信息傳達。

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

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

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

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

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

他的優點:可以支持更大的成像區域和更遠的投影距離,比C-HUD成像更遠,而且展示信息的區域比C-HUD更大,顯示的效果更為一體化,也有助于駕駛者的安全行駛。

缺點:但擋風玻璃一般為曲面玻璃,所以W-HUD一定要根據擋風玻璃的尺寸和曲率搭配高精度非球面反射鏡,導致了W-HUD的成本相對較高,W-HUD一般是在我們購車的時候就已經配置好。

L3階段 AR-HUD

現在逐步向L3這個階段發展,這個階段我們發展的方向是AR-HUD,有人也稱它叫做3D-AR-HUD。

AR-HUD即AR和抬頭顯示的融合,AR技術全稱(Augmented Reality),使用擋風玻璃作為投影介質來反射成像。將胎壓、速度、轉速等信息投射到前擋風玻璃上,使車主在行車中,無需低頭就能查看汽車相關信息。

這個階段的設計不僅僅在前擋風玻璃上面展示,還結合和車外部環境合成,像道路,前方行人、車輛、建筑、甚至連摩托車、自行車都可以展現出來,未來可能展現更多的內容。將這些顯示信息、圖像可以和交通狀況進行融合并且提醒駕駛者,從而有效的的防止交通事故的發上。

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

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

1)解讀:BMW VISION NEXT 100

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

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

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

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

2)解讀:WayRay

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

WayRay對于導航的設計創造性十足,放棄了二維導航界面中的設計元素,而是用了箭頭貼合現實路況中,模擬出駕駛員的行駛軌跡。

到達目的還會給你推薦附近的停車場,并且標注出每小時多少美金,當到達指定目標位置,前方HUD會呈現出導航結束,還有給出你行駛的路線軌跡。

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

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

02 探索AR-HUD用戶體驗設計

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

1. 目前HUD發展的過程中存在的問題

1)從設計方面考慮

多場景下AR-HUD的圖像顯示的問題包含:亮度、顏色、清晰度、對比度、重影這些,因為不同場景下HUD上顯示的設計內容也會跟隨著變化。

如何將各種信息及功能集合在一起,讓整體的AR-HUD界面做一目了然,能夠讓用戶清晰、便捷地看到AR-HUD中的內容。

FOV(視場角度)與虛擬成像距離和圖形大小的呈現,這個需要我們頻繁的去調整角度、大小,因為車是一個行駛的狀況,它與周圍環境的都會因為距離改變大小和角度,這個在設計方面我們如何去考量它。

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

AR-HUD需要針對不同車型的擋風玻璃進行設計,所以在設計適配方面還存在很大的問題。

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

2. AR-HUD的界面設計原則

信息布局原則,控制同一時間內顯示信息的內容和數量,將重要的信息優先展示出來,比如與安全駕駛相關的信息,去掉無用的信息內容,盡量減少擋風玻璃上面的信息和數量,保證用戶駕駛。

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

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

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

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

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

2. AR-HUD交互設計方面

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

  • 一般任務:維持汽車正常駕駛
  • 機動控制任務:維持正常駕駛,并且根據交通法規和駕車環境,于其他車輛或者行人進行安全交互任務
  • 策略任務:比如導航路線規劃這一類需要駕駛者推理和構思

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

當前主流的AR- HUD產品,他們功能基本上都包含了:當前車速、ACC(自適應巡航輔助)、車距警告、變道提示、環境行人警告、車道偏離預警、前方車輛預警,在導航中這些信息呈現的方式都是不一樣的。

3. AR-HUD視覺設計方面

從設計的角度來講,AR-HUD也包含和很多復雜的視覺內容:亮度、圖形、色彩、布局、信息的數量等,AR-HUD的交互設計直接影響到駕駛安全和駕駛者的體驗。對于顏色的選擇,要找到合適的顏色作為提示和警報的用色,上面給大家講解的兩款AR-HUD的顏色方案,藍、綠、黃、紅居多。

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

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

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

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

03 HUD設計中需要注意的點

總結12條HUD在設計中需要注意的內容,也歡迎大家在留言區中進行補充說明。

1. 字體選擇

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

給大家推薦一些字體:

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

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

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

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

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

4. HUD顯示內容和其他屏幕需差異化

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

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

5. 避免信息重疊問題

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

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

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

7. HUD中需要做引導性的動畫

在HUD中為啥要做這些引導性的動畫呢?不難理解這個需求,我們都看過一些駕駛者走神錯過下高速路口的、也有走錯路口,肯定有人說了不是有手機高德導航的么?我想說的是:有的復雜性的路段高德也難,手機導航你有時候還需要低頭看手機導航,而HUD可以直接引導你走那一條路,其實比手機導航方便許多。晚上燈光弱的時候道路沒法看清,HUD也可發揮出它的強大功能引導駕駛者安全行駛。

8. 設計HUD動畫,時間建議都小于500毫秒

我們簡單科普一下500ms=0.5S我們在做HUD動畫的時候每一段動畫時間都需要小于0.5s,我們來計算一下,以這邊一輛以60km/h的車速,0.5S會開出10m-15m左右,所以動畫時間需一個合理的區間是非常重要的。

這里還需要提到一個詞“及時反饋感”因為在駕駛過程中,這一點非常的重要,不管在HUD還是中控上面設計動畫時長都不能太長,車載端的動畫設計和移動端APP動畫設計是不一樣。

9. HUD中最多使用兩個層級的交互結構

在HUD設計當中,所有內容最好都在2層內的交互結構中全部顯示出來,因為交互結構層越多,讓用戶使用起來越復雜,其次就是隱藏很深的話用戶沒辦法找到。

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

10. 每次操作后的反饋感

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

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

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

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

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

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

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

04 總結

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

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

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

#專欄作家#

設計界的影帝,微信公眾號:king設計研究所,人人都是產品經理專欄作家。專注于車載HMI領域,想讓更多的設計和關注到這個行業,將自己所學到、看到的知識都通過以文章形式展現給大家看。

本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. HUD是什么?

    來自浙江 回復
  2. 寫的特別好,想往車聯網和智艙轉

    來自上海 回復
  3. 寫的很好666

    來自江蘇 回復
  4. 哇塞?。?/p>

    來自上海 回復
  5. 打CALL,大兄弟

    來自美國 回復
  6. 好評,從使用者的體驗和設計的完美結合。
    大神!

    來自亞太地區 回復