分享app动效设计

移动互联网时代已经到来,app已如天空的繁星,数也数不清。随着手机硬件的不断升级,实现炫酷且流畅的动效不再是遥远的梦想。如果你是app达人,喜欢试用各种app,你肯定会发现越来越多的app开始动效化。

一个真正的美女一定是同时兼具外在美和内在美,评价一段动效也是如此。一段真正“美”的动效需要同时具备两个条件,首先它需要是生动且有趣的,既好看又流畅;再次它不是可有可无的,需要具备优化交互和提升体验的作用。

1. app动效的外在美

一段动效首先需要是生动且有趣的,不仅要有好看的外观还要有流畅的体验。要做到这点,需要赋予动效以生命力,具体有如下几种方法:

1.1 模拟惯性

现实中物体的运动是有惯性的,比如公交车突然刹车时乘客会突然往前一倒。仔细观察下面3段动效,图像在变化(放大、缩小和翻转)的末端都会“超出”一点再立即“反弹”回来,如此的处理方法使得整个动效充满活力,显得生动有趣。

1.2 模拟重力

与惯性一样,重力也是现实中存在的现象,所有物体在无向上的支持力的情况下都会下坠,比如倾倒垃圾。一般app删除卡片的动效就是横向滑动直至消失,但是下面这段动效却加入了重力效应。即卡片在横向滑动的同时也在翻转并下坠,就像现实中往垃圾桶中倾倒垃圾一样。在使得整个动效生动有趣的同时也便于用户理解操作含义。

1.3 均匀变速

一个优秀的动效肯定不会是匀速运动的,匀速运动的物体显得生硬和死板,就像机器人一样。要想让一个图像运动的有活力,就需要对其运动的速度进行“设计”。仔细观察下图所示动效,虽然界面中不同元素的运动速度不尽相同,但其运动均遵循一定的原则,其中之一就是均匀变速,切记“急起”。就是说界面元素在运动时的初始速度要为0,以匀加速开始运动,而在运动结束阶段往往是可以急停的。

1.4 碎片化运动

使一款应用变得个性十足的一个好方法就是给它加上炫酷的动效,而使一个动效炫酷的常用方法就是碎片化运动。简单说就是把界面中的图像拆解成一个个碎片,然后让它们进行不同步的运动,利用时间间隔和变速产生炫酷的效果。就如下面一则动效,图像中的不同元素有节奏的呈现,利用时间差来制造效果。

2. app动效的内在美

真正优秀的动效不是只有漂亮外表的花瓶,还得具备优化交互和提升体验的作用。下面总结了3个动效的“内在美”,分别为引导、简化和增强反馈。

2.1 引导

图形界面本是难懂且抽象的,增强引导是降低软件操作难度和提升用户体验的好方法。

2.1.1 动态聚焦

通过动态化的处理引导用户聚焦界面的关键部位,以使体验更加的流畅。青蛙能够快速捕捉移动中的物体,人眼也具有相似特征,运动中的物体总能引起下意识的关注。如下图所示动效,屏幕上方的数字不是直接显示一个数值,而是从0迅速递增到该数值,特意表现一个动态的效果,目的就是为了吸引用户的目光,起到聚焦的作用。国内的支付宝钱包APP也利用了此类特效。

2.1.2 示意过渡

过渡动效就是给界面的变化加上流畅的过渡,目的是引导用户理解到底发生了什么,而不会使其不知所措。如下图所示动效,添加卡片的过程进行了生动的模拟,让用户很轻易地理解发生了什么。试想一下,如果该页面没有滑动效果,而是直接生硬的跳转,是不是差劲很多?

2.1.3 空间转场

转场动效是被设计师所普遍重视的一种特效,它的作用也是引导用户,让用户更好地理解页面跳转,知道自己身在何方。下图所示一则动效就是一个漂亮的转场动效,为了避免两个页面之间的跳转过于生硬,利用动效填补上了页面跳转的中间过程,使得体验更加流畅和自然。

2.2 简化

有时优秀的设计就是出色的简化。简化界面信息和交互层级可以降低操作难度和提升用户体验。

2.2.1 隐藏二级操作项

利用动效可以使界面中的部分信息隐藏,当进行某些操作后隐藏的内容会动态展开,从而达到简化初始界面的目的,使界面简洁大气。

2.2.2 按钮动效化

使按钮动效化能够让界面重要信息动态浮现在同一按钮上,使得用户的目光紧紧盯着按钮,弱化了页面跳转带来的干扰,使体验更加流畅。

2.3 增强反馈

软件的反馈对于体验的提高来讲至关重要,增强反馈可以起到更好的提示作用,使体验过程更加轻松和愉悦。抖动是增强反馈的方法之一,用动效反馈替代图形文字的静态提示,更加自然和引人注目。下图所示动效出自苹果的Pages软件,当进入编辑态后待编辑对象进入不断的抖动状态,起到很好的引导作用。

3. 总结

动效化显然已成为移动互联网产品的新趋势,如何设计出有趣且吸引人的动效已成为设计师们的新课题。不同的产品适合不同类型的动效,有些产品适合炫酷的动效,有些则不适合。切记不要把动效设计成华而不实的花架子,而应该将其视为提升用户体验的新方法。

时间: 2024-12-10 12:41:12

分享app动效设计的相关文章

如何快速保存APP动效? 转

经验分享:如何快速保存APP动效? @AzTamic(百度MUX 交互设计师):很多小伙伴平时喜欢收集手机软件上的各种动效,但是又苦于不知道如何保存,今天讲一下利用itools+Ps保存动效的实例,如果你有更快捷的方法请联系我更正. 动效设计好文推荐:<帅呆了!一组令人愉悦的APP动效设计><高手之路!设计漂亮有趣的转场动效><还等什么!是时候来了解动态设计啦> 首先,请小伙伴们看看成果: 需要知道的: 1.iOS设备大多通过AirPlay来实现屏幕的投射和录像.我用的

我们为什么需要动效设计

随着国际大品牌苹果和谷歌的引领,最近越来越多的国内公司开始关注动效设计了,越来越多的团队已经意识到动效在产品用户体验中的重要性了,更多的射鸡师们也开始投身动效设计领域. 但是说到底,我们到底为什么需要动效设计?或者说我们到底需要什么样的动效?做动效设计也有段时间了,于是尝试用一些案例,从产品本身出发来说说我所思考的动效设计. (文中部分案例为设计师个人作品,部分为线上产品,都是我非常非常欣赏的作品.如不慎冒犯请戳我替换掉) 一.加强体验舒适度 嗯,就是让用户更加爽更加爽的用你的产品. 具体表现在

iOS 停止不必要的UI动效设计

http://www.cocoachina.com/design/20151124/14400.html 前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议. 我们将在下文中,简单探讨如何改善下面的这个交互. UI动效设计的反面案例(线上Demo) 注:这个反面案例并非假设,而是来自近期的真实客户案例. 概述 自从 70.80 年代首个光栅图像在CRT屏幕出现以来,人们对于(数字)视觉设计的态度一直在不断进化.与其他艺术领域不同

百度MUX:APP动效之美需内外兼修

移动互联网时代已经到来,APP已如天空的繁星,数也数不清.随着手机硬件的不断升级,实现炫酷且流畅的动效不再是遥远的梦想.如果你是APP达人,喜欢试用各种APP,你肯定会发现越来越多的APP开始动效化. 一个真正的美女一定是同时兼具外在美和内在美,评价一段动效也是如此.一段真正"美"的动效需要同时具备两个条件,首先它需要是生动且有趣的,既好看又流畅;再次它不是可有可无的,需要具备优化交互和提升体验的作用. 1.APP动效的外在美 一段动效首先需要是生动且有趣的,不仅要有好看的外观还要有流

动效设计的物理法则

动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的. 首先来一发大师金句,迪士尼动画大师格里穆·乃特维克曾经说过: 动画制作和动效设计是本质相通的,我们需要为用户建立一种"视觉的真实",即动作是可信的,我们需要获得的不是照搬线下场景的写实主义,而是"可信度",要让用户感知到这个动作是成立的.这里,就要搬出高大上的物理学了! 物理学四大基本力--万有

动效设计的物理法则:动画的一切皆在于时间点和空间幅度(转)

动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的. 首先来一发大师金句,迪士尼动画大师格里穆·乃特维克曾经说过: 动画制作和动效设计是本质相通的,我们需要为用户建立一种“视觉的真实”,即动作是可信的,我们需要获得的不是照搬线下场景的写实主义,而是“可信度”,要让用户感知到这个动作是成立的.这里,就要搬出高大上的物理学了! 物理学四大基本力——万有引力.电磁相互作用力.弱相互作

UI动效设计从入门到项目实战 高清无密 百度云盘

高薪设计师必修课 AE移动UI动效设计从入门到实战 如今诸多企业已经意识到动效在产品用户体验中的重要性,单纯的满足功能性的设计已经out了,动效设计已然成为未来UI设计师必备的能力!本课程采用基础理论与实战案例相结合的教学方式,手把手带你学习炫酷的动效设计! 第1章 课程简介 介绍该课程的学习内容,以及课程内的案例效果展示 1-1 课程介绍 第2章 动效基础知识学习 动效基础操作知识点梳理,快速掌握AE面板等基础操作知识要点,了解动效实现基本原理. 2-1 AE软件界面初识 2-2 菜单栏讲解

动效设计必备:元素周期运动表(Periodic Table Motion)

今天分享一个元素周期运动表,这个并不是化学元素,你可以理解为「元素运动规律」,因为这个元素表是由一些常用动效组成,并且每个动效的实现都有一个理论依据,而不是凭空想象出来.动效有弯曲.偏移.流动线.噪波.回旋路径.极坐标.音频波浪.对称旋转.连接.遮罩消除等效果.对到交互设计师,想了解动态设计原理,建议收藏此表. 网站名称:Periodic Table Motion 网站地址:http://foxcodex.html.xdomain.jp/ 进入网站后,我们点击每个动画都有尽介绍! 下面来看看这些

动效设计原理:从卡通动画到UI动效

概要 UI是基于静态页面来设计的,页面之间通过跳转切换.在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理.这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑.与此相反,在卡通领域,由于使用了足够的动画效果,用户可以非常容易理解某个动作,即使夸张的动作也没问题. 尽管UI设计和卡通动效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨的互动式工具.但是我们还是可以借鉴卡通动效的优点,从情感和认知层面上将两者的优势相结合. Keywords UI.动画效果