菜单
优设网uisdc.com
优设网 - UISDC
首页
设计文章
热门频道
网址导航
培训课程
教程与灵感
设计工具
关于我们
联系我们
文章投稿
意见反馈
广告商务
会员
开通优设VIP星球
尊享13项VIP特权
持续新增
主题打卡挑战
21天带练!告别无效练习
接私单赚外块
VIP优先接,累计金额超百万
优设私房课免费学
价值178元热销课程
你的私人律师
每月可免费咨询30次
开通VIP
领取更多设计师实用特权
投稿
搜索
您还未登录
登录后即可体验更多功能
立即登录
文章收藏
资源下载
提问答疑
我要投稿
转场动效 话题
首页
设计文章
转场动效
竞品分析
收录37篇文章
sketch插件
收录44篇文章
2018设计趋势
收录37篇文章
数据可视化
收录38篇文章
无线端设计
收录42篇文章
1 / 3
到第
Go
页
UI
4.6w
为你揭秘 Google的动效设计师是怎么制作 UI 动效的
我在上一篇文章已经通过实际的案例,分享了动效设计并不难的原因。在今天的文章当中,我会分享我们自己的工作流程、技巧和设计的方法。
2019-03-19
陈子木
AE
UI
3.7w
动效设计没那么难!让谷歌动效设计师带你入门
编者按:UI中动效设计本没有那么玄乎,作为 Google 旗下 Material Design 团队中动效设计的负责人之一,Jonas Naimark 对于动效本身有着更为透彻的认知,这也促成了今天的这篇文章。动效不难,想入门很简单!动效让UI更加富有表现力更加易用,这是不争的事实。
2019-03-18
陈子木
AE动效
UI
2.4w
基础科普!最常见的四种移动端功能性动效全面总结
功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味,本文就来谈谈这四种功能性动效在移动端的使用。一、功能性动效的定义定义:功能性动效是一种嵌入 UI 设计中微妙的动画,有着明确、合理的目标。功能性动效的主要类型:页面空间转换;视觉信息反馈;功能操作引导;品牌与趣味。
2018-09-29
程远
AE动效
UI
6.2w
终极指南!超全面的UI动效基本规则总结
动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更加清晰。动效对于产品和用户而言,都是一个不可多得的重要组成部分。
2018-09-07
陈子木
动效设计
UI
2.2w
这些小小的改变,能够让UI动效更上一层楼
UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的。动效呈现出状态切换的过程,展现了元素之间的逻辑关系,并且吸引用户的注意力,引导他们执行有效的交互。在设计动效的过程中, Material Motion 的设计原则,IBM 动画设计规则和 UX动效宣言都是不错的设计参考和指引。
2018-05-11
陈子木
UI动效
UI
1.7w
看似花哨的UI概念动效,并不只是为了耍酷而存在
在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用,什么样的动效更优秀等等,这样的探讨层出不穷。在 UI 所涉及到的各种动画和动效当中,概念动效是被讨论的最多的话题。
2018-04-13
陈子木
UI动效
教程
1.6w
经常被忽略的动效,对于用户体验设计是如此重要
动画效果是用户体验设计中绕不开的环节,而在移动端交互当中,动效是作为转场的润滑剂,承上启下的重要环节而存在。无论是发送信息,打开设置,选中元素,导航到下一个页面,这些变化发生的时候,动效让这一切不那么突兀,自然地过渡,呈现状态变化,帮助用户更清晰的明白当前的状态,这是绝佳的方式。在今天的文章当中,我们尽可能系统地呈现动画和动效在视觉和交互上的常见功能和作用。
2018-03-28
陈子木
ui设计
UI
2.3w
7个实用技巧,让你的动效变得更优秀!
本篇文章不长,但是干货满满,希望能给大家带来一些实际帮助。下面进入译文。提高 UI 动效的实用建议让我们一起看看 UI 动画从好到优秀的一些例子。
2018-03-13
程远
动效
前端开发
6.1w
前端福利!10个免费好用功能强大的网页动画效果库
动效设计是2018年的热门趋势之一。当然,创造动效并没有必要从0开始,有大把的设计项目可以供你快速上手,纳入到设计项目当中去。如果你仔细找找的话,会发现许多有趣的用来构建UI动效的工具,而这些素材和工具正在成为越来越多设计项目中不可或缺的催化剂。
2018-01-24
陈子木
web前端开发
教程
1.7w
这四个动效小趋势,让你可以把网页设计得更加圆融
随着交互设计重要性的提升,动效也越来越被设计师所重视。它不仅仅是取悦用户的工具,而且被视作为改善用户体验的重要手段。从为界面营造氛围的微小动效,到用来沟通用户的视觉线索,动效解决方案越来越全面。
2017-11-17
陈子木
动效设计
酷站推荐
2.7w
网页滚动特效要怎么设计?来看看这12个网站
动效在如今的网站上已经无处不在了,尽管它们很常见,但是这些动效用的是否合适,是否真正创造了足够优秀的用户体验,还鲜有讨论。今天我要聊的“滚动浏览动效”是网页设计中最常见,也是最有用的一种动效。虽然滚动浏览动效并不一定适用与每个网站,但是使用这一动效的网站通常有着更加有趣和优雅的体验。
2017-08-25
陈子木
优秀网页设计
教程
1.6w
这5个牢不可破的设计规则,是你打造优秀动效的标准
转场动效在UI界面中所起到的作用无疑是显著的。相比于静态的界面,动态的转场动效更符合人类的自然认知体系,有效地降低了用户的认知负载,屏幕上元素的变化过程,前后界面的变化逻辑,以及层次结构之间的变化关系,都在动效的加持之下,变得更加清晰自然。从这个角度上来说,动效不仅是界面的重要支持元素,也是用户交互的基础。
2017-07-20
陈子木
动效设计
产品
1.7w
沿着这7个思路,你可以正确的使用动效取悦用户
当我们在探讨产品设计细节的时候,会频繁地提及“愉悦”这个词。必须承认,愉悦的体验,是优秀产品中所潜藏的魔法。在设计时候,如何构建出愉悦的体验,也是需要努力实现的核心要点。
2017-04-12
陈子木
App设计
交互
3.4w
超全面干货!如何制作符合场景的交互动效?
@野子Joey :动效如今被广泛的使用在界面设计中。但如何合理使用实效,而不是让动效干扰用户,却少有总结的经验。因此本文旨在结合现有的动效资源和案例,总结一下动效的使用目的,使用场景以及实现技术。
2017-03-20
程远
动效
UI
2.6w
这些悬浮动效的常见玩法你都知道吗?
动效是如今UI设计中的重要组成部分,也是目前最热门的设计趋势之一。在之前的《在现代网页设计中,动效有哪些常见的用法》这篇文章中,我们探讨了动效对于交互和用户的重要意义,动效在不同的环节发挥的作用越越来越大。而今天我们要聊的是光标悬停特效,这也是近年动效设计的热点之一。
2017-03-17
陈子木
ui设计
UI
1.2w
在这些实例中,学会用动效赋予你APP生命力
如果重新审视10年前的网页和移动端应用的话,你会发现动效和动画在这个时期简直是犯规一般的存在:浏览器和硬件设备吃不消,它们根本无法成为设计最佳实践。十年前你所能看到的动画和动效,通常是使用Flash实现,或者短暂的存在于弹出框和闪烁的按钮特效中。但是情况在最近的几年出现了巨大的转变,iOS和Android 设备的大规模普及,移动端芯片的性能提升,让设计师在移动端APP上实现多样的动画和动效,成为了可能,而今天,动画和动效已经成为了如今UI和UX设计当中,最重要的组成部分之一。
2017-03-13
陈子木
App设计
UI
2.1w
为什么你的动效特别酷炫,但一直不能落地?(附解决思路)
编者按:今年很多设计师开始玩动效,不过想让你的动效设计落地,远不是会AE 就能解决的。本文总结了让动效落地的整体解决思路,附动效软件推荐,建议阅读。国际惯例,在开始之前,还是先来聊一聊我们设计中心在人机交互中对于动效的一些经验和想法。
2017-03-08
程远
动效设计
UI
1.5w
新手想进阶技能?超酷炫的动感特效轻松get!
lionisready:新手设计师相较于资深设计师,后者技能更丰富且全面,很多人想要进阶资深却苦于培养新技能,笔者在经手不少视频动效项目后,对于技能进阶颇有心得,特意分享出来。通常技能进阶的方向有如下两种:钻研型,工作需求和自身特长强结合,原特长在工作中日益强大,影响力不断提高;发散型,工作需求和自身特长有较大偏差,但经过努力让自己掌握了新技能,极大增强了职场的适应力和综合能力。两者各有千秋,笔者则是在发散型的艰难道路上一路飞奔后,大量积累了视频剪辑和动效制作的经验,希望给走发散型道路的设计师助一臂...
2017-02-21
程远
动效
UI
1.6w
动效在UI设计中有哪三个关键用途
随着技术和硬件设备性能的提升,动效已经不再是视觉设计中的奢侈品。动效不仅仅是华丽的动态效果,它首先帮助设计师和用户解决了许多界面功能上的问题,让这用户更容易理解产品,也让设计师更好的表达。动效本身还让整个界面更加活泼,充满生命力,更加自然的相应让就用户和界面之间有了情感的联系。
2017-02-21
陈子木
ui设计
UI
5.7w
想进阶成PPT 高手?得先学会这些高级动画特性!
编者按:@魔力大熊 老师的第二篇PPT 进阶教程来咯。PPT 中那么多的动效可以选,该用哪个?怎么做出类似苹果发布会那样酷炫的动画过渡效果?
2017-02-20
程远
ppt教程
UI
1.9w
腾讯超全干货!如何让你的动画更自然?
大熊:本文将从为什么要探究更自然的动画、如何探究运动曲线方程、列举常用的运动曲线、分别使用js和css实现曲线动画效果、可视化实现工具这几个方面进行介绍。希望阅读后,本文能给你在制作动画效果时带来一点帮助。1. 为什么需要探究更自然的动画自css animation推出后,强大的功能使得我们通过css也能制作出媲美flash的动画效果。
2017-02-17
程远
动效
网页
3.1w
在现代网页设计中,动效有哪些常见的用法?
令人愉悦的动效几乎已经成为如今网页设计的标准配置了,融入动效的交互细节让现代网页同以往的设计在根本上区别开来。动效不仅可以表现状态,引导用户的关注点,帮助用于预测交互的结果,甚至影响用户的行为。在逐步的探索和发展过程中,动效在网页和APP中的运用方法与技巧已经逐步成熟,形成了一套相对系统的模式。
2017-02-11
陈子木
优秀网页设计
神器推荐
22.9w
新人手册!动效设计几乎都是这10个软件做的(内附教程)
编者按:想学习动效设计?别以为只有复杂的AE 可以做。今天推荐的这10个软件都可以做出酷炫的动效设计,功能上各有优势,但效果丝毫不输AE哟(内附大量教程)。
2017-01-13
程远
动效
UI
1.5w
设计一个界面动效的时候,我们需要考虑什么?
鸿影:坦白来说,虽然我之前在项目里做过一些小动效尝试,但一直没有什么系统的方法和原则指导,大多在原型软件里凭「感觉」随意调调了事,而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研究与实践,对动效设计的价值、原则和实现交付开始有了更多的了解,在本文中浅薄地总结一下。明确价值:动效设计能解决什么问题?
2016-12-26
程远
动效设计
UI
21.5w
那个很火的MG 动画,作者出详细教程了(大量干货!)
@Poupo是名设计师 :这篇文章写了这支一分钟MG动画的一些技术上思考难点。涉及了表达式,效果器,形状图层,少量插件以及一些可能需要的三维软件。本文偏技术型较强,可能你需要对AE有所接触。
2016-12-13
程远
MG动效
UI
1.9w
超实用!移动界面动效设计的全方位科普指南
编者按:读完@顾小犊 这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。动效在用户体验设计中正变得越来越重要,那么动效能带来什么好处呢?体现交互层级动态界面使人更容易理解交互层级关系,减轻了人们的认知负担给予反馈给人感觉界面是活的,让体验流畅弥补静态页面的表达不足在内容优先的设计趋势下,用户界面变的更加简洁。
2016-12-13
程远
UI设计指南
UI
2.0w
有门道!UI设计中下拉刷新有什么讲究?
最早的下拉刷新设计源自于Tweetie 这款应用的设计,设计师Loren Brichter 是这种令人欲罢不能的交互的缔造者。现在,下拉刷新的交互几乎无处不在,但即便如此也让人无法轻易忽视它带来的快感。从Twitter 到 Gmail,从QQ到新浪微博,它几乎存在于你触手可及的每一个应用当中。
2016-11-01
陈子木
ui设计
产品
1.8w
改善你的UX设计!值得参考的四个动效使用方法
@喪心病狂十六夜貓 :微交互是明年流行的设计趋势,至于原因,来看这4个用动效完成微交互的设计实例你就懂了。动效可以告诉我们一些故事。例如「现在就让我看看吧。
2016-10-29
程远
动效设计
UI
1.9w
5个小技巧,用动效提升界面的用户体验就这么简单
动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!
2016-10-01
陈子木
ui设计
UI
2.5w
让动效不止于好看!移动APP的7种动效设计和9条设计原则
优秀的设计是无形的,一个优秀的动效能你的App变得友好而且抓人眼球,但是绝不会让用户分心。今天分享7个移动App 动效的设计技巧以及9条设计原则,帮你做出美观并实用的动效!UI界面动效设计方法:先看看有意义的动效设计是啥样:《设计师的必备技能!
2016-09-14
程远
动效设计
1/3
1
2
3
下一页
前往
Go
页
大家都在看
神器下载
文章 129
立即查看
职场规划
文章 366
立即查看
设计师职场
文章 710
立即查看
UI
文章 145
立即查看
用户体验设计
文章 305
立即查看
设计师专访
文章 148
立即查看
PS教程
文章 774
立即查看
设计规范
文章 199
立即查看
配色
文章 157
立即查看
优设读报
2022年06月30日 星期四
01
《外太空的莫扎特》发布了一组 IMAX 手绘海报,由黄海操刀设计
02
网易云音乐发布首款音乐社交 APP,通过音乐认识好友
03
知乎推出「学习」专区,上线免费正版职业教育课程
04
微软将终止支持 Windows 8.1
05
即日起取消通信行程卡「星号」标记
查看全部
免费图库
高质量的免费可商用图片都在这儿了!
查看专题
专题
已有296.7w位观众
已收录
34
篇持续更新
有图的都交给我!新生代图片素材管理神器Inboard
89054 人阅读
超方便神器Bridge!设计师的终极图像管理术
94642 人阅读
细节
在「丁香医生」的刷新文案里学习健康小常识
移动端页面通过执行下拉手势进行刷新的操作已成为多数用户习以为常的交互手势,而下拉页面时顶部的空白空间也被越来越多的融入各种有趣的互动小细节。在「丁香医生」App的主页每次进行下拉手势刷新信息时,顶部空间都会出现不同的健康小常识提示文案,比如「久坐容易引发静脉血栓」「手脚冰凉不是病」等等。结合产品的特性在手势交互中融入情感化的设计,丰富了互动的趣味性,也为产品设计增添了人情味。
2021-04-20
AmberDu小白
丁香医生
设计问答
全部问答
上班摸鱼,工作看不到出路怎么办?
4.4k 设计师围观了该问题
好朋友总是喜欢和我抱怨,说自己觉得上班很无聊偷着摸鱼,但是又会抱怨自己公司找不到好的,工作看不到出路。我一方面想让她停止负能量的产生和输出,一方面也想帮她。我该怎么帮她?
我来回答
优设琅琊榜
查看全部
3.3w
1/9
吴尧:在自己的奇幻作品里天马行空
吴尧
上新了故宫特邀设计师
设计神器
全部神器
体验鹿班前,先来这6个人工智能网站感受 AI 黑科技!
神器推荐
发现一个宝藏背景素材网站,五种风格!颜值超在线!
神器推荐
移动工具箱!为设计师精心打造的14款进阶移动端应用
神器推荐
挑战 Figma 地位?一站式设计神器 Pixso 宣布个人永久免费!
神器推荐
课程
爆款课程!零基础C4D实战就业班
涨薪指数
技能点 · C4D
涨薪必备
名师亲授
课程
如何快速创作火爆全网的手绘作品?
涨薪指数
技能点 · 手绘插画
私单涨薪
必备技能
课程
插画学到什么程度,才够接私单赚钱?
涨薪指数
技能点 · 手绘插画
接单涨薪
快速入门
课程
为什么阿里和OPPO超爱这类插画风格?
涨薪指数
技能点 · 手绘插画
高效实战
百万人气
求职招聘
发布职位
交互设计师
北京
本科及以上
3-5年
25k-50k
优设微博内容运营/设计 主编
武汉
本科及以上
3-5年
8k-10k
漫画插画师
武汉
学历不限
1-3年
6k-8k
查看全部
行业新闻
发布行业新闻
设计赋能,共绘未来!2022 海南国际设计岛海口专场推介会成功召开
活动赛事
无科技,不广汽!“科技奔现”2022广汽科技日举行
活动赛事
超越流行的独特设计概念,艾戈勒上线名为“燃系列”的火山主题手表
新品推荐
查看全部
热门频道
设计专题
热门设计知识精挑细选
查看专题
细节猎人
1分钟小短文揣摩设计真谛
查看猎人
优设读报
行业资讯一站知晓
查看读报
优设琅琊榜
顶尖设计作品聚集地
查看榜单
行业新闻
行业大事小事全知道
查看新闻
设计问答
高手大咖在线答疑解惑
查看话题