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

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


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

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

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

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

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

相关推荐

  • 用户体验方向的复试炸药包

    喜大普奔,北师大终于出分数线了,虽然心理学部的院线还没有出来~但是过没过线,你心里应该没点Balance吗?对于没有参加提前复试的同学,对于接下来的复试,师兄在这里想灵魂拷问一番,准备好复试了吗?知道怎么准备吗?知道UX复试要考什么吗?别问我,我也不知道。但是作为去年参加过正常批复试而且成绩不低的老司机,我还是可以在这说两句的。(咳咳~全场都注意啦!)参加过去年提前复试的同学应该知道去年UX的复试变动很大,比之前两年灵活了很多,辅导机构...

    2018-03-07
  • 这个是很多人找交互设计文档的写作方法和模板

    文章来源与腾讯CDC 作者是yoyo 前言:最近准备做一个交互设计文档的分享,但是一直没有时间整理好keynote,这里先分享一个设计文档模版,以及模版中每个元素的使用理由与方法。之后的设计文档分享中,会加入更多的…

    2015-08-11
  • [官方]mockplus视频教程:10分钟玩转mockplus

    官方出品教程,10分钟快速了解一下mockplus软件操作基础。 视频免费播放地址

    2015-06-30
  • 准备入行交互设计之前,先来搞清楚这些基本概念

    一直以来,经常有学生来问我,“是该选产品设计好还是交互设计好?”或者“过去是做产品设计的可不可以转交互设计?”“是不是视觉设计转交互或者界面设计方便点?”等等诸如此类的问题。笔者注:“产品”既可以是物质化的…

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

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

    2018-04-07
  • 「以司机为中心」的用户体验设计

    Uber 如何将他们的设计哲学应用在司机端的 App 上面 ?这一次,饿了么商家端产品经理为大家翻译了「以司机为中心」的用户体验设计—— 细看如何从零开始重制 Uber 司机端 App。

    2017-05-20
  • 医生如何离开体制创业、卓越的用户体验如何打造 | 首届妇幼医疗高峰论坛精彩环节分享

    本文编辑:卢维晨 要笑尘“2018首届妇幼医疗高峰论坛”于2018年4月21日在上海嘉里大酒店开幕。本次会议由上海春田医院管理有限公司主办,中国非公立医疗机构协会妇产科专业委员会作为学术支持。来自国际、国内知名的妇儿医疗机构投资者、拥有者、运营管理者、妇产儿科医生、医药企业、医疗器械企业、孕婴童产业、互联网创新企业等诸多行业专家领袖出席了本届论坛。本次大会上,隆重发布了中国首部以妇儿医疗机构为主题的《2018中国妇儿医疗机构白皮书》,本...

    2018-04-22
  • 从2种形式和4种附加价值,来浅谈APP启动页

    当应用程序被用户打开时,在程序启动过程中被用户所看到的过渡页面(或动画)都被我们统称为启动页。为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。
    ——摘自苹果官方对于iOS启动页的设计说明

    2017-05-05
  • 注意这十点,让你避免糟糕的设计

    本文是给初学者/门外汉的五分钟设计指南。好的设计原则对任何人来说都有用。这个指南会告诉你一些基础设计原则,立即就能用得上并分享给别人。我从不学习打鼓课程,从不学习吉他课程,我靠自己摸索。我认为倘若你真的对什么东西有所热诚,你就会有动力,你就会集中注意力,你可以做任何你想做的事情。
    ——Dave Grohl,喷火战机乐队

    2017-04-30
  • 【转】交互设计规范总结

    前些时间正准备写交互规范,就去网上搜罗了一下交互规范的一些范本,想作为借鉴参考,但却没能找到比较满意的,找到了一些零散的内容(当然有些还是有参考价值的),所以就觉得交互规范这方面的内容比较少,就来此…

    交互设计 2016-09-05