Get best of the week

重新设计应用程序-内部外观



Mobius自行车是为塔林开发的自行车和踏板车租赁服务（目前正在计划扩大地域）。

第一个发布的假设是“欧洲市场将需要自行车租赁应用程序”。在2019年12月，主要假设进行了修改，现在听起来像是：“由于最终用户和特许经营者的方便，自行车和踏板车的租赁服务能否最大化？” 为了回答这个问题，有必要执行以下操作：

  • 进行优化应用程序结构（内部-后端，外部-设计和前端）的工作，以引入一种新型的传输方式，并可能在将来进行扩展
  • 在管理面板中调整租赁条件

Lyubov Nikiforuk-项目经理




重新设计之前Mobius自行车应用程序的主要屏幕

作为产品设计师，我的首要任务之一是为引入新型运输工具-电动踏板车准备布局。完成布局后，我决定对设计和UX应用程序进行一些更改，并做一个小的重新设计概念。向团队展示了新的布局。我收到了反馈：伙计们提供了建议并分享了他们的观点。结果，键入了许多按键屏幕。

计划中的为期两个月的代码重构工作临近了，我们决定向客户展示新设计，以优化新界面的代码，除非客户当然同意重新设计。我们介绍了布局，解释了新设计如何简化与应用程序的交互以及它将为业务带来什么好处。并且已经在演示过程中，我们意识到该设计已“完成”。重新设计获得批准，现在我们开始使用新界面和重新设计的UX进行重构。



在重新设计过程中创建的关键屏幕的变体

工作安排


由于我们没有明确定义的技术任务，我们的服务随业务发展而发展，因此我们必须决定如何进行工作：首先要执行哪些任务，如何跟踪进度并评估结果。最重要的是，敏捷方法适合我们的任务。我们确定的每个冲刺的持续时间为两周。每天我们都会站起来，讨论当前的问题，分享想法，解决问题。在每个sprint的末尾都进行了演示-他们向客户展示了为sprint完成的工作的结果。我们办公室



中所有敏捷的测试滑板车都非常敏捷





导航


我们决定更改的第一件事是在应用程序中导航。我们制作了一个较低级的标签菜单（底部导航），而不是“汉堡”。您可能已经注意到，许多应用程序都在切换到这种类型的导航。这是可以理解的，因为选项卡菜单简化了对应用程序主要部分的访问，即使一个人用一只手握住电话也是如此。但这不是使用此类导航的唯一原因。该应用程序是在React Native上开发的，因此我们必须考虑该平台的功能：

(). , , , , , , . . . ,

— front-end




— «». — (bottom navigation)

, , UI-kit


除了更改导航之外，我们还在应用程序屏幕上放弃了比例控件。用手势离开变焦。用滑动屏幕替换了模态窗口，对话框和部分屏幕。同样，因为用一只手使用该应用程序更方便-可以简单地“向下滑动”屏幕并将其关闭。



重新设计后Mobius自行车应用程序中向上滑动屏幕的示例

我们还通过Google和Facebook登录来简化了该应用程序中的注册过程。除了链接银行卡外，他们还添加了使用Apple Pay和Google Pay付款的功能。



使用Apple Pay的登录屏幕和付款

为了将来使向应用程序添加新功能更加容易，我们创建了组件库并描述了它们的应用程序和交互原理。



Mobius自行车UI-kit应用程序

重构并切换到GraphQL


重新设计的主要目标是：

  • 创建更灵活，可扩展的组件系统，该系统将轻松允许添加新功能（例如另一种传输方式），而不会影响与应用程序交互的外观和一般逻辑
  • 尽可能减轻和简化界面
  • “刷新”应用程序的外观


但是除了更新应用程序界面，重新设计的可见方面之外，从RESTful API到GraphQL的过渡是非常重要的部分。

简而言之，GraphQL是一种语法，它描述客户端（电话/应用程序）如何使用特殊查询从服务器接收数据。根据请求，服务器将提供该数据或该数据。

Artyom Bukhtoyarov-DevOps /后端开发人员


GraphQL具有三个主要特征：

  • 允许客户确切指定他需要什么数据
  • 有助于汇总来自多个来源的数据
  • 使用类型系统来描述数据


GraphQL充当应用程序接口和外部服务之间的适配器层。这使您可以将许多不同请求的处理转移回后台。也就是说，当您连接新的传输协议时，需要将其连接在背面，并且布局将以统一的形式从GraphQL接收所有数据。因此，当添加一种新型的传输方式时，我们减少了额外的排版工作，并减少了应用程序中已处理请求的数量。

此外，在重构过程中，我们强调了使用GraphQL的以下优点：

  • 为开发人员提供方便的文档
  • WebSocket的一个好的解决方案，无论是后端还是前端
  • GraphQL使开发人员更容易浏览代码结构
  • 与RESTful API相比，开发更加灵活，使您可以更快，更轻松地添加新内容（在我们的例子中，这是一种新型的传输方式）


当来自中国的第一个自行车锁确定了它在中国的地理位置时，这很可笑，尽管它实际上是在圣彼得堡。而且此锁的软件已加密，我们必须寻找一种解密方法来更改设置。

最初，当我们只有一种运输工具时，用于连接自行车的服务器与主后端一起工作。然后，我们将自行车锁服务器作为一项独立服务取出，可以部署在单独的服务器上-这使我们可以减少主服务器上的负载，并提供了更多的扩展机会。为了在服务之间传递消息，我们使用RabbitMQ。而且，他有一个mqtt插件非常方便，这是我们的踏板车使用的协议，可以轻松添加新的运输方式。

在应用程序中付款。最初，我们计划在应用程序本身中添加银行卡，但是最后，我们选择了到银行页面的重定向选项，并且在那里已经完成了添加卡的整个过程。事实证明，此方法更容易实现。

特许经营


服务所有者对应用程序的管理面板有某些要求。由于计划将服务作为特许经营权出售，因此每个特许经营者应能够编辑旅行成本，关税参数，订购等。

因此，我们重新设计了管理面板，以便能够连接新的公园所有者。添加了不同的角色-公园的所有者和网络的所有者。我们做了一个完整的部分来添加和编辑基于时间的费率，订阅费和罚款。在每个城市，公园的所有者都可以设置自己的价格并进行更改。他们还使网络管理员可以缓和更改。我们扩展了管理面板的结构，以添加新的传输类型。

问题


当然，有一些困难。从那以后，我们拒绝在旅行历史中显示路线。自行车锁中的GPS模块不能始终正确发送坐标。而不是像运球那样漂亮的路线，我们得到了：



等待VS现实

在React Native下Google地图的技术实现存在问题。需要不断重绘地图上的标记，以更改其在地图上的位置。重新绘制大量矢量图形并没有得到优化，因此，在某些设置下，一切都很缓慢。我们决定用png格式的栅格标记替换地图上的矢量标记。这极大地提高了应用程序的速度。

有关关税制度和订购的实施存在许多问题。我们尝试提供不同的情况：如果订阅在旅行期间结束，该怎么办;是否给与机会以一种运输方式购买不同的订阅;是否值得进行订阅的自动续订;如何计算旅行费用，等等。

因此，我们决定采用以下评级选项：将旅行时间划分为不相等的细分，并且每个时间间隔分别收费。例如，旅行的前15分钟费用为2欧元，如果您骑车超过15分钟但不到半小时，则旅行费用为3.5欧元，从30分钟到一个小时-5欧元，等等。为了使用户更轻松地浏览费率，我们决定将成本计算可视化，并将其放入进度条。现在，用户可以实时查看行程费用的变化。



进度条形式的成本核算可视化



带有费率和订阅的屏幕

一些用户发现不支付旅行费用的选择：他们添加了银行卡，然后将其删除并免费乘坐。当我们发现这一点时，我们开始冻结1欧元以检查我们的偿付能力，并取消了在旅途中或未偿还债务时取出卡的功能。

有时也有完成行程的问题。要完成自行车骑行，您需要关闭锁，这会将信息传输到服务器。但是城堡并不总是按时传输数据。最后，人们可能为未完成的旅行积accu几百欧元的债务。我们决定，我们将手动检查大量金额，并删除它们的自动记录。几乎没有投诉，因为在欧洲很少有人收到SMS警报。在俄罗斯情况会有所不同。

发现


前端


在React Native上进行开发的主要特征之一是组件性能的跟踪。为了防止fps降低，值得：
  • 监视渲染器（重画）的数量。仅当新数据确实需要更改接口状态时，才应重绘组件
  • 使用动画配置或Reanimated包中的useNativeDrive键，从标准React Native包中使用本地动画动画
  • 查看添加到项目中的程序包或组件的JS代码。并非所有可用的软件包都可能得到了优化，或者不能使用React Native的功能正确地进行包装。同样在React Native上的开发中，值得考虑平台的差异。iOS和Android上的同一代码可以完全不同的方式工作

React Native的优势可以称为其多功能性。无需在iOS和Android上拥有2个不同的开发团队。而且，通常，您可以实施在本机平台上难以开发的设计概念。

React Native的弱点不是它的全部本地性。您必须不断确保不超载JS线程。在引入自动链接器之前，更新和安装本地软件包的麻烦程度一直到0.60版。

后端


在大多数情况下，切换到GraphQL可以简化API的开发。对于开发人员和客户来说，情况都变得更加清晰。

GraphQL的优势：
  • 可以自动记录API，非常方便
  • 允许更灵活地使用API​​。客户只选择他现在需要的数据
  • 开箱即用的Web套接字支持，这一点非常重要，因为我们经常更新实时数据
  • 我们可以根据需要轻松地编写标量类型，并在以后重用它们


GraphQL的弱点：
  • 分页类型更难实现功能。我必须应用其他技术
  • 开箱即用，没有名称空间。您需要自己注意API的分离。同时，支持不赞成使用的字段，这进一步简化了开发人员的生命
  • 您需要监视查询的嵌套级别。您可以编写带有大量嵌套的请求，然后等待很长时间才能得到答案


接口


在进行重新设计时，您需要记住，不要为了设计而进行设计。在我们的案例中，新界面使简化用户与应用程序的交互成为可能，包括如果有人用一只手握住电话。我们考虑了React Native的功能，为了减少嵌套，我们从“汉堡”切换到了底部导航。还必须提供扩展应用程序结构的可能性。创建组件库并应用原子设计可以为您提供帮助。

我们计划引入游戏化（黑暗的主题，获得不错的奖励），一个黑暗的主题，连接电话联系并通知附近旅行的朋友并引入新的交通方式。但最重要的是，重新设计必须合理：要使业务受益并为用户简化应用程序的工作。

More articles:


All Articles