转场动效 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享12项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

作品集指导

优设设计专家语音在线指导

开通VIP

领取更多设计师实用特权

投稿

转场动效话题

首页
设计文章
转场动效

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

UI

为你揭秘 Google的动效设计师是怎么制作 UI 动效的

我在上一篇文章已经通过实际的案例，分享了动效设计并不难的原因。在今天的文章当中，我会分享我们自己的工作流程、技巧和设计的方法。

2019/03/19

动效设计没那么难！让谷歌动效设计师带你入门

UI

动效设计没那么难！让谷歌动效设计师带你入门

编者按：UI中动效设计本没有那么玄乎，作为 Google 旗下 Material Design 团队中动效设计的负责人之一，Jonas Naimark 对于动效本身有着更为透彻的认知，这也促成了今天的这篇文章。动效不难，想入门很简单！动效让UI更加富有表现力更加易用，这是不争的事实。

2019/03/18

基础科普！最常见的四种移动端功能性动效全面总结

UI

基础科普！最常见的四种移动端功能性动效全面总结

功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味，本文就来谈谈这四种功能性动效在移动端的使用。一、功能性动效的定义定义：功能性动效是一种嵌入 UI 设计中微妙的动画，有着明确、合理的目标。功能性动效的主要类型：页面空间转换；视觉信息反馈；功能操作引导；品牌与趣味。

2018/09/29

终极指南！超全面的UI动效基本规则总结

UI

终极指南！超全面的UI动效基本规则总结

动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯，交互的上下文逻辑也因为动效的加持而更加清晰。动效对于产品和用户而言，都是一个不可多得的重要组成部分。

2018/09/07

这些小小的改变，能够让UI动效更上一层楼

UI

这些小小的改变，能够让UI动效更上一层楼

UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分，经过仔细打磨的 UI动效对于整个界面的提升是显著的。动效呈现出状态切换的过程，展现了元素之间的逻辑关系，并且吸引用户的注意力，引导他们执行有效的交互。在设计动效的过程中， Material Motion 的设计原则，IBM 动画设计规则和 UX动效宣言都是不错的设计参考和指引。

2018/05/11

看似花哨的UI概念动效，并不只是为了耍酷而存在

UI

看似花哨的UI概念动效，并不只是为了耍酷而存在

在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用，什么样的动效更优秀等等，这样的探讨层出不穷。在 UI 所涉及到的各种动画和动效当中，概念动效是被讨论的最多的话题。

2018/04/13

经常被忽略的动效，对于用户体验设计是如此重要

教程

经常被忽略的动效，对于用户体验设计是如此重要

动画效果是用户体验设计中绕不开的环节，而在移动端交互当中，动效是作为转场的润滑剂，承上启下的重要环节而存在。无论是发送信息，打开设置，选中元素，导航到下一个页面，这些变化发生的时候，动效让这一切不那么突兀，自然地过渡，呈现状态变化，帮助用户更清晰的明白当前的状态，这是绝佳的方式。在今天的文章当中，我们尽可能系统地呈现动画和动效在视觉和交互上的常见功能和作用。

2018/03/28

7个实用技巧，让你的动效变得更优秀！

UI

7个实用技巧，让你的动效变得更优秀！

本篇文章不长，但是干货满满，希望能给大家带来一些实际帮助。下面进入译文。提高 UI 动效的实用建议让我们一起看看 UI 动画从好到优秀的一些例子。

2018/03/13

前端福利！10个免费好用功能强大的网页动画效果库

前端开发

前端福利！10个免费好用功能强大的网页动画效果库

动效设计是2018年的热门趋势之一。当然，创造动效并没有必要从0开始，有大把的设计项目可以供你快速上手，纳入到设计项目当中去。如果你仔细找找的话，会发现许多有趣的用来构建UI动效的工具，而这些素材和工具正在成为越来越多设计项目中不可或缺的催化剂。

2018/01/24

web前端开发

这四个动效小趋势，让你可以把网页设计得更加圆融

教程

这四个动效小趋势，让你可以把网页设计得更加圆融

随着交互设计重要性的提升，动效也越来越被设计师所重视。它不仅仅是取悦用户的工具，而且被视作为改善用户体验的重要手段。从为界面营造氛围的微小动效，到用来沟通用户的视觉线索，动效解决方案越来越全面。

2017/11/17

网页滚动特效要怎么设计？来看看这12个网站

网页

网页滚动特效要怎么设计？来看看这12个网站

动效在如今的网站上已经无处不在了，尽管它们很常见，但是这些动效用的是否合适，是否真正创造了足够优秀的用户体验，还鲜有讨论。今天我要聊的“滚动浏览动效”是网页设计中最常见，也是最有用的一种动效。虽然滚动浏览动效并不一定适用与每个网站，但是使用这一动效的网站通常有着更加有趣和优雅的体验。

2017/08/25

优秀网页设计

这5个牢不可破的设计规则，是你打造优秀动效的标准

教程

这5个牢不可破的设计规则，是你打造优秀动效的标准

转场动效在UI界面中所起到的作用无疑是显著的。相比于静态的界面，动态的转场动效更符合人类的自然认知体系，有效地降低了用户的认知负载，屏幕上元素的变化过程，前后界面的变化逻辑，以及层次结构之间的变化关系，都在动效的加持之下，变得更加清晰自然。从这个角度上来说，动效不仅是界面的重要支持元素，也是用户交互的基础。

2017/07/20

沿着这7个思路，你可以正确的使用动效取悦用户

产品

沿着这7个思路，你可以正确的使用动效取悦用户

当我们在探讨产品设计细节的时候，会频繁地提及“愉悦”这个词。必须承认，愉悦的体验，是优秀产品中所潜藏的魔法。在设计时候，如何构建出愉悦的体验，也是需要努力实现的核心要点。

2017/04/12

超全面干货！如何制作符合场景的交互动效？

交互

超全面干货！如何制作符合场景的交互动效？

@野子Joey ：动效如今被广泛的使用在界面设计中。但如何合理使用实效，而不是让动效干扰用户，却少有总结的经验。因此本文旨在结合现有的动效资源和案例，总结一下动效的使用目的，使用场景以及实现技术。

2017/03/20

这些悬浮动效的常见玩法你都知道吗？

UI

这些悬浮动效的常见玩法你都知道吗？

动效是如今UI设计中的重要组成部分，也是目前最热门的设计趋势之一。在之前的《在现代网页设计中，动效有哪些常见的用法》这篇文章中，我们探讨了动效对于交互和用户的重要意义，动效在不同的环节发挥的作用越越来越大。而今天我们要聊的是光标悬停特效，这也是近年动效设计的热点之一。

2017/03/17

在这些实例中，学会用动效赋予你APP生命力

UI

在这些实例中，学会用动效赋予你APP生命力

如果重新审视10年前的网页和移动端应用的话，你会发现动效和动画在这个时期简直是犯规一般的存在：浏览器和硬件设备吃不消，它们根本无法成为设计最佳实践。十年前你所能看到的动画和动效，通常是使用Flash实现，或者短暂的存在于弹出框和闪烁的按钮特效中。但是情况在最近的几年出现了巨大的转变，iOS和Android 设备的大规模普及，移动端芯片的性能提升，让设计师在移动端APP上实现多样的动画和动效，成为了可能，而今天，动画和动效已经成为了如今UI和UX设计当中，最重要的组成部分之一。

2017/03/13

为什么你的动效特别酷炫，但一直不能落地？（附解决思路）

UI

为什么你的动效特别酷炫，但一直不能落地？（附解决思路）

编者按：今年很多设计师开始玩动效，不过想让你的动效设计落地，远不是会AE 就能解决的。本文总结了让动效落地的整体解决思路，附动效软件推荐，建议阅读。国际惯例，在开始之前，还是先来聊一聊我们设计中心在人机交互中对于动效的一些经验和想法。

2017/03/08

新手想进阶技能？超酷炫的动感特效轻松get！

UI

新手想进阶技能？超酷炫的动感特效轻松get！

lionisready：新手设计师相较于资深设计师，后者技能更丰富且全面，很多人想要进阶资深却苦于培养新技能，笔者在经手不少视频动效项目后，对于技能进阶颇有心得，特意分享出来。通常技能进阶的方向有如下两种：钻研型，工作需求和自身特长强结合，原特长在工作中日益强大，影响力不断提高；发散型，工作需求和自身特长有较大偏差，但经过努力让自己掌握了新技能，极大增强了职场的适应力和综合能力。两者各有千秋，笔者则是在发散型的艰难道路上一路飞奔后，大量积累了视频剪辑和动效制作的经验，希望给走发散型道路的设计师助一臂...

2017/02/21

动效在UI设计中有哪三个关键用途

UI

动效在UI设计中有哪三个关键用途

随着技术和硬件设备性能的提升，动效已经不再是视觉设计中的奢侈品。动效不仅仅是华丽的动态效果，它首先帮助设计师和用户解决了许多界面功能上的问题，让这用户更容易理解产品，也让设计师更好的表达。动效本身还让整个界面更加活泼，充满生命力，更加自然的相应让就用户和界面之间有了情感的联系。

2017/02/21

想进阶成PPT 高手？得先学会这些高级动画特性！

UI

想进阶成PPT 高手？得先学会这些高级动画特性！

编者按：@魔力大熊老师的第二篇PPT 进阶教程来咯。PPT 中那么多的动效可以选，该用哪个？怎么做出类似苹果发布会那样酷炫的动画过渡效果？

2017/02/20

腾讯超全干货！如何让你的动画更自然？

UI

腾讯超全干货！如何让你的动画更自然？

大熊：本文将从为什么要探究更自然的动画、如何探究运动曲线方程、列举常用的运动曲线、分别使用js和css实现曲线动画效果、可视化实现工具这几个方面进行介绍。希望阅读后，本文能给你在制作动画效果时带来一点帮助。1. 为什么需要探究更自然的动画自css animation推出后，强大的功能使得我们通过css也能制作出媲美flash的动画效果。

2017/02/17

在现代网页设计中，动效有哪些常见的用法？

网页

在现代网页设计中，动效有哪些常见的用法？

令人愉悦的动效几乎已经成为如今网页设计的标准配置了，融入动效的交互细节让现代网页同以往的设计在根本上区别开来。动效不仅可以表现状态，引导用户的关注点，帮助用于预测交互的结果，甚至影响用户的行为。在逐步的探索和发展过程中，动效在网页和APP中的运用方法与技巧已经逐步成熟，形成了一套相对系统的模式。

2017/02/11

优秀网页设计

新人手册！动效设计几乎都是这10个软件做的（内附教程）

神器推荐

新人手册！动效设计几乎都是这10个软件做的（内附教程）

编者按：想学习动效设计？别以为只有复杂的AE 可以做。今天推荐的这10个软件都可以做出酷炫的动效设计，功能上各有优势，但效果丝毫不输AE哟（内附大量教程）。

2017/01/13

设计一个界面动效的时候，我们需要考虑什么？

UI

设计一个界面动效的时候，我们需要考虑什么？

鸿影：坦白来说，虽然我之前在项目里做过一些小动效尝试，但一直没有什么系统的方法和原则指导，大多在原型软件里凭「感觉」随意调调了事，而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研究与实践，对动效设计的价值、原则和实现交付开始有了更多的了解，在本文中浅薄地总结一下。明确价值：动效设计能解决什么问题？

2016/12/26

那个很火的MG 动画，作者出详细教程了（大量干货！）

UI

那个很火的MG 动画，作者出详细教程了（大量干货！）

@Poupo是名设计师：这篇文章写了这支一分钟MG动画的一些技术上思考难点。涉及了表达式，效果器，形状图层，少量插件以及一些可能需要的三维软件。本文偏技术型较强，可能你需要对AE有所接触。

2016/12/13

超实用！移动界面动效设计的全方位科普指南

UI

超实用！移动界面动效设计的全方位科普指南

编者按：读完@顾小犊这篇文章，你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等，特别全面，强烈推荐收藏学习。动效在用户体验设计中正变得越来越重要，那么动效能带来什么好处呢？体现交互层级动态界面使人更容易理解交互层级关系，减轻了人们的认知负担给予反馈给人感觉界面是活的，让体验流畅弥补静态页面的表达不足在内容优先的设计趋势下，用户界面变的更加简洁。

2016/12/13

有门道！UI设计中下拉刷新有什么讲究？

UI

有门道！UI设计中下拉刷新有什么讲究？

最早的下拉刷新设计源自于Tweetie 这款应用的设计，设计师Loren Brichter 是这种令人欲罢不能的交互的缔造者。现在，下拉刷新的交互几乎无处不在，但即便如此也让人无法轻易忽视它带来的快感。从Twitter 到 Gmail，从QQ到新浪微博，它几乎存在于你触手可及的每一个应用当中。

2016/11/01

改善你的UX设计！值得参考的四个动效使用方法

产品

改善你的UX设计！值得参考的四个动效使用方法

@喪心病狂十六夜貓：微交互是明年流行的设计趋势，至于原因，来看这4个用动效完成微交互的设计实例你就懂了。动效可以告诉我们一些故事。例如「现在就让我看看吧。

2016/10/29

5个小技巧，用动效提升界面的用户体验就这么简单

UI

5个小技巧，用动效提升界面的用户体验就这么简单

动效能讲述故事。和图片不同，动效能够呈现变化的过程，讲述一段简短而有趣的故事，能够同你进行对话：“嘿，你该看这个按钮了”或者“哦耶！你刚刚完成了一个操作！

2016/10/01

让动效不止于好看！移动APP的7种动效设计和9条设计原则

UI

让动效不止于好看！移动APP的7种动效设计和9条设计原则

优秀的设计是无形的，一个优秀的动效能你的App变得友好而且抓人眼球，但是绝不会让用户分心。今天分享7个移动App 动效的设计技巧以及9条设计原则，帮你做出美观并实用的动效！UI界面动效设计方法：先看看有意义的动效设计是啥样：《设计师的必备技能！

2016/09/14

1/3

1
2
3
下一页
前往页

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：扫码添加

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营