1、UI动效用什么软件做
动效设计软件有哪些?
看到这里可能你最想要知道的就是哪些软件可以做动效?
目前市面上确实蛮多的,丝路教育小编建议学好一个,够用就好。学多而不精其实就是浪费时间!
1.Adobe After Effects
AE这个软件我想都该知道~火得一塌糊涂,如果我没猜错的话,它目前属于设计师学动效的首选。
它的特点就是强大且牛逼。基本上要的功能都有~UI动效制作其实只是用到了这个软件很小的一部分功能而已~要知道很多美国大片都是通过它来进行后期合成制作的~ 配合PS和AI等自家软件来说,更是得心应手啊~dribbble上炒鸡多的大神都是用这个软件在show哦~毕竟这个软件做demo那是拧〔犇逼的~
但是有些效果程序猿不见得能够帮你实现出来哦~ 因为实际的项目产品受太多的制约啦~木有那么多程序猿会没事给你做动效的!
2.Adobe Photoshop
可能很多人都认为ps只用来作图和处理图像的,并不知道ps可以做gif~然而当AE没有火起来的时候,我们这些老ui设计师们都是用ps做gif,用flash做demo(过去我们只需要做PC桌面的动效)。如果我没记错的话,ps从cs6之后开始进一步加强了动效的模块,现在的版本能够实现很多相对复杂的动效哦~
而笔者喜欢用ps来制作简单的表情动画,逐帧动画用得居多
3.Adobe Flash
Flash可以说是过去的王者,也是由于时代的发展原因,现在基本被淘汰了,这里不多做解释,具体可以百度哦。(据说特别耗费cpu和占用内存,软件里面有都爆卡~不淘汰才怪)现在很多很low的网页游戏还在用这种技术~
4.Pixate
这个软件被大牛Google收购了~然而它被Google收购一年后:Pixate Studio宣布却于10月31号被停止更新了~凄凄惨惨戚戚。简单说下它的优缺点:
Pixate是图层类交互原型软件。优点:可交互,共享性强,和Sketch结合相对高,同时对Google Material Design的支持比较好,有许多MD相关预设。Pixate的缺点是没有时间线,层级管理不是很明确,图层一多就会非常的繁杂。
5.Origami
这个软件可以用一句话来形容:超强大的高难度原型工具。
要是没点代码知识做压惊~~建议远处观望就好~
6.Hype 3
hype 3也算是火了一小段时间的~号称无代码动效神器,像AE一样使用时间轴就做可互动的动画。PC、手机、pad端都可以直接访问(以web的形式),也可以导出视频或者GIF。3.0版还有物理特性和弹性曲线,可以发挥更强大的动画效果。对中国人来讲,它原生支持中文这一点也非常棒!配合sketch效果也是杠杠的·~~
7.Flinto
界面跟Sketch很像,如果会用sketch那么上手很快。能够快速实现各种滚动、转场、点击反馈效果。手机和电脑端的预览都非常的流畅。貌似现在用的人不少。
8.Principle
这个软件的和上面的flinto有点类似~界面和sketch类似,同时配合sketch也是非常方便。它主要是做 2 个页面间过渡专场特效,元素切换,细节动效的工具。优点很明显,效率高,质感好,缺点就是不能做整套原型。
9.CINEMA 4D
说到C4D或者大家第一反应是它是三维软件啊~没错!但是它做起动效来也是帅破天际的。
10.keynote
keynote相当于windows的powerpoint,是个幻灯片软件。但是!或许你并不知道,据说苹果的交互设计师都是用keynote做交互演示的......只要能够熟练掌握这个软件,目前app里的绝大多数动效都是可以做出来的~但是相对复杂一点的动效实现起来就有点不够.......但是已经很屌了好吧~~笔者经常为了省事直接都是用它做个简单demo给程序猿看的。快捷方便啊~要知道时间就是金钱啊!
好啦~由于丝路小编也并不是全部了解目前市面上的动效软件,按照自己的理解基本上一些相对主流的动效制作软件就是上面这些,如有漏或者不对的地方还请见谅~
2、设计师应该了解哪些简单的css3动效
你可以去学习一下 adobe Edge Animate 即使不同代码也无所谓 这个软件和操作flash差不多 主要是做网页的交互和动画的
CSS3 动画属性(Animation)
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-ration 规定动画完成一个周期所花费的秒或毫秒。 3
animation-timing-function 规定动画的速度曲线。 3
animation-delay 规定动画何时开始。 3
animation-iteration-count 规定动画被播放的次数。 3
animation-direction 规定动画是否在下一周期逆向地播放。 3
animation-play-state 规定动画是否正在运行或暂停。 3
animation-fill-mode 规定对象动画时间之外的状态。
2D/3D 转换属性(Transform)
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3
过渡属性(Transition)
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-ration 定义过渡效果花费的时间。 3
transition-timing-function 规定过渡效果的时间曲线。 3
transition-delay 规定过渡效果何时开始。
3、网页制作 HTML中 动态效果的实现
鼠标悬停用a:hover伪类啊,然后a用一个背景图,hover用一个背景图啊.
4、关于制作网页。网页上如何分一个一个的版块?网页是如何制作动态效果?(不是动画)
下雪效果是动画效果。可以用flash或用Dreamweaver的时间轴制作。
标签票老飘去也是用Dreamweaver的时间轴制作的。
一串文字不限次数的从淡到深显示出来一般使用Flash做的动画。
5、制作网页的动态效果,用什么软件最简单啊?
网页中的动画:1复杂些的可以用flash做,存为swf格式,放在Dreamweaver建的网页布局里。
2.简单些的可用photoshop来做,保存为gif格式,给Dreamweaver建的网页用。
3.也可用Dreamweaver直接来做网页中的动态效果。
动态网页指的是交互式的,需要asp,java等语言类软件。
6、在现代网页设计中,动效有哪些常见的用法?
令人愉悦的动效几乎已经成为如今网页设计的标准配置了,融入动效的交互细节让现代网页同以往的设计在根本上区别开来。动效不仅可以表现状态,引导用户的关注点,帮助用于预测交互的结果,甚至影响用户的行为。
在逐步的探索和发展过程中,动效在网页和APP中的运用方法与技巧已经逐步成熟,形成了一套相对系统的模式。今天的文章我们通过一系列实例,来展示一下动效是如何改善整个用户体验的。
加载动效
动效最常用的一个地方就是进度条。加载进度条的加载动效会改变用户对于时间的感知,通过转移注意力的方式让用户等待感降低。
如果你无法将等待的时长缩短,那么尽量令这个过程有趣。
简单的加载动效其实比复杂的更好。额外的东西,比如声音效果就没有存在的必要了。用户在有趣的动效上投注了越多的注意力,就越容易忽略等待的过程。
即使加载时间很短,有趣的动效依然能让这点时间变得好玩。
进度动效
动效还可以用来展示交互或者操作的进度。下面的这个加载进度条就是这类动效的代表:
这个是Aviasales 的进度条。
同样的,你还可以考虑使用进度条来展示多个不同的步骤:
界面框架
界面框架会将界面加载之后的大概样式给展示出来,界面框架会让用户产生内容一瞬间就加载好了的错觉。这种动效可以应用在绝大多数的网页和APP当中,它会明显强化用户的参与感。
视觉反馈
将界面反馈视觉化地呈现给用户是非常实用的.良好的交互设计需要视觉反馈来支撑,传达交互完成后的结果,让交互可用、可见、可预期。网站界面中哪些元素可交互如果是不可知的、交互的结果也不可预期,混乱就不可避免了。周密的交互设计可以帮助用户理解,将这种混乱降到最低。
悬停动效
桌面端交互主要还是借助触控板和鼠标,光标悬停特效很大程度是为这种情况而存在的,同时,它也是最常见的动效之一。
当用户不知道某个控件怎用的时候,会很直觉地将光标移动到上面去,这个时候,悬停特效能够很好的吸引他们的目光。
移动端由于交互方式的差异,几乎没法使用悬停动效。无论是按钮还是输入框,当你点击屏幕的时候就已经触发控件了,只能在随后呈现结果,而无法像悬停动效一样预览。
吸引注意力
被运动的事物所吸引,是人类的生物本能。这也使得动效成为了吸引用户注意力的完美工具。
举个例子,表单输入的用户体验加入动效就有很大的提升空间。比如你可以在用户输入完成或者输入正确之后,给用户一个点头的动效,在输入错误之后左右晃动提供“摇头拒绝”的动效,人性化地传递信息,用户也是很容易理解的。
导航
从设计趋势上来说,越来越多的网站开始选择使用隐藏式的导航菜单,将更多的选项隐藏在汉堡菜单之后。而菜单的打开和关闭中肯定需要动效加持来降低突兀的过渡,如果设计的足够精巧,用户会立刻被吸引住。
下面是Brian Hoff Design 的网站设计,当用户单机圆形箭头按钮的时候,一个超大的菜单会从侧面弹出,弹出过程中不仅有动画,而且整个界面变暗会让用户更加难以忽略菜单的存在。
动效帮助用户将两种不同的状态和界面连接到了一起。
平滑的状态切换
无论是从一个Tab切换到另外一个Tab,还是界面模式的变化,状态切换是UI界面中最常见的情况,动效能够让状态切换平滑无比。在《Smart Transitions In User Experience Design》 这篇文章中, Adrian Zumbrunnen 提供了一个很好的粒子,动效是如何帮助用户理解上下文和状态变化和不同的部分的。
简单对比一下下面的两个案例,就知道生硬的切换和平滑切换之间的差别了。
创意特效
充满创意的特效总能让用户真正难以忘怀,它们的价值在于取悦用户,让人记住。
长滚动页面
不得不说,首屏的设计一直是网页设计的焦点所在,设计师将注意力集中在这个充满价值的区域是有道理的。但是页面余下的部分同样很重要,事实上,有个说法是“正常媒体页面上百分之66%的用户注意力都在首屏之下”,因此结合了动效的长滚动页面同样非常有用。
动效让滚动式的交互充满了趣味。
7、ae做的交互效果怎么在网页中实现
AE做的交互动画只是一个指导,他指导前端人员该实现如何效果的页面!
最终是需要用HTML+CSS+Javascript来实现的。
8、UI设计师怎么做动效
可以在网上找资料和视频进行学习,计算机行业,就是要不断学习、不断成长的哦。
9、ui设计作品集里的动效怎么做的
作品集是设计师对个人能力的证明,作品集足够出彩,才能让心仪企业在茫茫人海中选中你。如何做出出彩的设计作品集呢?
首先,是作品集制作时间的选择;
作品集的最佳准备时间是在项目完结后,秉承设计总结的心态去做设计作品集,才是正确的方向。
绝对不能是在找工作的时候,临时抱佛脚。没时间进行打磨,是很多设计作品集质量不佳的根本原因。如果以找工作为结果导向,设计师更多的会去呈现设计结果,这样完成的并不能称为作品集,而是图片合集。
第二,是作品集的视觉呈现;
很多交互设计师不太注重自己的作品集的视觉呈现,这是错误的,注重视觉呈现对交互设计师而言很重要。好的视觉呈现能够提高整体交互设计案例输出的专业度,也是对你综合能力的体现。
作品集内最好包含 3-4 个完整的项目,页数最好控制在 20 页以内。
第三,作品集就像一篇简化的图片论文,你得有过硬的、出彩的观点;
这个观点可以是图像化,也可以是文字化描述。要写好这篇”论文“,设计师要清楚自身的岗位及价值,如果定位是执行,那么你的作品集,要有强化执行的设计案例以及相关描述。
没有一份作品走天下的道理,除非你覆盖面非常全,包含各类型产品,一般来说面试不同的职位,需要对作品集进行恰当的调整。
通过作品集的细节,包括视觉的推导、交互的思考过程,筛选官会对你的进行评级。
最后,作品集内容的论证的方式必须是经得起推敲的。
设计价值、思维、逻辑等内容不一定要全部在作品集展现,但是你必须自己过一遍,而且要非常有逻辑,清晰有条理,为什么?
因为面试官非常重视这些问题,一定会在面试中问到。
总的来说,作品集的整理,第一得体现和岗位的匹配度,第二要补充那些非核心的设计能力考核要素,这就是整理作品集的核心。