关于微交互动效的“六脉神剑”

好的产品必备的两点要素:功能和细节设计。功能吸引用户使用你的产品,细节设计塑造产品的差异化,将你的用户留下。功能满足需求,细节打动人心。

关于微交互动效的“六脉神剑”

好的产品必备的两点要素:功能和细节设计。功能吸引用户使用你的产品,细节设计塑造产品的差异化,将你的用户留下。功能满足需求,细节打动人心。

什么是微交互?

微交互是产品中存在的某一个时刻,它完成了某一个小的任务。Dan Saffer在他的书中(Microinteractions)第一次描述了微交互的概念,这些小细节专注于服务这些必要的功能:交流回馈或者动作的结果反馈(完成了某个单独的任务、增加直接操作感、帮助用户在视觉上展示操作成果以及避免错误)

微交互一些常见的例子:手机的静音提示;iphone滑动解锁的高光动效;loading中的过程显示;新消息的小红点等等。

在微交互动效的设计中,只要你掌握了下面的”六脉神剑“,那你就蜕变成一个高手了。六脉神剑包括6式:联系、模拟现实、场景化营造、秩序、质感、克制。

1、联系。

用相同的元素加强连贯操作之间的连贯性,加强操作体验的流畅度,减少用户的流失。可以是前后两个页面的联系,也可以是同一个页面中有操作逻辑关系的两个元素。

用相同的图片元素给前后两个页面建立联系,增强前后页面的连续性;

关于微交互动效的“六脉神剑”

用相同的颜色把同一页面上有直接操作逻辑关系的两个元素建立联系,提现前后操作的因果关系,让用户的操作得到反馈;

关于微交互动效的“六脉神剑”

2、模拟现实。

把现实生活中的场景进行抽象提炼,通过模拟现实中的操作逻辑和体验,唤起用户对现实场景的联想,加强用户认知。

例如Material Design的点击效果,模拟了水面的涟漪效果,让用户明确的感知到自己的操作完成。

关于微交互动效的“六脉神剑”

滑动页面的时候,icon 容器中的液体随着页面的滑动有变化,巧妙的把现实中的场景融入,这样的动效足矣博得用户微微一笑。

关于微交互动效的“六脉神剑”

3、场景化营造。

从操作动作的逻辑出发,营造和目前的动作相符合的场景,从感性的层面触动用户,增强用户的好感。(iphone的抖动删除)

例如Iphone的删除app图标效果,长按后的图标吓得都在抖动,仿佛都在说“求求你,放过我吧”

关于微交互动效的“六脉神剑”

例如这个喜欢的按钮,增加了一种烟花效果,你是不是更喜欢了?

关于微交互动效的“六脉神剑”

4、秩序。

通过时间的先后和空间的变换,按照特定的规律,呈现出统一的秩序感。良好的秩序感可以很好的引导用户的视觉和操作,没有人会喜欢乱糟糟的东西。

用同一个规律安排文本的出现,让原本信息繁多的页面不再混乱。

关于微交互动效的“六脉神剑”

5、质感。

不同质感的物体给用户的感受是不一样的,在现实中我们可以通过望闻问切来感受物体的质感,但是在屏幕上只能通过看了。时间和空间是塑造质感的两个关键因素。比如在物体下落的运动轨迹中,时间长,动作慢,质感轻;时间短,动作快,质感重。

通过稍长的出现时间,巧妙的呈现了卡片的质感。

关于微交互动效的“六脉神剑”

6、克制。

这也是最重要的一点,动效的呈现必须要对交互逻辑负责任,不能从视觉的角度出发为了动效而动效。能够克制,并且很好的做减法也是一个设计师专业能力的体现。

上面的案例由线突然转换成面再到文本框的变化有点突兀,不如下面的案例直接由线转变成文本框更简单直接。

关于微交互动效的“六脉神剑”

关于微交互动效的“六脉神剑”

以上的“六脉神剑”只要吃透一招,都会对你研究微交互动效有很大作用。

 

作者:有用先生(微信号:agoodesign),杂交设计师,产品狂热分子,酷爱交互/界面/空间/品牌

本文由 @有用先生 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-22 18:35
下一篇 2017-05-22 20:32

相关推荐

  • 2018年交互设计和用户体验设计趋势合集

    来源:沪江用户体验中心&Nick Babich,翻译丨优设陈子木设计和体验从未像现在这么重要。在过去的10年当中,设计不断适应着用户的新需求,发生了翻天覆地的变化。虽然我们不大可能预测太远的未来,但是我们仍然可以对明年的设计趋势有一个基本的猜测。今天的文章,我们将会探讨2018年影响用户体验设计领域走向的10个关键性的设计趋势,这些趋势甚至可能会持续几年。1、专注内容的体验设计近年来,设计师越来越倾向于采用极简和扁平化的设计,这种设计策...

    2018-02-06
  • 设计实战:教育产品组件化交互设计的实践与思考

    网易UEDC – 王媛媛 :组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。

    2017-10-16
  • 依靠强大品牌影响力,注重“用户体验”,“3000家企业定制酒计划”对白金酒意味着什么?

    在茅台集团白金酒公司的目标规划里,今年要选择1000家企业进行定制酒合作,未来3~5年要与3000家企业合作,打造“企业定制酒”这一细分市场的“当家品牌”。11月5日上午,华拓金服集团、神州长城股份有限公司、 永新华控股集团等数十家家国内知名企业与茅台集团白金酒公司签署战略合作协议,现场签约总额达近亿元,“定制酒计划”再迈出一步。直接面向企业需求这一细分市场,为企业打造专属的定制产品,满足其商务接待、宴请、礼赠等需求,白金酒公司确立了清...

    2018-02-01
  • APP游戏分发模块一级交互设计

    看看阿西如何做原型设计,阿西手把手教大家设计原型。

    交互设计 2014-09-11
  • 走心!优秀的移动端UI应当如何用微交互打磨细节?

    UI设计的细节很重要,它不仅仅体现在静态的元素上,动效和微交互也是如今UI和UX设计中最重要的细节。想要打造优秀的移动端UI设计,微交互和动效设计是绕不开的问题,今天的文章我们来聊聊这个。

    2017-05-19
  • 秒懂MIUI 6是如何一步步扁平化的

    MIUI被很多人看作是小米的最大优势,历经4年时间更新演变,从MIUI的变化我们可以看到主流图标的设计趋势正在从质感到扁平,从灰暗到明亮,观一点而知天下,让我们一起来体会下这些年,我们身边图标的变化。 四年,M…

    2014-10-21
  • 3种空状态出现场景,5种消灭空状态的技能教你玩转空状态

    举个例子:假设有一款图片分享类的应用,然后有个页面是“我的图片”,如果在我从来没有发布过图片的时候,这个页面理所应当就是空的。并且在这个时候,第一种方法显然是不可行的。当然,空荡荡的界面有不好,所以此时可以通过操作指引来引导用户产生内容。

    2017-05-28
  • 双十一之购物车体验

    今年的双十一,你剁手了吗?不管你剁不剁,反正我是剁了。剁手的同时,不妨来看看,电商购物车的哪些设计让你剁了还想剁。本文主要讲四个电商网站的购物车,分别是淘宝、京东、唯品会和聚美优品。

    2017-06-01
  • 前辈经验!聊聊新人设计师最容易遇到的12个问题

    身为设计师,我越来越意识到只有整个设计师圈子的能力和氛围都起来了,我们每一个小分子才可以好起来,大家学习的积极性也比我大学时期(07年-11年)好太多,那时的我都完全没有要逛设计论坛学习的意识,所以当我看到谁年纪轻轻就已经那么牛逼了,我就很后悔,当年我为什么就没有逛论坛自我学习的意识呢,要不然我早就走向人生巅峰了,当年自己怎么那么井底之蛙,资源有限,信息闭塞,也没有人叮嘱我要怎么去做,也没人给我指出问题所在。现在有这么多好的学习平台和机会,而我也确实看到了很多设计师存在的问题,所以我总结下来,希望对大家有所帮助,不要像我当年那样活在自己的世界里,落后别人一大截。

    2017-05-26
  • 独家 | 马化腾:用户体验,比一切事情都大

    内容来源:2017年4月26日下午,“清华-青腾未来科技学堂”发布会在深圳举办,马化腾出席了发布会,并以创业者的身份与在场的青腾学员进行交流,分享腾讯的创业经验。笔记侠经主办方授权发布。责编| Even第1715篇深度好文:2825字 | 3 分钟阅读独家·精华笔记·商业思维本文新鲜度:★★★★+口感:绿茶笔记君邀您,先思考:1、战略选择的第一步是什么?2、怎么通过用户体验打动用户?3、如何从互联网跨界中找到大的商机或蓝海?我非常希望也...

    2018-02-01