Principle如何制作动效设计?简单易学的Principle动效设计教程

时间:2023-02-01 11:50:00 

Principle for Mac是一款新开发的交互设计软件。相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些。如果您还没有合适的或者喜欢的交互原型设计软件,可以考虑一下这一款Principle for Mac!


一、背景

1、为何要做动效?做动效的好处!

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

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

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

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

2、Principle 介绍

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

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

业内比拟:要是说 sketch 是简洁版的ps,那 Principle 即是简洁版的AE

3、 为何用 Principle 做动效?

一个字:快

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

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

优势环节词:快速搭建,sketch 联动,及时预览,可互动

Principle如何制作动效设计?简单易学的Principle动效设计教程

二、基本操作

1、初识 Principle

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

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

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

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

2、多页动效

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

1>『开始页』:绘制动画开始前的状况

2>『结束页』:绘制动画结束时的状况

3>『触发连接』:通过选中元素附近的“动作”按钮,选定触发动画的操纵,连接开始页和结束页。

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

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

一个简单例子:

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

3、单页动效

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

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

4、传动动效

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

Principle如何制作动效设计?简单易学的Principle动效设计教程

5、及时预览和分享

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

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

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

三、进阶知识

1、视频层(Video Layer)的引入

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

2、组件(Components)的引入

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

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

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

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

Principle如何制作动效设计?简单易学的Principle动效设计教程

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

3、其余在现实中的一些tips

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

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

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

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

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

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

总结

Principle旨在让设计师能更轻松,高效地设计可互动的界面,从而产出超越静态界面、可表白一定情感的动静界面。辩证地来看,做 Demo 快的另一个好处是,你不会过度地眷恋某一个Demo。当你意识到这并不是你想要的结果时,你可以更容易地放下她,去尝试更好的方案。还有更多详细、实用的功能以及相关软件Principle和其他Mac软件获取,大家快来Macdown.com自行探索一番吧。

标签:Principle破解下载,Principle教程,Principle动效设计
0
投稿

猜你喜欢

  • Win11个别软件乱码怎么解决?Win11个别软件乱码解决方法分享

    2023-09-27 04:55:18
  • 新浪微博怎么取消图片水印?新浪微博关闭图片水印的方法

    2023-11-25 23:19:20
  • 局域网内如何传文件?Win10局域网传文件的方法

    2022-10-06 16:50:12
  • Win7Win键失效了怎么办?Win7Win键失效解决方法

    2023-09-15 20:03:53
  • 键盘失灵按什么键恢复?键盘失灵修复方法

    2023-06-22 06:39:56
  • iOS16.1RC版值得升级吗?iOS16.1RC版升级反馈汇总

    2023-07-12 10:24:17
  • 怎么以只读方式打开excel文档?

    2022-10-29 16:21:47
  • Excel 如何利用INDIRECT函数实现多表数据汇总

    2022-02-18 05:52:41
  • Xbox一直转圈进不去怎么办?Xbox一直转圈无法登录

    2022-06-28 07:52:41
  • win10怎么快速把电脑上的字体变大?

    2023-04-27 09:31:59
  • word中怎么让多张图片并排显示?

    2022-10-15 23:55:58
  • 电脑经常蓝屏怎么办 蓝屏代码大全分享及其常见解决方法

    2023-05-12 05:32:02
  • word历史记录在哪

    2023-02-05 20:18:36
  • WPS文字不可不知的秘密-如何为WPS文档增加页面特效边框

    2023-09-09 01:00:57
  • 迅雷组队加速是什么意思-迅雷组队加速详细介绍

    2022-08-08 10:06:24
  • 双系统或多系统共享 windowsFonts文件夹

    2023-04-25 15:27:37
  • MAC系统iTunes天才新功能的使用技巧

    2022-10-08 17:53:19
  • 需牢记的macOS 最佳SSH命令

    2023-08-05 11:58:48
  • excel2016如何使用中频功能

    2023-09-10 18:18:16
  • UOS系统怎么滚动截图? UOS滚动截图的使用方法

    2023-11-10 06:10:18
  • asp之家 电脑教程 m.aspxhome.com