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

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

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

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

什么是微交互?

微交互是产品中存在的某一个时刻,它完成了某一个小的任务。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

相关推荐

  • 实例解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,姑本文将分为上下两篇来发~一、费茨定律(Fitts’ Law)费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(...

    2018-03-16
  • 六个步骤,细说电商banner图设计之色彩的奥秘

    我们常常会说到做设计需要知道三大构成(色彩构成/平面构成/立体构成),设计又可以分很多个类别,比如网页设计/UI设计/电商设计/室内设计/工业设计等等,那对于电商设计有没有专门的三大构成呢?至今好像没有看到,所以我想尝试着梳理一下我脑袋里的知识点,专门讲解一下三大构成在电商设计中的运用,而今天我先从色彩在电商设计中的运用开始说起。

    2017-05-21
  • 细节体验|你离用户只差一个好的交互

    上一篇我们简单的提到过“在合适的时机出现”这个交互细节打磨点,今天我们继续沿着这个点,剖析一些常见的交互细节点及案例。

    2017-05-18
  • APPLE WATCH案例学习!

    编者按:这篇实战的对象是Wallaby,一款个人财务APP,文章总结了四点经验:导航、通知、复杂任务以及动效。每个方面都有需要注意的问题和对应的解决方法,进入译文 >>> Wallaby是一款个人财务app,可以在…

    2015-05-21
  • 设计切实可靠的UI,为你的用户做决策

    真实可靠的UI是产品可信。“大量的选择并不能让人们选择所有东西,并且人们在选择的时候会不开心。”“每一个额外的选择都会导致做决定所需的时间变长。”“我必须要简化我的生活,因为除了思考如何更好的服务社会之外,我必须尽可能少的做决策。—— 马克·扎克伯格”“这就好比你最好的朋友每周都会为你准备一个个性化的音乐合集一样”“Facebook希望为点击很多链接的人提供更多的链接,为观看很多视频的人提供更多的视频,以此类推”“Facebook并没有显示所有的帖子。展示给你的都是被选择过的信息。可有趣的是,Facebook的算法会倾向于加强你哪方面想要的呢?因为这个必须要在之前就定义好。”“假如说你来到伦敦,你定了一个Hailo的车,而你在上午七点到十点之间进入了一个特定的位置。如果你到下午五点了仍然在那里,那么就可能会出现你想要离开的假设,这个时候Google Now就会提醒你订车。”“亚马逊将疑问从‘我需要这个吗’转移到了‘我还需要什么来填满这个盒子’”

    2017-05-09
  • 微交互:如何塑造优质的产品细节?

    本文作者将与大家探讨微交互是如何塑造优质的产品细节的,一起来看看吧~“最好的产品通常会做好两件事情:功能和细节。功能能够吸引用户关注这个产品,而细节则能够让关注的用户留下来。”

    2017-05-01
  • 案例:交互设计七大定律分享

    一费茨定律(Fitts' Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. Fitts)博士,在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的,时间是1954年;该定律被用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(...

    2018-02-28
  • 【媒体观察】“爆款”G一代,好品质给用户体验“上保险”

    春夏交替的四川地级市资阳,天气多变。但降温和阴雨,还是没能阻挡住中国西南最活跃经济区域,吊装用户的热情与期待。2018年4月23日,将近400位用户,来到了“徐工G能大咖&新产品交接仪式”现场。到场用户的业务范围、规模、设备不尽相同。其中既有已经开始“公司化”运营者,也有依靠零散数台吊车积累第一桶金的“拼搏者”;既有跟随上一轮热潮涌入的新手,也有从业十几年甚至几十年的“老司机”。虽然对市场的理解,对未来的规划各有所取,但谈及徐工G一代产...

    2018-04-29
  • 从产品到交互·2015同济设计学考研经验

    【写在前面】 我叫徐晨,来自陕西西安,毕业于兰州理工大学工业设计专业。2015年我参加了研究生入学考试,也如愿考上了同济大学创意学院的研究生。想想当初独自备战,其实都是在黑暗中摸索,曾经也担心自己的复习方…

    2015-11-08
  • 移动UX设计:如何设计好一条推送通知

    你注意过么,每天从不同的 App 上收到的大量的推送通知与提醒,这些通知里有多少你真的有兴趣?

    2017-05-24