动画的两种类型:移动界面上的功能动画和情感动画

动画是整个过程的完全独立的部分,必须在评估整个项目时立即予以确认。


动画是整个过程的完全独立的部分,必须在评估整个项目时立即予以确认。

动画的两种类型:移动界面上的功能动画和情感动画

首先,我们谈论动画在实际应用中的努力和需求。创建动画设计显然比将其变成现实容易得多,编程动画可以严格延长应用程序开发的时间。这就是为什么大多数动画被困在概念阶段,并在设计师的组合中停滞不前。

我们将界面动画分为两种类型:

  • 功能性UX动画
  • 情感性UI动画

功能性UX动画提升应用程序的响应能力

这些动画无疑提高了可用性,有意义地促成了一些具体操作。通常,它们不需要比用户的特定动作序列更多的时间。例如,刷新的拖动,指标的加载,按钮操作或滑动…

动画的两种类型:移动界面上的功能动画和情感动画

Ramotion

动画的两种类型:移动界面上的功能动画和情感动画

Sergii Ganushchak

独特的下拉列表的内容更新。一旦收到数据,动画就会结束。这些例子弥合了功能与情感动画之间的差距,但开发这种下拉列表并不像看起来那么容易。

动画的两种类型:移动界面上的功能动画和情感动画

Stan Yakusevich

在这里,我们看到一个滚动条,当你移动它时会改变颜色。它是一个功能元素,因为它提供了对折扣“温度”变化的触觉和“热”感觉。热或冷。就其所需的努力而言,编程实现是一个非常难的效果。

动画的两种类型:移动界面上的功能动画和情感动画

Aurélien Salomon

在屏幕间平滑转换的水平滑动的不同例子。如果这个动画没有比交互和用手指控制更长久,那么它是功能性动画的一个很好的例子。具有平滑转换功能的界面产生一流的印象,也不仅仅是因为它们很少见。

动画的两种类型:移动界面上的功能动画和情感动画

Lukas Horak

这是一个减缓用户操作的复杂动画的例子。卡片的额外震颤拖延了我们几秒钟,这是不必要的。震颤效果需要6-8小时的开发时间。

总的来说,在规划时间表和预算时,必须考虑账户中的功能动画。不言而喻,界面必须具有动态性和响应性,因为这样可以增强交互性。即使你只是设计它,也请记住动画需求的额外时间和精力是关键。这确保你的作品集只包含由第三方开发商开发的仅完全实现的项目,这是你的设计的基础组成部分。

情感UI动画是界面的装饰

大多数时候,这些动画只有令他们惊叹的因素,其吸引力的目的是促进应用。只有通过设计师想象力的限制,改进的UX被放在后面,因为这些动画是非常复杂且经过精心的设计。以下是几个例子:

动画的两种类型:移动界面上的功能动画和情感动画

https://dribbble.com/shots/1936758-GIF-of-the-Tap-Bar-Concept

动画的两种类型:移动界面上的功能动画和情感动画

https://dribbble.com/shots/3208361-Plus-expanded

动画的两种类型:移动界面上的功能动画和情感动画

https://dribbble.com/shots/2232385-Pull-Down-to-Refresh

动画的两种类型:移动界面上的功能动画和情感动画

https://dribbble.com/shots/1692646-Splash-screen-animation

动画的两种类型:移动界面上的功能动画和情感动画

https://dribbble.com/shots/1701001-GIF-Exercise

动画的两种类型:移动界面上的功能动画和情感动画

https://dribbble.com/shots/3247394-Delivery-app-design

大多数设计师在他们的作品集中都有这样一些东西,但它仅保持在想法阶段。在开发方面,承包商和客户都明白这不是一个重要的事情,而是不能没有它。毕竟这些动画需要很大的努力的,且直接反映了开发的预算和日常安排。

谁负责嵌入这些动画呢?

市场上的公司永远不会为了生存而奋斗。他们修改最受欢迎的产品。因为他们在很久以前就开始炒作他们的产品,并解决了大量的UX问题,他们有机会为情感动画投入更多的时间,金钱和努力。很好的例子是:Twitter、Uber、Airbnb、Things 3等。

对于如何推进营销策略有明确的削减计划的启动。他们瞄准一个奖项,如Apple Design Awards,Tappawards,The Webby Awards,Global Mobile Awards,Driven x Design Awards等。所以这可能是一个竞争优势,但将动画变成优势并不是那么简单。这些应用程序的一些很好的例子:

动画的两种类型:移动界面上的功能动画和情感动画

Clear Path Robinhood City Guides

其他人因为各种原因也做这个,如:

  • 每个人都在做。

对于设计师和客户来说,它很有趣且令人印象深刻。没有线索,如何影响应用程序的可升级性?

这是客户想要的,因为它很酷。

它来自发展阶段可能出现的缺乏经验和无知的挑战。

缺乏营销策略,客户端不明白动画是什么,或者如何帮助产品改变。

最后的结果

在从想法到现实的应用程序的开发过程中,有必要清楚地确定每一步的方法。动画是整个过程的完全独立的部分,必须在评估整个项目时立即予以确认。毕竟动画占整个开发过程的100%。

功能动画具有明确的目的,在准备时间表和预算时要考虑到这一点。首先,它们提高了可用性。这些动画的复杂实现完全取决于创作者。

情感动画并不是最重要,因此最好考虑你或客户希望将其嵌入到应用中的情况。大多数情况下,情感动画是不值得付出努力,投资现金促进产品是更有效,这是容易被忽视的,设想一个好想法将会“提升自己”。

 

原文地址:https://blog.prototypr.io/functionality-vs-emotions-in-mobile-interface-animation-9bce59129ac7

原文作者:Cuberto

译者:SKYUI

本文由 @SKYUI 翻译发布于人人都是产品经理。未经许可,禁止转载

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

(0)
CatherineCatherine
上一篇 2017-08-04 08:34
下一篇 2017-08-04 09:24

相关推荐

  • 译文 | iOS 10 人机界面指南(二)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?

    2017-05-22
  • 考研是工作的理想国 | 同济大学设创交互设计考研分享

    打造最优质的设计教育有趣·专业·创新上次发了那篇跨专业考研的分享之后,小编收到了很多小伙伴的后台留言说,能不能多多分享一些考研的心得,为了保持我们有求必应的优良传统,今天的推文也是一篇干货分享帖~此次的分享,来自一位考上同济的在职小姐姐,一起来听听她是怎么平衡工作与考研之间的压力吧~张 炜15年毕业于山东财经大学的数字媒体技术专业,因为爱好也因为工作上遇到的瓶颈,希望能通过考研取得进步,并顺利考入同济设创院的交互设计方向。(即在职又跨专...

    2018-04-25
  • 译文 | 在UX设计中利用色彩影响情绪

    颜色是我们观察事物的第一认知,是最能触动我们感官的视觉元素。颜色可以激发我们的联想,刺激我们的情绪。在设计中,颜色的合理运用一直是个很重要的课题。现在就让本篇文章带你认识每种颜色的独特作用和如何运用在UX设计之中吧。

    2017-05-25
  • 交互设计师,如何建立自己的知识体系?

    高中毕业,我们完成了基础知识的学习。后续要掌握新技能或新知识,主要途径便是自学。每个人自学能力千差万别,这决定了一个人的成长与发展的天花板。

    2017-05-16
  • 交互设计的重要性

    陌陌年会以疯x做伴手礼 引起互联网一片羡慕今天以陌陌产品为例讲讲交互设计的重要性在浏览页面时,左滑、点击返回按钮都可以回到上一页为什么发布帖子使用的是取消按钮而不是返回,也不可使用左滑呢如下:发布圈子非浏览而是在完成某一任务,点击返回或者左滑返回上一页,给用户任务未结束的负担,我只是返回了 并未取消任务的困扰

    2018-02-23
  • 想做动效,可是你的需求写清楚了么?

    精美的动画对于提升产品体验有很大帮助,如促进用户理解功能,缓解用户情绪,调动用户积极心理,为产品提供亮点等等。诸如此类的文章相信各位已经看过不少了,不少人已经开始越来越重视动效在产品中的应用了,还没有看过的同学不用急,谷歌官方的动效指南讲解得很详细,建议只看这个就够了,配合一些动画理解起来更容易。说明:

    1.优化直播间分享面板,增加特效

    2.当用户点击分享按钮时(*包括传统直播间主播面板的分享按钮和上方分享按钮,手机直播间的分享按钮*),从下方弹出分享面板,逐个弹出分享icon,并淡入显示分享奖励。

    3.用户关闭分享面板时,分享icon从右到左依次下落淡化消失
    相关参数:

    1.分享面板减速弹出,运动时间225ms
    2.分享icon从左到右依次弹出,运动时间225ms。带有奖励图标的,当对应分享icon弹出后,分享图标淡入显示(时间225ms),第二个图标比第一个迟100ms开始运动

    eg:如图第一个为qq图标,当用户点击分享按钮,分享面板弹出后,qq图标开始弹出(时间225ms),100ms后第二个图标(qq空间)弹出,当qq图标完全弹出时,淡入显示分享奖励图标,时间225ms。
    3.分享icon从右往左依次收回,分享面板收回,所有运动的时间减少30毫秒,如分享面板收回时间195ms,分享icon收回时间195ms。

    andorid端动画曲线采用系统自带:AccelerateDecelerateInterpolator(在动画开始与结束的地方速率改变比较慢,在中间的时候加速)

    iOS端动画采用系统自带:kCAMediaTimingFunctionEaseInEaseOut (在动画开始和结束的时候速度稍慢些)
    具体效果可参考附件视频

    2017-05-08
  • 用户体验要素,商品介绍,它们两竟发生了这种关系!

    有人去电影院是为了看电影,而有些人……上次我们讲到,网络课程的课程介绍的工作流程问题。广泛来说可以是网购中任何商品或服务的介绍的撰写或制作过程,这个工作流程和用户体验要素十分相似 ▼这一次我们来探讨用户体验要素具体对商品介绍的指导作用,先来看看一下详细的用户体验要素 ▼关于上图的模型,在《用户体验要素》一书中有详细的阐述,这里只讲与本文内容有关的部分。先来看到这个模型的右上方,有功能型和信息型两种分类。基于我当时的工作任务是商品介绍,那...

    2018-03-20
  • 用户体验是一门玄学秘籍

    Part 01 - 用户体验和用户体验设计关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。1.1 什么是用户体验?用户体验的定义有很多种,我比较倾向的解释是:“用户体验是人对于使用一个产品、系统、...

    2018-02-22
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • 如何辨别一个Banner的好坏?(附案例)

    平时经常会有人问我“什么样才算是好的Banner ?”、“我这个Banner 有什么问题呢?”之类的问题,还有时候大家会分享一些作品但是我觉得并不是特别好,所以就觉得要不写一篇“如何判断一个Banner 的好坏”之类的文章吧,因为我们常说设计师要多看,但是多看的前提是要学会辨别一个东西的好坏,要多看好的而非不好的东西哈,要不然怎么提高审美提高眼界呢?

    2017-05-24