有效地运用UI动效的4种方法

约在10年之前,在用户界面使用的动效,大部分是一些广告和闪烁的弹窗。然而到了今天,已经发生了翻天覆地的变化。设计不仅是外形和感觉,设计关乎如何运作。


约在10年之前,在用户界面使用的动效,大部分是一些广告和闪烁的弹窗。然而到了今天,已经发生了翻天覆地的变化。

有效地运用UI动效的4种方法

交互设计和动态效果的详情,带来的是网站或APP的根本改变。这种思维方法,在下面有详细的描述。

有效地运用UI动效的4种方法

为了设计出更好的数字产品,从一开始网页或APP就要有良好的交互性质是非常有必要的。这一次,就将如何有效的运用UI动效的方法详细介绍给大家。

使用动效的理由

动态(英: Motion)在从他的性质上来说,就是用户界面上最突出的元素。相较于文字文本和静止的图像,动态的更容易被发觉。我们的视线会不由自主的追寻着动态的物体,这也可以说是一种条件反射。试着将这个利用在功能性的动效上吧。

功能性的动效是?

功能性动效,指的是在UI设计中作为功能的一部分被采用的小动效,有着非常明确和合理的目的。

  • 为了减轻认知的负担。
  • 防止发生变化时看漏(英: Change Blindness)。
  • 在空间关系中确立良好的层级关系。

以用户为中心的设计方法,直观的用户界面,响应性,人性化等等都是必须的。功能性动效,将有助于你实现这些目标。那么,就让我们详细的来看一看功能性动效吧。

用功能性动效完善UX

对APP或网站的体验或印象,通过在好的地方使用动效,会更易于使用,让功能性更加完善。

通过仔细研究测试,功能性动效,都包含以下的功能、要点。

01. 可视化的反馈

舒适的交互设计可以提供更好的反馈。无论是否成功,反馈能告诉用户系统已经识别到了你的操作。显示出相互作用的结果。这组动效应特别注意控制。

有效地运用UI动效的4种方法

反馈按钮

在我们的生活中,对按钮会有按下去的反应。进行会有怎样的反应的预测是十分重要的。

有效地运用UI动效的4种方法

操作结果的可视化

按照基本规则,使用动画进行反馈,你可以很好的强调什么操作是错误的。

例如,如果你输入密码错误,让我们添加一个左右抖动的视觉动画吧。像出错啦,请再试一次这样,左右摇头的效果。当用户看到这些动效后,可以立即了解当前的状况。

有效地运用UI动效的4种方法

​另外,您还可以强化用户当前正在运行的动作。在下面的例子中,当用户点击提交按钮,在成功之前通过一点点加载动画来显示。加载的动效使用户感觉过程已经成功完成。

02. 抑制状态的变化

至于添加动效最好的地方,就是让变化的瞬间变得引人注目。用户界面状态的变化,特别是网站上突然的变化,很难让用户理解当前究竟发生了什么。在这变化的瞬间,就可以在UI中添加动效进行缓和。

(1)建立连接

动画的变化,能向用户界面展示各种各样的状态,作为一个如同中介一样的角色,帮助用户理解当前正在发生着什么。用户只需跟随动效,就能够理解2个UI状态之间究竟有着怎样的联系。

有效地运用UI动效的4种方法

另外,也可以显示缩略图和详细信息。

有效地运用UI动效的4种方法

​这张动画卡片,是通过点击将重叠的详细信息进行展示,它清楚地表明了是同一个项目。

(2)注意变化

当一个新的对象已经公开时,动效有助于我们在被掩盖的信息中清楚的找到它。比如通过滑动打开内容来隐藏信息,你可以在需要关注时用到这种变化效果。

在下面的案例中,当您单击汉堡包图标时,导航菜单用幻灯片展示。通过这种动作,用户就可以明白,导航菜单不会消失。

有效地运用UI动效的4种方法

03. 系统状态的可视化

作为Jakob Nielsen为了可用性推导出来的答案之一,系统状态的可见性仍然是用户界面设计中最重要的原则之一。对于用户来说,把握理解系统当前的状况,是非常重要的。

(1)进度条

上传和下载数据的过程是采用功能性动效的一个很好的机会。有动效的加载栏,可以直观的看到动作加载完成预计还要多少时间。

另外,当操作未能成功进行时,动效也很有用。例如在下载失败的时候,你就需要考虑如何让失败画面看起来比较舒服。

有效地运用UI动效的4种方法

(2)下拉刷新

用户的等待时间是从动作开始的瞬间开始,最糟糕的情况是不知道系统是否收到指示。

下拉刷新这一技术,让我们尝试在操作瞬间作出反应。告诉用户你的进程已经开始,最重要的是给与用户视觉反馈,在这里使用动画将非常有帮助。

有效地运用UI动效的4种方法

04. 解说动画

有时,用户需要一些额外的帮助来了解用户流程或如何与某些界面元素进行交互。对于包含用户的新的或不熟悉的功能或交互的用户界面尤其如此。

(1)新手上路

用户入门需要一个完美的UX,第一次看到的操作动画对于首次使用者如何与应用程序进行互动有着巨大的影响。无论多么复杂的东西,动画都能通过有趣的方法传达出来。他有着无限的可能性。

有效地运用UI动效的4种方法

(2)视觉提示

动画可以提供一些易于理解的视觉线索。解说动画,通常是在网页第一次被打开时看到,通过动画可以表现页面上特定的要素在什么情况下可以使用。

这种类型的动画,通过故事的进行渐渐的看到全体的效果,在游戏中经常被利用。只有当用户自己的经验到达一个点的时候,才会触发这个提示。

总结

动画是一个复杂而强有力的工具。

我们需要从一开始就采纳这种效果,并将其视为我们设计的自然部分,因为设计不仅仅是视觉呈现。正如史蒂夫·乔布斯谈到设计时所说的:

设计不仅是外形和感觉,设计关乎如何运作。

 

原文地址: photoshopvip

译者:@喪心病狂十六夜貓

译文地址:http://www.uisdc.com/functional-motion-design-method

本文由 @丧心病狂十六夜猫 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-08-04 11:26
下一篇 2017-08-04 12:13

相关推荐

  • 新交互时代:自然用户界面中的“自然”到底是什么意思?

    一个理想的自然用户界面应当能让用户的注意力完全集中在所要从事的活动上,而忘记界面本身的存在,或者说,界面变得“透明”了。一位印度的同行为当地用户设计了一组用数字笔操作的界面。在进行用户测试时,他对其中一位用户说:“请拿起笔碰一下屏幕。”出乎他意料的是,这一看起来十分简单自然的操作,居然出了问题:这位用户没有用笔尖,而是把笔横过来整个贴在了屏幕上!经询问才知道原来他不识字,也从没用过笔。
    而另一位欧洲的同行为家庭用户在交互桌面上开发了一套软件,包括一些直观的手势交互,例如用两个手指相反方向移动做打开的手势来打开一个虚拟的储物箱。当他向用户家庭演示时,他想考考这个家中正上小学的孩子:“你试试看怎么打开这个箱子?”孩子二话不说,直接用食指在箱子上双击!隐喻指的是把用户界面中的概念比拟为一种人们熟悉的概念或现象,用于解释其交互方式,例如将图形界面元素比喻为大家熟悉的桌面、窗口等等。隐喻越贴切,越为用户熟悉,往往就意味着界面越自然。

    2017-05-14
  • app反馈信息的交互设计

    请戳“小白的交互设计”,关注我,么么哒。反馈的作用是帮助用户理解系统行为,合理的反馈就像两个用普通话交流的人之间的对话,互相可以轻易地理解,而糟糕的反馈就像是一个用普通话,一个用粤语的两个人之间的对话…

    2017-08-02
  • 【交互设计】一门感性与理性相结合的专业

    交互设计Sheridan交互设计本科是安大略省唯一一所提供该专业的高等院校。专业强调学生的创造力和逻辑思维,并且会学习到创意过程中的各个阶段的实践经验,从研究和规划的设计与执行。第一次见到文俊同学是在今年国际部举办的春节联欢晚会上,他一直帮着学生会布置会场,忙前忙后,哪里需要帮忙,哪里就有文俊的身影。更令人印象深刻的是他非常标准的广东普通话,来自广东的中国学生并不少,但是他的“广普”着实令人印象深刻。文俊同学四年前来到Sheridan,...

    2018-04-07
  • 杭州-UI设计师招聘需求

    点击上方蓝字一起关注这个公众号吧!什么是用户体验用户体验是一种纯主观的在用户使用一个产品(服务)的过程中建立起来的心理感受。把最终用户作为设计和开发活动的焦点,而不是系统、应用程序或者单纯的审美价值。它是基于一般的以用户为中心(用户至上)的设计理念。最简单的用户体验(User Experience,简称UE),最直接影响你的网页浏览度的因素。在网站策划和网站运营当中,用户体验是最重要的一个因素,直接影响到你的网站是否成功。网站用户体验(...

    交互专题 2018-03-13
  • 用户体验|无关情怀,只与用户习惯有关

    用户体验在使用层面是一个感情的解释,但是在产品设计的专业领域,这是一个具象且拥有层次感的专业领域。当一个产品进入市场后,“产品如何与外界发生联系并发挥作用”,也就是人们如何“接触”和“使用”它。这就是用户…

    2016-11-08
  • 刺猬公社招聘汇 | 通往offer之路

    ■更多招聘信息,以及1对1职业咨询,尽在offer之路。扫描上图二维码,即刻加入!本期招聘概览北京:商业新媒体  中国国家地理  北大出版社  音悦台  华谊兄弟    光合映画腾讯研究院猫眼电影  一点资讯  人民日报  摄影之友  经济观察报智云图  鱼眼视频上海:GQ杂志爱奇艺(绿色为正职,黑色为实习,红色可转正)全职信息1  商业新媒体 | 新媒体采编来源:@商业新媒体岗位职责1.关注并监测娱乐内容营销行业内的最新动态,策划行业...

    2018-04-08
  • 用户体验测量的工具:可用性度量

    说到用户体验度量就不得不说用户体验,用户体验即用户在使用产品、系统、服务的过程中建立起来的主观心理感受、因为它是纯主观的,就带有一定的不确定因素;而个体的差异也决定每个用户的真实体验无法通过其他途径来完全模拟或再现。

    2017-05-30
  • 产品经理、交互设计、UI设计师工作内容到底是什么?

    |沙龙精选自公众号交互笔记后台经常会有人留言问我一些问题,有的我回复了,有的没有回复,不是我故意无视,而是因为探讨那些问题需要需要些时间,而我当时正好比较忙,等闲下来的时候,这些留言已经被后台定期清空…

    2017-08-02
  • 交互设计 | 一部自嗨的头号玩家为什么吸引你?

    Create Your Difference. by CYD头号玩家头号玩家到底什么吸引你?情怀吸引了你?动漫迷的高达情怀电影迷的金刚情怀恐怖情怀或者跳舞机情怀?或许美国大片吸引了你?▲有坏美女▼坏boss▲坏人老出BUG▼好人老有神助▲英雄要崇拜▼大部队会赶来不管什么吸引了你把你所有的感触和情绪放大一万倍的东西是艺术和科技当然,我相信你们都知道不就是VR和AR吗整个电影都建立在VR和AR的基础上没有这牛逼地眼镜,这个故事还没开始就可以...

    2018-05-05
  • UX文案优化12字真言:定风格—查现状—设标准—推落地

    定风格—查现状—设标准—推落地

    2017-05-26