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

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

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

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

什么是微交互?

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

相关推荐

  • 干货推荐|关于无线C端产品的一些UX建议

    开始之前,先来看一下Eric WK.See-To的一项最新研究成果(Eric WK.See-To等人针对如何提升移动端视频的UX满意度做了以下研究)。

    2017-05-29
  • 微信红包后台系统可用性设计实践

    作者:方乐明(现任微信支付应用产品系统负责人,主要从事微信红包、微信转账、微信群收款等支付应用产品的系统设计、可用性提升、高性能解决方案设计等,曾负责 2015、2016 和 2017 年春节微信红包系统的性能优化…

    交互专题 2023-03-03
  • 用户的体验属性

    人的记忆、欢乐、痛苦、友情、亲情和叛逆等,是每个人所共有的。这些不同的属性,反映着人们各种不同的体验属性。当下,我们每天都在说“用户体验”、“以人为中心”,但我们仔细想想便不难发现,几乎所有的产品及服务,都是在围绕着用户便利性这一单一属性的,人有那么多的体验属性,而我们却几乎没有去挖掘,何谈是以用户体验为中心呢?服务创新的一个思路,不是在纵向上,提高便利性或使用性等单一维度的体验属性而是如何在横向上,调动和反应出人的其他不同维度的体验属...

    2018-04-26
  • 5分钟交互设计指南系列:对话框

    框 (dialogs) 是叠加在应用主视图上的弹出 (pop-up) 视图,一般会要求用户作出反应。对话框可以分为模态对话框 (modal dialogs) 和非模态对话框 (modeless dialogs)。

    2017-10-31
  • 信息的收集、甄别和呈现

    史蒂芬说:用户调研帮助我们去理解其他人需求,从而我们可以用充分的,有灵感的设计解决方案来对他们的需求做出更快捷的反馈。用研同时也帮助我们避开自己的偏见,因为我们必须频繁的为跟我们生活截然不同的人们设…

    2014-11-11
  • 交互设计创新之改变用户行为的设计

    这是百度MUX在IXDC2016北京前瞻活动『移动产品的交互设计创新』中的一次分享。 这个课程属于团队内部一个培训课程的一部分,是关于HCI用户认知结合交互设计项目管理的内容方向。该文章阐述了讲说Keynote的核心内容…

    2016-05-08
  • 未来设计师应该是数据艺术家

    未来设计师应该是数据艺术家 人类正进入数字化时代,虚拟世界里充斥着海量的数据,各种各样的数据。在此背景下,Mark Rolston认为,软件产业将需要新型的设计师:数据设计师,一种精通数据的意义、形式、移动与转换…

    2014-12-01
  • 为产品赋予人格 - 情感化设计的组成要素及实践案例

    Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许,只有当这些细节从产品中消失的时候,我们才会发现并开始怀…

    2015-11-01
  • 做交互方案时,请注意检查这4个点

    作为一名交互设计师,到底什么程度才能算得上是“专业”?成为一名专业的设计师是否有方法与捷径呢?答案是肯定的,但是今天我分享的内容还不敢称之为体系,只能说是几个小小的经验吧,希望能给正在奔向专业路上的你有所启发。

    2017-05-11
  • 【招募】图书管理员、UI交互设计、手机软件开发,快来报名!!

    ↗点击上方“海淀教堂”关注我们📖海淀教堂为丰富教牧同工的阅读生活,正在建立图书馆,欢迎有图书馆管理或工作经验并有感动的弟兄姊妹积极参与此项事工。报名地点:三楼侍奉室边瑞霞同工 18514656724💻因事工需要,海淀堂网络组现招募UI交互设计,手机软件开发等技术义工,欢迎有相关恩赐的弟兄姊妹咨询报名。报名地点:三楼侍奉室李维萧同工 17600071627欢迎有感动的弟兄姊妹们参与进来!等待您的加入呢!耶稣爱你!名关注这里Address:...

    2018-04-15