2016移动设计趋势:神奇的微交互

分享到:更多 ()

你创造了一个新的应用程序是很惊喜的事,它也许有一个令人印象深刻视觉设计或故事,但这还远远不够,它需要更多的东西让使用他的用户感觉它是个活着的生物。
那这个灵魂就是微交互作用的地方:

最美ui www.zuimeiui.com 2016移动设计趋势:神奇的微交互

图片来源 UXPin

当谈到创造一种上瘾的APP微交互的秘诀时候,设计师在这些设计中让用户参与其中,会创造出意想不到的喜悦。
其实你每天都会遇到微交互。
每次你结束一个闹钟,看到一个文字信息在屏幕上闪过,在游戏中被提醒你的回合次,在音乐播放器跳过一首歌,甚至在你改变路线的基础上,在你的早晨通勤交通警报。每一个微小的瞬间形成一个微交互作用。很可能你不考虑他们的任何一个存在,但为什么每一个有助于你持续使用特定的应用程序日复一日。

什么是微交互?

微交互是任何一个单一的任务型参与的设备。这些约定大多数是不明显的,提供了流畅的体验感觉。
Dan Saffer在《微交互详细设计:全彩色版》介绍(强烈推荐),帮助完成特定功能的微交互的三个作用:

  • 快速沟通状态或反馈
  • 可视化的动作结果
  • 帮助用户操作屏幕上的东西

Slack
图片来源 Slack 

一个好的应用程序都会在里面包含这三个作用点。该应用程序允许用户在一个闭环里聊天,附加文件和标签。所有的时间,该应用程序提供实时更新(如读标记的消息),并帮助用户浏览周围。它还使用通知和其他小动作,以保持用户的同步与被沟通。

微交互以多种方式影响应用程序的用户和功能::

  • 提醒打开或关掉
  • 任何数字媒体评论
  • 改变设置或过程
  • 检查邮件或通知
  • 在移动设备上向下滑动以刷新内容
  • 与数据元素相互作用,如检查天气
  • 完成独立的任务
  • 连接设备,如多玩家游戏或从您的笔记本电脑进行打印
  • 在网站上分享喜欢的照片或视频

简单地说,一个微交互作用是一个动作,从用户触发另一个动作的设备的一部分。每一种交互作用都是以一种以人为中心的设计理念为基础的,其中的数字工具和功能反映了一个人如何能真正做某事。这是对可用性的秘密调味的一种交互作用,在表现为预期一个“人类的方法”

最美ui www.zuimeiui.com 2016移动设计趋势:神奇的微交互

图片来源:UXPin

在上面的例子中,原型是一个网站找到时装模特,一张卡片代表每一个模型,当你在人的脸上悬停时显示度量测量时候,则另一个名片进行下载。对于这个特定的情况下,该微交互的作用揭示信息顺畅。动画增加了一些程序,使设计更逼真,给用户的操作反馈。

微交互真正做什么?

正如你可以从上面的列表中看到的,并且在任何方式中都包含了所有的微交互作用:微交互作用于多个角色。

但具体地说,他们应该总是参与创造。

当您正在考虑如何设计一个微交互,认为不仅是关于具体行动或任务,但它应该“做”的整体用户体验的一部分。

从本质上说,微交互应该让用户感觉或做一些物理上的事情:

  • 触摸屏幕
  • 微笑与喜悦
  • 学习或理解某事
  • 连接到另一个用户
Elevate

图片来源: Elevate 

在游戏式学习界面中,提升应用程序使用以上的每一个组件。用户必须触摸屏幕以回答问题和正确答案,而漂亮的动画可以用来取悦用户。该应用程序允许用户训练他们的大脑(图为游戏的目的是帮助你的语法和使用)。用户可以与朋友和其他应用程序用户共享分数和结果。

这听起来像是一个简单的游戏,对吗?但这些都是用户所期望的,几乎每一个应用程序的种类。

正如在《2015和2016移动设计趋势指南》解释,这些行动是为什么需要微交互工作的核心。这些微小的,重量轻的“数字时刻”的感觉,被认为是一种情感联系。微交互允许用户感觉到另一个用户或对象。

微交互作用的四个要素

Dan Saffer在《微交互作用的前沿》说明了关于微交互的四个要素,在谷歌上检索“微交互”,他的名字被链接到几乎所有的确切信息的主题,在某种程度上。Saffer集中在一四部结构微交互作用和它是真正的最好的方式来了解如何创建。

  • 触发:启动微相互作用。例如,我点击一个心脏图标最喜欢的网页。
  • 规则:互动行为的方式。用户不能“查看”规则,但只有通过反馈(下一步)才可以理解它们。在这种情况下,点击心脏图标将添加到用户的饲料页面。
  • 反馈:如何设计传达给用户的微相互作用。心脏图标填充颜色和弹跳,伴随着一个散热“保存到饲料!“消息通知用户发生了什么。
  • 循环模式:确定微相互作用长度和它如何重复或随时间演变。例如,我们说现在是将我们从收藏的网页内容的微博互动,甚至会提醒我们在6个月的时候,我们第一个喜欢的页面。

每一个部分都存在于每一个相互作用中,为事情的工作创造一个周期。

当们介绍,大多数用户没有注意到的微交互作用。

是否考虑反馈?

反馈是微交互循环中最重要的部分。

这是用户和界面连接的微交互的阶段。反馈确定一个微交互将如何工作。

这样想一想吧。你需要7点起床,并在你的电话上设置一个闹钟。当闹钟响的时候会发生什么?你起床了,关掉闹钟吗?或者你打瞌睡?这个简单的动作告诉应用程序的微交互下一步,重置报警的下一个周期或再过9分钟。用户和系统之间的反馈回路已完成。

没有用户的初始反馈,警报的声音永远不会停止。它不会重置。开放周期可以让它在和结束的。

Wunderlist

图片来源:Wunderlist

这是相同的在检查了待办事项列表中的项目,类似以上这款。

通过勾选旁边的一个项目,你告诉应用程序触发的微交互的项目,你的任务列表。

在一瞬间,你现在知道哪些项目是完整的,这是悬而未决的。

完成任务的满意度会鼓励你完成更多的任务,从而进一步与应用程序交互。

虽然这是一个非常简单的例子,但有很多要从中学习。

首先,它显示了我们的用户希望从事微交互的方式,清楚地创建下一步(循环),并希望它的工作直观地足够,它可以随着时间的推移和使用。

设计细节是微交互的核心

一个微交互的方式是设计,你如何处理的细节将或创新你的项目。互动是必不可少的设计元素,你不能忽视。

Dark Sky

图片来源:Dark Sky 

你如何设计微交互呢?你应该怎么看微交互?

  • 微交互必须在重复使用中存活。避免噱头或动画纯粹为聪明的缘故。记住你的微交互长寿必须因为他们不能长期使用感到烦恼。
  • 简单是关键。简单的清晰醒目的语言,字体,颜色,结构设计的基本原理以及运行和不添加任何更多。
  • 微交互必须感受到人,文字应该像人一样说话。设计应以各种形式传达情感。
  • 缩微本。所有副本应匹配的时刻。应用正确的音调使文本感到尊重,帮助,和尽可能轻松。
  • 用动画制作一些有趣的动画,但使用需要适度。想想在OSX的图标为新项目负荷反弹。动画会告诉你,这个程序是响应,但它不负担你当前的行动。努力在你的动画中同样有用,因为它们不仅仅是视觉上的愉悦。
  • 寻求和谐。对比是你的朋友,但仔细地使用它。当你开始到特定的用户体验的时候,细节会比你想象的更重要。如果你的应用程序使用一个绿色的颜色方案,确保通过你的微交互的颜色流。每一刻都应该感觉视觉上连接到较大的应用程序设计。
  • 想想微交互进化。做微交互作用表现完全相同的在第一次和第一千次?还是随着时间的推移而发展?例如,考虑如何报警成为你继续把闹钟响。如果你想站在其他设计中,你必须考虑这些细节。
  • 但是,不要沉迷太多。一旦你传送的消息在一个快速和轻松的,走出去并顺利过渡到任务的正常流动。

结论

微交互是人们想要使用的应用程序设计的重要组成部分。他们有助于创造用户参与度,有助于功能和用户快乐的拉在一起,你需要创建一个很小的时刻,用户不知道,但需要或希望这样你的应用程序是他们日常生活的重要组成部分。

要了解更多有用的移动设计趋势,看看免费的电子书《2015与2016移动设计趋势》在140页的设计指南,解构流行趋势为基于从71个例子的简单方法。

 

来源:designmodo

翻译:最美ui-kavin

本文由最美ui 学ui设计联盟网原创翻译,请尊重版权和译者成果,转摘请附上最美ui原文链接,违者必究。谢谢各位编辑同仁配合。

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 2016移动设计趋势:神奇的微交互

0
分享到:更多 ()