Mac 交互工具 Principle 使用教程

  • A+
所属分类:mac双系统
摘要

其中还有 ‘ 一键初始 ‘ 与’录制 ‘ 的功能e. 功能区:Drivers:做交互动画的神器,使用方式类似 ‘ 设置关键帧 ‘Animate:主要用它来调整…

最近正在做移动端产品的交互设计,最常用的工具是 Axure,但总觉着不够快捷,有些效果在实现上也是不尽人意。恰巧朋友推荐了一款适用于移动端的 Demo 制作工具,我试用后感觉非常好,学习成本极低,制作效率也大有提升。近期总结了一下,分享给大家~

本次分享主要有以下几点内容:

初识界面

两个关键操作

案例一:滑动

案例二:点击跳转

案例三:跟随动画(抽屉效果)

一.初识界面

Principle 的界面与 Sketch 基本一致,如下图:

Mac 交互工具 Principle 使用教程

a. 属性区:

在这个区域,你可以对选中的图层进行各个属性的调节。如位置、大小、透明度等等

开启软件后,首先要选择你要演示 Demo 的环境,点击 'Size Presets' 即可在弹出的菜单中选择

Mac 交互工具 Principle 使用教程

b. 图层区:

一个 'Artoard' 即一个画布,或者理解为一个页面。画布中的图层按其列表中的上下顺序相互交叠

'Artoard' 可直接复制粘贴,以此来快速实现页面间的跳转效果

Mac 交互工具 Principle 使用教程

c. 主舞台:

绘制或直接导入图片至面板中即可

d. 演示区:

直接在这个区域演示页面效果,并可进行交互预览,其中还有 ' 一键初始 ' 与 ' 录制 ' 的功能

e. 功能区:

Drivers:做交互动画的神器,使用方式类似 ' 设置关键帧 '

Mac 交互工具 Principle 使用教程

Animate:主要用它来调整转场动画的效果

Mac 交互工具 Principle 使用教程

Group:打组工具

Fonward/Backward:调整图层交叠的上下关系

二.两个关键操作

1. 交互怎么实现?

Mac 交互工具 Principle 使用教程

点选可交互控件

在弹出的菜单中,选择你需要的交互方式

按住选项并拖动至要目标页面中(系统会用紫色给予用户反馈)

2. 转场动效怎么设置?

Mac 交互工具 Principle 使用教程

选中你要设置的转场动画

在弹出的列表中,调整其变化的属性(包括大小、位置、透明度等)。若直接点击前面的 ' 绿块 ',即可停止这个属性的效果

点击后面的 'Default' 可转场动画效果(Linear 不推荐,有个小哭脸)

三.案例一

滑动 Principle 画图并不方便,所以我还是配合 Axure 画线框图,之后贴入 Principle。

1. 把 ' 固定图层 ' 导入到 Principle 中,如图中的 title 模块

Mac 交互工具 Principle 使用教程

2. 页面可纵向滑动,那么把 ' 只纵向滑动 ' 的图层单独导入

3. 某些模块也可进行横向滑动,则单独将其导入(如下图,导入了四个部分:固定的 title、纵向一张图、横向两张图)

Mac 交互工具 Principle 使用教程

4. 把 ' 可滑动 ' 图层打组

Mac 交互工具 Principle 使用教程

5. 整组设置 ' 垂直可拖动 '

Mac 交互工具 Principle 使用教程

6. 选中横滑图层,设置 ' 水平可拖动 '

Mac 交互工具 Principle 使用教程

效果链接如下:

http://v.qq.com/page/a/0/z/a01846swc2z.html

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

1. 首先导入一个 ' 菜单 ' 图层,贴在页面上方

Mac 交互工具 Principle 使用教程

2. 复制整个 'Artoard',并把菜单移动到跳转后的位置 (一定要保证移动的图层,在两个 Artoard 中命名一致)

Mac 交互工具 Principle 使用教程

3. 设置动画(做一个透明的矩形作为触控点)

Mac 交互工具 Principle 使用教程

http://v.qq.com/boke/page/m/0/j/m0184jthunj.html

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

1. 导入需要的图层,打组后设置其可横滑

2. 导入 ' 抽屉图层 '(不跟随滑动)

Mac 交互工具 Principle 使用教程

3. 打开 'Drivers',选择 ' 可横滑组 ',在 0 点创建 'X' 的起始关键帧(点 Group 后面的+号)

Mac 交互工具 Principle 使用教程

4. 拖动手柄以移动 ' 可横滑组 ',至抽屉可完整呈现时,创建结束关键帧(再次点击+号)

5. 选中 ' 抽屉图层 ',点选起始关键帧,创建透明度关键帧。并设置起始帧的透明度为 0

Mac 交互工具 Principle 使用教程

6. 同理,移动手柄至 ' 可横滑组 ' 结束帧的位置,设置结束关键帧的透明度为 100%

Mac 交互工具 Principle 使用教程

7. 复制整个 'Artoard',在新的画布中,调整图层至抽屉打开的效果

Mac 交互工具 Principle 使用教程

8. 在前一个画布中,设置 ' 滑动结束 ' 即跳转的交互

Mac 交互工具 Principle 使用教程

http://v.qq.com/boke/page/k/0/a/k0184en72sa.html

以上就是 Principle 中比较常用的一些操作,很好理解也非常容易上手,可以极大提高设计师的工作效率。

另外要注意的是,Principle 比较适合做 ' 大流程 ' 演示,当你要梳理整体的产品架构或操作流程时,可帮助你快速创建交互原型,发现其中问题或不足。若你想做一些精准的动画效果,它则无法满足你的需求,建议使用 Origami 等其他原型制作工具。

UI小助手

扫描二维码加入

1.UI遇到疑难,帮你解答

2.UI交流社群,500设计师互相帮助

3.解答时间AM 9:00-PM 9:00

Mac 交互工具 Principle 使用教程

[声明:本文转自人人都是产品经理,原作者:柴火妞 版权归原作者所有]

Mac 交互工具 Principle 使用教程

 

—投稿或商务合作—

请加微信至uifuns01(请注明合作)

—微信交流群开放—

入群请加管理员审核

请加微信至zhegdc(请注明入群)

avatar

发表评论

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