bibi： 最近一段时间，关注的 UX 与 UI 主要集中在了 VR、对话式交互、自动驾驶汽车的人车交互这三个方向上。这三个方向基本涵盖了人机交互未来的主要可能性。并且这三者之间又有着紧密的联系。对话式的交互方式就像是当年的多点触摸，是一种交互方式的革命。而 VR 技术就像是当年的 web2.0，一种呈现方式的革命。对于自动驾驶汽车的人车交互就像是把所有新型交互方式与技术的一个最好用例，无论是对于汽车工业还是人机交互都将是全新的方向。
另外关于相关的知识推荐两本书
Don Norman 的《设计心理学4：未来设计》
Golden Krishna 的《无界面交互:潜移默化的UX设计方略》
译文： 如果你是一名设计师或汽车爱好者，那么这篇文章非常适合你。我详细分析了第一款大众市场触摸屏电动车 Tesla Model 3 的仪表盘控制器以及界面的细节。该车的 UI 设计告诉我们关于特斯拉的长期战略，以及他们对无人驾驶的未来的看法。
自从一开始，我就在关注 Tesla Model 3 的传奇故事。通过去年试驾 Model S，并且迷上了它是如何驾驶，以及敏锐的调整来提升整体的用户体验，我发现我已经开始期待能够带来同样体验的“可负担”版本的前景。像你们其中的很多人做过的一样，我看着每一个 Model 3 的发布，并搜索网上的关于它的一切细节。
第一个概念很酷，但我不认为特斯拉真的会在汽车准备好给消费者的时候把仪表盘去掉。“现在可能很酷，但营销人员或消费者还无法让它飞行。这仅仅是个概念”我曾经自认为很明智的说道。
额……看来我是错了。他们真的去掉了仪表盘。
以及旋钮
以及排风口控制器
以及打开手套箱的把手
没有按钮
与之相应的是他们将这些功能都集中于汽车中控的触摸屏上。他们甚至不想将这块屏幕隐藏起来，中间的屏幕就像一个竖起的巨大中指树立于整个车内空间；仿佛是在对那些反对者，怀疑者，以及其他汽车公司说着“F-you”。特斯拉摆脱了引擎，但他们会尽可能地去撼动一个有着100年历史的产业；没有什么是神圣的。Model 3 可能会有四个车轮和一个汽车形状的车身，这是它与大部分汽车所类似的地方。
这件事的不同
Tesla 的新闻确实让我惊讶，但也不至于彻底震撼。给我带来的感受更多的是“这是什么鬼？”“嗯哼”和“嗯…有趣”来形容更为贴切。
Model 3 可能会有四个车轮和一个汽车形状的车身，这是它与大部分汽车所类似的地方。
我想知道 Tesla 是如何将那些控制器隐藏到那一块玻璃面板后的，所以我开始在网上搜集关于这块屏幕的 UI 的全部信息。过了一段时间，我终于遇到了一个由一位名叫 Andrew Goodlad 的设计师完成的项目，我认为这名设计师通过发布会上所透露出的内容及 YouTube 上的摇摇晃晃的车内视频，复现了 Tesla Model 3 的用户界面。他完成了一个原型以及相关的设计。
为什么我决定重新创建它的 UI
他的原型很酷，但静态图像还不足以满足我的好奇心。我想分析这些组件，并确切的了解 Tesla 是如何设计这疯狂的新车仪表盘的……以及为什么这么做。
所以……我使用 CSS Peeper 下载了所有页面的 jepg。
然后我将它们导入 Figma。
……接下来我就开始用这些图片重建 Tesla Model 3 的 UI。我制作了图标，配色，设计了一个自定义的地图视窗，将 Figma 组件、开关、按钮等所有东西拼凑起来。参考别人的工作是很有效的，就像我曾经在儿时看 Sunday 漫画一样。通过临摹 Snoopy 和 兔八哥让我学会了如何绘画，那么或许临摹这些界面能够帮助我了解制作汽车 UI 的困难之处。
参考别人的工作是很有效的，就像我曾经在儿时看 Sunday 漫画一样。
我在 Figma 中完成了大部分的设计工作。我曾经写过关于为什么使用 Figma，这是因为它是基于 web 端的，我能够很方便的将它分享给你们大家。同样用它来完成原型也是非常的高效与简单的。以下是我的源文件的链接：
以下是可交互原型的文档：
https://www.figma.com/proto/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?scaling=contain&node-id=37%3A2923
Figma prototypes are 🔥
备注：如果对于 Figma 及其设置感兴趣，可以在评论中告诉我。当我完成原型的构建后，我发现这种采用系统组件来构建原型的方式，速度真的是很快。事实上，这部分只花了我不到半个小时的时间，这实在是出乎我的意料。我本只是想完成几个界面的连接，但我现在几乎想把这一部分单独拿出来写一写。如果我这样做了，那么我会把链接放在这里 -> ……（译者：作者应该是打算日后更新补上这部分，但目前似乎还没有完成。）
我从 Model 3 的 UI 设计中学到了些什么
这辆车不是为完美的驾驶体验而设计的
什么？？？
是的，正是如此。
Tesla Model 3 是一款在设计师没有考虑驾驶员的汽车。并且是有意为之。
没有旋钮。甚至几乎没有方向盘。你通过一个操纵杆来打开挡风玻璃前的雨刷器，但是频率是通过屏幕控制的。你必须点击屏幕来打开手套箱。你可以通过点击屏幕或自动的方式打开紧急制动。从司机的角度来讲这不是很糟糕吗？他们不能再依靠纯粹的本能和肌肉记忆来驾驶骑车。
我不把 Tesla 这样设计单纯的理解为是前卫、危险或是与众不同。他们是在为没有司机的世界做准备。
这辆车是为了骑行的体验而设计
UI 中的一个又一个因素在告诉我这一切：屏幕分辨率。
这辆车本可以向 Model S 和 X 一样垂直放置屏幕。但他们并没有那样做。取而代之的是他们选用了一块 8：5 的，分辨率为 1920x1200 的屏幕。为什么这很重要？
这是个 HDTV，老铁。
好吧，底部的控制条的高度为 120px。
1200-120=1080
1920x1080
这就是个 HDTV，老铁。
Netflix 与颤抖
好吧，找到那些与寒意押韵的话的确很难。这并不是一个好的双关语，我懂了。
高清的分辨率表明，Tesla 是想将他们的中控用来看东西，而不是驾驶汽车。这就是无人驾驶的未来。这不是一辆有着奇怪仪表盘的汽车，而是一个移动的房间。这是一个漫长的过程，随着当法规与技术到位的时候，没有比将看电影的屏幕放在车中间正确的地方更合适的了。
这不是一辆有着奇怪仪表盘的汽车，而是一个移动的房间。
当然，我并不是 Elon Musk 的左右手，这些仅仅只是我的个人猜测。如果当发现我的猜测是错误的，还请勿怪。
打破用户界面
以下是 UI 不同部分的截图。
驾驶模式-行驶中
一步步的导航看起来很像是类似的手机用户界面，但是能够一次性看到所有步骤这点很棒。
链接：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=37%3A2923
值得注意的是，仪表盘位于驾驶员的手臂长度范围内，并位于驾驶员的外围视野内。
注意，所有的路线和控制器都位于触摸屏上。
链接：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14002
看起来 Model 3 有很多上下文元素。例如，当您停车时，只有适用于停车的控制器才会出现。这看起来是很显然的事，但是他非常的智能。
快速设置
还有，方向盘上的圆形控制杆是一个摇杆。我不清楚它是如何工作的。
链接：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=178%3A1567
这款车有很多设置，但看起来你可以配置一个快捷选项，以便查看最常用的功能。也可能这些是自动填充的，但是目前还无从得知。
音乐控制
是否应当在乘客到达之前采用展开与收起的控制方式……额（上下箭头）
链接：https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14050
似乎这里更希望突出这些专辑，而不是单独的歌曲，所以我不知道这辆车会有多少声音控制。
结语
最近，我又在重温乔布斯推出第一代 iPhone 时的演讲，发现 Model 3 与 iPhone 有着明显的相似之处。
无实体按键
以下是让我注意到的部分：
乔布斯向观众展示了业界所有其他主流智能手机，在当时来看，那些杂乱的实体按键并未过时。但如果今天有人要采用这种全键盘实体按键，所有人都会嘲笑的。
但为什么我们不以同样的方式看待汽车呢？为什么我们只是看到车中放了一台显示器就断定这样做是不可行的？这与苹果放弃实体按键有什么不同？
我知道你或许会说，那是手机，而这是汽车。交互方式与用例明显不同。
但是软件可以更新。物理按键是不能迭代的。他们无法改进。无法改变。毕竟，这可能不是一个疯狂的想法。
原文链接 https://blog.figma.com/what-teslas-model-3-ui-reveals-about-its-vision-for-the-future-eb01a75ae979