如何做汽车控制APP的UI设计

实时检查充电进度并开始或停止充电,在驾驶前加热或冷却您的汽车 - 即使它在车库中,从任何地方锁定或解锁,根据方向定位您的车辆或跟踪其移动


索引:

1.我对特斯拉汽车应用程序的最终重新设计

2.我选择应用程序和 Flow 的原因

3.我如何理解现有设计并找到需要改进的地方

4.集思广益以解决我发现的问题

5.如何我开始将我的想法变成原型(低保真)

6.让我的原型表现得像一个真实的应用程序界面(高保真原型)

7.通过可用性测试验证我的解决方案是否有效

8.在可用性测试后改进我重新设计的屏幕

9.主要经验


?加入成长派的原因

在加入会议之前,我到处漫游。甚至访问许多信息平台以获取正确的信息,但都没有令人满意的效果。


然而,有一天我在刷YouTube,意外地看到了一段成长学校设计的视频。从那里开始,我的旅程开始于Anudeep Ayyagari。


因为这是一个为期 2 周的研讨会,所以我继续投入时间来学习具有新意义的知识。Anudeep 只用了不到 15 分钟就让我大吃一惊。即使是最微小的概念,他的解释方式也毫不费力。当导师向您详细解释设计思维时,这是一次不可思议的经历。他通过提供有效的示例,强调在我们周围的一切中传达用户体验的基础知识。


在这个工作坊中,我学到了很多概念,例如基本原则、以用户/人为中心的设计、雅各布定律、菲茨定律、如何使用 Figma 构建 UI、使用动画等。


?我对特斯拉汽车应用程序屏幕的最终设计

用于比较原始屏幕和您的重新设计前后的可用性测试。请在下方滚动:


以下几点显示了重新设计如何帮助用户

随着功能和控制屏幕的重新设计,我已经给出了这些点的分辨率位置、停车位置、汽车模型以及用户与汽车之间的交互。还发现之前的设计没有遵循以人为本的设计原则,多次展示同一个功能。用于参考控制、气候、位置等。


然而,新设计提供了使用手机钥匙控制锁定和解锁的自由,并管理气候控制在寒冷的天气条件下,从任何地方检查您的范围,设置您的充电限制,并查看您的充电历史。在路上,使用该应用程序查找您附近的充电站。


这些更新如何改善业务

使用 Tesla 应用程序,您可以从任何地方访问您的 Tesla 车辆和能源产品。与汽车的互动也增加了商机和服务。随着应用程序变得更加高效,它会提高您的品牌甚至用户的生产力,从而提高购买率的机会,帮助您在更短的时间内产生更多的报酬。这对双方来说都是双赢的局面!


?我选择App的原因和流程

在搜索用于案例研究的产品时,我发现了很多用户抱怨系统设计和控制的特斯拉应用程序。所以我接受了增强功能和控制设计的挑战。好的用户体验设计的重要一点是新用户会花更多的时间在上面,并且可以增强他们的数字体验。但是,当前的设计中缺少它。在分析过程中,我找到了很多车企的APP,研究了现有的设计。因为设计不仅仅是为了让东西看起来漂亮。它主要是关于创造易于使用的东西。


在分析的时候,我发现了一些关于现有设计的基本问题如下:

1. 为什么它们被用来控制和用于?

2. 为什么使用汽车气候,这些可以通过电话管理吗?

3. 应用中的位置是用于用户还是企业?

4、为什么这个界面用的是车型和里程数?

5.多次相同的特征有什么用?

一个干净简单的界面可以减轻用户的困惑和时间来寻找合适的按钮来点击。当您不断向产品添加新功能时,这一点尤其重要但很难实现。


在添加新功能时,请始终牢记此功能如何影响业务。即使是一个简单的按钮也可以提高流失率。


我发现以下术语对以示范方式影响业务很有用:


活跃用户指标:这有助于企业每天越来越多地使用该应用程序。

保留指标:这可以让用户不断回来使用他们的应用程序,从而帮助业务发展。


?我如何理解和发现现有设计中需要改进的地方

众所周知,以用户为中心的设计 (UCD) 是一个迭代设计过程,在该过程中,用户体验设计师在设计过程的每个阶段都关注用户及其需求。在设计过程中,我分析了不同的设计前景。

当前设计中最常见的发现如下:


该应用程序无法与汽车通信,用户删除了手机。

用户无法查看范围、控制哨兵开关、气候,只能解锁和打开后备箱

人们缺乏灵活性和使用效率。使用时面对气候控制。此外,用户在屏幕上找不到匹配的详细信息。

由于旧的应用程序设计系统需要花费大量时间来加载以及跟踪汽车位置。也缺乏应用程序内功能的可见性。

不遵循以用户为中心的原则,称为界面的美学和最小设计概念不应包含不相关或很少需要的信息。


?集思广益解决所发现的问题

头脑风暴是一种产生想法以解决明确定义的设计问题的方法。在发现的最后,我想到了三个想法。

在与我的团队成员讨论后,我们可以将以下建议实施到下一个流程中。


想法 1:汽车功能应该放在顶部,这样可以很容易地看到

建议:如果我们将汽车功能移到顶部,这样它就很容易看到并且可以有效地连接。


思路二:添加Location,通过地图停车,方便用户查询汽车的准确位置

建议:大部分用户在送车过程中抱怨停车场、站点、商家存在同样的问题。所以我决定提供地图屏幕选项,用户和企业可以轻松追踪位置。以及能源站在地图上的位置。


想法 3:将用户和汽车模型结合起来,使它们相互关联。

建议:根据 Fitt 原理,获取目标的时间是到目标的距离和大小的函数。所以我们试图想出让用户和汽车相互关闭的方法。


?我是如何开始将我的想法变成原型的(低保真度)

低保真设计或称为想法草图感觉很棒。因为目标是将我的想法变成可测试的工件,我可以用它来收集和分析早期的反馈。没有了让每个页面都链接、可点击和交互的压力,我对原型制作的技术性更强的部分并不紧张,也不会花更多的精力在创意上。


在低保真构思过程中,Anudeep 与我们分享了一个名为 Marvel 应用程序的出色工具,它可以为您提供力量,将想法变为现实,并将其转化为数字。您可以在最短的时间内将一个屏幕链接到下一个屏幕。即使是这个工具也可以节省很多精力。


?让我的原型表现得像一个真正的应用程序界面(高保真原型)

在 UX 设计师的旅程中,Anudeep 指导我们如何制作高保真原型。我的低保真设计草图开始成形。使用带有颜色和内容的模型,我创建了外观和功能尽可能接近最终产品的高保真原型。

在设计过程中,我专注于参考线、颜色、形状、排版和空间的每一个细节。使用适当的箭头进行导航,底部的图标使用户能够连接应用程序的其他元素。还应用了 Fitt 原理,使物体像手指一样靠近。因此用户可以轻松访问事物。还使用号召性用语鼓励用户与应用程序交流并减少流失。


?通过可用性测试验证我的解决方案是否有效

现在编译高保真原型后,我想确保设计表现良好,并且所有假设和信念都得到验证——与用户进行测试已成为我设计过程中最重要的阶段之一。


给用户的任务:应用程序与汽车通信有问题,用户删除了手机。


打开一个新的屏幕设计进行测试

你能确认应用程序控件是否可点击吗

你能确认汽车在地图上的位置吗?

您可以访问应用程序的其他部分吗?

屏幕上的导航是否易于访问?

?在可用性测试后改进我重新设计的屏幕


首页 > 新闻资讯

留言