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

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


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

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

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

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

  • 功能性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

相关推荐

  • 用微妙动效改善用户体验的简单方法

    译者:zyl0127     应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧, 这些都是过去的事情了。 当…

    交互专题 2017-08-07
  • 双十一来了,淘宝的登录页有bug?我有解决方案!

    关于淘宝的登录页设计中的BUG,本文作者就用所学的用户研究、交互设计以及产品经理相关的知识来分析一下,并提出了自己的解决方案。

    2017-05-17
  • 创新历史上的今天:黑白电视首次面世 1926.01.26

    今天看到谷歌Doodle的名称是: 黑白电视首次面世 1926 ,我们来说一说这个产品从0到1的创造历史,从交互设计角度看你有什么启示呢? Doodle的名称: 第一台电视亮相 90 周年 表明此doodle时间是: 26.01.2016 这个产品…

    2016-01-26
  • AxureUX企业及通用型网站WEB端原型模板发布

    01作品信息作品名称:AxureUX企业及通用型网站WEB端原型模板作品类型:模板类发布日期:2018-04-02最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:1.5MB作品编号:TEM007作品售价:¥19.00详细介绍及演示:http://www.axureux.com/home/templateswebgp.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本...

    2018-04-05
  • 购物商城微信公众号交互设计

    设计背景 由于微信公众号轻应用的设计需要在微信的结构框架中进行,信息架构和导航布局需要基于微信的开发接口和架构来做,项目开始时微信针对公众号的导航框架刚好有做出调整,在进入公众号里面的页面后可以逐级返…

    2015-11-06
  • 产品插画设计中,都有哪些比喻技巧?

    Shopify是一家位于加拿大渥太华的电商软件开发公司,专门为中小零售商提供建立网店的Saas服务,能对接主流ERP系统,为客户提供打单、发货、运单号自动回传、订单业绩汇总、利润计算、仓储、采购及供货管理等一体化管理流程,按月收取咨询服务费用。
    本文作者对产品插画中“如何利用比喻来找准信息传达的关键,提供有价值的无形体验”有自己独特的见解,在视觉设计角度对大家应该有一些启示。

    2017-05-14
  • 品牌基因法做图标——实战篇

    菜心的品牌基因法不知道大家有没有忘记,之前有写过两篇,今天来写第三篇——实战篇,根据真实的案例来再次讲述如何运用品牌基因法制作图标!如果你忘记了之前的品牌基因法(升级篇),可以先去回顾一下,网址如下:品牌基因法做图标(升级篇)

    2017-08-04
  • 以文本框为例,了解交互设计师在工作中的逻辑思考方法

    文本框是设计工作中常见的组件之一,无论是PC还是无线,大多仅是样式上的不同,它们的交互行为上是可以相互参照的。本文想从这一简单的组件出发,让大家看到交互设计师在工作中的逻辑思考方法,从而达到见微知著的直观感受。

    2017-05-17
  • 交互设计之搜索框设计

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Younger NowMiley Cyrus - Younger Now- 期待你的关注和收藏 -耳朵们要好好收藏原文:Behance作者OTT UI  |  编辑:程琳琳在交互设计中,各个不同的场景需要不同的搜索框设计。搜索框一种常见的交互插件,用于精准提取海量信息中的准确内容。搜索框几乎存在所有的网站和App中,尤其是海量内容为导向的产品之中,例如音乐库、电商类网站,做好搜索...

    2018-02-12
  • 信息与交互设计专业委员会走访北京服装学院艺术设计学院

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn第四站——北京服装学院2017年11月3日上午,信息与交互设计专业委员会卞亚君秘书长及秘书处谢老师、王老师一行三人到北京服装学院艺术设计学院进行了走访。新媒体系主任丁肇辰教授热情地接待了我们,在交谈中丁教授向我们介绍了学院的基本情况以及带学生做的一些研究项目及活动。如《都会寝室》项目,面向20-35岁人群,致力于通过卧室环境控制、健康食物推荐等,改...

    2018-01-31