译文 | 微交互:设计优秀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

相关推荐

  • 交互分析:什么时候该用新窗口打开(target=_blank)?

    是否从新标签打开页面看起来也许并不是特别起眼,甚至可以说是一个很小的细节。但是正是这种小细节往往决定了你网站的用户粘性,是否可以在竞品中胜出。

    2017-08-04
  • 818那些影响用户体验的创意

    作为创意经常不通过审核的一枚苦逼广告主,你一定经常看到以下拒绝原因:因模糊、变形,出现马赛克等原因导致无法识别,请优化。人物形象影响用户体验,如【动作不雅、衣服暴露、大头照】。文字包含【低俗、不良诱导、负面描述】等影响用户体验。……有没有觉得很委屈,很痛苦,很莫名其妙?作为苦逼的设计师,好不容易满足了甲方爸爸的变态要求,没想到又被更变态(划掉,正规)的腾讯社交广告审核拒绝了。概括一下,这些拒绝原因全部称为“影响用户体验”。那什么是影响用...

    2018-04-19
  • Bug还是大动作?-静电为你解读Sketch3.7版本新功能

    静电说:Hello大家好,又到了逗比软件Sketch大版本的推出时间。哦不对,不能说逗比,只能说史上更新最快的软件。比如今天下午薄荷面官方在半个小时更新了两个版本的Sketch,哇塞,想想都有些小激动捏。咳咳,严肃点…

    2016-04-13
  • 别让措辞毁了你的设计成果

    本文总结到:措辞在用户体验设计中很重要。注意使用简洁、明了、有力的词语来表达信息。它会彻底改变产品体验和心态。你:“对不起老师,我能去厕所吗?”

    老师:“我不知道……能不能,你说呢?”好友:“嘿,[你的名字]!试试搬起这把椅子。”译者注:这个问题在汉语中应该不存在。原文中的Just一词,如今最常用来表达“刚好”、“恰好”、“差一点”的含义。“你差点就拿下第一名了,继续努力!”“你与第一名已经很接近了,下次反应速度得再快一些。”

    2017-05-07
  • 用两个例子来谈谈:工具对设计师真的有那么重要吗?

    工具固然重要,但我们不应该被它牵制。“因为刚入行,所以不知道怎么去做好这个岗位,只能先从工具入手,然后看看公司的产品,再去用 Axure 绘制一遍。 ”

    2017-05-06
  • 求职指南 | 阿里巴巴2018春季实习生招聘-中科大站

    阿里巴巴2018春季实习生招聘技术高校行中国科学技术大学站从全世界规模最大的电商双11安全级别最高的支付金融到全球领先的云计算覆盖全球的智能物流……今天的阿里巴巴正在从商业模式创新的引领者逐渐成为科技创新的引领者在技术高校行现场有资深的技术大牛和亲分享阿里重点技术有各级学长们和亲聊一聊这一年的成长有亲切的HR带领亲领略阿里的企业文化本硕场同学们提前将简历投递到官网相应职位报名,将有机会获取交流会名额、免笔试、现场面试、进入快速Offer...

    2018-03-23
  • 登录表单的那些事儿

     雅婵总结并供稿于我是UE网,转载请注明来自我是UE网。

    2015-06-12
  • 实例分析:从搜索结果看地图搜索的交互设计

    每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

    2017-05-11
  • 阿里设计师:如何做好一场设计提案的Presentation

      作者:鸿影(阿里巴巴,设计师)   在过去很长一段时间,怎么清晰透彻地把自己的设计思路与方案讲述出来,一直是一个比较困扰我的问题(刚开始实习时甚至连做设计方案Review都经常结结巴巴),直到最近几次工作中…

    交互专题 2017-08-07
  • 用户体验设计中的功能动效

    作者:Amit Daliot 出处: http://www.smashingmagazine.com/2015/05/functional-ux-design-animations/ 一个优秀的用户体验设计师可以很容易的解释设计概念中每个决策背后的逻辑。通常包括信息架构,页面内容的层…

    2015-11-08