恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动画的两种类型:移动界面上的功能动画和情感动画
0.0°
2017-06-22 自译外文 经验/观点 原作者: Cuberto 举报 13283 248 193 17

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

Image title


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



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

功能性UX动画

情感性UI动画



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

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


Ramotion


Ramotion


 Sergii Ganushchak


Sergii Ganushchak


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


Stan Yakusevich


Stan Yakusevich


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


Aurélien Salomon


Aurélien Salomon


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


 Lukas Horak


Lukas Horak


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


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



情感UI动画是界面的装饰。

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


Image title

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


Image title

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


Image title


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


Image title



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


Image title


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


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


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

Clear Path Robinhood City Guides



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

每个人都在做。

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

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

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

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



最后的结果

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



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



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


更新:2017-06-22

收藏

248人已收藏

  • 20

    作品

  • 745

    粉丝

  • 1

    关注

  • 5个网页及移动端设计中最常用的英文字体
  • 7个案例解析:复选框 vs 切换开关
  • 高级搜索设计:如何提升用户体验?
  • 16个有效的UX写作规则
相关标签

    猜你喜欢

      2017-06-22 自译外文 经验/观点 原作者: Cuberto 举报 13283 248 193 17

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

      0.0°

      你确定要举报动画的两种类型:移动界面上的功能动画和情感动画

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年06月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      193
      248
      17

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录