了解移动应用程序设计中的微交互
这些微交互定义行为，鼓励互动并帮助用户可视化界面应如何工作。
良好的可用性通常涉及微交互 ，这些微 交互是来自界面的小响应和行为，指示应该如何使用UI。
可用性是移动UI设计的关键组成部分之一。
就像Facebook应用程序为用户提供了一个与其Facebook帐户进行交互的界面。
例如，待办事项列表应用程序具有一个界面，可帮助用户组织任务。
界面设计师可以创造帮助用户执行某些任务的体验。
数字接口是用户与其期望目标之间的中间人。
如果操作正确，微交互就像是总体移动用户体验的真正组成部分。
小型互动看似微不足道，但会对用户体验的质量产生巨大影响 。
在本指南中，我将进一步研究移动应用程序的微交互 。
微交互的力量
这可以帮助用户可视化界面的移动或行为方式 ，即使它是纯数字形式的纯平屏幕。
在大多数情况下，微交互的目标是根据用户的行为提供反馈 。
开/关滑杆实际上并不像物理开关那样移动，但是它们似乎可以通过动画以这种方式移动。
微交互之所以有力量，是因为它们创造了一种虚幻的体验 。
在这篇文章中，我发现了一个令人难以置信的报价，讨论了微交互对于移动应用程序的巨大价值：
细节是使我们的应用在竞争中脱颖而出的真正原因。”
细节是保持它们在那里的原因。
功能是吸引人们使用您的产品的原因。
“最好的产品在两方面做得很好：功能和细节。
从开发的角度看，这些小细节似乎微不足道，但是从用户体验的角度来看，它们确实在OK应用程序UI和非常规应用程序UI之间产生了区别 。
当用户执行某种行为时，这些小的互动就表示“是的，您可以与我互动！”
他们可以学习如何使用基于这些较小的微交互的应用程序。
这些动作可以重复并根深蒂固到用户的行为中 。
出色的微交互功能使用户为执行操作而感到荣幸。
空间关系是这个方程式的重要组成部分，但是运动不仅可以决定空间关系，还可以支配更多。
该文档实际上有一个完整的部分专门讨论物质运动 。
看一下Google的材料设计规范中的示例。
以下是移动UI / UX设计中动画和运动的最常见用法 ：
- 在不同页面之间引导用户
- 通过界面指导用户教某些行为
- 建议可以在任何给定页面上执行的操作/行为
但是，如果您知道如何正确实现微交互，它可能会非常简单。
这可能会给教用户如何使用应用程序带来一些困难。
移动应用程序的屏幕空间比网站少得多。
微交互如何工作
因此，轻拂动作与轻拍或轻拂的响应方式会有所不同。
大多数微交互是对用户手势的动画响应 。
只要用户与界面的一部分互动，就会触发一次微交互。
这些小动画应遵循可预测的过程 ，用户可以从应用程序的每次交互中学到东西 。
Blink UX在一篇很棒的文章中讨论了微交互的次要细节。
当一个按钮看起来像可以单击时，用户本能地知道他们可以与它进行交互。
根据响应，他们还将知道设置是打开还是关闭。
一旦用户知道开/关滑块可以移动，他们就会知道它是交互式的。
微交互通过提供对行为的响应来引导用户通过界面。
- 动作 – 用户执行轻拂，滑动，点击并按住或进行其他一些操作。
- 反应 – 接口根据需要进行响应 。 滑动屏幕可能会在浏览器历史记录中向后移动，或者轻击ON / OFF滑块可能会关闭设置。
- 反馈 –这是用户实际看到的交互结果。 当用户在移动浏览器中向后滑动时，它可能会将上一页向上浮动以显示在屏幕顶部。 当对屏幕施加压力时，开/关滑块可能会平滑滑动或增大。
这些使界面充满生命，并鼓励更多的用户交互。
这些很小的动作无需动画即可完成，但是出色的微交互功能为平面数字界面提供了逼真的感觉 ，主要是逼真的动画效果 。
寻找细节
通过查看设计的较小部分，您将了解应用程序应如何响应特定行为。
移动汉堡菜单的受欢迎程度也可以说是一样。
现在，刷新是一种众所周知的行为，大多数用户在浏览feed用户界面时就知道要使用它。
最初启动时，它并不是iOS不可或缺的一部分，但许多应用程序都采纳了这一想法并开始采用它。
拉动刷新是现在流行的微交互的一个很好的例子。
保持真正的价值平衡 ，传达接口应如何工作而不会过度使用。
用户不希望每次点击菜单图标时都出现火花。
不要过度使用动画，因为如果动画过于详细且经常使用，它们可能会变得乏味 。
使每个微交互变得现实和简单 。
看一些例子
我从有才华的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/