特斯拉Model 3用户界面详解(含UI交互源文件分享)

作者:Tom Johnson  |  翻译、重编:瓜田君

Tom Johnson 是一名位于亚特兰大的产品设计师,更多精彩内容可访问他的博客专栏

本文谨献给设计师/汽车爱好者。

文章细分了第一款大众市场触摸屏电动汽车特斯拉 Model 3 的仪表板控制和界面的细节。从特斯拉的UI设计我们可以看出特斯拉的长期战略,以及他们对未来无人驾驶的态度。

拉至文章底部获取 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???

对,你没有看错。

特斯拉 Model 3 是一款设计时不考虑驾驶员的汽车。并且是故意的。

没有旋钮、几乎没有方向盘。你必须点击屏幕打开挡风玻璃刮水器。(有一个控制台杠杆可以打开它们,但频率是通过屏幕控制的。)

你必须点击一个屏幕来打开手套箱。你必须点击一个屏幕打开紧急制动。(这也是自动的,但手动应用程序似乎在设置中。)

对一个司机来说,这个听起来是不是很糟糕?他们不能再依靠纯粹的本能和肌肉记忆来操纵自己的汽车。

但我不认为特斯拉这样做只是前卫,他们这样做,是在为没有司机的世界做好准备。


为乘坐体验而设计的车

在 UI 中,一个接一个的因素都告诉了我一切:屏幕分辨率。

这辆车本来可以像垂直的屏幕一样,就像S型和X型一样,但是它没有。相反,Model 3 的长宽比为 8:5,分辨率约为 1920x1200px。

WHY?

我们来看,底部控件是 120px 高。

1200 - 120 = 1080。

1920 × 1080。

这是一个高清电视啊,盆友们。

高清电视向我们表明,特斯拉用他们的中央控制台来看东西,而不是让你去驾驶汽车。这个 Bad Boy 将是无人驾驶的未来。

这不是一个奇怪的仪表板车,而是一个移动的客厅。

当法规和技术到位的时候,看电影就没有比在车中间更好的位置了(微笑)。


下面让我们看看用户界面

以下是 UI 不同部分的截图。

途中驾驶模式

非常类似于手机用户界面

值得注意的是,仪表板在驾驶员的手臂长度范围内,并且在驾驶员的外围视野内。对于右驾市场来说,这个视野很容易被翻转。

停放模式

所有的干线和控制器都在触摸屏上

看起来 Model 3 上有很多潜在的交互。例如,当你停车时,只适用于停车的控制器才会出现。

快速设置

方向盘上的设置

在这款车上有很多设置,但是看起来你可以配置一个快速控制的部分,以便查看最常用的功能。但也可能这些是自动填充的。

音乐控制

音乐播放界面

似乎有一个明确的专辑而不是单独的歌曲。不知这个车上会有多少声音控制。


特斯拉与苹果

最近,我正在重新审视 Steve Jobs 推出的 iPhone 的主题演讲,想到 Model 3 和 iPhone 有着明显的相似之处。

都没有物理按钮

乔布斯2007年的 iPhone 演讲

乔布斯向观众展示了业界所有其他主流智能手机,iPhone 最大的革新就是没有物理键盘。

所以我们为什么不以同样的方式看待汽车呢?这与苹果放弃键盘时有什么不同?

或许你会说,那是一部电话,这是一辆车。交互方式和用例明显不同。

但是软件可以更新。物理按钮不能获得空中修复。它们无法改进,它们无法改变。毕竟,这个想法现在看起来也不是那么疯狂了。


瓜田君的话

想当年,iPhone 作为高端智能机,让普通消费者们望而却步。但几年后,人人一手 iPhone 机乃是平常。

不久的将来,当无人驾驶汽车得到市场的广泛认可和普及后,相信设计师们的职业头衔又会多一条细分:无人驾驶汽车 App UI 设计师。


特斯拉Model 3 UI分享

Figma 源文件:https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3

原型交互:https://www.figma.com/proto/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?scaling=contain&node-id=37%3A2923


更多精彩内容,下期再见。

喜欢就点个赞呗 d(^_^o)


西瓜设计研究所

互联网创业 | UI设计 | 开发资源 |教程

未经授权请勿转载,烦请留言获取(侵权必究)

© uirush.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容