移动端Demo制作工具 Mac Principle使用教程

2020-06-2811:22:12交互设计Comments3,349 views字数 1507阅读模式

一.初识界面

Principle的界面与Sketch基本一致,如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

a.属性区:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

在这个区域,你可以对选中的图层进行各个属性的调节。如位置、大小、透明度等等文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

开启软件后,首先要选择你要演示Demo的环境,点击“Size Presets”即可在弹出的菜单中选择文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

b.图层区:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

一个“Artoard”即一个画布,或者理解为一个页面。画布中的图层按其列表中的上下顺序相互交叠文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

“Artoard”可直接复制粘贴,以此来快速实现页面间的跳转效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

c.主舞台:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

绘制或直接导入图片至面板中即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

d.演示区:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

直接在这个区域演示页面效果,并可进行交互预览,其中还有“一键初始”与“录制”的功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

e.功能区:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

Drivers:做交互动画的神器,使用方式类似“设置关键帧”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

Animate:主要用它来调整转场动画的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

Group:打组工具文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

Fonward/Backward:调整图层交叠的上下关系文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

二.两个关键操作

1.交互怎么实现?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

  1. 点选可交互控件
  2. 在弹出的菜单中,选择你需要的交互方式
  3. 按住选项并拖动至要目标页面中(系统会用紫色给予用户反馈)

2.转场动效怎么设置?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

  1. 选中你要设置的转场动画
  2. 在弹出的列表中,调整其变化的属性(包括大小、位置、透明度等)。若直接点击前面的“绿块”,即可停止这个属性的效果
  3. 点击后面的“Default”可转场动画效果(Linear不推荐,有个小哭脸)

三.案例一

滑动Principle画图并不方便,所以我还是配合Axure画线框图,之后贴入Principle。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

1.把“固定图层”导入到Principle中,如图中的title模块文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

2.页面可纵向滑动,那么把“只纵向滑动”的图层单独导入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

3.某些模块也可进行横向滑动,则单独将其导入(如下图,导入了四个部分:固定的title、纵向一张图、横向两张图)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

4.把“可滑动”图层打组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

5.整组设置“垂直可拖动”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

6.选中横滑图层,设置“水平可拖动”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

效果链接如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

http://v.qq.com/page/a/0/z/a01846swc2z.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

四.案例二:点击跳转(浮卡效果)

1.首先导入一个“菜单”图层,贴在页面上方文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

2.复制整个“Artoard”,并把菜单移动到跳转后的位置 (一定要保证移动的图层,在两个Artoard中命名一致)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

3.设置动画(做一个透明的矩形作为触控点)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

效果链接如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

http://v.qq.com/boke/page/m/0/j/m0184jthunj.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

五.案例三:跟随动画(渐变的抽屉)

1.导入需要的图层,打组后设置其可横滑文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

2.导入“抽屉图层”(不跟随滑动)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

3.打开“Drivers”,选择“可横滑组”,在0点创建“X”的起始关键帧(点Group后面的+号)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

4.拖动手柄以移动“可横滑组”,至抽屉可完整呈现时,创建结束关键帧(再次点击+号)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

5.选中“抽屉图层”,点选起始关键帧,创建透明度关键帧。并设置起始帧的透明度为0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

6.同理,移动手柄至“可横滑组”结束帧的位置,设置结束关键帧的透明度为100%文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

7.复制整个“Artoard”,在新的画布中,调整图层至抽屉打开的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

8.在前一个画布中,设置“滑动结束”即跳转的交互文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

移动端Demo制作工具 Mac Principle使用教程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

效果链接如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

http://v.qq.com/boke/page/k/0/a/k0184en72sa.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

以上就是Principle中比较常用的一些操作,很好理解也非常容易上手,可以极大提高设计师的工作效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

另外要注意的是,Principle比较适合做“大流程”演示,当你要梳理整体的产品架构或操作流程时,可帮助你快速创建交互原型,发现其中问题或不足。若你想做一些精准的动画效果,它则无法满足你的需求,建议使用Origami等其他原型制作工具。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

作者:柴火妞文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19541.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/jiaohu/19541.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定