特斯拉Model3⽤户界⾯详解（含UI交互源⽂件分享）
作者：Tom Johnson  |  翻译、重编：⽠⽥君
Tom Johnson 是⼀名位于亚特兰⼤的产品设计师，更多精彩内容可访问他的博客专栏 。
本⽂谨献给设计师/汽车爱好者。
⽂章细分了第⼀款⼤众市场触摸屏电动汽车特斯拉 Model 3 的仪表板控制和界⾯的细节。从特斯拉的UI设计我们可以看出特斯拉的长期战略，以及他们对未来⽆⼈驾驶的态度。
l15a7拉⾄⽂章底部获取 Figma 源⽂件，以及原型交互链接。
其他资源分享：
创业公司绝对不会告诉你他们在⽤的⼯具们
我们需要像当初PS转Sketch⼀样，⽤Figma进⾏设计吗？
本⽂阅读时间：约6分钟。
特斯拉 Model 3
从⼀开始，我就⼀直在关注特斯拉 Model 3 的传奇故事。去年通过测试驾驶了特斯拉S型，就爱上了它如何操控驾驶、以及敏锐的客户体验调整。
我发现⾃⼰也迷上了“经济实惠”版本的前景，所以追踪看了每⼀次 Model 3 的宣布。
概念很酷，但是我不相信特斯拉真的会在把汽车推向消费者时，把仪表板放倒。“现在可能很酷，但市场营销⼈员或消费者不会接受，这应该只是⼀个概念。” 我这么认为着。
但是....我错了。
旋钮。
没有旋钮
没有空调通风⼝
空调通风⼝。
打开⼿套箱的⼿柄。
也没有打开⼿套箱的⼿柄
上。
他们将所有⼀切都收在了汽车中间的触摸屏
触摸屏上
Sans Buttons
特斯拉的消息吓得宝宝紧紧抱住了⾃⼰。
Model 3 确实有四个车轮和⼀个汽车形状的车⾝，这是与⼤多数汽车相似的地⽅。
但我想知道特斯拉如何隐藏车窗⾥的对于汽车的所有控制权，所以我开始在⽹上搜索关于⽤户界⾯的所有信息。
大圣车服过了⼀段时间，我终于遇到了⼀位名叫 Andrew Goodlad 的设计师的⼀个项⽬，这个设计师根据新闻发布会再现了特斯拉 Model 3 的⽤户界⾯，以及汽车内部的摇摇晃晃的 YouTube 视频。他做了⼀个原型。
为什么我决定重新创建⽤户界⾯
他的原型很酷，但静态图像还不⾜以满⾜我的好奇⼼。我想分析这些零部件，并确切地了解特斯拉如何设计其疯狂的新车仪表板......以及为什么。我开始从图像中重建特斯拉 Model 3 UI。我制作了图标，采样颜⾊，设计了⼀个⾃定义的地图框视图，将 Figma 组件，开关，按钮等所有东西拼凑在⼀起。
我在 Figma 做了⼤部分的设计⼯作：
Figma 源⽂件
这是可点击的原型交互：
原型交互
我从 Model 3 UI 中了解到了什么
这辆车不是为完美的驾驶体验⽽设计的。
Whattt
对，你没有看错。国产最好的suv
特斯拉 Model 3 是⼀款设计时不考虑驾驶员的汽车。并且是故意的。
轩逸 与明锐谁好没有旋钮、⼏乎没有⽅向盘。你必须点击屏幕打开挡风玻璃刮⽔器。（有⼀个控制台杠杆可以打开它们，但频率是通过屏幕控制的。）你必须点击⼀个屏幕来打开⼿套箱。你必须点击⼀个屏幕打开紧急制动。（这也是⾃动的，但⼿动应⽤程序似乎在设置中。）
对⼀个司机来说，这个听起来是不是很糟糕？他们不能再依靠纯粹的本能和肌⾁记忆来操纵⾃⼰的汽车。
没有司机的世界做好准备。
比亚迪11月销量
但我不认为特斯拉这样做只是前卫，他们这样做，是在为没有司机的世界
为乘坐体验⽽设计的车
在 UI 中，⼀个接⼀个的因素都告诉了我⼀切：屏幕分辨率。
这辆车本来可以像垂直的屏幕⼀样，就像S型和X型⼀样，但是它没有。相反，Model 3 的长宽⽐为 8：5，分辨率约为 1920x1200px。WHY？
我们来看，底部控件是 120px ⾼。
1200 - 120 = 1080。
1920 × 1080。
⾼清电视啊，盆友们。
这是⼀个⾼清电视西安汽车用品
这个 Bad Boy 将是⽆⼈驾驶的未来。
⾼清电视向我们表明，特斯拉⽤他们的中央控制台来看东西，⽽不是让你去驾驶汽车。这个 Bad Boy 将是⽆⼈驾驶的未来。
这不是⼀个奇怪的仪表板车，⽽是⼀个移动的客厅。
当法规和技术到位的时候，看电影就没有⽐在车中间更好的位置了（微笑）。
下⾯让我们看看⽤户界⾯
以下是 UI 不同部分的截图。
途中驾驶模式
⾮常类似于⼿机⽤户界⾯
值得注意的是，仪表板在驾驶员的⼿臂长度范围内，并且在驾驶员的外围视野内。对于右驾市场来说，这个视野很容易被翻转。停放模式
所有的⼲线和控制器都在触摸屏上
看起来 Model 3 上有很多潜在的交互。例如，当你停车时，只适⽤于停车的控制器才会出现。
快速设置