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

2019-6-4    资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们已经生活在未来,那些曾经只出现在科幻剧太空飞船上的酷炫技术,如今正以不可思议的速度出现在汽车中。

近年,一个量产车中出现了最令人感兴趣的技术叫做抬头显示(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.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档