Principle使用教程
本次分享主要有以下几点内容:
1.初识界面2.两个关键操作3.案例一:滑动4.案例二:点击跳转
5.案例三:跟随动画(抽屉效果)
1初识界面Principle的界面与Sketch基本一致,如下图:
a.属性区:
在这个区域,你可以对选中的图层进行各个属性的调节。如位置、大小、透明度等等
开启软件后,首先要选择你要演示Demo的环境,点击“Size Presets”即可在弹出的菜单中选择
b.图层区:
一个“Artoard”即一个画布,或者理解为一个页面。画布中的图层按其列表中的上下顺序相互交叠
“Artoard”可直接复制粘贴,以此来快速实现页面间的跳转效果
c.主舞台:
绘制或直接导入图片至面板中即可
d.演示区:
直接在这个区域演示页面效果,并可进行交互预览,其中还有“一键初始”与“录制”的功能
e.功能区:
Drivers:做交互动画的神器,使用方式类似“设置关键帧”
Animate:主要用它来调整转场动画的效果
Group:打组工具
Fonward/Backward:调整图层交叠的上下关系
2两个关键操作1.交互怎么实现?
a.点选可交互控件b.在弹出的菜单中,选择你需要的交互方式
c.按住选项并拖动至要目标页面中(系统会用紫色给予用户反馈)
2.转场动效怎么设置?
a.选中你要设置的转场动画b.在弹出的列表中,调整其变化的属性(包括大小、位置、透明度等)。若直接点击前面的“绿块”,即可停止这个属性的效果
c.点击后面的“Default”可转场动画效果(Linear不推荐,有个小哭脸)
3案例一:滑动
Principle画图并不方便,所以我还是配合Axure画线框图,之后贴入Principle。
1.把“固定图层”导入到Principle中,如图中的title模块
2.页面可纵向滑动,那么把“只纵向滑动”的图层单独导入
3.某些模块也可进行横向滑动,则单独将其导入(如下图,导入了四个部分:固定的title、纵向一张图、横向两张图)
4.把“可滑动”图层打组
5.整组设置“垂直可拖动”
6.选中横滑图层,设置“水平可拖动”
效果如下:
4案例二:点击跳转(浮卡效果)1.首先导入一个“菜单”图层,贴在页面上方
2.复制整个“Artoard”,并把菜单移动到跳转后的位置 (一定要保证移动的图层,在两个Artoard中命名一致)
3.设置动画(做一个透明的矩形作为触控点)
效果如下:
5案例三:跟随动画(渐变的抽屉)1.导入需要的图层,打组后设置其可横滑2.导入“抽屉图层”(不跟随滑动)
3.打开“Drivers”,选择“可横滑组”,在0点创建“X”的起始关键帧(点Group后面的+号)
4.拖动手柄以移动“可横滑组”,至抽屉可完整呈现时,创建结束关键帧(再次点击+号)
5.选中“抽屉图层”,点选起始关键帧,创建透明度关键帧。并设置起始帧的透明度为0
6.同理,移动手柄至“可横滑组”结束帧的位置,设置结束关键帧的透明度为100%
7.复制整个“Artoard”,在新的画布中,调整图层至抽屉打开的效果
8.在前一个画布中,设置“滑动结束”即跳转的交互
效果如下:
以上就是Principle中比较常用的一些操作,很好理解也非常容易上手,可以极大提高设计师的工作效率。
另外要注意的是,Principle比较适合做“大流程”演示,当你要梳理整体的产品架构或操作流程时,可帮助你快速创建交互原型,发现其中问题或不足。若你想做一些精准的动画效果,它则无法满足你的需求,建议使用Origami等其他原型制作工具。
Principle使用教程相关推荐
- Principle教程:如何制作卡片左右划动动效
Principle for Mac是一款新开发的交互设计软件.相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些.如果您还没有合 ...
- Principle如何制作动效设计?简单易学的Principle动效设计教程
Principle for Mac是一款新开发的交互设计软件.相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些. 如果您还没有 ...
- QIIME 2教程. 32如何写方法和引用Citing(2021.2)
引用QIIME 2 Citing QIIME 2 https://docs.qiime2.org/2021.2/citation/ 请注意,几乎所有QIIME 2插件都实现独立于QIIME 2框架开发 ...
- QIIME 2教程. 32如何写方法和引用Citing(2020.11)
文章目录 引用QIIME 2 引用插件 检索特定于插件的引用 Retrieving plugin-specific citations 使用来源追溯列出引用 Using provenance to l ...
- android透明视频教程,安卓透明教程(Android transparent tutorial).doc
安卓透明教程(Android transparent tutorial) 安卓透明教程(Android transparent tutorial) First, this is the BRO tea ...
- 工业机器人入门实用教程_机器学习实用入门
工业机器人入门实用教程 Following on from my earlier post on Data Science, here I will try to summarize and comp ...
- python一看就很厉害的代码_Python学习教程:怎么写出让人看起来就很舒服的代码?...
Python学习教程:怎么写出让人看起来很优雅舒服的代码?让人眼前一亮! 很多新手在开始学一门新的语言的时候,往往会忽视一些不应该忽视的细节,比如变量命名和函数命名以及注释等一些内容的规范性,久而久之 ...
- jsf教程_JSF教程
jsf教程 Welcome to JSF Tutorial. Java Server Faces (JSF) technology is a front end framework which mak ...
- Spring教程– Spring Core Framework教程
Spring is one of the most widely used Java EE frameworks. I have written a lot on Spring Tutorial an ...
最新文章
- 轻量型「孟子」模型比肩千亿大模型!AI大牛周明率队刷新CLUE新纪录
- build的时候出错,fatal error LNK1103
- 字符设备驱动笔记(一)
- Oracle 11g安装
- idea连接nefu练习数据库
- apache php mysql下载_linux+apache+php+mysql 安装
- oc基础-self关键字的使用
- requests高级用法
- android adb杀死服务,Android app是如何杀掉的
- oracle安装,未找到文件 F:\app\Administrator\product\11.2.0\dbhome_2\owb\external\oc4j_ap
- 对于集成SP3后后不能激活的解释
- STM32库中自定义的数据类型
- Aittit.attilax超级框架 api 规划大全
- java扫雷游戏课程设计素材_练习:仿Windows扫雷游戏
- Java 设置Word文本框中的文字旋转方向
- JAVA里面一加到一百等于多少_从1加到100等于多少 【求和算法汇总】
- 神经元示踪染料RH 237的功能和研究意义
- 数据中心机房温湿度监测
- js截取url问号前面_JS获取URL中问号后面参数值
- android手机震动