宁波手机网站制作:理解移动应用程序设计中的微交互

宁波网站建设 | 2019-07-24

数字接口是用户和他们期望的目标之间的中间人。界面设计人员创建帮助用户的体验。执行某些任务..例如,待办事项列表应用程序有一个界面,可以帮助用户组织他们的任务。就像Facebook应用程序给用户提供了一个与其Facebook账户交互的界面。

在本指南中,我将进一步研究移动应用程序的微交互..小的交互可能看起来很琐碎,但是它们可以有一个巨大影响用户体验的质量。如果操作得当,微交互就像是总体移动用户体验中真正的一部分。宁波手机网站制作

微观相互作用的力量

在大多数情况下,微交互的目标是提供反馈基于用户的操作。这可以帮助用户。可视化界面的移动或行为即使它是纯数字的在一个平面屏幕上。

微相互作用是有力量的,因为它们创造一种虚幻的体验..开/关滑块实际上并不像物理开关那样移动,但它们可以在动画中以这种方式移动。

宁波手机网站制作
图片:运球

我在这个职位讨论移动应用程序微交互的巨大价值:

“最好的产品有两件事做得很好:特性和细节。功能是吸引人们对你的产品。细节是让他们留在那里的原因。细节是我们的应用在竞争中脱颖而出的真正原因。“

这个小细节从开发的角度看,可能微不足道,但从用户体验的角度来看,它们确实是微不足道的。使不同在OK应用UI和非凡的应用UI之间。

巨大的微交互使用户感到报偿因为他采取了行动。这些动作可以是重复在用户行为中根深蒂固..他们可以学习如何使用基于这些较小的微交互的应用程序。当用户执行一种行为时,这些小的交互意味着“是的,您可以与我交互!”

看看谷歌的例子材料设计规范..文档实际上有一整节专门讨论物质运动. 空间关系是这个等式的很大一部分,但是运动可以支配的不仅仅是空间关系。

以下是动画和运动最常见的用途在移动UI/UX设计中:

移动应用程序更不用说屏幕空间了而不是网站。这可能会导致一些困难,教用户如何使用应用程序。但是,如果你知道如何正确地实现微交互,它可能会非常简单。

微观相互作用是如何工作的

每当用户使用接口的某一部分时,单个微交互就会触发。大多数微观相互作用是对用户手势的动画响应..因此,一个滑动动作的反应将不同于一个轻拍或一部电影。

眨眼UX做了一个伟大职位讨论微观互动的细节。这些小动画应该遵循可预测过程用户可以学习的对于应用程序中的每一个交互.

微交互引导用户通过一个界面对行为作出反应..一旦用户知道开/关滑块可以移动,他们就知道它是交互式的。根据响应,他们还会知道设置是打开还是关闭。当一个按钮看起来像是可以点击的时候,用户就可以点击它了。本能地知道他们可以和它互动。

据UXPin说,每一个基本的微交互都可以分为四个步骤,但我已经将这个过程总结为三步.

  1. 行动

    --

    用户做某事

    像电影,滑动,点击和保持,或其他一些互动。
  2. 反应

    --

    接口响应

    基于需要发生的事情。在浏览器历史记录中滑动屏幕可能会移动,或者点击打开/关闭滑块可能会关闭设置。
  3. 反馈

    -这就是

    用户实际看到

    作为相互作用的结果。当用户在移动浏览器中滑动时,它可能会将前一页浮动到屏幕的“顶部”。当压力施加到屏幕上时,开/关滑块可能会平稳地滑行或变大。

这些非常小的动作可以在没有动画的情况下完成,但是巨大的微交互提供了现实感的数字接口,其主要形式是真实动画效果..它们为界面注入活力,并鼓励更多的用户交互。

寻找细节

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

拉刷新是现在流行的微互动的一个很好的例子。当iOS刚推出的时候,它并不是iOS的一个组成部分,但是很多应用程序都接受了这个想法,并开始使用它。现在,拉到刷新是众所周知的行为,大多数用户只是知道在浏览提要UI时使用。移动也可以这样说。汉堡包菜单已经大受欢迎了。

使每一个微互动现实与简单..不要过分渲染动画,因为它们可以变得乏味如果它们太详细而且经常被使用的话。用户不希望每次点击菜单图标时都会出现火花。取得平衡用真正的价值传达接口应该如何工作而不上船宁波手机网站制作。

看一些例子

我认为最好的学习方法是做一些事情,第二个最好的方法是学习别人的工作。我收集了一小部分UI/UX微交互动画从才华横溢的Dribbble用户向您展示这些看起来如何在一个真正的模型。

每个应用程序将是不同的,并有不同的需求,根据应用程序所做的。最后,大多数用户都想要同样的东西:一个应用程序直觉提供优质的用户体验与用户行为相关的微交互。

1.动画事件AppUI

第一个例子是漂亮的卡片动画由Ivan Martynenko创作的特写。你会注意到少量的微相互作用在这个设计中,特别是刷卡和移动的细节。

当敲击卡片时,它的大小会增大。当敲击订阅按钮将用户的个人资料照片滑到订阅者列表中。所有的感觉都非常直观,界面也很自然。

2.交互式练习屏幕

这款创意手机运动动画来自设计师维塔利·鲁布佐夫。它演示一个用户保存他们的锻炼为一组蹲。

注意,每个动画都有相同的弹性弹跳效应当菜单打开和关闭时。当活动被检查为“已完成”时,这也是正确的。一致性是微交互的关键,因为他们都应该感觉到连接到同一接口.

3.搜索应用程序的微交互

短短的,甜蜜的,切中要害的。我认为这最好地描述了搜索应用程序微交互由Lukas Horak设计。每一个动画快速但仍然引人注目.

这就是您应该如何设计微交互避免过于复杂..如果界面在没有动画的情况下会加载得更快,那么为什么还要添加它呢?快速动画保持用户通过,而不陷入困境的经验。

4.健身目标的微观互动

我认为Jakub antalƒ真的用他的健身目标微观互动..屏幕上都有一种晃动的果冻的感觉,因为形状流动得如此流畅.

但是界面也感觉到实心实用..它表明,与一个目的微观互动仍然可以是有趣和娱乐,但也功能和务实。

5.拉回动画

这是我最喜欢的拉刷新动画由团队创建拉穆..这不仅是模仿流体具有拉动作,但响应动画平滑连接从一滴液体飞溅到一个装载圈。

这,这个注重细节正是在移动应用程序的微交互中展现了真正的美。

6.TAB微观互动

选项卡小部件由于屏幕较小,移动应用程序非常常见。我真的很喜欢这种微观相互作用由JohnNoussis创作,虽然我认为它会更有效,以更快的速度,但动画本身是光荣和深思熟虑的。

选项卡锚箭头滑向右边,就像新内容从右边弹进来一样。它给人一种错觉全屏幕物理移动在右边。动画很精致,但由于速度太慢,我想大多数用户会在几天后感到厌烦。

7.预压动画

我没说太多关于加载杆在这篇文章中,但它们对整体经验也同样有价值。大多数用户不想等待数据加载,但他们肯定不想在加载时盯着一个空白屏幕。

布雷特·库尔茨做了这么惊人的事预压筛这既有趣又丰富。用户实际上可以娱乐看这个小小的动画重复。他们也可以放心应用程序是仍在加载他们的数据也没有坠毁。

宁波手机网站制作

上一篇:宁波企业网站建设:设计师关于使用样式指南和样式的指南下一篇:宁波网站建设:面向设计师的开放式色彩界面优化配色方案
联系电话 400-6065-301

微信咨询 寒总监