ITBear旗下自媒体矩阵:

微交互小白入门:玩手机QQ V7.0.0学UI设计

   时间:2017-05-08 10:39:47 来源:互联网编辑:星辉 发表评论无障碍通道

最近几年,“微交互”这个词被频繁提及,它在UI设计圈的火热程度完全不逊于我们的达康书记。因为好的交互设计能够让用户在使用过程、视觉感官上都有愉悦的体验。

比如,我们常见的导航旋转动画效果。

还有常用的小红点提示更新。

以及这种引导你下一步操作。

再比如,为Loading时间增添乐趣。

但是“微交互”对于吃瓜观众来说除了“好玩”之外好像还是比较陌生,其实在我们生活中已经有很多深层次的应用,比如最近新推出的手机QQ V7.0.0中就高频次出现微交互的元素。这里就以手机QQ V7.0.0为例讲解一些微交互的基础知识。

 

提到微交互,就不得不提到Smart Design的交互设计主管 Dan Saffer,他写了一本《微交互》来探讨细节交互使得系统更加人性化。Dan Saffer第一次定义了“微交互”,并为其框定了四个关键点,记住这些就能领悟微交互的精髓:

1、 交流回馈或者动作的结果回馈

视觉反馈符合用户的本能预期,它的存在让用户明白,他们的操作被用户接受。所以,许多产品都在给用户的反馈上动心思。反馈的方式多种多样,而目前最常用的,是通过动效来赋予交互以愉悦感,或者是给予用户有用的信息。

比如手机QQ V7.0.0就是采用的这样的机制,当用户去拖拽菜单栏中的图标时,会发现拟人化的图标居然会跟着手指的拖动而运动,这就是手机QQ对于用户操作进行的有趣反馈。

2、 完成某个单独的任务

微交互本身就是一个单独的任务,区别与扁平化设计中只有一步跳转的直接,

微交互处理可以提升产品的细节美。在用户使用一些产品时就会涉及到微交互技术,像删除软件时的抖动效果、下载文件时的进度条,以及手机QQ V7.0.0中点击图标,就会有相应的动态效果逐渐填满该图标,完成一次单独的操作任务。

同时,微交互本身就在鼓励用户进行交互,它能够指引用户,教育用户,让用户明白如何使用,手机QQ V7.0.0中图片、语音等图标的动态就是指引用户进行相应操作的设定。所以微交互每时每刻都出现在我们的生活当中,辅助不同的动作行为。

3、 增强直接操作的感觉

当用户进行操作的时候,扁平化的设计虽然缩短了交互的时间,但同时也将直接操作的感觉压缩到了最弱。所以,微交互的动态能够让用户在最短的时间内感知到操作的过程,真实体验到操作完成的愉悦感,这是呈现完美体验的良好时机。比如在手机QQ V 7.0.0中,用户点击图标就会还原按压的触感,在逐渐显示选中之后激活相应的功能;新消息发送或者接受的时候,聊天气泡会从屏幕边缘滑动至聊天框内更符合逻辑;以及拖拽小红点就能像擦除污渍一样一键清除未读消息。

4、 帮助用户在视觉上展示操作的结果,以及避免错误

微交互最直观的感受就是动态效果的展示,作为辅助用户动作的设定,微交互最直接展示用户操作的结果。比如在手机QQ V7.7.0的菜单页面中,当你点击中间联系人按钮时,该按钮的拟人形象会向中间摆正,而左边消息按钮和右边动态按钮则会自动向其吸附。同理,无论点击哪一个图标,其他按钮均会向其方向靠拢,这在趣味性的同时,也很直接展示了选择的结果,避免错误选择的结果。

简而言之,微交互通过让产品更加人性化来提升用户体验,这也是手机QQ历次版本更新的核心。在用户使用产品时,过少的动态让趣味性大减,而过多的信息往往会使用户产生疲倦感,相较于简单的产品加以微交互设计就会给用户一种浓缩趣味的直观感受,这也是年轻人最乐于接受的互动形式。

举报 0 收藏 0 打赏 0评论 0
 
 
更多>同类资讯
全站最新
热门内容
网站首页  |  关于我们  |  联系方式  |  版权声明  |  网站留言  |  RSS订阅  |  违规举报  |  开放转载  |  滚动资讯  |  English Version