重新设计特斯拉app界面
重新设计特斯拉app

在这个案例研究之前,我想说,我非常尊重特斯拉的设计师和工程师,这次重新设计是出于我想要继续深造成为一名设计师的愿望。
在本文中,我们将对特斯拉的移 动应用程序进行一些研究。作为一家在界面设计上与Model 3一样富有灵感的公司,我觉得他们的移动应用程序与公司的理念相去甚远。
最重要的是,Model 3钥匙卡要多花150美元,这使移动应用程序成为车主与汽车互动的主要方式。特斯拉及其客户不仅需要,而且应该得到更好的体验。
在下文中我将详细介绍我的思考过程以及特斯拉移动应用程序中遇到问题的潜在解决方案。
问题
在概述解决方案之前,我想先更深入地探讨一下我为什么认为特斯拉应用程序应该首先进行重新设计。在前文中,我有简要提到过,我觉得它不是很符合特斯拉的气质。当我们坐在特斯拉时,会有一种未来感迎面而来。

当我看着他们的移动应用程序时,第一件事就是纯粹的视觉语言。大部分图标与汽车中的图标不一致,并且布局仅是精美的表格视图,远没有汽车本身的界面令人振奋。
但是,视觉语言远非促使我重新设计应用程序的原因,因为我的意图不是创建“未经请求的重新设计”。促使我进行重新设计的真正原因是基本的核心应用程序体验。

当前的Tesla界面,截图来自Aneesh Vempaty
如前所述,该应用程序实际上是在一个表视图中构建的。在适当的情况下,这是一个有效的解决方案。然而,对于这款应用来说,这意味着大多数的控制隐藏在二级界面,牺牲了时间和更重要的屏幕空间。例如,远程打开后备箱需要两次轻按,一次进入应用程序。而气候控制页面具有三个按钮,占据了一个页面的全部。
但这只是两次轻按,为什么这么重要?
这很重要,因为这是许多特斯拉车主与他们的汽车连接的主要方式,因为没有钥匙卡。该应用程序不仅应该易于使用,而且更重要的是,它应该像智能钥匙一样快捷。所以我问,为什么不将所有按钮和交互都带到体验的最前沿?然而,我不只是想做一个美化的钥匙卡,我觉得这个应用程序可以更多。
解决方案
初步研究
我不想将最初的研究仅限于Tesla用户和所有者。如果要创造最终的驾驶员体验,我还需要考虑所有类型车主的宝贵见解。
通过广泛的调查和访谈,我很快发现,大多数用户在上车之前要做或想做三件事,分别是:

地图和导航
气候控制
音频控制
除了音频控制(特斯拉通过蓝牙自动连接你的音乐选项)外,特斯拉在其当前应用程序版本中还严重缺少这些用例或开发不足。因此,我确保将这些核心用例带到了重新设计的最前沿。
线框,构思,过程
就像其他任何设计项目一样,我首先用笔和纸进行构思、实验,实际上只是把我脑海中的一切都展现出来。我发现这个项目特别困难,因为我试图将当前9页内容尽量压缩成更小的空间。更重要的是,在早期,我已经排除了用传统的标签视图来构建这个应用程序,因为这将把我带回到我开始的地方,因为它需要许多功能需要两次或更多的点击来完成。

无论何时设计,我都希望其着眼于许多不同的灵感来源,而不仅仅是它所处市场的纯粹竞争。这些年来,我发现:
创造力通常是从两个相反的极端,把他们带到一个有凝聚力的想法。
在设计方面,这没有什么不同。以我不仅研究了汽车应用程序,还研究了电视遥控器、苹果的控制中心、智能家居、相机应用程序、健康应用程序、地图应用程序,奇怪的是,我还研究了一个关于bug的应用程序。

最后,经过多次迭代、批判、评论,从亮到暗的转换,两个单独的Sketch文档以及许多像素推动,我终于将其展示在了屏幕上。

核心经验
地图和导航
尽管Tesla应用程序有一个位置页面,但这仅能向你显示相对于汽车的位置。用户当前需要在车内输入他们要去的地址,或者转向其他地图应用程序进行导航,显然,这给驾驶特斯拉的整体体验带来了摩擦。当然,大触摸屏使用起来很不错,也很有趣,但这种新奇感很快就会消失,弓着背在大屏幕上打字输入方向很快就会变得笨拙和烦人。用户来自这样一个地方:在谷歌地图中输入信息不仅是一种规范,而且要快得多、容易得多。想在Yelp上找个地方吗?你可以立即链接到地图,按下“开始”键,不少于两下就完成了。

为了符合我的原则,我选择将搜索栏包括在应用程序的中间,这样它就在用户的指尖上了。当然,这将与汽车中的导航同步,因此输入到手机中的所有内容都会立即显示在汽车中。现在,用户不仅将获得与在Google Maps中输入地址相同的便利,而且更重要的是,将体验从手机到汽车的无缝过渡。
增强现实Wayfinding
我想让你注意到一个图标,你可能也已经注意到右侧的搜索栏了。

通过我的反复试验,我想添加的一个功能是找到你的车的更好的方法。老实说,有多少次我忘记了把车停在哪里,这让我有点尴尬。尽管这张地图确实有所帮助,但它并不总是能最好地告诉我们它的实际位置。为了解决这个问题,我设计了一个增强现实寻路器。

我在工程方面的经验有限,但我认为你的手机可以在停车时保存汽车的高度和位置。然后,此信息可用于以后定位汽车。
从用户的角度来看,这使找车变得轻松而愉快。有了地图,你首先要弄清楚如何定位自己,而指南针往往是不准确的。有了这个功能,你甚至不需要考虑你要去哪里;你只要指给我看就行了。
气候控制
如上所述,我发现用户开始旅行之前,其旅行的基本步骤之一是在车内设置所有气候控制。目前,Tesla应用程序所能做的就是改变空气温度。

Model 3已经拥有漂亮的气候控制面板,那么为什么不将其引入应用程序呢?

动画图标是非常规的,但我觉得它在这里像打开状态一样完美
通过将用户的整个气候控制套件带入一个熟悉的包装中,它不仅为用户提供了比以前更多的控制权,而且使汽车与应用程序之间的接口变得无缝和紧密。通过重新设计,我将与特斯拉自己的一个表格单元相比,在其整个应用程序中所包含的更多气候功能投入了相同的空间。而且由于我已经能够删除整个气候页面,因此你只需要轻按一下你最重要的控件即可。

3D Touch提供更多控制
我从iOS的Control Center借用了一种模式,进一步添加了3D触摸功能以显示更多高级选项,以便用户可以访问车内可用的相同控件。
总体改进
解锁
除了这些核心用例之外,我的目标还在于为应用程序增加生活质量以及视觉上的改进。首先,为了一个纯粹的数字键盘而放弃一个标准的键盘的代价之一就是失去了触觉反馈;今天的司机已经习惯了通过触摸和感觉来访问各种功能。

“滑动来解锁”
为了达到相同的效果,我设计了一个使用手势和触觉的系统,因此现在用户要做的就是向下滑动任何地方,他们将完全知道自己在做什么,而无需查看它。乍一看,这似乎比仅在屏幕上具有按钮要直观一些,但是我认为这是值得的,因为它可以使你获得使用便携式信息终端时所获得的位置感。
驱动程式设定
左上角的图标可访问汉堡菜单。这主要是当前应用程序的清理版本,但是有一些值得注意的变化。

重新设计的所有图标
特斯拉汽车的一大特色是能够记住驾驶员的个人资料-特定于每个用户的后视镜、座椅和方向盘的位置。目前,只能通过汽车的主界面进行控制。我想确保将这些独特的配置文件添加到应用程序中,从而使汽车能够准确知道你的身份,并在你接近汽车时自动调整这些设置。

特斯拉当前应用程序的控件和充电页面
我进行的另外两项更改是将代客泊车模式和充电限制更改为驾驶员设置。我移动了代客模式,因为我觉得如果此选项在帐户设置下更有意义,因为它本质上是登录和注销不同用户帐户功能的扩展。
我还认为电池电量限制可以作为账户设置,因为其目的仅仅是限制电池的最大电量。由于这是很少修改的内容,因此占用整个页面的空间似乎是浪费的。相比之下,我将充电端口按钮移到了主屏幕底部的图标,因为它经常被访问。
召唤
在当前应用程序中,特斯拉选择使用收纳框占据屏幕的右上角,并将其“召唤”功能放置在下面的表格视图中。对我而言,特斯拉选择突出显示其收纳盒图标的唯一原因是将其用作营销工具。尽管我可以看到这是有道理的,但我认为这对你推荐朋友购买35,000美元以上汽车的能力的影响微不足道,而我采访的许多特斯拉车主显然也是如此。因此,我决定只将其保留在设置菜单中。

特斯拉当前的收纳盒图标位置
我决定将这个新发现的空间用于传唤遥控器,因为与屏幕底部的控件不同,其功能比简单地更改状态或切换功能更为复杂。取而代之的是,它需要一个完整的页面,并带有自己的控件。

除了进行视觉刷新外,summon远程页面与当前应用程序上的页面基本保持相同。尽管我尝试了不同的交互方式,但我认为当前的模型在其工作上是有效的,并且可能得到了无数小时的研究支持,这些研究认为最安全的方法可以通过手机驾驶汽车。
状态快照
下一个需要改进的地方就是我所说的“状态快照”。顾名思义,这只是你的汽车运行状况的概述。在当前应用程序中,这些信息到处都是。例如,内部温度是气候表单元下方的标题,“停放”只是在电池下方显得笨拙。

在我的模型中,这些状态指示器都位于同一位置,因此一眼就能轻松评估您的汽车。我认为保持汽车在当前应用程序中的状态也是必要的,因为它可以直观地显示汽车的状态。例如门是否已经打开。
底行
通过重新组织应用程序的整个结构,我能够用其他必要的远程功能填充第二行图标。该行是密钥卡隐喻的最接近扩展,因为这些都是典型密钥卡上的所有功能。如前所述,我从当前应用程序的“收费页面”中打开了收费端口按钮,并将其放置在此处。而且,尽管我确实有针对手势和行李箱的基于手势的打开方法,但我仍然希望将用于这些操作的标准按钮作为辅助选项。我还添加了排气窗或天窗的选项。最后,我将闪烁的灯光和喇叭声组合成一个“紧急”按钮。坦白说,我不喜欢这个名字,但是看市场上许多不同的便携式信息终端,似乎成为了一种行业标准。

我还重新设计了图标,使其更贴近车内
我开始进行重新设计确实是一个挑战。对我来说,开始一个个人项目并完成到最后一直是一个挑战。我很高兴自己做到了。
如果您想了解更多的前瞻信息和权威专家普修的专业性建议,就留言联系我们吧!
来源:Matt Farmer:Redesigning the mobile app that Tesla deserves — a UX case study

用户调研 丨 HMI设计 丨 UE/UI设计 丨 HMI培训 丨 HMI评测 丨 体验咨询










































































