特斯拉的触摸屏界面:汽车仪表板界面的案例研究
myzbx 2025-06-08 23:01 3 浏览
在现代社会,汽车已经成为出行必备交通工具之一,汽车设计对驾驶员的驾驶体验有很重要的影响。本文以特斯拉的触摸屏界面为例,对汽车仪表板界面进行研究分析,希望对你有帮助。
简介:车辆控制装置应易于使用,并要求驾驶员尽量少注意,同时与驾驶相关的信息应清晰易懂。
对于我们中一些几十年前学会驾驶的人来说,驾驶一辆现代汽车是完全不同的体验。现代汽车配备了后视摄像头、障碍物传感器、泊车辅助、换道辅助、自适应巡航控制、自动驾驶仪驾驶,甚至还有网络浏览器。
这些功能应该使驾驶更安全、更舒适。但前提是汽车设计师了解人类注意力的最基本事实:人类的注意力是有限度的。如果他们设计了这些复杂的汽车功能,那么他们就会缺乏对驾驶这一基本任务的认知。
一、需要注意的“软按钮”
特斯拉的Model S几乎没有物理控件 — 物理控件全部都放在方向盘上或非常靠近方向盘的位置。与驾驶相关的功能,例如巡航控制,自动驾驶,刮水器和灯光,都可以通过这些控件来控制。
但是大多数“辅助”功能(包括后视摄像头,电话,媒体播放器和气候控制)没有专用的物理控件。 相反,选择它们的主要方法是通过位于驾驶员和乘客座椅之间的仪表板上的17英寸触摸屏显示器。 尽管这个屏幕很大(是iPad面积的三倍),却无法显示所有内容 — 因此,事情变得更加复杂,在特斯拉操作系统的版本9中,某些功能还位于可扩展菜单中。
特斯拉Model S触摸屏:可从汽车17英寸触摸屏显示屏底部的菜单栏中访问辅助汽车控制功能(例如汽车气候,媒体播放器或后视摄像头等应用程序)。
点击箭头图标(主菜单中左起第三;顶部)打开一个带有其他控件的子菜单(底部)。要关闭此菜单,用户必须轻触出现在原始菜单中用来代替箭头图标的“ X”图标。
尽管触摸屏仪表板比真实仪表板具有更大的灵活性,但它们有一个很大的缺点:没有触觉反馈。为了可靠地触摸这些按钮,人们必须看着它们。而使用物理按钮,我们可以学习并获取它的位置,而无需过多关注(如果有的话)。例如:我们可以在读取乐谱的同时弹钢琴,也可以在真实的键盘上进行触摸打字,而找到一个触碰软按钮需要我们以视觉的方式确认其位置。
如果软按钮隐藏在菜单下,则选择软按钮会涉及多个触摸屏交互,会花费更多时间和精力。而且,在汽车中,花费在UI上的这些时间将是我们忽略道路状况的时间。
二、不良的目标设计
1. 目标位置导致更长的交互时间
Fitts定律认为手指到达目标的时间取决于目标的大小和距离。因此,放置在远离初始手部位置的控件将比放置在较近位置的控件花费更长的时间来获取。
老一辈的那代人学会驾驶时,标准的手的位置是“2-10”(对应于时钟上的数字2和10)。随着安全气囊和更小的方向盘变得越来越普及,美国国家公路交通安全管理局(NHTSA)改变了这一建议,现在“3-9”已经成为最安全的位置。
对于这两种手的位置,最佳的控制位置将在屏幕的左中边缘,靠近驾驶员的右手。然而,Model S的控制装置被放置在17英寸屏幕的最底部,这一区域可能是倒数第二个最差的区域(倒数第一个在屏幕的右边缘)。
Tesla操作系统的版本9将控制菜单置于远离驾驶中正常手位置的位置。红线表示正常右手位置(3点钟)和控制区域之间的距离。
将控件放在触摸屏的底部还意味着眼睛从挡风玻璃移到菜单区域的时间更多,同时也意味着人们在忙于与触摸屏交互(和观看)时,将很少有机会利用余光来处理道路上出现的意外事件。
在给定的菜单中,最常用的选项应该最容易访问。但是,特斯拉关于菜单中控件顺序的决定是令人质疑的。
第一个选项是访问汽车的所有设置和自定义设置 — 在开车时不太可能经常使用这种设置。后视摄像头(后挡风玻璃视图被后座头枕部分遮挡的汽车中的一个基本功能)和电话点击箭头菜单可用。
还有一些被认为经常使用的选项在该菜单中也没有得到优先处理:日历,能源和Web(用于Web浏览器)不是列在箭头图标的上方(以最小化手指的移动时间),而是紧随其后 (后视摄像头和电话相比,您在开车时会多久使用一次这些功能)。
2. 目标尺寸大小
另一个影响抵达目标时间的因素是目标大小:按钮越大,到达按钮的速度就越快。
然而,在版本9中,特斯拉决定缩小目标范围(大概是为了在可见的菜单栏中添加更多选项 — 版本8中为7,而版本9中为10或11)。许多移动端设计师都屈服于这种诱惑,但不幸的是,这并不是可用的设计。
用于控制媒体播放器的图标(播放/暂停,Like,Next)小于推荐的1cm X 1cm触摸目标尺寸。但是,媒体播放器显示屏底部的标签(广播,流媒体,电话等)要大得多(它们还包括标签和图标,我们强烈建议这样做)。
3. 意外碰触
由于控制面板中的目标彼此之间距离太近,因此太容易触摸到错误的目标。
例如,在很多情况下,会在尝试更改温度或点击气候图标时触发了座椅加热装置。当驾驶员尝试通过向上滑动箭头图标(手势快捷方式受iOS启发)来尝试访问其他的应用程序时,座椅图标也很容易被意外触摸。
当用户在应用程序图标上垂直滑动以启动最新的应用程序时,座椅加热装置可能会意外触发(如此屏幕截图所示 — 红色虚线表示手指的轨迹)。当用户尝试调整驾驶员侧温度时,可能会误操作相同的座位图标。
4. 地图始终显示在屏幕上
为了让人们从屏幕上快速获取所需的信息,然后继续前进,汽车仪表板上的文字应在各种光线条件下都易于阅读。文本太小,出现在内容很多的背景上,或与背景对比度低,通常不能满足这些要求。
然而,特斯拉的地图应用程序总是显示在所有应用程序的背景中。因此,屏幕顶部的状态栏可能很难读取,因为它与地图文本融合在一起。
此外,在两个应用程序窗口之间出现一条颜色鲜艳的分割线(如下面的屏幕截图所示)可能是完全不相关的(而且可能会分散注意力)。另外,打开的应用程序不能从屏幕的最顶端显示,这不仅剥夺了用户的可操控权(也违背了尼尔森的十大可用性原则之一),而且也是浪费,迫使用户在最顶端必须看到地图的一小部分,而且其中包含的信息还非常少。
背景中的地图还容易引起与其他应用程序的交互出错:如果要增加应用程序窗口的大小,则必须从应用程序视图的顶部边缘拖动。但如果你不小心,把手指放在窗口手柄上,什么也不会发生,因为操作系统会假设你在滑动地图,而不是最大化地图窗口。
该地图出现在所有应用程序的背景中,可能会干扰其上方显示的内容,或者可能会滑动以关闭或最大化应用程序。红色交通标志在日历和媒体播放器应用之间的区域中可见,可能使无关的信息分散驾驶员的注意力(还要注意,日历应用程序是通过点击左上角的“ X”关闭的,而媒体播放器应用程序是通过从其窗口顶部边缘的手柄向下滑动而关闭的)。
5. 理解所显示的信息对用户来说是一项挑战
如果您想在驾驶特斯拉时改变车道,可能会用到以下信息源:
- 老式后视镜加上侧视镜,左右转动头部检查车道的可用性。
- 后视摄像头(在以前的特斯拉操作系统中,你可以把它固定在主触摸屏的顶部。现在,它永远不会在最上面,所以,想要看一眼,你的眼睛需要从马路向下移动到触摸屏)。
- 辅助屏幕上的车道辅助功能,在您接通转向信号灯但车道不可用时显示红线。
仪表板显示汽车是否可以安全地改变车道或(底部),仅显示紧邻车辆的车道。
问题是这些信息源都不完整(例如,后视镜视图被头枕部分遮挡),当您检查完所有信息源时,您可能已经实现你的目的了。
所以,大多数人最终所做的是走捷径来节省交互成本,并且仅仅依赖其中一个信息源。你认为他们最有可能选哪一个?
交互成本最低的一个:显示在辅助仪表板上的车道辅助,当转向灯接通时,辅助仪表板始终显示。
这实际上是一个成功地摒弃老套、精心排练的行为的例子——那些努力教用户如何变得更有效率的应用程序设计师应该从特斯拉的案例中吸取教训:如果你让它变得比以前更容易,而且总是在最需要的时间向用户展示,那么用户最终会信赖并依赖它。
所以,如果用户能够以更快的速度完成同样的任务,那是好事,对吧?当然,前提条件是如果这个解决方案在任何情况下都能正常工作。
事实上,特斯拉警告用户不要仅仅依靠车道辅助来改变车道。即使排除传感器错误(比预期的更常见),正确解释显示的信息也是一项挑战。
问题是用户可能无法识别车道辅助提示适用于哪个车道。
请想象您在三车道道路上行驶,并希望将车道从最右边的车道切换到中间车道。当你打开转向灯时,汽车可能会显示车道是空闲的。但是,当你到达中间车道时,由于你的转向灯仍在工作,汽车将显示有关转入左侧车道的信息。
然而,用户并不总是完全知道他们的车所在的位置 — 因此,他们可能会检查车道辅助显示,进行车道切换,然后再次检查显示,注意红色警报(这一次将涉及切换到下一个车道),将其误解为指代他们当前的目标,并惊慌失措,使汽车掉头返回进入原来的车道。
这个例子指出了汽车设计师和制造商今天面临的一个重要困境。新功能,如自动驾驶、车道辅助、碰撞检测等,有可能取代我们过去依赖的传统驾驶行为,如回头看或检查后视镜。如果这些功能是功能性的,并且使用它们比执行我们在驾校学到的手势和动作更容易,那么它们将取代那些动作(我们是最小努力的生物:我们总是采取需要最少工作的解决方案——不是因为我们懒惰,而是因为我们高效)。
这就是为什么我们在新闻中会听到有人在化妆,玩游戏,甚至睡在方向盘上 — 因为他们觉得这样做很安全。然而,作为设计师,我们有责任创建正确的心理模型,让人们正确理解我们的系统是如何工作的,以确保如果我们取代这些老式行为,不会使驾驶变得更危险。
三、好的设计点
如上所述,可以对特斯拉的UI进行很多改进。但是,也有几个很好的设计点:
1. 大屏幕是其中一个优点:它可以并排查看多个应用程序窗口。尽管切换应用程序可能会很痛苦(因为它确实涉及多次轻击并看着屏幕),但是能够同时查看其中的几个(例如,后视摄像头和地图或媒体播放器)使操作起来更容易司机。
驾驶时用户确实需要同时访问多个信息源(例如地图和后视摄像头),并且同时看到所有这些窗口的情况会大大降低用户的记忆负担。相比之下,即使在最大的平板电脑上,人们也很少拆分屏幕用来同时显示多个窗口,尽管分屏功能已经存在了一段时间。
2. 该地图应用程序包含特斯拉特有的信息。
例如,即使该应用基于Google Maps,它也确实具有一些特斯拉车主专有的选项:
- 增压器的位置会自动显示在地图上
- 导航到目的地时,地图会显示到达目的地时电池中会剩余多少电量
- 导航应用程序允许用户根据拼车车道的使用来接收路线
地图应用程序显示到达目的地后将收取多少费用。
3. 自动驾驶和自动导航系统承认存在故障的可能性,并要求驾驶员在运行时将手保持放在方向盘上。
4. 特斯拉始终与网络相连,可以通过空中接收更新信息。此功能既可以视为是正向的也可以视为负向的。
好处是可以快速修复错误,就像网站一样每天可以更新不同的颜色。特斯拉以相同的方式将其部署到汽车上,可以轻松连接有关驱动程序的分析数据,报告错误并修复问题。
不幸的是,如果突然违反了以前版本中用户的期望,那么不断变化的界面也可能会造成潜在的致命问题(此外,必须相信汽车制造商只会部署安全且经过良好测试的操作系统)。
四、总结
现代汽车就是一台功能强大的计算机。它们可以通过从各种传感器收集的信息来增强驾驶员的认知和身体能力;它们还可以通过一次点击即可获得的大量便利功能来增强驾驶体验。
当然,只有在汽车设计师梳理了数十年来设计计算机界面的经验,并遵循众所周知的可用性和人类心理模型之后,这些事情才能真正发生。
原文地址:
https://www.nngroup.com/articles/tesla-big-touchscreen/
原文作者: 拉鲁卡(Raluca Budiu)
本文由 @Henry-Lee 翻译发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
相关推荐
- PhantomJS出局!Puppeteer vs. Playwright 如何选择?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!前言浏览器自动化并不是一项新技术,Sel...
- Cesium 两种方式加载 Geoserver服务 WMTS以及WMS、WFS、KML资源图层
-
最近有需求,Cesium叠加Geoserver缓存瓦片,也就是WMTS瓦片,本来想直接使用Tomcat之类的容器发布瓦片服务再叠加。后来发现Geoserver的瓦片规则有点不太常规,...
- Windows App Studio 更新,快速打包 WordPress 网站为通用应用
-
2015年12月23日,10:52上午-Picturepan2今天,微软推出了12月WindowsAppStudio更新。如果你拥有WordPress网站,Wind...
- 2025 款凯迪拉克 Escalade IQ 将技术推向新高度
-
从55英寸显示屏到免提驾驶,2025款EscaladeIQ将凯迪拉克的科技提升到了一个新的水平。2025款凯迪拉克EscaladeIQ电动版的推出是重磅新闻。除了出乎意料的动力系统之外...
- 苹果iOS14发布,亮点不少,网友:有点像wp系统
-
北京时间6月23日凌晨1点,苹果开发者大会WWDC2020首次以直播形式举行,苹果公司CEO蒂姆·库克在史蒂夫·乔布斯剧院礼堂做开场演讲。视频截图随后,苹果高级副总裁CraigFederighi开...
- Avalonia跨平台入门第二十一篇之玩耍CEF
-
在前面分享的几篇中咱已经玩耍了Popup、ListBox多选、Grid动态分、RadioButton模板、控件的拖放效果、控件的置顶和置底、控件的锁定、自定义Window样式、动画效果、Expande...
- WordPress 站点地图如何设置?WordPress 站点地图指南及其使用方法
-
WordPress站点地图设置指南及其使用方法吓载海量跨境营销软件:https://www.huahaikuajing.com什么是站点地图以及如何使用它如果您曾经坐下来阅读有关SEO的文章,您...
- 数控变频器的研究与实现(数控变频器作用)
-
一般变频器具有两种控制方式:控制面板控制方式和串行通信数据控制方式。控制面板控制方式利用变频器自带控制面板进行手动操控,一般应用于非自动控制场合。在自动化程度越来越高的工业生产现场以及机电一体化的数控...
- 一文学会VB编程,简单实用不费力(vb编程基础知识)
-
应用实例:给VB程序加菜单图标:在VB里面加图标比较麻烦,你需要用到API函数进行调用,参数不好理解:给菜单添加图标的API函数:GetMenu、GetSubMenu、GetMenuItemID、Se...
- 谷歌亲儿子升级Android11,Pixel大全套的技巧分享
-
GooglePixel5出来前,一直都是用GooglePixel4a作为主力机,手感好之余也有强大的拍照功能,NT$11,990的建议售价降低入手门槛,这或许也是Pixel系列不断...
- 基于Unity3D的三维页游的设计与实现
-
张海程,李效伟,郭玮玮,张萌,庄绪姣,车统统(山东女子学院信息技术学院,山东济南250300)摘要:Unity3D引擎能够加速网页三维游戏的开发。基于Unity3D引擎,使用3DsMax对三...
- DevExpress Universal Subscription v15.1.3震撼发布
-
DevExpress日前震撼发布了全新的v15.1.3版本。在此次发布的新版本中,您可以利用我们的UI控件集在Windows10上进行开发。凭借现在投放在Windows8XAML平台上的代码,我...
- 苹果智能手表十大细节曝光(苹果智能手表最新款功能介绍)
-
从今天开始,软件开发商将可以为苹果智能手表AppleWatch开发新应用。当然,这些应用不是独立的,它们必须是当前iPhone上现有应用的扩展。此外,AppleWatch的开发者套件WatchKi...
- 专题|外行人看大数据 十款最常用的数据可视化工具
-
实习编辑:西和西校对排版:bin~bin随着大数据时代的到来,数据可视化工具越来越重要,大量繁杂的数据在经过可视化工具处理后,从简单的表格变成多种多样的图形,以图形化的形式展现在用户面前,清晰直观。...
- 最新的iPhone更新,CarPlay功能将升级
-
苹果最近向测试人员推出了一个新的iOSBeta,除了iPhone的新功能外,这家总部位于库比蒂诺的科技巨头似乎还默默地为CarPlay用户提供了许多优惠。最新的主要CarPlay大修是作为iOS...
- 一周热门
- 最近发表
-
- PhantomJS出局!Puppeteer vs. Playwright 如何选择?
- Cesium 两种方式加载 Geoserver服务 WMTS以及WMS、WFS、KML资源图层
- Windows App Studio 更新,快速打包 WordPress 网站为通用应用
- 2025 款凯迪拉克 Escalade IQ 将技术推向新高度
- 苹果iOS14发布,亮点不少,网友:有点像wp系统
- Avalonia跨平台入门第二十一篇之玩耍CEF
- WordPress 站点地图如何设置?WordPress 站点地图指南及其使用方法
- 数控变频器的研究与实现(数控变频器作用)
- 一文学会VB编程,简单实用不费力(vb编程基础知识)
- 谷歌亲儿子升级Android11,Pixel大全套的技巧分享
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)