所有分类
  • 所有分类
  • 未分类
特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

汽车在越来越智能,也渐渐变成了我们UI设计师、交互设计师新的战场,在智能汽车队伍里,特斯拉无疑是走在最前列的,而近期发布的Model 3车型取消了大...

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

汽车在越来越智能,也渐渐变成了我们UI设计师、交互设计师新的战场,在智能汽车队伍里,特斯拉无疑是走在最前列的,而近期发布的Model 3车型取消了大部分汽车必备的实体控制器,比如大灯开关、雨刮刷控制器等,而将其移到了中间1920×1080像素的中控大屏上,那么其UI设计和交互设计与汽车无疑更加紧密,也更加重要。通过本文一起来看看特斯拉的用户界面设计吧。

Tom Johnson 是一名位于亚特兰大的产品设计师,本文谨献给设计师/汽车爱好者。

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

特斯拉 Model 3

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

从一开始,我就一直在关注特斯拉 Model 3 的传奇故事。去年通过测试驾驶了特斯拉S型,就爱上了它如何操控驾驶、以及敏锐的客户体验调整。

概念很酷,但是我不相信特斯拉真的会在把汽车推向消费者时,把仪表板放倒。“现在可能很酷,但市场营销人员或消费者不会接受,这应该只是一个概念。” 我这么认为着。

但是….我错了。

没有旋钮。

没有空调通风口

也没有打开手套箱的手柄。

他们将所有一切都收在了汽车中间的触摸屏上

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

Model 3 确实有四个车轮和一个汽车形状的车身,这是与大多数汽车相似的地方。

但我想知道特斯拉如何隐藏车窗里的对于汽车的所有控制权,所以我开始在网上搜索关于用户界面的所有信息。

过了一段时间,我终于遇到了一位名叫 Andrew Goodlad 的设计师的一个项目,这个设计师根据新闻发布会再现了特斯拉 Model 3 的用户界面,以及汽车内部的摇摇晃晃的 YouTube 视频,他做了一个原型。

为什么我决定重新创建用户界面

他的原型很酷,但静态图像还不足以满足我的好奇心。我想分析这些零部件,并确切地了解特斯拉如何设计其疯狂的新车仪表板……以及为什么。

我开始从图像中重建特斯拉 Model 3 UI。我制作了图标,采样颜色,设计了一个自定义的地图框视图,将 Figma 组件,开关,按钮等所有东西拼凑在一起。

我在 Figma 做了大部分的设计工作(注:Figma是一款通过浏览器运行的UI设计软件)

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

以及可点击跳转的用户原型:

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

让我们快速进入正题,看看特斯拉Model 3 的中控大屏用户界面设计吧:

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉与苹果

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

都没有物理按钮

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

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

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

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

特斯拉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

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

2018夏季交互/UI设计精修小班学员招募中

5月底开课

仅剩最后2个名额

查看详情 >>

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

添加 “小U” 咨询与报名

特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

原文始发于微信公众号(ARTUI用户体验设计中心):特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院

原文链接:http://www.uiya.cn/10119.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?