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

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

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

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

什么是微交互?

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

相关推荐

  • 快来感受一下美帝的体验创新之旅

    追逐着2014年最后一天的时光尾巴,MUX五位同学加入了IXDC美国体验创新之旅,从北京跨国太平洋来到旧金山(San Francisco),深入参访硅谷多家互联网创新企业,交流和感悟体验创新。 8 ▲先来张大合照,三十多人,我…

    2015-01-20
  • 扛住100亿次请求 如何做一个“有把握”的春晚红包系统?(腾讯官方内部技术PPT下载)

    羊年春晚摇一摇活动已经落下帷幕,现在回过头来看看这一全民参与的有趣的活动背后,有着怎样的后台系统?这个系统又是如何被设计与实现出来的?   作者:张文瑞 iotazhang  腾讯 WXG 技术架构部,本文提供PPT…

    2015-11-10
  • APP中使用UI交互设计动效的三个好处

    1.让整个画面充满活力 在界面中加入了动态元素,可以很大的增加用户使用app趣味性,使整个app界面看起来不会那么枯燥,ui设计需要做的就是让 这些动态的元素效果有一种和用户在交流的情感。 来源 来源 来源 2.提高…

    2015-11-11
  • 【上海实习】上海最TOP实习

    TG实习狗每日发布北上广深最新鲜的实习信息,陪伴你从大学到职场TG旗下媒体:TG实习狗、TG校招狗、TG内推狗▲ 点击图片马上了解 ▲招收15-20名高潜质学员进行为期1-2年系统定制化培养助力高潜质人才进入顶尖名企今日求职贴士发表于1秒前老狗查看:66666回复:233你真的适合咨询行业吗?在我看来任何选择咨询的人都会不可避免的询问自己以下几个问题1.Do I Love Solving Problems?2.Do I Think in...

    2018-04-09
  • 产品插画设计中,都有哪些比喻技巧?

    Shopify是一家位于加拿大渥太华的电商软件开发公司,专门为中小零售商提供建立网店的Saas服务,能对接主流ERP系统,为客户提供打单、发货、运单号自动回传、订单业绩汇总、利润计算、仓储、采购及供货管理等一体化管理流程,按月收取咨询服务费用。
    本文作者对产品插画中“如何利用比喻来找准信息传达的关键,提供有价值的无形体验”有自己独特的见解,在视觉设计角度对大家应该有一些启示。

    2017-05-14
  • 交互总结篇(一):框架与布局

    上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见《三个维度,解析产品的交互设计》。而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法。

    2017-04-28
  • APP细节打磨绝招 “微交互动画”

    著名魔术师 Dariel Fitzkee 曾经说过:“魔术是表演和细节的艺术。”而交互设计同样是如此。设计师大多能够很好的控制设计的大方向,但是细节处理不当的话,会让优秀的设计方案功亏一篑,要不怎么说“细节当中藏有魔鬼”呢?也正是因此,那些精心设计的微交互会让用户体验显得精巧而到位。

    2016-09-08
  • 苹果设计主管乔纳森:从乔布斯身上学会专注

    发布者: GUImobile 新浪科技讯 北京时间10月11日早间消息,在近期于旧金山举行的“名利场新成就峰会”上,苹果设计高级副总裁乔纳桑·艾维(Jonathan Ive)表示,乔布斯是他一生中遇到过的最专注的人。 艾维表示:“这种…

    2014-10-15
  • 两个交互设计鸿沟:评估与执行

    通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑,确保它们都已打开,并且翻查了耳机评论以确认耳机与我的电脑兼容,甚至通过将耳机同...

    2018-03-13
  • Axure RP软件

    长按链接复制链接到浏览器打开Axure RP 7.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1mkqu1Ws密码:467u长按链接复制链接到浏览器打开Axure RP 8.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1c3h7c1i密码:esqr给大狮兄一个赞赏大狮兄想生存下去,我还想以后给你更多好用的软件赞赏的狮粉记得备注名字,大狮兄想记得你的名字大狮兄资源吧专...

    2018-03-04