设计并不仅仅关乎视觉和感受,它要呈现的是事物运作的规律。

动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过,动效的目标并不是单纯的娱乐用户,而是帮助用户了解交互的效果和界面中发生的变化,让用户更为有效地使用你的APP。

作者:Nick Babich,翻译:陈子木。

动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过,动效的目标并不是单纯的娱乐用户,而是帮助用户了解交互的效果和界面中发生的变化,让用户更为有效地使用你的APP。Zurb 有一句话很好的解释了这一点:

“我们设计的不再仅仅只是静态的界面,实际上,我们所设计的是用户从界面获得内容的过程。”

动效广泛运用于网页内容和背景当中,用来强化功能,提升美感:它会直接影响用户的行为,引导用户注意到特定的内容,呈现状态,帮助用户找到他们想要的内容,达成目标。想要借助动效提升用户体验,可以参考下面的指引来进行优化:

加载过程不要让用户感到单调无聊

如果你无法缩短加载和等待的过程,那么你应当尽量让用户在等待过程中感到愉悦,这个时候的动效基本只是在提醒用户后台正在加载。而几乎所有的网站和APP都会碰到这样的情况,而好的设计通常都是通过微妙而有趣的动效,让用户的注意力转移到动效本身上,而不是被无聊的情绪所左右。下面的的案例中,设计师让界面从基本的框架结构开始加载,明显地缩短了等待的主观体验。

1477273659-2591-101d0006294a0a924b9a

不要让状态改变过于生硬

动效最重要的功能之一是强化过渡效果,所以,它需要让过程的起始和结束都要被明显的呈现出来。一个设计良好的过度动效应当合理地将用户的注意力引导到需要被关注的地方。

Adrian Zumbrunnen 有个非常不错的案例,它展现了用户点击了链接之后,滚动动效是如何让用户明白变化过程的。对比下面硬生生的转变和加了动态效果之后的版本:

1477273662-5112-f7800051e97fffe5275

1477273663-4157-102300062ceb6274ef06

正如你所见,这个动效让用户明白了界面的结构和转变的过程,有助于用户了解下一步应当如何与之进行交互。

阐明元素之间的关系

动效还能提升用户对界面的操控感。

正如同下面的案例所展示的,一个菜单按钮随着平滑的动效展开为一个播放控制界面,随后点击返回,又收缩为一个按钮。这个特效不仅仅让界面看起来神奇无比,而且告知了用户按钮的实际功能。有意思的是,这个动效还强调了播放和暂停两种状态的差别,两者可以互相变化,而不会共存。

1477273663-1270-101d000629473e9882aa

这个案例中,动效将用户的注意力引导到了屏幕的正中央,播放和暂停两种状态的改变是用户注意的焦点。

1477273661-2666-102300062cea32eeb25f

另外一个案例则是更为常见的浮动按钮,点击“+”按钮,按钮展开其中隐藏的其他功能按钮,而按钮中的“+”则变化为意为编辑的铅笔图标。这个图标变化的细节向用户暗示了接下来会发生什么,并且明确了按钮不同状态下的差异。

出错的时候给用户以反馈

当用户执行了某个操作之后,动效能够强化这个交互所产生的效果。报错,就是最常见的反馈机制之一。

下面的案例就相当典型,一个简单的左右晃动的特效给用户一种界面“正在摇头”的感觉,让他们明白所输入的内容并不正确。这种拟人化的动效让界面充满了真实的质感,信息的反馈也更直觉化。

1477273660-8275-102300062cec1e2fcd5c

通过反馈告知用户目标达成

动效不仅能够“摇头”还能“点头”,它同样能够以视觉化的方式告知用户交互所达成的结果。当用户操作完成之后,结果不应当是生硬的弹出,而是自然的过渡并呈现出来,“展现,而不是单纯的告知”。

在下面 Stripe 的案例中,用户点击“支付”之后,一个简单微妙的动效联通了“支付”和“支付成功”两种状态,这个时候,动效赋予了支付这个操作一种轻松写意的感觉,是一种让用户欣赏甚至沉迷的细节体验。

1477273663-1920-f7800051e983354bc54

结语

当你熟练运用动效的时候,它会成为你UI设计过程中最强大的工具之一。一个动效是否合适,你确实需要花费时间仔细思考。我们应当在设计之处就开始思考动效要如何展现,并且将它视之为界面的天然的组成部分,因为它的存在并不仅仅能够强化界面的视觉,而且能够优化功能,强化体验。正如同乔布斯曾经所说的那样:

“设计并不仅仅关乎视觉和感受,它要呈现的是事物运作的规律。”

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/18253/

(0)
iouedioued
上一篇 2016-10-24 09:26
下一篇 2016-10-24

相关推荐

  • 【IxD案例】国际第一时尚品牌VGUE-iPad端案例

    今天给大家分享一个原型,这是第一个分享原型制作的源文件,还请大家多多见谅,源文件有点小复杂。

    附件内的源文件为高保真的原型,模拟了很多的效果,下面我给大家说一下

    2016-02-22
  • Axure制作酷我音乐安卓端高保真原型案例下载

    本案例为原型库网站原创制作,转载请保留出处。这个原型文件,忘记是什么时候练习axure 时做的,做的不好,有bug,部件的层级关系不够明确,仅供参考。拿出来给有兴趣的朋友下载研究吧,关于这个原型的问题就不要找我提问咯,早已忘记了。
    前段时间又重新做了一下安卓端的酷我高保真原型,进步了很多,层级关系十分明确,这个最新的原型等过段时间再给大家分享吧。

    2015-01-04
  • 如何写一份出色的交互设计文档,给程序员以美的享受?

    交互设计文档分为两个版本:一个是界面元素标注版,另一个是附带交互逻辑版。那么,具体的写法和要求如何呢?

    2016-07-11
  • [译]UX设计之按钮使用实例、类型和状态

    按钮是一个普通的、日常交互中都可能碰到的基本元素。但对创建一个流畅的交互体验过程来讲,按钮则是一个至关重要的元素,因此,投入一定精力到该元素的设计上是非常有意义的。另外,我们也为大家梳理出元素的基本…

    2016-06-30
  • 平衡用户体验设计和精益设计

    来源:人人都是产品经理 作者:AB Tester Blog 对你而言哪个更重要:是制作出拥有杀手级用户体验的产品来吸引用户?还是尽快制作出能满足用户的产品并抢占大量的市场份额? 如果一款产品用户体验很差的话,用户不会使…

    2014-09-27
  • 蜕变.进化——百度云Android端7.0项目总结

    项目背景: 百度云面世之初是一款网盘类产品,以安全、稳定、易用、快速的体验著称,经历近两年时间的升级优化,百度云已不仅仅只是“网盘”了,在慢慢的朝着平台化的方向不断发展。 旧版的Android客户端随着每一次版…

    2015-03-18
  • 2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”!

    一时兴起,统计2015年以来新发布的,或是从2015年开始快速崛起的,日活稳定在20万+的APP,一共找到了16款。以下数据为粗暴的估算,不准确很正常,不准确憋找我! ┃视频类 熊猫TV,视频直播平台,CEO王思聪,200万量…

    2016-04-08
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • [译]UX设计之复选框和开关按钮

    当设计表单时,交互设计师常常不得不面对一个问题,就是要选择出一个合适的界面元素好标示出从多个选项中做出特定选择这种交互。当然,我们都有可能遵循某种既定的规则。无论如何,在做出这个选择时我们都应该牢记…

    2016-06-30
  • APP细节打磨绝招 “微交互动画”

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

    2016-09-08