汽车在越来越智能,也渐渐变成了我们UI设计师、交互设计师新的战场,在智能汽车队伍里,特斯拉无疑是走在最前列的,而近期发布的Model 3车型取消了大部分汽车必备的实体控制器,比如大灯开关、雨刮刷控制器等,而将其移到了中间1920×1080像素的中控大屏上,那么其UI设计和交互设计与汽车无疑更加紧密,也更加重要。通过本文一起来看看特斯拉的用户界面设计吧。
Tom Johnson 是一名位于亚特兰大的产品设计师,本文谨献给设计师/汽车爱好者。
文章细分了第一款大众市场触摸屏电动汽车特斯拉 Model 3 的仪表板控制和界面的细节。从特斯拉的UI设计我们可以看出特斯拉的长期战略,以及他们对未来无人驾驶的态度。
特斯拉 Model 3
从一开始,我就一直在关注特斯拉 Model 3 的传奇故事。去年通过测试驾驶了特斯拉S型,就爱上了它如何操控驾驶、以及敏锐的客户体验调整。
概念很酷,但是我不相信特斯拉真的会在把汽车推向消费者时,把仪表板放倒。“现在可能很酷,但市场营销人员或消费者不会接受,这应该只是一个概念。” 我这么认为着。
但是….我错了。
没有旋钮。
没有空调通风口。
也没有打开手套箱的手柄。
他们将所有一切都收在了汽车中间的触摸屏上。
Model 3 确实有四个车轮和一个汽车形状的车身,这是与大多数汽车相似的地方。
但我想知道特斯拉如何隐藏车窗里的对于汽车的所有控制权,所以我开始在网上搜索关于用户界面的所有信息。
过了一段时间,我终于遇到了一位名叫 Andrew Goodlad 的设计师的一个项目,这个设计师根据新闻发布会再现了特斯拉 Model 3 的用户界面,以及汽车内部的摇摇晃晃的 YouTube 视频,他做了一个原型。
为什么我决定重新创建用户界面
他的原型很酷,但静态图像还不足以满足我的好奇心。我想分析这些零部件,并确切地了解特斯拉如何设计其疯狂的新车仪表板……以及为什么。
我开始从图像中重建特斯拉 Model 3 UI。我制作了图标,采样颜色,设计了一个自定义的地图框视图,将 Figma 组件,开关,按钮等所有东西拼凑在一起。
我在 Figma 做了大部分的设计工作(注:Figma是一款通过浏览器运行的UI设计软件):
以及可点击跳转的用户原型:
让我们快速进入正题,看看特斯拉Model 3 的中控大屏用户界面设计吧:
特斯拉与苹果
最近,我正在重新审视 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
2018夏季交互/UI设计精修小班学员招募中
5月底开课
仅剩最后2个名额
添加 “小U” 咨询与报名
原文始发于微信公众号(ARTUI用户体验设计中心):特斯拉Model 3用户界面详解(多图注意流量)——ARTUI用户体验设计学院
评论0