UI设计中的微交互.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,UI,设计中的微交互,2019/07/08,李毅,01,什么是微交互？,02,分解微交互,03,何时使用微交互会更好？,04,微交互设计应该考虑的事,什么是微交互？,01,如何定义微交互？,定义：微交互指的是成对的触发和反馈。其中触发可以是用户行为，也可以是系统状态的变更；反馈是针对触发的回应，通过用户界面微小的、高度相关的变化（通常为视觉变化）传达出来。,丹.萨弗,微交互是“包含围绕单一用例的产品时刻”。它们是直到他们不在时才能注意到的交互类型。,丹.萨弗：设计师兼微交互作家：设计与细节（Designing with Details）作者,生活中明显交互的例子：,当你将iPhone设置成静音时伴随出现的的震动提醒、屏幕上的静音ico,n,界面动画提示是否能够点击（当鼠标移到按钮上方时按钮的颜色改变）,动画提示是否能够点击（当鼠标移到按钮上方时按钮的颜色改变）,生活中明显交互的例子：,Facebook Messenger，拇指动态表情,1.呈现状态并给予反馈,2.增强用户的操控感,3.帮用户看到交互的结果,微交互为何如此重要？,题建议,它让网站更加易于导航,它们让用户更容易和网站进行互动,它们为用户提供了交互之后的即时反馈,它们给用户以信息的提示,它们告知用户以元素相关的信息，比如控件是否是可交互的,它们使得用户体验更加有价值,它们鼓励用户分享、点赞和评论内容,它们让网站更加感性，更加人性化,微交互让用户更容易理解功能，它是在情感层面上的设计。,微交互带来来什么？,精心设计的微交互，是体谅用户照顾用户的标志。这就是为什么微交互如此受重视，通过即时的反馈，用户会明白他们该做什么，以及他们做的对不对。,设计恰当的微交互，让用户对于,产品和品牌,有,积极,的影响，甚至会作用到,用户,的行为上。根据“霍洛效应”，如果用户喜欢产品的某个方面，可能会放大以至于对整个产品都有积极的态度，反之亦然。如果能够善用这一原理，在进行产品设计的时候能够事半功倍，通过适当的细节设计的控制，让用户更加满意。,分解微交互,02,微交互的组成,触发：,微交互的触发可以是用户触发也可以是系统自动启动的。用户触发的微交互通常需要发起一个动作才能启动，而系统触发的微交互通常是APP检测到满足某些条件才会触发,。,规则,：,规则决定了触发之后会发生什么事情。,反馈,：,反馈让用户知道发生了什么。任何用户在微交互发生的时候看到的，听到的，感受到的都是反馈。,循环和模式,：,循环和模式决定了什么状况下微交互会再次出现，条件变化的时候，微交互会怎么随之变化。,规则,用户在使用产品的时候会带着心里预期，你可以违背（最好的交互都是通过颠覆用户根深蒂固的心理预期），但是微交互要做的足够好,微交互如何响应触发器的激活,微交互过程中用户可以做什么,微交互的顺序以及时间,什么时候提供什么反馈,微交互是否需要重复，重复几次以及重复周期,微交互结束的时候是怎么样的,规则的展现形式是通过反馈告诉用户什么是可以做的，什么是不可以做的。,规则的设计可以根据用户所在的处境提前帮助用户判断，减少用户在操作过程的选项，选项少了，规则也就少了。比如用户在填写信息时，在已经输入身份证号之后，自动帮用户填好出生年月日，在数据正确的情况下。用户跳过了这个属性的选项，也跳过了这个属性的规则。,何时使用微交互更好？,案例探讨,03,滑动交互,滑动交互是比起点击更加直觉更加顺畅的一种交互，它有助于用户快速切换标签、界面并且获得更多的信息。作为最为常见的交互，它会在潜意识中引导用户，而用户通常不需要去思考就会下意识执行。这种交互非常有趣，爽快，且令人上瘾。动画提示是否能够点击（当鼠标移到按钮上方时按钮的颜色改变）,数据输入,我们都很清楚创建新帐号和修改密码这类需要大量输入的交互是多麻烦，经常会让用户感到沮丧。诸如密码强度的测试和输入建议会让用户更好的推进这个过程，这个过程中，尽量借助细节和建议来提升整个输入过程的体验和成功率，会让用户主观感受更舒服。,动画提示是否能够点击（当鼠标移到按钮上方时按钮的颜色改变）,动画效果,动画常常作为微交互的一部分而存在，它让微交互可行，并且给予提升。动画让设计更加人格化，许多微妙的动效在实际操作中并不会被直接注意到，但是如果缺少它，会让人明显感受到缺失感。动效常常作为环节之间的粘合剂，让交互和流程更加完整顺滑。值得注意的是，动画的目的是吸引用户，但是不能让用户分心，或者产生挫败感，过于新奇的风格或者动画耗时太多，都会产生不良的效果，或者让人混淆。,系统状态,当前的系统状态是用户始终应该了解且需要了解的事情。如果用户无法感知或者被通知到，他们常常会因此感到恼火，因此关闭网站或者APP。通过微交互让用户确切地了解当前的系统状态，多长时间能完成加载，或者是信息已经被完全提交，等等等等。哪怕是报错信息，如果足够幽默，同样能够维持用户对产品的信任。,让教程有趣,绝大多数人都在获取信息，获取解决某个问题的办法。而教程常常是用户获得答案的重要载体。在微交互的加持之下，教程常常能够得到简化，能够更加有趣，易于理解，更好地指导用户操作、解决问题。,行为召唤,实质上，微交互和行为召唤元素的结合，能够更好地推动用户与APP交互，行为召唤的原理是通过行为指引、成就感灌输和同理心，来吸引用户的注意力，促使用户执行特定的交互。,动态按钮,动态按钮常常可以作为一个综合性的信息传达的工具来使用，设计师需要关注它的颜色、形状、特效、布局和纹理，确保用户体验上的无缝。,如何设计微交互？,04,设计微交互时应该考虑的事,微交互设计要以对用户的关怀为出发点，站在用户的角度想想用户是怎么与产品进行交互的。对所有细节都有足够的关注，是你做出更好的人机交互方式的最好的办法。好用又好看，是成功的产品的秘诀。,微交互之于交互设计扮演的是一个辅助工具的角色，常用在和反馈、通知或者发出指令这几个点上,微交互本身不应该是你炫技的地方，它的本意是为了更高效地传递信息，应该用最简单的方法来获取用户的注意力，微交互不需要复杂冗长的动效。,使用微交互的时候，是特别需要将整个软件的结构和对用户的了解纳入考虑的，这样才能够得到我们所说的提高效率的微交互。,微交互要经得起时间的考验，我们不要那些第一回看起来很有趣，但是见多了之后却很烦人的微交互。,微交互不能破坏整个界面视觉上的平衡，加入使用上了动效的话，请确保动效的流畅性。,重庆紫光华山智安科技有限公司,