2019-6-4 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
我們已經(jīng)生活在未來(lái)，那些曾經(jīng)只出現(xiàn)在科幻劇太空飛船上的酷炫技術(shù)，如今正以不可思議的速度出現(xiàn)在汽車(chē)中。近年，一個(gè)量產(chǎn)車(chē)中出現(xiàn)了最令人感興趣的技術(shù)叫做抬頭顯示（Head-up Displays）。
雖然汽車(chē) HUD 的出現(xiàn)讓人無(wú)比著迷，但它的交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)卻與之相反。
為了解決這個(gè)問(wèn)題，來(lái)自德國(guó) Fachhochschule Potsdam 學(xué)院用戶(hù)界面設(shè)計(jì)專(zhuān)業(yè)的 25 名學(xué)生和老師經(jīng)過(guò)多輪討論，最終總結(jié)出一系列新的觀點(diǎn)和想法，并將它們制作成高保真原型。
在這次設(shè)計(jì)作業(yè)中，25 名學(xué)生分別為寶馬、雪鐵龍、雷克薩斯、Mini、梅賽德斯奔馳、Smart、特斯拉和大眾等 8 個(gè)汽車(chē)廠(chǎng)商設(shè)計(jì)了接近未來(lái)概念的「HUD高保真原型」。
盡管不同的汽車(chē)廠(chǎng)商風(fēng)格迥異且目標(biāo)群體不盡相同，但駕駛者行車(chē)時(shí)的需求并沒(méi)有太大的變化。因此，一些內(nèi)容會(huì)反復(fù)地在不同廠(chǎng)商的高保真原型中出現(xiàn)。
當(dāng)使用圖形而不是數(shù)字來(lái)展示速度和速度限制時(shí)，駕駛者更容易識(shí)別和理解。
△ Smart —— 速度與當(dāng)前的限速標(biāo)準(zhǔn)有關(guān)，且可視化。
△ 雪鐵龍 —— 地圖外側(cè)的圓圈是速度可視化的效果。當(dāng)兩個(gè)進(jìn)度條在頂部重合時(shí)，代表達(dá)到限速標(biāo)準(zhǔn)。©Marie Claire Leidinger、Jonathan Jonas、David Brandau
△ 大眾 —— 抽象的圖形代表速度和限速標(biāo)準(zhǔn)之間的關(guān)系。©Dominic R?del、Laurids Düllmann、Phillip Steinacher
△ 雷克薩斯 —— 速度被可視化，成為一條直線(xiàn)，限速標(biāo)準(zhǔn)在直線(xiàn)的中間，當(dāng)車(chē)速超過(guò)車(chē)速限制時(shí)，直線(xiàn)變?yōu)辄S色且車(chē)速線(xiàn)變粗。©Christian Franke、Sebastian Prein、Lennart Ziburski
HUD 可以容納儀表盤(pán)內(nèi)容以外的其他信息，但這些信息應(yīng)該用不同的圖形展現(xiàn)，且設(shè)計(jì)時(shí)需注意充分利用車(chē)窗顯示空間。
△ 特斯拉 —— 特斯拉的 HUD 展示儀表盤(pán)時(shí)速部分的簡(jiǎn)化版。©Constantin Eichstaedt、Steffen Gabel
△ BMW —— HUD 不僅顯示車(chē)速，還顯示混合動(dòng)力汽車(chē)狀態(tài)和活動(dòng)。©Patricia Dobrindt、Simon Martin、Jakob Flemming
在不同場(chǎng)景下，車(chē)窗顯示中的內(nèi)容可能不同，但都必須是非常重要的信息。顯然，大量的信息和裝飾物會(huì)將重要的信息掩埋，導(dǎo)致重要的信息不能被快速、有效地識(shí)別。
△ Smart —— 導(dǎo)航提示僅在轉(zhuǎn)向時(shí)出現(xiàn)，一些需要長(zhǎng)時(shí)間顯示的信息，例如「預(yù)計(jì)到達(dá)時(shí)間」沒(méi)有被設(shè)計(jì)在 HUD 視覺(jué)界面中。©Cécile Zahorka、Fabian Archner、Sebastian Kaim
HUD 的視覺(jué)設(shè)計(jì)必須保證具有最大的對(duì)比度和清晰度，理想的 HUD 即使模糊不清，但仍然具有可讀性。
△ 梅賽德斯奔馳（左）、大眾（右）—— 盡管 UI 已經(jīng)模糊不清，但重要信息，比如車(chē)速過(guò)快仍然可以識(shí)別。©left：David Rehman、Michael Dietz、Thomas Petrach；©right：Dominic R?del、Laurids Düllmann、Phillip Steinacher
與電影院昏暗的環(huán)境和純色幕布不同，HUD 投影的幕布是車(chē)窗，而車(chē)窗后的世界是復(fù)雜多變的，有時(shí)甚至有強(qiáng)烈的陽(yáng)光直射車(chē)窗，這也使得 HUD 設(shè)計(jì)充滿(mǎn)諸多限制。
△ Mini —— 這一概念設(shè)計(jì)方案挑戰(zhàn)如何在多變的復(fù)雜車(chē)窗環(huán)境中設(shè)計(jì)常顯的菜單，菜單中包括導(dǎo)航、電話(huà)和音樂(lè)。©Kien Nguyen Canh、Moritz Kronberger
我們的研究報(bào)告顯示，許多駕駛者對(duì)一些我們以為對(duì)他有幫助的行為感到不滿(mǎn)，比如為了強(qiáng)調(diào)車(chē)速限制或其他交通規(guī)則而突然出現(xiàn)的警告信息。
的確，在駕駛者沒(méi)有建立「速度上升會(huì)導(dǎo)致某些問(wèn)題」這一預(yù)期時(shí)，突然彈出警告信息是很突兀甚至冒昧的做法。
因此在 HUD 設(shè)計(jì)中提供一個(gè)過(guò)渡順暢的動(dòng)畫(huà)也許是一個(gè)解決方案，比如隨著車(chē)速的上升，提示信息從相對(duì)緩和的提醒慢慢過(guò)渡到嚴(yán)重的警告會(huì)更加友好。
△ 梅賽德斯奔馳 —— 駕駛者超速越多，出現(xiàn)在車(chē)速圓環(huán)外部的紅色圓環(huán)越多。©David Rehman、Michael Dietz、Thomas Petrach
汽車(chē)儀表盤(pán)上，晦澀難懂的 icon 有著悠久的歷史，「紅色的三角形代表什么」。
這是因?yàn)橐郧暗膬x表盤(pán)是斷碼屏，文字的顯示較難，但最近幾年，液晶顯示屏在汽車(chē)上被廣泛應(yīng)用，設(shè)計(jì)儀表盤(pán)的 UI 時(shí)，文字位置不再是一個(gè)問(wèn)題。
另外，增加清晰的文字說(shuō)明可以有效地降低用戶(hù)的學(xué)習(xí)成本。
△ 如果沒(méi)有文字說(shuō)明，駕駛者很難明白大眾 HUD 中 Steinschlag（碎石塌方）的圖標(biāo)代表什么。特斯拉 HUD 中低電量 icon 加上文字說(shuō)明后也更容易被人理解。©left：Dominic R?del、Laurids Düllmann、Phillip Steinacher；right：Constantin Eichstaedt、Steffen Gabel
最近在研究汽車(chē) HUD 設(shè)計(jì)，偶然間發(fā)現(xiàn)這篇文章中的一些細(xì)節(jié)，對(duì)自己正在著手進(jìn)行的 HUD 設(shè)計(jì)很有參考價(jià)值，所以著手將它翻譯下來(lái)，分享給大家，希望也能給大家?guī)?lái)一些幫助。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com