植根于内心的修养;无需提醒的自觉;以约束为前提的自由;为别人着想的善良
QQ:784637546

Principle

                              

Principle是前 Apple 工程师打造的一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台。此外 Principle 还支持多种尺寸的原型设计,包括 Apple Watch。

Principle 是一款新开发的交互设计软件。相比 Pixate 更容易上手,界面类似 Sketch,思路有点像用 Keynote 做动画,更「可视化」一些。

Principle 演示 视频连接    

http://v.youku.com/v_show/id_XMTMxMzU1NjUxMg==.html 

Principle 官网   

http://principleformac.com

Principle 实用文档

http://principleformac.com/docs.html

http://principleux.com/principle-chinese-document/ 中文文档

Principle 的五个基础教程

http://principleformac.com/tutorial.html#scrolling-tabs

SketchTV 在Youtube上录制的 高保真的视频教程,有几个复杂的项目跟着做,可以帮助理解一些复杂的动画实现原理 好像半个月更新一次



下面是翻译一个设计师的文章

现在已经5个月了,自从丹尼尔Hooper达到我介绍他的新软件。他给了我一个很棒的机会成为betatester早期版本的原则。

我一直在寻找一个好的动画和交互方式与我的设计很长一段时间。

我使用后的效果

非常耗费时间,没有交互友好和非常不真实。我过去花很多时间工作缓和曲线完美的平滑的动画开发人员从来没有能够繁殖。

我试着Pixate Atomic.io

但从未真正进入它的UI并不是很熟悉。这需要一些练习和时间(我没有)来理解它是如何工作的。所以我把它和浪费30天试验…

我从来没有进入Framer.js

我不是一个编码器。在我看来,如果你的代码来创建一个原型,你不妨学习真正的语言和备用一些时间来您的开发人员。(我在这里夸大,我知道筹划者有巨大的好处,但仍然)。

Origami 要学的东西太多

  很多设计师都发现它很棒,我认可,它看起来非常有效和强大,还有一个巨大的社区在分享他们的经验。但是要记住各种Patch的功能这种方式对我来说太不熟悉了。所以我还是搞不定。


Proto.io 因为没有预览窗口而导致放弃

  这是一个非常强大的工具,也有一些很有趣的特点。但当你每次都必须先保存并重新加载原型才能看到它的运行效果的时候,简直太扫兴了。   


是因为懒于尝试和学习新的软件吗?   

  我很喜欢可视化和快速的工作环境。基本上说,在不同的软件之间跳转切换实在是工作效率的杀手。尤其是当这些软件之间不共享相同的概念、名称、用户界面以及快捷键的时候。(没错,Adobe,就是在说你,在AE里按“T”键为什么不是对应的文本工具呢?)

  因此,我不想每5分钟就不得不转换一次思维模式。(译注:对此译者也是深有同感,如果能在一个软件中一站式解决所有设计需求,效率上肯定会高很多)


【 我叫他圣杯的原则 : Principle 】

  这个软件很聪明的结合了Sketch、Keynote、Flash以及After Effect等软件的优点(再加上一些专门做交互原型的额外功能)。

  最让我印象深刻的是第一次使用时,就立即感觉很熟悉。如果你也很熟悉Sketch,可以发现Principle里面有:

·  检查器面板(Inspector)

·  图层列表(Layer list)

·  画板(ARTBOARDS) (!)


【 案例示范 】

第一步 :创建(导入)你的素材



第二步: 选择一个素材及其交互设置项


上图中,选中了蓝色矩形,并且选择了“点击”交互设置


第三步 : 这个交互设置复制了一份画板,你可以调整其中任意素材。


第四步:软件自动创建了其中的渐变动画,然后就可以开始通过预览窗口试玩这个动效了。


创建一个复杂的渐变效果,竟然如此不可思议的快速和简单。


在原型设计的工作流中加入画板有什么好处?

  我曾经在阅读时学到一个理念:像一个编舞者一样设计界面上的动效。画布就是舞台,而各种素材就是其间的舞者。

  当从一个场景渐变过渡到另一个场景时,用户界面上的每个元素的动效都需要有意义。

  使用画板这里真的是最好的,因为你可以看到每个应用程序的状态,每个屏幕一眼,UI将如何反应。

  引入画板的好处包括:可以看到App的每一个状态,每一个场景以及UI元素是如何反馈的。


【主要功能特性】

轻松地创建从一个场景到另一个场景的渐变效果,对我来说,这就是我要的核心功能。

除此以外,Principle还有很多强大的功能可以帮助把原型设计更上一层楼。


 交互动作设置(Interaction)

此软件专注于设计触摸屏应用程序。因此可以设置以下各种交互动作:


·  点击(Tap)

·  拖拽(Drag)

·  滚屏(Scroll)

·  自动创建渐变动效(Auto animation)

·  长按(Long press)


动效设置面板(Animation Panel)

 “每个动画效果的共性是什么?  他们强烈建议永远不要创建线性的动画效果,因为不符合现实世界的心理预期。”

  再次强调,Principle很强大。默认情况下每个动画效果都应用了一个 ease-in(缓动渐快) / ease-out(缓动渐慢) 效果,并且可以方便地切换为其他预定义的或自定义的效果。  


此外,此面板还允许您更改一个动画的持续时间、选择执行顺序,以及创建有意义的渐变效果。


动效面板在软件的底部,可以在这里控制所有的动画效果(和AE很像,但要高效10倍)。


以下是在之前的动效上设置了其他不同动效的效果图:


驱动器面板(Driver panel)

我花了一些时间来完全理解这个功能。一旦你掌握了,你会惊异于你能在原型中实现的效果。

驱动器主要是用于创建滚动或拖动事件,并“链接”不同的素材,或在某个项目上添加几个属性。

比方说,你希望当拖动一个素材时显示一个叠加层,或者希望当滑屏时旋转一个素材。

这些都可以通过驱动器实现。以下是案例示范:


第一步:准备素材


紫色矩形放置在画板以外,当拖动它时,一个叠加层将逐渐显示出来。


第二步: 打开软件顶部的驱动器面板,然后选中目前设为透明的叠加层矩形


第三步:在驱动器面板的对应图层中添加不透明关键帧,这样的话,紫色矩形被越往下拉,叠加层显示的颜色就越深。


这个功能需要多加练习,一旦你掌握了......(译注:原作者真是好爱用点点点,留潜台词)



作者还说了些别的 我就省略了 

推荐了一些动效文章 可以自学

作者为 Benjamin Berger 原文地址

https://medium.com/swlh/principle-the-prototyping-tool-you-got-to-try-93ab743fe4ae#.z63s6hvn4


其中有些地方来自站酷的shunz  知乎的 盗盗  


评论 ( 3 )
热度 ( 20 )
  1. 韩晶晶叁山德久 转载了此文字

© 叁山德久 | Powered by LOFTER