译文 | 微交互:设计优秀app的秘密

好的产品往往做好了两点:功能和细节设计。功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象。作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能。

译文 | 微交互:设计优秀app的秘密

好的产品往往做好了两点:功能和细节设计。功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象。作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能。

什么是微交互?

微交互是产品中存在的某一个时刻,它完成了某一个小的任务。Dan Saffer在他的书中(Microinteractions)第一次描述了微交互的概念,这些小细节专注于服务这些必要的功能:

  • 交流回馈或者动作的结果回馈
  • 完成某个单独的任务
  • 增强直接操作的感觉
  • 帮助用户在视觉上展示操作的结果,以及避免错误

一些明显的微交互例子包括:

当你将iPhone设置成静音时伴随出现的的震动提醒、屏幕上的静音icon

译文 | 微交互:设计优秀app的秘密

界面动画提示是否能够点击(当鼠标移到按钮上方时按钮的颜色改变)

译文 | 微交互:设计优秀app的秘密

为什么使用微交互?

微交互是在对用户一些自然的需求/欲望的认知和反馈。用户从微交互提供的视觉、触觉等反馈中确认他们的行为被接受。微交互还可以引导用户正确的使用系统/产品。

定义微交互的使用情景

微交互的一个特点是它可以被放置在很多的场景下,辅助不同的动作行为。总体来说,微交互的使用场景包括:

展示系统/产品的状态

Jacob Nielsen在“可用性启发原则”中指出:让你的用户时刻了解发生的事情,用户期望对自己的行为立即得到反馈。但是有些情况下,app需要时间来等待行为处理完成后才能向用户发出反馈。因此,产品界面需要向用户指明此刻正在发生的事。

译文 | 微交互:设计优秀app的秘密

下载进度表

或者标明用户所在的位置:

译文 | 微交互:设计优秀app的秘密

scrolling bar progress

Tips:不要让你的用户感到无助,让你的用户了解实时的状态并且向其展示进度(比如进度条能够让用户了解进度,消除疑惑)

提示更新

我们有时需要向用户推送通知来保证用户了解到事态的更新。动画可以做到这一点,动画可以吸引用户的注意力,避免用户忽视掉重要的信息。

译文 | 微交互:设计优秀app的秘密

new incoming message

Tips:微交互里的动效应该遵循KISS原则(keep it simple, stupid),应该尽量简单直接。

关联上下文

使用动效来将用户的注意力平滑的在导航页面间切换,向用户解释页面里元素之间的关系,以及页面跳转的来龙去脉。这对于移动设备非常有用,因为屏幕的尺寸限制,移动界面中每一页的内容都很紧凑,使用动效来阐述内容之间的联系非常实用,(关联阅读:我在“如何合理的在移动应用中使用动效”一文中也有涉及)

Tips:尽量让每个页面的导航简洁,这样可以有效避免用户在页面跳转中迷失。两个状态之间的却换应该清晰、平滑、快捷。在视觉上统一所有的交互形式,降低用户的学习成本。

输入可视化

数据输入是应用中非常重要的环节,微交互可以使用现有的元素来展示数据输入的反馈,从而将这步操作变得更加高效。

译文 | 微交互:设计优秀app的秘密

Tips:微交互能够帮助用户理解信息格式,来源,帮助用户便捷输入信息。

引导互动

微交互可以鼓励用户、吸引用户与产品交互。它可以在用户体验中产生同理心。但是需要谨慎使用微交互,保证其在感官上不会冒犯你的用户。时刻谨记-不要让用户感到厌烦,Keep it simple, stupid.

译文 | 微交互:设计优秀app的秘密

Tips:关注用户的情感反馈,因为它在用户体验中起到很重要的作用。多做用户研究和情景调研,设计能被用户频繁使用的微交互方案。

值得谨记的

  • 微交互向用户展示动作反馈,通知以及信息框架结构
  • 微交互应该通过转移用户的注意力、愉悦用户等来达到加快/缩短信息数据的传输
  • 了解你的用户以及使用微交互的背景,能够让你的微交互方案更加的精准与高效
  • 微交互必须能够支持长时效的使用,在第一次使用时感到惊喜的方案,可能在第一百次使用时就变成了困扰。
  • 微交互方案应该人性化一些,并且在视觉上保持和谐。用户在使用的时候应该感到流畅,微交互的方案应该尽可能的从现实生活中获得启发,比如使用拟物化等手段,从而降低学习成本。

总结

用心设计,思考用户使用产品的情景,再设计这些微交互时多运用一些生活中常见的操作模式、物体的运动轨迹、常见的行为方式等。产品的易用性来源于对细节的打磨,伟大的设计不仅仅在功能上满足用户的需求,还要在微交互的设计上打动人心。

 

原文作者:Nick Babich

原文链接:https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf#.m4vyculdb

本文由 @薛斯塔 原创翻译发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29837/

(0)
CatherineCatherine
上一篇 2017-05-26 02:35
下一篇 2017-05-26 04:44

相关推荐

  • 『设计|交互设计』2018年交互设计趋势解析

    本文转载自:设计前沿2018年交互设计趋势解析2018视觉趋势Pantone 2018流行色:紫外光色Pantone 官方翻译为「紫外光色」,紫外光色是强烈挑动思绪与深思的紫色调,传达独创性、创造力及前瞻性思维,为我们指向未来。彩通:18-3838 紫外光色颜色代码:#5f4b8bRGB:R 95,G 75,B 139CMYK:C 71,M 73,Y 7,K 8从2017年下半年开始,紫色配色的作品开始很多,所以2018年这个色也是一个...

    2018-04-25
  • 设计中的色彩心理学(上):九种色彩所代表的心理感应

    之前写过一些关于色彩的文章,一直说的是关于色彩理论的一些色彩基础,其中有读者提到过想听听关于色彩心理学的一些东西,因此就在这里聊聊自己的一些感想和设计实践中的一些心得体会,并不系统,只谈感想。

    2017-05-10
  • 微信公众号哪些细节会影响用户体验?

    公众开发运营官网公众运营平台微信公众号哪些细节会影响用户体验?在微信公众号里面,哪些细节会影响大家对公众号的体验呢?下面小编就来为大家讲解一下这些细节,快来看看吧。1.无意义的自定义菜单内容第一个就是毫无意义的自定义菜单内容,很多企业公众号费心费力通过了企业认证,好像不用这个自定义菜单挺可惜的,然后就非得放些东西进去,但是并没有考虑目标用户是否需要。如果把公众号视作一个小应用的话,自定义菜单的功能可以类比App里的Tabbar,主要是实...

    2018-02-12
  • 手机app开发交互设计的四大要素

    app开发中的交互设计是用户体验好坏的关键点,在开发手机app时,注重的应该是交互设计的效果。用户是交互设计的直接受益人,手机app怎样进行交互设计才能让用户舒心,在这里有四个要素需要把握。手机app开发交互设计在开发过程中是重中之重,这个环节一旦出现问题,用户的体验也会变得别扭难受。怎样进行交互设计,很多人都找不到其中的诀窍,其实只要把握四要素,一切就会变得比较简单。一、遵循平台规范的基本原则遵循平台规范的基本原则并不是说限制于设计规...

    2018-03-24
  • 如何辨别一个Banner的好坏?(附案例)

    平时经常会有人问我“什么样才算是好的Banner ?”、“我这个Banner 有什么问题呢?”之类的问题,还有时候大家会分享一些作品但是我觉得并不是特别好,所以就觉得要不写一篇“如何判断一个Banner 的好坏”之类的文章吧,因为我们常说设计师要多看,但是多看的前提是要学会辨别一个东西的好坏,要多看好的而非不好的东西哈,要不然怎么提高审美提高眼界呢?

    2017-05-24
  • 【用户体验.春节特辑】客从何处来(总第266期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第266期我的家族,还算是一个比较大的家族。从我记事起,关于我的家族,关于那些已经逝去的,离我远去的那些家人的故事与人生经历,都是经由一个姑姑讲述给我听的。每逢节假日,尤其是寒暑假那些漫长的假期里,尚还年幼的我,都会安静地坐在她的身旁,在她的娓娓道来中,去遥想那些过往,那过往中我的那些平凡也却有些不凡的家人。我的祖辈的...

    2018-02-16
  • 聊聊2017年即将流行的UX设计趋势

    2016马上就要过完啦,我们来回顾下今年用户体验都发生了哪些大事,并通过回顾过去来展望2017年的用户体验将会有哪些趋势。“可用性”这个词本身变得不那么重要了。它不那么需要我们了。“聊天机器人”是我们行业中最热门的术语之一,如果你还没有,我们很有信心你将很快建立一个。但对话式界面的未来是什么样子?但后退一步:是不是每一个界面都是用户和机器之间的对话?未来的交互不是由按钮组成的。公司不只需要一个界面,而且设计师也不只通过设计工具来完成他们的工作。苹果手表和Alexa可以让用户不碰手机的情况下使用Uber。虽然这可能听起来很简单,但它为人们对技术的期望设定了基调:完全连接和无处不在的体验。作为设计师,我们如何将所有的拼图连接在一起?我可以向Alexa请求Uber乘车,在我的Apple Watch上接收预估时间,与Messenger上的朋友分享费用,并在我的手机app上评分吗?技术应该尽可能不被注意到。——Amber Case,Calm Tech从《黑客帝国》,到《她》和《黑镜》,人类总是幻想生活在虚拟现实的世界。随着数字世界变得更加真实,我们需要采取的行动来实现这些体验。设计VR不应该意味着将2D实践转移到3D,而是应当寻找一种新的范例。 ——Jonathan Ravaz我们一直在听的问题:设计师应该写代码么?设计师画原型吗?设计师应该写文案吗?至少有几十篇文章试图回答这些问题,所以我们现在可能更接近一个确定的答案:这些都可以。今天,UX设计师可能会身兼数职。当我们开始为我们的自动化生活进行设计时,我们首先需要自动化我们的工作。我们将与机器人一起设计。多样性和伦理是今年用户体验中最重要的两个主题。许多设计师之所以从事UX,是为了更好的改变人们的生活。我们可以找到这么做的关键点么?设计并不是一件附属品。我们的工作影响着人们的生活。设计可能失败,但设计师不能。如果你的公司只是为了赚钱,也许你应该找一个更好的公司。这不是你的错,但这是你的责任。—— Alan Cooper,Ranch Stories talk

    2017-05-14
  • 空状态的设计值得更多关注

    空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。“用户会尝试多个同类app,然后在接下来的3到7天内决定其中的哪些不合适。对于’像样的’app,一旦用户决定保留超过7天,那么将会比较长久的存留下去。成功的关键在于怎样使产品在这3到7天当中保持与用户的良好互动。” Ankit Jain – Quettra“很多时候,人们放弃一款产品的原因其实都是我们可控的,例如他们无法一目了然的看出与你的app产生互动之后能给他们带来什么好处。” – Patrick Mckenzie

    2017-06-05
  • 移动端界面中的版式设计原理

    “我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好…

    2016-01-08
  • 蜕变.进化——百度云Android端7.0项目总结

    项目背景: 百度云面世之初是一款网盘类产品,以安全、稳定、易用、快速的体验著称,经历近两年时间的升级优化,百度云已不仅仅只是“网盘”了,在慢慢的朝着平台化的方向不断发展。 旧版的Android客户端随着每一次版…

    2015-03-18