? 25个专业设计师分析了8家汽车厂商,总结了 7 个 HUD 设计细节! - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


25個專業設計師分析了8家汽車廠商,總結了 7 個 HUD 設計細節!

2019-6-4 泥人張


如果您想訂閱本博客內容,每天自動發到您的郵箱中,

我們已經生活在未來,那些曾經只出現在科幻劇太空飛船上的酷炫技術,如今正以不可思議的速度出現在汽車中。

近年,一個量產車中出現了最令人感興趣的技術叫做抬頭顯示(Head-up Displays)。

雖然汽車 HUD 的出現讓人無比著迷,但它的交互設計和視覺設計卻與之相反。

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

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

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

可視化>數字

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

△ Smart —— 速度與當前的限速標準有關,且可視化。

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

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

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

冗余信息的不同展現方式

HUD 可以容納儀表盤內容以外的其他信息,但這些信息應該用不同的圖形展現,且設計時需注意充分利用車窗顯示空間。

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

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

不展示無意義的內容

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

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

模糊狀態下仍有辨識度

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

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

HUD是投影而非顯示

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

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

警告信息的出現需要有過渡

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

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

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

△ 梅賽德斯奔馳 —— 駕駛者超速越多,出現在車速圓環外部的紅色圓環越多。©David Rehman、Michael Dietz、Thomas Petrach

圖標需要文字說明

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

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

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

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

總結

最近在研究汽車 HUD 設計,偶然間發現這篇文章中的一些細節,對自己正在著手進行的 HUD 設計很有參考價值,所以著手將它翻譯下來,分享給大家,希望也能給大家帶來一些幫助。

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

« 包容性的利益相關方管理工具,解決大量用戶體驗問題的服務設計中如何被使用 | 編程小知識之 JavaScript 文件讀取»


藍藍 http://www.thriveonsite.com

訂閱Rss
吉林快3开奖 北京快3 小金棋牌 韩国1.5分彩 彩票高賠率好平台 聚发彩票投注 深度网赚论坛 四肖三期必開 英豪彩票开户 上网赚钱真假