恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
微交互:好产品的秘密
0.0°
2016-04-14 自译外文 经验/观点 原作者: Nick Babich 举报 15797 239 234 14

在上个月读到的比较好的文章,分享给大家。最近分享可能会比较少,因为要忙毕业了,有好工作推介的吗哈哈哈。


欢迎大家到我的个人主页瞧瞧:zyxscientist.github.io


好的产品都有俩共性,一就是好的功能特性,二就是注重细节。功能特性能够将目标用户吸引过来,细节则是留住用户的法宝,而经过本司机多年的观察,实际上在


功能特性同质化严重的今天,能够帮助我们在激烈的竞争中胜出的往往是大家常常视而不见的小细节。


交互设计,甚至可以说是所有设计类型的工作,其实都走在以人为中心进行设计的道路上。用户,也就是人,应该获得我们最最首要的关注。微交互经常被设计师们看成是次要,或者是锦上添花性质的东西,然而对于用户来说,微交互或许有着更加深层次的意味。作为一名设计师,能否看到得到这些难以察觉的微交互小细节更你会不会做好的微交互一样重要。设计师们应该要能够做出这些非常以人为本,而又真正能够帮助用户达成目标的设计。


那什么是微交互呢?

微交互是包含于产品内,在某个特定的瞬间完成某个小任务的动作。

微交互在Dan Saffer的著作Microinteration中被首次提出。下面说几个经常能够施展你的微交互设计才华的点:

  • 向用户传递一个动作的反馈和结果。
  • 帮助完成一个独立的小任务。
  • 增强操作感
  • 让用户的操作得到视觉化以防止误操作。

这里给大家带上两个可能已经说烂了,但却足够教科书式的例子:

  • 当你把iPhone调到静音,手机会震动同时屏幕上也会出来这个小icon以提示手机已进入静音模式。

Image title


  • 当你还没点赞的时候,将鼠标停在小红心的上面,它的颜色会改变,以暗示自己是可点击的。

Image title



微交互为什么有效

回答这个问题之前,先跟大家又来复习一下心理学,人们在面对自己不了解不熟悉的东西的时候会感到没有安全感。而微交互之所以会有效,是因为它设计出来的根本是为了满足了人类对事物总是想要了解知道得更多的原始欲望,用户希望在操作之后的瞬间能够得到视觉上令人愉悦的反馈,以表示用户的操作的结果。微交互还能在一定程度上指导用户正确地使用产品。


发现能够应用微交互的点

从设计的角度来讲,微交互有(keng)趣(die)的点在于看起来好像哪里都能加上,每个位置都需要微交互一下。那么下面就具体来说说几个业界常见的使用手法:


显示当前状态

写尼尔森十大可用性原则的那个尼尔森说过:要一直让用户明确知道当前是什么状态,当前在什么位置,用户也非常期望操作能够得到迅捷的反应。但是有些情况下用户就是需要等待一下,例如进度条加载什么的。这时候我们就考虑做一些微交互,让这些本来那么无趣的东西变得至少不至于让人抓狂。

Image title



或者是告诉用户已经完成到哪里了:

Image title



总结:别让用户感到郁闷,要尽量用好的办法来告诉用户当前的进度。


引导注意点的转移

当一些消息来了的时候,比如一则推送什么的,我们首要做到的是让人家能够看得到。这里比较适合使用小动画,运动的事物总是能够很好地获得用户的注意力。

Image title



许多情况下使用动画元素都是为了能够吸引用户的注意力,然而在微交互的范畴里面,我们需要特别留意 KISS 原则 的应用,微交互内使用的动画应该是足够轻巧和简单的。


情景切换

用一些丝滑柔顺的动效来做转场,为用户阐明面前这屏界面的元素的排列。这一点对于一些小尺寸设备尤为重要,因为我们无法在同一屏内展示太多的信息,所以我们需要一个有意义的转场来说明一些东西,比如:这个界面是怎么来的,这个页面又是怎么退出的,等等。

Image title



确保用户知道是怎么来到这个界面的,这样也是为了让用户时刻知道自己的所在。转场的动效应该是明确清晰而且容易理解的。


输入视觉化

数据的输入是无趣的,但是不能否认这或许是一些产品最最重要的功能之一。应用上微交互,能让整个输入的过程变得更加清晰易懂一些,或更特别一些。

Image title



微交互本身的作用就是让信息传递这个过程更加高效,那么也就能让用户以更加高效的方式完成任务。


激励用户

微交互也能够用于对用户进行诱导和激励,它能让用户与产品之间产生更多的共鸣。但是要确保这个方面的微交互都是适合的,不要搞了一些词不达意,根本不是这么回事的东西出来。还有另外一点非常重要,或许这也应该是所有微交互设计上都应该考虑的一个原则:当用户在使用了一百次之后,会否对这个微交互元素感到厌烦?这非常值得考虑。

Image title



在这一点上的使用需要多考虑用户但是的情感状态,需要整个产品的环境和用户调研得来的数据来作为设计的根据。


你需要记住的事

  • 微交互之于交互设计扮演的是一个辅助工具的角色,常用在和反馈、通知或者发出指令这几个点上。
  • 微交互本身不应该是你炫技的地方,它的本意是为了更高效地传递信息,应该用最简单的方法来获取用户的注意力,微交互不需要复杂冗长的动效。
  • 使用微交互的时候,是特别需要将整个软件的结构和对用户的了解纳入考虑的,这样才能够得到我们所说的提高效率的微交互。
  • 微交互要经得起时间的考验,我们不要那些第一回看起来很有趣,但是见多了之后却很烦人的微交互。
  • 微交互不能破坏整个界面视觉上的平衡,加入使用上了动效的话,请确保动效的流畅性。

结论

微交互设计要以对用户的关怀为出发点,站在用户的角度想想用户是怎么与产品进行交互的。对所有细节都有足够的关注,是你做出更好的人机交互方式的最好的办法。好用又好看,是成功的产品的秘诀。




最近medium不翻墙的话浏览好像有一些不正常,不知道大家有没这样的问题。


以上文字以及图片均来自Nick Babich的博文Microinteractions: The Secret of Great App Design

原文地址https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf#.2o1v89lu3

转载前请询得译者同意


更新:2016-04-14

收藏

239人已收藏

zhuyuxuan

✍️知乎专栏:DesignCoder

  • 24

    作品

  • 2046

    粉丝

  • 32

    关注

  • 你是不是对设备的屏幕一无所知
  • 不整虚的,12 条提高产品可用性的动效设计的原理
  • 「冷知识」Sketch还能这样操作?!
  • 「写给设计师」技术,要懂多少才算懂?

    猜你喜欢

      2016-04-14 自译外文 经验/观点 原作者: Nick Babich 举报 15797 239 234 14

      微交互:好产品的秘密

      0.0°

      你确定要举报微交互:好产品的秘密

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年04月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      234
      239
      14

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录