如何做好微交互，来提升产品的用户体验？
11. 突出变化使用微动画，用户可以从界面上获得对其操作的正确响应。当单击按钮时，界面的每个元素都会进行平滑的过渡，每个设计块都会转换成一个新的状态。by Ramotion二、微交互的测试过程有些人可能会给你一个不好的建议，说不用去做微交互测试，说这就像重复造轮子。相反，微交互对于任何应用或正常的设备运行都是必要的（译者注：正因为它很重要，所以测试也应该引起重视），你可以通过测试和用户反馈来提升和改善它们。不同之处在于，你测试的是流程和结构，而不是停留在概念上。遵循构建&度量&学习的精益启动反馈循环研究方法，构建微交互并测试它，用各种定量和定性的方法度量设计。从这些发现中分析学习，然后重复，使用研究数据来确认你的决定，并确保微交互最终符合用户的需求。建立和运行测试会议的工作量和成本通常非常高。因此，微交互常常与其他项目合并在一起进行测试。三、用微交互来发现问题使用下面描述的流程作为测试微交互的开始：首先，询问用户他们希望通过这个微交互做什么。在使用这个微交互之前，问问他们是否需要学习什么东西，特别是如果他们以前从未使用过类似的交互时。允许他们在没有你帮助的情况下使用这个微交互，并实时收集定量数据。观察用户使用微交互的每一步，倾听他们对所做选择的印象和描述。观察微交互规则对参与者是否作用明显，注意差异。问他们，他们想让微交互帮助记住哪些数据。最后，请他们表达在这个微交互中还有哪些地方是需要继续优化的。这个过程能帮助你发现微交互的很多问题，它能验证一般的目标和期望，对两个用户团队重复这个过程至少两次。在既定时间内，利用用户反馈来分析和优化你做的微交互。四、如何使用研究数据这些是你可以测试的一些定量数据：完成率；微交互持续时间；具体每一步的持续时间；步骤数；点击/敲击/选择的次数机器错误数量；人为失误的数量。优化微交互并重新测试一遍，看看是否需要进一步改进。另外也需要注意样本量，测试用户不多可能会使错误或偏好变得更加明显。统计意义当然并不意味着跟实际一模一样，在设计过程中使用数据，最重要的教训是：它不能是为你自己而设计。研究数据需要人来解释它，然后把它放到内容中，单纯的数据很少能告诉你发生了什么。你为什么会抛弃数据？例如：大多数在线广告都没有点击率。如果你做的广告能有0.5%的点击率，其实做的就还可以了。那么，我们是否应该推迟所有的在线广告，只因为它们很少被使用？99.9%的用户会同意（另外0.1%的人为广告公司工作），但是去掉广告意味着去掉网站本身，因为运营它没有钱赚了。不能只是看数据，因为数据不包含更广泛的内容。业务、组织环境和用户基础不仅仅是Excel表中的数字，数据应该是辅助你做出更好的决策，但不要完全依赖数据。五、微交互对产品用户体验的重要性微交互可以提高产品的用户体验，帮助用户记住你的品牌。它们使产品体验不仅简单，而且能吸引人。考虑小细节表明用户和他们的需求已经得到了一些关注，这正是他们想要的。通过微交互，可以改善人们的生活。最重要的是：做好微交互能在快节奏的web开发行业中保持领先地位。作者：Sergey Gladkiy原文：https://medium.muz.li/how-you-can-improve-ux-with-microinteractions-part-ii-ffcf739f5bbb译者：彩云Sky，微信公众号：彩云译设计
声明：本文转载自第三方媒体，如需转载，请联系版权方授权转载。
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 7 分钟
“最好的产品通常会做好两件事情：功能和细节。功能能够吸引用户关注这个产品，而细节则能够让关注的用户留下来。”Dan Saffer 的这句话阐明了许多成功产品的秘诀。值得注意的是，功能和细节两者都很重要，但是功能居首，细节次之。不过，让用户喜欢或者讨厌一个APP或者网站，往往缘起于细节。随着网站交互设计和动效的大规模普及，我们现在所看到的许多细节设计，都可以归类于微交互。虽然在整体性的设计当中，微交互似乎显得微不足道，但是整个产品体验，与之息息相关。
今天的文章，我们将会探讨微交互是如何塑造优质的产品细节的。
微交互是围绕着某个交互或任务的微妙时刻，它并不特指某个交互或者某个动效，而是和任务、交互相关的这个时间段中一系列的交互、动效和反馈。我们日常使用的APP中都有大量的微交互。
当我们探讨微交互的时候，我们常常会拿日常生活中的开关作为实例，执行按开关这个操作的时候，开关按钮会有力回馈，按钮本身会有物理上的位移，同时会有声音回馈反映到用户耳中，开关所启动或者关闭的对象会发生改变，并且让用户感知到。这种微交互毫无疑问在计算机被发明之前就有了，而这也是我们设计微交互的原理所在。
如果说，开关的实例还不够直观的话，再举两个UI&UX上的实例吧：
·iPhone静音。iPhone 的静音按钮被打开时，手机会有震动通知，UI上会同时显示静音图标。
·下拉刷新交互。当用户希望发现更多内容的时候，下拉界面，随后内容无缝地加载到页面中来，通常界面还会提醒内容已更新。
·点赞按钮。当你点击点赞或者喜欢按钮的时候，界面会使用动效提醒你点击已经成功，并且将你的头像显示在点赞列表当中。
微交互的作用
简而言之，微交互通过让产品更加人性化来提升用户体验。在设计UI的时候，绝大多数情况下，我们都在反复斟酌界面的外观和感受，思考怎么将这些东西设计出来。但是当我需要考虑微交互的设计之时，则更多的是在产品、服务和品牌之间做权衡与抉择。微交互才是真正意义上以人为核心的设计：
·提供即时反馈——视觉反馈符合用户的本能预期，它的存在让用户明白，他们的操作被用户接受；
·促进互动——微交互本身就在鼓励用户进行交互，它能够指引用户，教育用户，让用户明白如何使用；
·带来愉悦感——微交互本身就是呈现完美体验的良好时机。
微交互本身是短暂的，同时它也被设计为可重复使用。精心设计的微交互能做的事情不少。
塑造用户习惯
微交互能够养成特定的用户习惯。当用户重复执行相同动作的时候，能够逐步形成习惯。典型的习惯环路是由3个要素组成的：
·提示——触发交互的提示
·执行——跟着提示的内容，用户执行对应的操作
·奖励——完成操作，用户获得相应的奖励
最终的奖励来的越明显，习惯越容易形成。所以，许多产品都在给用户的奖励上动心思。奖励的方式多种多样，而目前最常用的，是通过动效来赋予交互以愉悦感，或者是给予用户有用的信息。Facebook 就是采用的这样的机制，当用户看到图标上出现小红点的时候（提示），会点击图标（操作），进入APP之后，用户会看到相应的推送信息（奖励）。
如果微交互执行的好，那么它可以成为不断强化用户忠诚度的关键时刻。同时，它也可以成为塑造品牌的关键时刻。想想 Facebook 的 Like 按钮吧，它采用的是动效作为奖励机制，并且现在已经成为了Facebook UI和交互的标志，是不可或缺的组成部分。如何哪天Facebook 删除了这一功能，用户会立刻注意到，甚至会误以为Facebook 出了状况。
微交互的优势很多，它最大的特点在于可以无缝的存在于不同的界面，不同的UX环节当中，同各式各样的交互连接起来，如影随形。
微交互常常能够吸引用户的注意力，在许多情况下，微交互是借由动画和动效来提相应用户“这个细节很重要”。
提升用户效率
自动补全是微交互的另外一个重要用途。不论是什么语言，文本输入本身的成本一直都很高昂，在小型触摸屏上尤其是如此，出错率高，总体效率低下。自动补全，或者说自动填充，它能通过预测在一定程度上提前给用户正确的输入内容，降低出错率，提升效率。
提供相应的反馈
微交互能够强化用户交互的实际效果，不过考虑到“show, don’t tell”这一设计原则，采用动画来展示交互结果和操作已完成，比起文字说明和提示框要优雅得体且有效得多。在 当中，用户点击付款之前，会有一个短暂的加载过程，完成之后还有一个完成的对勾标识告知用户付款完成。这组动效不仅符合用户接受信息的自然过程，而且给予了用户正确的反馈。
提供状态相关信息
Jakob Nielsen 所提出的第一个可用性原则是这么说的：系统应该让用户明白正在发生的事情。聊天窗口中的绿色状态指示控件就是一个很优秀的实例。用户是否收到了，一目了然，无需说明。
验证用户信息
表单设计中最容易被忽视的，其实是对于出错信息的处理。表单，尤其是长表单，填写内容出错其实是很正常的事情，等到提交信息的时候再报错，用户会非常沮丧。而微交互结合实时验证，能够让用户在输入的过程中就发现错误并进行修改，一次通过，不用等待提交的时候再回头处理。
设计始终都关乎细节。即使是再微小的细节都值得我们关注，细节的装饰，微妙的配色，看起来微不足道的微交互，细小但是引人注意的动效，所有的这些东西构成了产品令人难以忘怀的体验，而这些都无法忽视。
“那些令人爱不释手的应用，和那些令人难以忍受的应用，差别可能就在于微交互上。”这句话也是Dan Saffer 说的。
【深入了解微交互】
原文地址：
原文作者：NICK BABICH
优设译文：
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量180万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
设计师的辩论赛！到底要不要用黄金分割？
设计师们，到底要不要用黄金分割？今天这场辩论赛正反方的观点都很有道理，看完在评论留下你支持的那一方喔。
正方：要用
观点1：黄金分割...
最近在做关于验证码项目的时候，从交互的角度梳理了各个平台验证码的应用场景，今天总结一下验证码在产品中出现的场景和交互流程。 欢迎关注点融设计中心DDC微信公...UX Coffee 设计咖 是一档为产品设计师和关注用户体验的同学准备的播客节目。三位主播都在硅谷生活和工作，每期节目我们会邀请业界大咖聊聊和用户体验设计相...@琛桑要做芝麻艺人 ：作为入行不久的交互设计师，我发现自己在交互设计的实践中无法顾及到方方面面，是存在思维盲区的。其中有欠缺经验的原因，也有自身知识局限的问...招聘季，无论新人还是交互老鸟，都将在「互联网公司鄙视链」上挣扎翻滚。面试官常会要求：介绍一下你的作品…..如何展示交互作品这件事，这篇文章系统总...@四四四毛 ：最近两个月给公司的伙伴们做交互设计的分享，这是第一期分享的内容。在这次分享中，我认真梳理了交互设计师掌握和精通这门技艺的方法。我认为，如果想成...Z Yuhan（英国约克大学人机交互硕士）：交互思维是什么？网上的搜索结果大多是一些交互设计的方法。但是我这里要讲的，是真正做交互设计所具备的思维方式。交互...盟主萌长苏：在移动互联网时代发展的今天，场景思维对于用户体验设计的影响不言而喻。大道理在此不多说，大家都懂。在这里，盟主和大家分享一个近期手上的设计task...本文全系列满满干货，是从众多交互设计前辈们分享的宝贵经验里挑选出的最实用的方法，不仅能让你彻底了解交互设计，还能帮有志在这个领域发展，却苦于没有老师的童鞋，...@窒息红Leon ：经常有学生问起交互该怎么体现自己的作品与能力，所以今天就来说说新人交互设计师的作品集制作。 声明：本文用到的所有素材均经过授权，仅作学习...
我们的团队
大家在关注
一扫"掌"握！
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页注册 | 登录
喜欢素净与朴实，现居杭州
产品经理就业班，12周特训，测、练、实战，22位导师全程带班，200+名企内推，保障就业！
动画的使用在交互设计中发挥着越来越重要的作用，尤其是在移动应用中，本文详细分析了动画在微交互中发挥的各种作用
众所周知，我们总是依据封面来判断书的好坏，聪明的设计师会创造实用有吸引力的界面。潜在用户可能会被吸引，但如何一直黏住他们呢？
要试着回答这个问题，所有一切都指向人本设计，其中用户是最主要的考量。以人为本：你的应用应该使用日常用语，包括情绪、口语，外观还要有一丝“诱惑力”。界面应当成为你的好朋友，时刻准备给出建议提升你的体验，让你会心一笑。
现在揭幕：是微交互在起作用。精确的说，这主要是界面附带的交互动画，使它更具表现力。优秀的动画能够：
表达状态并提供反馈
提升直接的操纵感
将操作结果可视化
在用户体验中，关键是你如何对待用户，还有他们使用产品时的感受。极小的细节都值得加倍留心。微交互提供了用户所需的反馈，表达了当前运行状况。无论背后逻辑有多么复杂，都能使界面更亲切。
1. 显示系统状态
Jakob Nielsen在可用性原则启示第一条中描述：让用户始终知晓当前在发生什么。用户希望立马得到回应，但总有些情况下，网站需要一点时间等待操作完成。
那么，界面就应当在背景处显示图形，反映完成百分比。或是播放声音，让用户了解当前发生的事情。这个原则也关系到文件传输：不要让用户觉得无聊，给他们看进度条。即使是不太令人愉快的通知，比如传输失败，也应该以令人喜爱的方式展现。让你的用户微笑！
2. 突出显示变化
通常为了节省空间，应用会在需要时把某个按钮替换掉。有时我们需要展现通知，确保用户注意到了。动画可以吸引他们注意，不至于忽略你认为重要的信息。
3. 保持前后关联
在这个智能手机和小屏幕智能手表的时代，难以在屏幕上展现大量信息。有一种处理方式，是在不同页面之间保持清晰的导航。让用户理解什么东西来自何处，便能轻易回溯。有多种方式可以实现：
4. 非标准布局
继续之前的例子，微交互应当帮助用户理解如何操作非标准的布局，去除不必要的疑惑。照片前后滑动、滚动式图表和旋转角色都是很棒的选择：
5. 行动号召
除了帮助用户有效地操作应用，微交互也有鼓励用户操作的能力：持续浏览、点赞或分享内容，只因为这很有吸引力，用户不舍离去：
6. 输入的视觉化
所有应用中，数据录入都是最重要的元素之一。数据录入决定了用户所得结果的质量。通常，这部分很无趣，但微交互可以使它与众不同：
7. 使教程生动形象
当然，在应用发布后，动画可以教育用户。它突出一些基本功能和控件，排除用户在未来的使用中的障碍。
所以，如果你重视用户体验，就应该从头到尾精细打磨界面，通过微交互与动画为它增色添彩。它会为你的项目赋予生命。
注意每个细节，是使人机交互易用的成功要诀。
作者信息：
DMYTRO SVARYTSEVYCH
is a Design Office Director at , and a regular contributor to the . Dmytro has been in the industry for more than 13 years, specializing in User Interface design, Interaction design, Mobile design, Information Architecture and User Experience. At SoftServe, he is responsible for all User Experience touch points, defining and integrating a company-wide User Experience Strategy to facilitate consistent and flexible expertise growth, as well as applying UX best practices and methodologies to various SoftServe projects.
by Dmytro Svarytsevych
#专栏作家#
可乐橙，微信公众号：可乐橙（colachangreen）。人人都是产品经理专栏作家，UI/UX设计师，关注互联网，关注科技。现居杭州，与小伙伴们正在创业途中。或许不是一名优秀的设计师，至少是个快乐的设计师。
本文系作者授权发布，未经许可，不得转载。
赞赏是对原创者的最大认可
收藏已收藏 | 83赞已赞 | 153
喜欢素净与朴实，现居杭州
产品经理群
运营交流群
数据分析群
文案交流群
Axure交流群
关注微信公众号
大家都在问
38个回答40人关注
5个回答5人关注
10个回答21人关注
18个回答21人关注
19个回答23人关注
26个回答46人关注微交互：好产品的秘密
在上个月读到的比较好的文章，分享给大家。最近分享可能会比较少，因为要忙毕业了，有好工作推介的吗哈哈哈。
欢迎大家到我的个人主页瞧瞧：好的产品都有俩共性，一就是好的功能特性，二就是注重细节。功能特性能够将目标用户吸引过来，细节则是留住用户的法宝，而经过本司机多年的观察，实际上在功能特性同质化严重的今天，能够帮助我们在激烈的竞争中胜出的往往是大家常常视而不见的小细节。交互设计，甚至可以说是所有设计类型的工作，其实都走在以人为中心进行设计的道路上。用户，也就是人，应该获得我们最最首要的关注。微交互经常被设计师们看成是次要，或者是锦上添花性质的东西，然而对于用户来说，微交互或许有着更加深层次的意味。作为一名设计师，能否看到得到这些难以察觉的微交互小细节更你会不会做好的微交互一样重要。设计师们应该要能够做出这些非常以人为本，而又真正能够帮助用户达成目标的设计。那什么是微交互呢？微交互是包含于产品内，在某个特定的瞬间完成某个小任务的动作。微交互在Dan Saffer的著作Microinteration中被首次提出。下面说几个经常能够施展你的微交互设计才华的点：向用户传递一个动作的反馈和结果。帮助完成一个独立的小任务。增强操作感让用户的操作得到视觉化以防止误操作。这里给大家带上两个可能已经说烂了，但却足够教科书式的例子：当你把iPhone调到静音，手机会震动同时屏幕上也会出来这个小icon以提示手机已进入静音模式。当你还没点赞的时候，将鼠标停在小红心的上面，它的颜色会改变，以暗示自己是可点击的。微交互为什么有效回答这个问题之前，先跟大家又来复习一下心理学，人们在面对自己不了解不熟悉的东西的时候会感到没有安全感。而微交互之所以会有效，是因为它设计出来的根本是为了满足了人类对事物总是想要了解知道得更多的原始欲望，用户希望在操作之后的瞬间能够得到视觉上令人愉悦的反馈，以表示用户的操作的结果。微交互还能在一定程度上指导用户正确地使用产品。发现能够应用微交互的点从设计的角度来讲，微交互有（keng）趣（die）的点在于看起来好像哪里都能加上，每个位置都需要微交互一下。那么下面就具体来说说几个业界常见的使用手法：显示当前状态写尼尔森十大可用性原则的那个尼尔森说过：要一直让用户明确知道当前是什么状态，当前在什么位置，用户也非常期望操作能够得到迅捷的反应。但是有些情况下用户就是需要等待一下，例如进度条加载什么的。这时候我们就考虑做一些微交互，让这些本来那么无趣的东西变得至少不至于让人抓狂。或者是告诉用户已经完成到哪里了:总结：别让用户感到郁闷，要尽量用好的办法来告诉用户当前的进度。引导注意点的转移当一些消息来了的时候，比如一则推送什么的，我们首要做到的是让人家能够看得到。这里比较适合使用小动画，运动的事物总是能够很好地获得用户的注意力。许多情况下使用动画元素都是为了能够吸引用户的注意力，然而在微交互的范畴里面，我们需要特别留意 KISS 原则 的应用，微交互内使用的动画应该是足够轻巧和简单的。情景切换用一些丝滑柔顺的动效来做转场，为用户阐明面前这屏界面的元素的排列。这一点对于一些小尺寸设备尤为重要，因为我们无法在同一屏内展示太多的信息，所以我们需要一个有意义的转场来说明一些东西，比如：这个界面是怎么来的，这个页面又是怎么退出的，等等。确保用户知道是怎么来到这个界面的，这样也是为了让用户时刻知道自己的所在。转场的动效应该是明确清晰而且容易理解的。输入视觉化数据的输入是无趣的，但是不能否认这或许是一些产品最最重要的功能之一。应用上微交互，能让整个输入的过程变得更加清晰易懂一些，或更特别一些。微交互本身的作用就是让信息传递这个过程更加高效，那么也就能让用户以更加高效的方式完成任务。激励用户微交互也能够用于对用户进行诱导和激励，它能让用户与产品之间产生更多的共鸣。但是要确保这个方面的微交互都是适合的，不要搞了一些词不达意，根本不是这么回事的东西出来。还有另外一点非常重要，或许这也应该是所有微交互设计上都应该考虑的一个原则：当用户在使用了一百次之后，会否对这个微交互元素感到厌烦？这非常值得考虑。在这一点上的使用需要多考虑用户但是的情感状态，需要整个产品的环境和用户调研得来的数据来作为设计的根据。你需要记住的事微交互之于交互设计扮演的是一个辅助工具的角色，常用在和反馈、通知或者发出指令这几个点上。微交互本身不应该是你炫技的地方，它的本意是为了更高效地传递信息，应该用最简单的方法来获取用户的注意力，微交互不需要复杂冗长的动效。使用微交互的时候，是特别需要将整个软件的结构和对用户的了解纳入考虑的，这样才能够得到我们所说的提高效率的微交互。微交互要经得起时间的考验，我们不要那些第一回看起来很有趣，但是见多了之后却很烦人的微交互。微交互不能破坏整个界面视觉上的平衡，加入使用上了动效的话，请确保动效的流畅性。结论微交互设计要以对用户的关怀为出发点，站在用户的角度想想用户是怎么与产品进行交互的。对所有细节都有足够的关注，是你做出更好的人机交互方式的最好的办法。好用又好看，是成功的产品的秘诀。最近medium不翻墙的话浏览好像有一些不正常，不知道大家有没这样的问题。以上文字以及图片均来自Nick Babich的博文Microinteractions: The Secret of Great App Design原文地址转载前请询得译者同意
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
233人已收藏
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的首页推荐大作
微交互：好产品的秘密
在她入驻到UI中国的日子里
总共吸引了20839位设计师的驻足流连
总共收获了232位设计师的由衷赞赏
总共获得了233位设计师的悉心珍藏
总共引起了14位设计师的深入讨论
依然要删除吗？}