基于触摸的移动交互的新方法

触摸屏在手机中无处不在已有十年了，我们通常仍然只使用一些手势的微小变化即可与移动应用程序进行交互：点击，平移，缩放和旋转。

最近，我探索了一种高度未充分利用的手势。 与最新技术相比，我在应用内检测它们的方法具有多个重要优势。

心脏手势概念 ，作者：Virgil Pana

这个想法最初是在我想到一个益智游戏时想到的，在该益智游戏中，用户通过使用简单组件设计机器来解决物理难题。 有点像Besiege，但是2D，可移动并且专注于解决物理难题而不是中世纪战争。

我认为游戏不会在小巧的手机屏幕上布满用于切换工具的按钮，而是会为不同的工具或组件提供不同的手势。 例如：

• 弹簧的线圈形状或之字形
• 车轴小圆圈
• U形用于抓斗或磁铁

除了清理UI之外，这还可以节省用户原来在查找按钮，导航子菜单以及前后移动手指以进行某些操作上所花费的时间。

虽然可以使用基本几何形状识别平移和旋转手势，但像这样的更复杂的手势却比较棘手。

天真地检测复杂手势

尝试手工算法来识别您打算在应用程序中使用的每个手势很诱人。 对于诸如复选标记之类的内容，可以使用以下规则：

1. 触摸从左到右移动。
2. 触摸先降后升。
3. 触摸的结束高于开始。

确实，有关自定义手势识别器的官方iOS教程提出了这些规则。 尽管它们似乎描述了复选标记，但请考虑以下问题：

• 惯用左手的作家通常喜欢从右到左进行笔划，因此大多数人从右到左画一个对号。
• 在笔划的底部，用户可以基本上停止移动其手指。 如果他们的手指甚至稍微向左移动，或者稍微向上然后向下移动，则规则1或2可能会失败。
• 许多不是复选标记的形状也满足这些规则。 用户可以输入多个不同手势中的任何一个时，您需要能够可靠地区分它们。

这些仅用于简单的复选标记。 想象一下在处理更复杂的手势（可能有多个笔触）时可能会出问题，这些手势必须相互区分。

现有技术

在移动设备上进行复杂手势识别的最新技术似乎是一种称为$ P的算法。 $ P是华盛顿大学研究人员开发的手势识别器“美元家族”中最新的一种。

$ P的主要优点是使它运行所需的所有代码都简短而简单。 这使得编写新的实现变得容易，并且易于让用户在运行时做出新的手势。 $ P也可以识别手势，而不管其方向如何。

虽然$ P的表现不错，但出于某些原因，我认为依靠它来运行真实的移动应用程序还不够好。 首先，它不是很准确。

姿态被$ P错误分类。 左：因为顶部栏比预期的短，所以AT被误分类为感叹号。 中心：N被误分类为H，因为它比预期的更窄。 正确：x标记被误分类为星号（可能是因为线条不直吗？）

上面的示例使$ P看上去比实际情况更糟，但我仍然认为应用程序无法承受此类错误。

通过为$ P提供更多的手势模板可以提高$ P的准确性，但是从这些模板中可以将其推广到您将要看到的解决方案中。 随着添加更多模板，算法的评估速度变慢。

$ P的另一个局限性是它无法提取高级功能，有时这是检测手势的唯一方法。

$ P无法检测到的一种手势。 因为$ P会检查点之间的距离而不是提取高级特征，所以它无法识别此模式。 资料来源： 华盛顿大学

我使用卷积神经网络的方法

一种强大而灵活的检测复杂手势的方法是将检测问题摆在机器学习问题上。 有很多方法可以做到这一点。 我尝试了我能想到的最简单的合理方法：

1. 缩放并转换用户的手势以适合固定大小的框。
2. 将笔划转换为灰度图像。
3. 使用该图像作为卷积神经网络 （CNN）的输入。

这将问题转换为图像分类问题，而CNN可以很好地解决该问题。

像任何机器学习算法一样，我的网络也需要示例（手势）来学习。 为了使数据尽可能真实，我编写了一个iOS应用程序，用于在最终将使用网络的同一触摸屏上输入和维护手势数据集。

生成数据供神经网络学习。 尚未识别。

虽然我将在下一篇文章中介绍实现的技术细节，但这里是一个摘要：

• 上面显示的应用将原始触摸数据保存在一个文件中，并生成包含所有光栅图像的第二个文件。
• Python脚本将栅格化的数据混洗，将其分为训练集和测试集，并将集转换为易于输入到Tensorflow中的格式。
• 使用Tensorflow设计和训练卷积神经网络。
• 为了在iOS上运行，我使用Core ML的protobuf规范（iOS 11中的新功能）导出了Core ML mlmodel文件。 要支持iOS 10，请参阅iOS机器学习API 。 在Android上，您可以使用官方的Tensorflow API 。

使用这种方法，手势中使用了多少个笔触，在哪里开始或结束，或者在整个笔触中触摸速度如何变化都无关紧要。 只有图像很重要。

这丢弃了与用户手势相关联的定时信息。 但是，当手势用户想到图像时（例如在绘制心脏或复选标记时），使用基于图像的方法是有意义的。

一个缺点是，由于大多数移动机器学习框架只能评估而不是训练神经网络，因此很难让用户在运行时定义自己的手势。 我认为这是一种罕见的用例。

结果

在每个笔画结束时通过我的卷积神经网络进行手势识别

我对神经网络的表现感到震惊。 在我的数据集中对5233张图纸中的85％进行训练后，其余15％（测试集）的准确率达到了99.87％。 这意味着它在785个测试装置图纸中犯了1个错误。 这些图纸很多都很丑陋，所以对我来说这似乎是奇迹。

注意：您不需要将近5233个工程图即可获得相似的精度。 最初创建数据集时，我大大高估了我需要的绘图数量，并且整日花了5011个手势实例（每个手势约455个）。

对于每个手势拍摄60张图像，我发现该算法在其余未使用的图像上仍可以达到约99.4％的精度。 我认为，根据手势的复杂程度，每个手势大约可以绘制100张图纸。

该网络对于长度变化，比例变化和小旋转具有鲁棒性。 尽管它并非像$ P这样的所有旋转都不变，但是有几种方法可以使CNN具有该属性。 最简单的方法是在训练过程中随机旋转手势，但是存在更有效的技术 。

在速度方面，该应用大约需要4毫秒来生成手势图像，而在旧版Apple A8芯片上则需要7毫秒来评估神经网络。 无需花太多精力对其进行优化。 由于神经网络的性质，可以添加大量新手势，而对网络大小的需求却很少增加。

实际考虑

显然，采用这些类型的手势更多是UI / UX问题，而不是技术障碍。 技术在那里。 我很高兴看到我是否能找到在客户的应用程序中使用它们的方法。

这并不是说UI / UX问题很简单。 尽管我在此处提出了一些建议，说明何时可以使用此类手势，但仍需要更多的思考。 如果您有自己的想法，请分享！

作为指导，如果满足以下一项或多项，则使用此类手势在您的应用中执行操作可能是一个好主意：

• 您可以想到每个操作都附带的直观，简单的手势，使用户易于记忆并快速应用。
• 这些动作是在屏幕上的特定位置执行的（在游戏中很常见）。 动作还可以具有可以从相同手势提取的相关联的方向，长度等。 hack和slash游戏可以用一根手指移动角色，另一根手指执行各种远程攻击，例如咒语。
• 为所有可能的动作设置按钮会使屏幕混乱，或者需要过多的导航到子菜单。

您还需要确保您有一个很好的方式让用户学习和查看他们可以做出的手势。

很难向盲人传达做出什么动作。 为了帮助实现可访问性，您可以具有子菜单，该子菜单启用与手势相同的操作。

处理滚动视图

在滚动视图中使用复杂的手势可能会很棘手，因为它们会将用户触摸的任何移动解释为滚动。

一种想法是拥有一个临时的“绘图模式”，当用户将拇指的大而平坦的部分放在屏幕上的任何位置时都会激活。 他们将短暂地有机会提出一些行动。 扁平龙头的位置也可以与动作关联使用（例如，涂抹以删除被点击的项目）。

下一步

检测非手势

当前的实现非常擅长区分我给它的13个符号-正是经过培训的符号。 但是，使用此设置来确定用户绘制的手势是否根本不是这些符号中的任何一个都不容易。

假设用户随机绘制，并且网络确定与他们的手势最接近的事物是代表删除的符号。 我宁愿没有该应用程序实际删除的东西。

我们可以通过添加一个代表无效手势的类来解决该问题。 对于该类，我们制作各种符号或绘图，这些符号或绘图不是复选标记，心形符号或其他任何符号。 如果正确完成，则仅当手势非常类似于某个类时，该类才应从神经网络中获得高分。

其他改进

更复杂的神经网络也可能使用速度或加速度数据来检测产生混乱图像（例如连续圆周运动）的基于运动的手势。 该网络甚至可以通过在网络末端连接各层来与基于图像的网络相结合。

一些应用程序（例如游戏）可能不仅需要确定用户做出了手势，还是确定他们开始或结束的位置（很容易获得），还需要确定其他信息。 例如，对于V形手势，我们可能想知道顶点的位置以及V指向的方向。 我有一些解决这个问题的想法，可能会很有趣。

如果这些文章很受欢迎，我将来可能会对其进行扩展。 通过完善我在这里制作的工具，我认为在新应用中采用这些想法的障碍可能会很小。 设置完成后，只需大约20分钟即可添加新手势（输入100张图像，将其训练为99.5 +％的精度，并导出模型）。

请继续关注第2部分，在该部分中我将介绍有关此实现的更多技术细节。 同时， 这是源代码 。

我正在为我的自由职业寻找新客户。 如果您认识正在寻找iOS或Android开发人员的任何人，请考虑以我的方式发送给他们 。 非常感谢！ :)

From: https://hackernoon.com/a-new-approach-to-touch-based-mobile-interaction-ba47b14400b0