移动应用交互设计_了解移动应用程序设计中的微交互

可用性是移动UI设计的关键组成部分之一。伟大的可用性通常涉及微交互 ，这些微交互是来自界面的小响应和行为，指示应该如何使用UI。这些微交互定义行为，鼓励互动并帮助用户可视化界面应如何工作。

数字接口是用户与其期望目标之间的中间人。界面设计师可以创造帮助用户执行某些任务的体验。例如，待办事项列表应用程序具有一个界面，可帮助用户组织任务。就像Facebook应用程序为用户提供了一个与其Facebook帐户进行交互的界面。

在本指南中，我将进一步研究移动应用程序的微交互 。小型互动看似微不足道，但它们可能会对用户体验的质量产生巨大影响 。如果操作正确，微交互就像是总体移动用户体验的真正组成部分。

微交互的力量

在大多数情况下，微交互的目标是根据用户的行为提供反馈 。这可以帮助用户可视化界面的移动或行为方式 ，即使它是纯数字形式的纯平屏幕。

微交互之所以有力量，是因为它们创造了一种虚幻的体验 。开/关滑杆实际上并不像物理开关那样移动，但是它们似乎可以在动画中以这种方式移动。

在这篇文章中，我发现了一个令人难以置信的报价，讨论了微交互对于移动应用程序的巨大价值：

“最好的产品在两方面做得很好：功能和细节。功能是吸引人们使用您的产品的原因。细节是保持它们在那里的原因。细节是真正使我们的应用在竞争中脱颖而出的原因。”

从开发的角度来看，这些小细节似乎微不足道，但是从用户体验的角度来看，它们确实在OK应用程序UI和非常规应用程序UI之间产生了区别 。

出色的微交互功能使用户为执行某动作而感到高兴。这些动作可以重复并根深蒂固到用户的行为中 。他们可以学习如何使用基于这些较小的微交互的应用程序。当用户执行某种行为时，这些小的互动就表示“是的，您可以与我互动！”

看一下Google的材料设计规范中的示例。该文档实际上有一个完整的部分专门讨论物质运动。 空间关系是这个方程式的重要组成部分，但是运动不仅可以决定空间关系，还可以支配更多。

以下是移动UI / UX设计中动画和运动的最常见用法 ：

在不同页面之间引导用户
通过界面指导用户教某些行为
建议可以在任何给定页面上执行的操作/行为

移动应用程序的屏幕空间比网站少得多。这可能会给教用户如何使用应用程序带来一些困难。但是，如果您知道如何正确实现微交互，它可能会非常简单。

微交互如何工作

只要用户与界面的一部分互动，就会触发一次微交互。大多数微交互是对用户手势的动画响应 。因此，轻拂动作与轻拍或轻拂的响应方式会有所不同。

Blink UX在一篇很棒的文章中讨论了微交互的次要细节。这些小动画应遵循可预测的过程 ，用户可以从应用程序的每次交互中学到东西 。

微交互通过提供对行为的响应来引导用户通过界面。一旦用户知道开/关滑块可以移动，他们就会知道它是交互式的。根据响应，他们还将知道设置是打开还是关闭。当一个按钮看起来可以被单击时，用户本能地知道他们可以与它进行交互。

动作 – 用户执行轻拂，滑动，点击并按住或进行其他一些操作。
React – 接口根据需要进行响应。滑动屏幕可能会在浏览器历史记录中向后移动，或者轻击ON / OFF滑块可能会关闭设置。
反馈 –这是用户实际看到的交互结果。当用户在移动浏览器中向后滑动时，它可能会将上一页向上浮动，以显示在屏幕“顶部”。当对屏幕施加压力时，开/关滑块可能会平滑滑动或增大。

这些很小的动作无需动画即可完成，但是出色的微交互功能为平面数字界面提供了逼真的感觉 ，而这些感觉大多以逼真的动画效果的形式出现。这些将生命带入了界面，并鼓励了更多的用户交互。

寻找细节

通过查看设计的较小部分，您将了解应用程序应如何响应特定行为。

拉动刷新是现在流行的微交互的一个很好的例子。最初启动时，它并不是iOS不可或缺的一部分，但是许多应用程序都采纳了这一想法并开始采用它。现在，刷新是一种众所周知的行为，大多数用户在浏览feed用户界面时就知道要使用它。移动汉堡菜单的受欢迎程度也可以说是一样。

使每个微交互变得现实和简单 。不要过度使用动画，因为如果动画过于详细且经常使用，它们可能会变得乏味 。用户不希望每次点击菜单图标时都出现火花。平衡真实价值，传达接口应如何工作而不至于过高。

看一些例子

我认为学习某件事的最好方法是做某事，而学习第二好方法是研究他人的工作。我从有才华的Dribbble用户那里收集了少量的UI / UX微交互动画 ，向您展示了它们在真实模型中的外观。

每个应用程序都会有所不同，并且根据应用程序的功能会有不同的需求。最后，大多数用户都希望拥有相同的东西：一个直观的应用程序，通过与用户行为相关的微交互， 可以提供高质量的用户体验 。

1.动画事件应用程序用户界面

第一个示例是由Ivan Martynenko创建的精美卡片动画功能。您会注意到这种设计中的一些微交互 ，特别是卡片滑动和细节移动。

当点击卡时，它的大小会增加。当点击“ 订阅”按钮时，用户的个人资料照片会滑入订阅者列表。界面感觉非常直观，非常自然。

2.互动锻炼屏幕

此创意移动锻炼动画来自设计师Vitaly Rubtsov。它演示了用户将其锻炼保存为一组下蹲的演示。

注意，打开和关闭菜单时，每个动画都有相同的弹性弹跳效果 。当活动被选中为“完成”时，也是如此。 一致性是微交互的关键，因为它们都应该连接到同一接口 。

3.搜索应用程序微交互

简短，甜美并切入要点。我认为这最能说明Lukas Horak设计的这些搜索应用程序微交互。每个动画都很快，但仍然引人注目 。

这是设计微交互以避免过度复杂性的方式 。如果在没有动画的情况下界面加载速度更快，那么为什么还要添加呢？ 快速的动画使用户在浏览过程中不会陷入停顿。

4.健身目标微互动

我认为JakubAntalâk的健身目标微互动确实使这名男子从公园里撞了出来。屏幕的形状都充满了抖动的感觉，因为形状移动得很流畅 。

但是该界面也感觉扎实且可用 。它表明，有目的地制作的微交互仍然可以很有趣和有趣，但也可以实用和实用。

5.拉动刷新动画

这是Ramotion团队创建的我最喜欢的“ 一键刷新”动画之一。这不仅可以通过拉动来模仿流体 ，而且响应动画可以从飞溅的液体平稳地连接到加载循环中。

6.标签微交互

由于屏幕较小，所以选项卡式小部件在移动应用程序中很常见。我真的很喜欢John Noussis创建的这种微交互，虽然我认为它以更快的速度会更有效，但是动画本身是光荣的，而且经过深思熟虑。

当新内容从右侧弹出时，制表符定位箭头会向右滑动。它给人以错觉， 整个屏幕实际上向右移动。动画非常精美，但是由于速度太慢，我认为大多数用户几天后都会感到烦恼。

7.预加载动画

在这篇文章中，我并没有说太多关于加载栏的内容，但是它们对于整体体验同样有价值。大多数用户不想等待数据加载，但是他们绝对不想在加载数据时凝视空白屏幕。

布雷特·库尔兹（Bret Kurtz）做了一个很棒的预加载屏幕，既有趣又有用。用户实际上可以封盘观望这个小动画重复。他们也可以放心，该应用程序仍在加载数据并且没有崩溃。

结语

所有这些例子都很好地证明了微交互的价值。移动应用程序从微交互中获得了更多的价值，因为用户可以用手指实际触摸屏幕 。用户不会点击其台式机显示器或笔记本电脑的屏幕，但是每个人都会点击其智能手机，因为这是默认的交互状态 。

这是更多的个人经验 ，这就是为什么移动应用程序设计可以是一个如此细微的过程的原因 。正确完成操作后，添加出色的移动微交互功能可以通过像素和运动来构建强大的虚幻用户体验 。

翻译自: https://www.hongkiat.com/blog/mobile-app-design-microinteractions/