当你看到上面的图片时，它让你感到有些怀念。尽管微软在市场上有一款触摸屏手机，但与苹果公司向全球提供的产品相比，它显得微不足道：一款完全由人类触摸控制的手机。
当你从左到右滑动箭头按钮，它就会解锁你的手机，这就是所谓的手势，看到和体验到这一点是不可思议的。
什么是移动设备上的手势？
手势是一个人与另一个人交流的方式。同样，现在它也是一种与所有设备进行交流的方法，无论是手机、平板电脑、笔记本电脑，还是大型触摸屏显示器。
手势已经跨越了物理-数字的障碍，使我们可以用身体与数字媒体互动。它使使用设备、数字应用和软件变得更加愉快和互动。此外，一个精心设计的应用程序或软件总是有一个较短的学习曲线，因为它们感觉自然和容易使用。
移动设备上的手势有什么优势？
大约十年前，我们与手机的互动是通过按下按钮、拨号，以及在Qwerty键盘或数字键盘的帮助下输入冗长的信息。现在，只需轻轻一拍、一扫或一弹，用户就能完全控制他们的设备。
手势对我们来说感觉很自然，因为它与我们与现实世界物体的互动方式有关。
举个例子，一个人在阅读报纸。很自然地，一个人将使用食指来翻页。以一种非常类似的方式，用户可以使用食指的滑动手势来阅读报纸、杂志和小说，以便在他们的数字设备上翻页。
图片来源：blog.flipsnack.com。
如果我们总结一下手势的优势，我们可以说我们将拥有。
- 一个更干净的界面
- 使用方便
- 更好地完成任务
- 增加用户互动
- 毫不费力的用户界面
手势的类型
现在让我们看看Flutter平台提供的手势类型，以及哪些小部件可以用来执行这些手势。我们还将看一下几个用例，根据材料指南，理想情况下应该使用手势。
图片来源：uxplanet.org。
因此，根据谷歌在这里提供的材料指南，有三种类型的手势。
导航手势
在屏幕之间快速而方便地移动的手势，这不一定意味着你需要一个按钮来切换屏幕。它可以是任何东西，包括文字、图标，甚至是图像。
导航手势包括。
- 点击
- 滚动和平移
- 拖动
- 滑动
- 捏
动作手势
顾名思义，一个突出的按钮，如浮动的行动按钮，可以在当前屏幕上执行快速行动，只需点击一下，长按一下，或轻扫一下。以Gmail为例，用户可以轻扫来归档一封邮件，或者点击扩展的FAB按钮来撰写一封邮件。
动作手势包括。
- 轻敲
- 长按
- 轻扫
变换手势
使用两个或多个手指来变换大小、位置和旋转。一个普遍的例子是谷歌地图。用户可以使用捏合缩放手势，双击缩放，拖放图钉，或旋转地图。
变换手势包括。
- 双击
- 捏住
- 复合手势（旋转）
- 挑选和移动
请看下面的思维导图，解释Flutter在其小工具中提供了前面提到的所有手势。
免责声明：我将在下面使用的例子来自目前数百万人正在使用的流行应用程序。我并不是在推广这些应用或拥有这些应用的公司，也没有直接或间接地与它们联系。我只是把它作为本文的参考，纯粹是为了学习。
为WhatsApp这样的文字应用选择合适的手势
让我告诉你为什么我决定使用真实世界的应用程序作为例子。每个程序员或设计师在他们的学习阶段一定都尝试过克隆流行的应用程序，如Whatsapp、Telegram、Instagram等。我知道我也曾尝试过。
构建这些类型的应用程序背后有大量的研发工作。而且，伟大的思想家们聚集在一起，设计和建造它。而且，由于有数百万人使用它，它已经被彻底测试过，使这些应用程序成为学习功能和UI/UX设计的理想选择。
因此，让我们仔细检查一下Whatsapp。虽然这些应用程序不是建立在Flutter平台上，但我们仍然可以看到他们在哪里实现了手势，哪种手势，什么时候，以及为什么。如果我们不得不使用Flutter平台建立类似的东西，我们应该使用哪些小部件来准确实现？
在继续之前，请花点时间考虑一下上面的图片。然后，从一个程序员的角度审视用户界面。你能认出多少种手势？
你在使用该应用时可能没有注意到，但如果你仔细观察，你会看到下面列出的所有手势。
WhatsApp使用哪些类型的手势？
- 一个自动实现滑动手势的TabBar，可以在屏幕之间进行切换
- 如果您点击个人资料图标，一个大的图片将被打开
- 如果您点击任何单独的列表项目，它将打开一个新的聊天屏幕窗口
- 长按特定列表项目将选择它
- 掐指一算，可以放大个人资料图片和其他用户发送的图片
如果我必须在Flutter中克隆这个屏幕，我将使用哪些部件？
- TabBar小工具
- 具有生成器功能的列表视图
- 用手势检测器来点击个人资料图标
- 手势检测器：
LongPress在一个单独的项目上 - GestureDetector包裹着
ListTile，在一个特定的列表项目上Tap。 - 手势检测器从左至右
Swipe - 使用
Pinch和Pan手势的InteractiveViewerwidget。
手势是在哪里实现的？
如果你看一下用户界面，它是直截了当的。这里没有学习曲线，因为它对任何用户来说都是自然的。此外，手势在主屏幕和聊天屏幕上都已到位，所以用户可以很容易地与应用程序互动。例如，仅ListView就有三种不同的手势。
什么时候使用手势？
当用户想阅读消息时，用户会点击列表中的单个项目。
当用户想删除一个聊天记录时，用户会长按它。
当用户想看个人资料图片时，他们会点击它，使其变大。
一个重要的问题。为什么？
让我们想象一下另一个用户界面。如果我们没有手势，用户将如何选择聊天？
以前，我们有带物理按钮的手机，我们用四个箭头按钮来滚动浏览电话信息。要选择一条信息，我们必须点击中间的按钮。然后，我们不得不点击删除信息的选项，向下滚动选择删除。这是一个漫长的过程。
考虑一下当前聊天屏幕中的上述情况。然后，看看下面的模拟图，想象一下用户对它的感受和与应用程序的互动。
今天，我们有不同尺寸的手机，所以这里有一个拇指区在起作用。如果用户用右手或左手握住手机，那么任何设计师或程序员都要考虑拇指能伸多远来操作手机。然后，设计师会考虑实现手势，用另一只手与应用程序的其他部分互动。
图片来源：dev.to。
再次回到WhatsApp的主屏幕，用户可以用拇指点击、滚动、滑动，并通过点击浮动的行动按钮开始新的聊天。只有当用户想点击屏幕顶部时，他们才需要使用另一只手。
让我们看一下其他的例子
在Gmail中，用户界面与WhatsApp的主屏幕类似。用户可以通过单点圆形图标或长按信息本身来选择信息。Flutter使用GestureDetector小部件提供了类似的功能。然而，Gmail有一个额外的手势。使用Dimissible小组件，轻扫存档，或轻扫删除。
其次，在Keep Notes应用程序中，用户可以根据其优先级重新排列笔记，如上面的图片所示。此外，用户还可以通过滑动来归档某个特定的笔记。Flutter提供的Draggable小组件和Dimissible小组件可以在你的应用程序中创建一个类似的用户界面。
同样，Instagram有一个双击手势来喜欢一个帖子，一个双指手势来放大图片，它也有一个心形图标在每个帖子下面。尽管点击心形图标需要减少一次点击，但Instagram仍然实现了双击来喜欢一个帖子。为什么？因为它允许用户更快地滚动并有更大的区域可以点击，而且点击你喜欢的图片或视频是很直观的。
如果我在Flutter中建立类似的东西，一个结合了GestureDetector或InkWell小部件的卡片小部件会起到作用。
总结
这是我在成为一名开发者时学到的东西。首先，我从一个Android开发者开始，然后是Flutter开发者。接下来，我创建了我的用户界面，并围绕它构建应用程序。最后，经过大量的阅读和研究，我认为应该考虑根据你所构建的应用程序的类型来问这些问题。
- 你应该实现什么类型的按钮或手势？
- 你应该把按钮或手势放在哪里？
- 用户应该在什么时候能够与之互动？
- 你为什么要实现它？
有一些常见的移动应用程序的类别，如生产力、社会媒体、教育、游戏等。如果你的应用程序属于这些类别之一或任何其他类别，你应该考虑查看属于这些类别的应用程序。
研究应用程序让你对如何设计UI/UX有一个深入的了解。因为无论你在编程什么类型的应用程序，很少有小工具是常用的。UI也是相当相似的，所以根据已经测试过的应用程序来实现手势，将使你的应用程序变得直观和互动。而且Flutter提供了所有的工具来构建一个奇妙的应用程序。
我想用最后这句话来结束，一个有效的产品永远是最可用的产品。
The post Choosing theright gestures for your Flutter projectappeared first onLogRocket Blog.
