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

成长值达到300分以上才可以发布哟!~

先看看别人的即刻>

Principle - 一学就会的动效设计

原创文章 分类: 教程 版权:
21274 247 130 8
2016-12-05
0.0
普通推荐

“我们设计师做动效,可是有原则(Principle)的!” 

Image title

在 Principle 面世之初(v1.0.1)便开始接触,因有感于其上手快速和效果精巧,遂运用到工作中。一年来,见证了它的版本迭代(v2.1),各版本新增的特性(视频,组件等)无一不是设计师们呼声极高的功能(见进阶部分)。在此分享一路以来的学习心得,与大家共同探讨。


章节概要: 背景(2min) /  上手(5 min)/  进阶(3 min)


准备工具:Principle for mac v2.1,可自行百度下载。 Windows 死忠请无视...


基础知识:对 Sketch 有一定了解为佳,参考   《ARTS 四步上手设计神器 Sketch》



1.背景


1.1 为什么要做动效?

做动效有以下显而易见的优势和使用场景:


【检测】验证想法效果和可行性:“原来我设想的效果行不通/行得通!”

【沟通】说服相关方采用/放弃某方案:“这样做真的合适/不合适,老板您请看这个Demo”

【直观】提供开发/测试同事参考:“我们想要的效果是这样的”


1.2 Principle 是什么?

Principle  是由 Apple 前设计工程师 Daniel Hooper 开发的动效制作软件,具有轻便,高效和学习曲线平缓等众多优点,一面世便广受设计师好评。

(一款真正由设计师开发,而非工程师开发的设计软件;让广大设计师们感受到了设计同行的善意… 咳,『快速上手做动效』的魅力)


业内比拟:如果说 sketch 是简洁版的PS,那 Principle 就是简洁版的AE


1.3 为什么用 Principle 做动效?


一个字:


目前市面上已经有各种原型制作软件和动效制作软件,AE, Framer.js, Form, Oragami, Flinto等等,从每个软件的产出作品来看,似乎每一个都能生成各种拟真的原型。


然而,做动效一般具有『耗时』,『方案修改慢』,『开发无法复用』,『分享不方便』等缺点,与当下敏捷迭代的观念相抵触。因此除非特殊需求,很少设计师会主动做动效。Principle 的出现,改变了这个现状。


优势关键词:快速搭建,sketch 联动,实时预览,可互动


Image title


2.上手


2.1 初识 Principle

问:『 平时项目都忙不过来,哪有心情和时间从头学一款软件?』

解:『以 Principle 贴地的学习曲线,完全可以找一个做动效的需求,边做边学 』


默认界面里,Principle 有『主菜单』,『元素属性』,『实时预览』『图层』和『操作区』五个部分。实际操作中,还会视实际情况打开底部的『时间轴』面板和顶部『传动器(drivers)』面板。


从布局来看,sketch老枪们应该发现,他的界面和布局和sketch具有极高的相似度,甚至连快捷键都高度重合

(来来来,让我们 A 一个画板,R 一个矩形,T 一段文字…




Principle 支持各种导入姿势: 从 Finder 拖拽导入, sketch 工程文件导入,甚至支持『sketch内复制』,『在principle内粘贴』的逆天联动,直接省去了『导出切图』的繁琐过程。



2.2 多页动效

Principle 基本原理(敲黑板):『多页面+触发节点』实现动效



1、『开始页』:绘制动画开始前的状态

2、『结束页』:绘制动画结束时的状态

3、『触发连接』:通过选中元素旁边的“动作”按钮,选择触发动画的操作,连接开始页和结束页。


和flash的补间动画的概念有一定的相似,在Principle中,画板(artboard)就是页面的不同状态,软件会识别画板间元素的差异,生成过场动画。而设计师要做的,就是画好这些状态,并通过触发效果来连接它们。


注:同一个元素在两个画板的图层命名要相同,软件才会实现动画。


一个简单例子:

Image title

 在画板一预览窗点击『Layer』,即可看到图层放大的过程。反向连接原理同上。

Image title

除了动效时长和顺序外,Timeline窗口还支持运动速度曲线的设置,同时有方便的预置曲线可供选择。如果前端开发GG对实现速度变化的贝塞尔函数有疑问的话,可以尝试提供缓动函数速查表 http://easings.net/zh-cn  并附实现原理,以帮助实现Demo效果。



进一步复杂的效果,则可以由多个开始页和结束页,以及他们之间的触发而逐步连接而成。



2.3 单页动效

单页动效,即在单页内发生的动效,如页面可滚动,或元素可拖拽等。需要实现这类动效时,可选中元素,并在左侧选择『水平方向』(Horizontal)或『垂直方向』(Vertical)的下拉窗,并选择『静止/拖拽/滚动/分页滚动』四种效果的一个。


以下是实战中最常见的,列表区域可纵向滚动的实现案例。

Image title

注:1、需要通过改变文件夹区域来定义滚动区域的大小;2、必要时,可选中 “clip sublayers” 来隐藏滚动区域外的内容


2.4 传动动效

传动动效是基于单页动效的页面效果,可初步理解为某『元素』随着『单页动效』运动而发生运动。当页面内有单页动效时,我们可以通过 传动器(drivers)来产生传动动效。

打开drivers面板,拖动传动针,即可看到『单页动效』的不同状态。此时我们可以选中任一元素,添加属性到关键帧里,来设定该元素在不同动态下状态。


接上一个案例,当完成页面的滚动效果后,若我们想做一个『滚动指示条』,可以跟随页面滚动而进行相应滑动,即可运用到传动动效。 


Image title

2.5 实时预览和分享


同步:Principle 有可以实时预览的 ios 应用,且操作非常便捷,只需在手机上下载并打开 Principle,用usb连接mac,电脑中当前打开的principle项目即立即同步到手机中,且可以实时交互。


分享:除此之外,mac 上保存的 .prd 工程文件也可以通过qq或微信传送到手机,手机端即可打开并交互。


录制:如果仅仅用于展示或分享,Principle支持快捷录制视频或gif,满足基本的分享操作;甚至可以导出为专门用于在mac上展示的『应用程序』文件,可在mac 操作系统内实现可交互的演示。


3. 进阶


3.1 视频层(Video Layer)的引入

在Principle 1.2 版本中,Daniel 让软件支持了『视频』图层和『音频』图层,让原型的制作增加了更多可能。设计师们可以将原有在AE中实现的动效视频导入到 Principle工程文件中,作为其中之一的元素,也增加了principle 效果的想象空间。


Image title


该工程项目的是为了实验弹幕的不同效果。看似包含了很多动效,其实背景为录制的某直播app的视频,节省了用软件做动效的时间,也极大地增加了Demo的仿真度(fidelity)。


3.2 组件(Components)的引入

在Principle 2.0 版本中,原型支持了『组件』的功能,即工程文件中的一部分动效可以生成『组件』,复用到该工程的其他地方。对该『组件』的修改,会影响到同一个工程文件内所有相同的组件。


Sketch老枪们应该又双叒叕发现了,Principle组件对齐的是sketch 的元件(symbols)功能。有了这个功能,便可以将某些复杂的动效做成组件,复用到工程的其他地方,甚至备用到将来的项目中。


建立组件的方法很简单,选中元素后,点击顶部主菜单面板中的『创建组件』(create component)即可。你将在一个新的 principle 面板中编辑元素和效果,并可以随时通过顶部的『返回上一级』(back to parent)返回。


Image title

请无视本案例试验的伪3D动效,聚焦在宇航员身上。在loading页面的宇航员和在动效结束页的宇航员,运用了同一个组件。当对任一一个进行修改后,另一个宇航员也会进行相应调整。


除此之外,2.0的这次重要升级,还允许 prd文件多层嵌套prd文件,让『协同设计动效』和积累『动效控件库』成为了可能。 



动效模块化设计:要实现一个较繁琐的动效项目时,主设计师可以将动效工作拆分给多个设计师完成,在完成后负责整合所有动效。Daniel 在他的component  教学视频  中也对这种工作模式进行了初步的构想。


3.3 其他在实践中的一些tips

- 可以设置透明度为1的方块来作为触发热区(透明度为0的元素不可交互)


- 需要设计以本身为轴心的旋转时,可利用和隐藏物体建组,改变整组的 angle 来实现。


- 希望改变某图片内容时,可以选中该元素,点击左侧的media来更换。Principle会自动识别相似元素,并询问是否批量更换。


- 设置auto转场时,若想在页面内停留一段时间,可设置透明度为0的物体,并在两个页面产生位移。通过控制位移的时间,来自定义某页面停留时间。


- 目前还不能实现跨组件的动效关联


- 目前还不支持画曲线的路径动画



总结

Principle旨在让设计师能更轻松,高效地设计可互动的界面,从而产出超越静态界面、可表达一定情感的动态界面。辩证地来看,做 Demo 快的另一个好处是,你不会过度地眷恋某一个Demo。当你意识到这并不是你想要的结果时,你可以更容易地放下她,去尝试更好的方案。



参考阅读

1、Principle 官方教程,习惯看教程的同学能对 Principle 的基本功能初步上手

http://principleformac.com/tutorial.html


2、爱好者制作的 Principle 中文文档,这份的质量比较高

http://principleux.com/principle-chinese-document/


3、Principle 的推特官号,可以下载爱好者上传的作品来学习(一定要看超萌PolarBear的案例!)

https://twitter.com/principleapp



洛维伦

你不会用,还真是我的错 =)

294粉丝/5关注

助人为乐一鸣惊人首页新秀
ARTS 四步上手设计神器 Sketch【新一代神器 Silver】- 在Sketch里做交互!
0
kokojin

请问如果有手机模型的怎么做啊

精彩!

洛维伦

洛维伦

你不会用,还真是我的错 =)

助人为乐一鸣惊人首页新秀

扫描二维码
去手机端查看海报

洛维伦

TA已经获得3枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了