如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

我們已經(jīng)生活在未來，那些曾經(jīng)只出現(xiàn)在科幻劇太空飛船上的酷炫技術(shù)，如今正以不可思議的速度出現(xiàn)在汽車中。

近年，一個量產(chǎn)車中出現(xiàn)了最令人感興趣的技術(shù)叫做抬頭顯示（Head-up Displays）。

雖然汽車 HUD 的出現(xiàn)讓人無比著迷，但它的交互設(shè)計和視覺設(shè)計卻與之相反。

為了解決這個問題，來自德國 Fachhochschule Potsdam 學院用戶界面設(shè)計專業(yè)的 25 名學生和老師經(jīng)過多輪討論，最終總結(jié)出一系列新的觀點和想法，并將它們制作成高保真原型。

在這次設(shè)計作業(yè)中，25 名學生分別為寶馬、雪鐵龍、雷克薩斯、Mini、梅賽德斯奔馳、Smart、特斯拉和大眾等 8 個汽車廠商設(shè)計了接近未來概念的「HUD高保真原型」。

盡管不同的汽車廠商風格迥異且目標群體不盡相同，但駕駛者行車時的需求并沒有太大的變化。因此，一些內(nèi)容會反復地在不同廠商的高保真原型中出現(xiàn)。

可視化>數(shù)字

當使用圖形而不是數(shù)字來展示速度和速度限制時，駕駛者更容易識別和理解。

△ Smart —— 速度與當前的限速標準有關(guān)，且可視化。

△ 雪鐵龍 —— 地圖外側(cè)的圓圈是速度可視化的效果。當兩個進度條在頂部重合時，代表達到限速標準。©Marie Claire Leidinger、Jonathan Jonas、David Brandau

△ 大眾 —— 抽象的圖形代表速度和限速標準之間的關(guān)系。©Dominic R?del、Laurids Düllmann、Phillip Steinacher

△ 雷克薩斯 —— 速度被可視化，成為一條直線，限速標準在直線的中間，當車速超過車速限制時，直線變?yōu)辄S色且車速線變粗。©Christian Franke、Sebastian Prein、Lennart Ziburski

冗余信息的不同展現(xiàn)方式

HUD 可以容納儀表盤內(nèi)容以外的其他信息，但這些信息應(yīng)該用不同的圖形展現(xiàn)，且設(shè)計時需注意充分利用車窗顯示空間。

△ 特斯拉 —— 特斯拉的 HUD 展示儀表盤時速部分的簡化版。©Constantin Eichstaedt、Steffen Gabel

△ BMW —— HUD 不僅顯示車速，還顯示混合動力汽車狀態(tài)和活動。©Patricia Dobrindt、Simon Martin、Jakob Flemming

不展示無意義的內(nèi)容

在不同場景下，車窗顯示中的內(nèi)容可能不同，但都必須是非常重要的信息。顯然，大量的信息和裝飾物會將重要的信息掩埋，導致重要的信息不能被快速、有效地識別。

△ Smart —— 導航提示僅在轉(zhuǎn)向時出現(xiàn)，一些需要長時間顯示的信息，例如「預(yù)計到達時間」沒有被設(shè)計在 HUD 視覺界面中。©Cécile Zahorka、Fabian Archner、Sebastian Kaim

模糊狀態(tài)下仍有辨識度

HUD 的視覺設(shè)計必須保證具有最大的對比度和清晰度，理想的 HUD 即使模糊不清，但仍然具有可讀性。

△ 梅賽德斯奔馳（左）、大眾（右）—— 盡管 UI 已經(jīng)模糊不清，但重要信息，比如車速過快仍然可以識別。©left：David Rehman、Michael Dietz、Thomas Petrach；©right：Dominic R?del、Laurids Düllmann、Phillip Steinacher

HUD是投影而非顯示

與電影院昏暗的環(huán)境和純色幕布不同，HUD 投影的幕布是車窗，而車窗后的世界是復雜多變的，有時甚至有強烈的陽光直射車窗，這也使得 HUD 設(shè)計充滿諸多限制。

△ Mini —— 這一概念設(shè)計方案挑戰(zhàn)如何在多變的復雜車窗環(huán)境中設(shè)計常顯的菜單，菜單中包括導航、電話和音樂。©Kien Nguyen Canh、Moritz Kronberger

警告信息的出現(xiàn)需要有過渡

我們的研究報告顯示，許多駕駛者對一些我們以為對他有幫助的行為感到不滿，比如為了強調(diào)車速限制或其他交通規(guī)則而突然出現(xiàn)的警告信息。

的確，在駕駛者沒有建立「速度上升會導致某些問題」這一預(yù)期時，突然彈出警告信息是很突兀甚至冒昧的做法。

因此在 HUD 設(shè)計中提供一個過渡順暢的動畫也許是一個解決方案，比如隨著車速的上升，提示信息從相對緩和的提醒慢慢過渡到嚴重的警告會更加友好。

△ 梅賽德斯奔馳 —— 駕駛者超速越多，出現(xiàn)在車速圓環(huán)外部的紅色圓環(huán)越多。©David Rehman、Michael Dietz、Thomas Petrach

圖標需要文字說明

汽車儀表盤上，晦澀難懂的 icon 有著悠久的歷史，「紅色的三角形代表什么」。

這是因為以前的儀表盤是斷碼屏，文字的顯示較難，但最近幾年，液晶顯示屏在汽車上被廣泛應(yīng)用，設(shè)計儀表盤的 UI 時，文字位置不再是一個問題。

另外，增加清晰的文字說明可以有效地降低用戶的學習成本。

△ 如果沒有文字說明，駕駛者很難明白大眾 HUD 中 Steinschlag（碎石塌方）的圖標代表什么。特斯拉 HUD 中低電量 icon 加上文字說明后也更容易被人理解。©left：Dominic R?del、Laurids Düllmann、Phillip Steinacher；right：Constantin Eichstaedt、Steffen Gabel

總結(jié)

最近在研究汽車 HUD 設(shè)計，偶然間發(fā)現(xiàn)這篇文章中的一些細節(jié)，對自己正在著手進行的 HUD 設(shè)計很有參考價值，所以著手將它翻譯下來，分享給大家，希望也能給大家?guī)硪恍椭?

藍藍設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。