简介

ProtoPie是一款移动端交互原型设计软件。 它帮助设计师无需编写代码就可以简单快速地制作出高保真交互原型,还能实时在手机上演示,使原型能够在更多的场景下被使用。

探索设计解决方案

没有开发者的帮助仍可以独自探索丰富的交互效果。

设计交流

复杂的交互理念也可以向团队轻松说明。

用户反馈调查

开发前就可以收到用户反馈。

基本概念

interaction concept model

ProtoPie的概念模型是基于浅显易懂的交互原理所创建,以此可以替换复杂的编程语言。 自然界物体间的交互是由动作的对象,引起交互发生的触发动作,受触发动作影响而产生的反应动作,这三者组成。

ProtoPie就是利用将对象、触发动作、反应动作组合成交互的原理,制作出一个个完整的交互原型。如上图所展示的,图层就是交互对象,点击图层的动作就是触发动作,点击后图层发生的变化就是反应动作。

interaction piece table

如同在自然界中有限的元素可以组合出世界万物一样,复杂的交互效果也是由有限的触发动作和反应动作拼接出来的。上表左侧是触发模块,右侧是反应模块。

为什么选择ProtoPie

我们选择了最主要的4个使用ProtoPie的理由:

1. 低学习成本

ProtoPie的操作原理直观易懂,并具有和其他图像编辑软件相似的用户界面,只要是有过一点使用图像编辑软件经验的朋友,都可以快速掌握ProtoPie。

2. 无代码

ProtoPie无需用户编写任何代码就可以轻松制作精益原型。摆脱复杂的代码和函数运算,轻轻松松拼接交互模块,就可以制作出丰富多样的交互效果。

3. 多点触摸手势&传感器

ProtoPie支持多点触摸手势。因此无论是双指还是三指,都可以成为你交互原型的一部分。除此以外,智能手机内置的传感器也可以作为触发动作被使用。交互不再限于屏幕上的点击动作,声音触发、倾斜触发、甚至智能设备间的通信等都可以被添加到交互原型中,使原型扩展到更多的服务设计领域。

4. 支持手机演示

ProtoPie支持在真实的手机上演示原型,并且可以向多部手机同时发送。无论是多人会议还是用户调查,ProtoPie可以使你在多种场景下展现自己的设计。

图层

ProtoPie上图层的编辑方法同其他设计工具十分相似。添加矩形、椭圆等矢量图层后,可以调整其尺寸和位置,因此用户可以很快上手使用此部分功能。

图层属性

位置
屏幕上图层的横纵坐标。
大小
图层的宽度和高度。
旋转
图层按顺时针方向旋转的角度。
锚点
图层的位置、大小、角度等发生变化时的基准点。
圆角
矩形图层各角的圆弧度。
透明度
图层的透明度。
填充度
图层填充色的透明度。
边框
向图层添加边框并调整边框位置以及颜色
阴影
向图层添加阴影并调整阴影的颜色以及其它相关值
触发区域
可以将被点触的范围设置为超过图层本身的大小。
可触碰低层级图层
对于触屏上的触发动作不做反应,触发动作会穿透给被遮挡的图层。
用做遮罩层
矢量图层独有的属性,其他图层只显示和遮罩图层重叠的部分。

视频图层

ProtoPie支持播放20MB及以下的mp4(H.264)视频文件。

自动播放
在原型运行时自动播放一个视频文件
循环
使播放的视频文件得以循环播放

音频图层

ProtoPie支持播放wav、 mp3以及m4a音频文件

自动播放
在原型运行时自动开始播放一个音频文件
循环
使播放的音频文件得以循环播放

相机图层

相机图层是能调用智能设备上的摄像头的图层。在不支持相机功能的设备中(如Studio的预览窗、网页等)会显示为黑色图层。

自动开启
场景开始时相机自动启动。
相机【前置镜头】
启动手机正面的摄像头。
相机【后置镜头】
启动手机背面的摄像头。

文字图层

用户可以在ProtoPie上直接输入文字。

字体
ProtoPie支持字体设置。选择“系统默认”时,将显示为演示设备的默认字体。
大小
可调节文本大小。
字重
可调节字体粗细。
对齐
可调节字体左、右、上、下对齐。
间距
可调节字行间的距离。

字体缺失

电脑中没有安装PIE中使用的字体时,界面右下端将提示字体缺失。在字体缺失栏中,可以设置代替字体。

Missing font panel

输入图层

可以使用键盘直接输入内容的图层。

文字选项: 默认文本
在输入前,需要在图层中有默认已输入内容时,可以在这里设定。
输入提示
输入图层支持设置输入提示。并且输入提示文字的颜色可以单独设置。
键盘选项:类型
移动端键盘有文本、URL、邮箱、数字、文本密码、数字密码这几种类型。
键盘选项:回车
移动端键盘的回车键可以根据需要设置不同口令:前往、下一个、发送、搜索、完成。开启自动光标消失之后,再点击回车键时,光标会自动对准“输入图层”。
键盘选项:键盘风格
仅对iOS键盘,可以根据设计需要选择浅灰色或石墨色键盘。

响应式设置

响应式设置可以应用到图层上。当图层所属的母层大小被改变时,图层的大小和位置也会根据其响应式设置而自动改变。由反应动作触发的母层大小改变也可以通过响应式设置影响到下面的子层。

  • 左侧为响应式定位设置。即图层的上、下、左、右边距可以分别被设为固定的边距值,这意味着图层可以相对于其母层的四周来决定要维持的位置。
  • 右侧为响应式尺寸设置。即图层的宽度和高度可以分别被设为固定的值,这意味着无论其母层的宽度和高度如何改变,图层本身的大小都不变。

右上角停靠

通过设置固定的宽度值和高度值以及固定的上边距和右边距,蓝色图层与母层右上角的相对位置将保持不变。且此时即使母层的大小被改变,蓝色图层的大小也不会跟着改变。

scroll interaction

居中

通过设置固定的宽度和高度值而不设置四周的边距值,蓝色图层将在母层中保持居中的位置,即使母层大小被改变,蓝色图层也始终居中。

scroll interaction

固定边距

通过设置固定的左右边距值,蓝色图层的大小将在母层大小被改变的同时也相应改变,以维持其左右两边与母层左右两边之间的边距固定不变。

scroll interaction

容器层

容器层可以在多图层编组及管理,以及制作滚页或滑页交互时使用。

相对坐标位

一般情况下,图层的X,Y坐标是以设备左上角为原点进行计算的。但容器层里的图层坐标则换做以容器层左上角为原点进行计算。

Relative Coordinates

切剪子层

勾选属性栏中的‘切剪子层’时,只能看到和容器层相互重叠的部分。

Relative Coordinates

滚页 / 滑页

在容器层属性栏下端,可以设定滚页及滑页的细节。设定好后,只需要把发生滚动或滑动的图层都放到容器层里,就可以完成相应的交互了。

滚页

手指水平或竖直在界面上滑动时,图层跟随手指滑动距离发生移动。

scroll interaction

属性

方向
手指移动的方向
反弹
滑页至顶端时可开关回弹效果。

滑页

手指水平或竖直在界面上滑动时,图层每次移动的距离和容器层同宽或同高。

paging interaction

属性

方向
手指移动的方向
反弹
滑页至顶端时可开关回弹效果。

点击类触发

智能设备上广泛使用的触发方式。有最基本的点击、长按、拖拽等,也有双手指夹捏、旋转等多手指手势。

单击

手指触碰屏幕并马上离开的动作。

tap trigger
单击
移动

触发属性

手指数
同时执行触发动作的手指数, 最多支持5只手指。

双击

手指连续触碰屏幕两次的动作。

doubletap trigger
双击
移动

触发属性

手指数
同时执行触发动作的手指数, 最多支持5只手指。

下击

手指向下点触屏幕的动作。

touchdown trigger
下击
移动

触发属性

手指数
同时执行触发动作的手指数, 最多支持5只手指。

抬起

触摸着屏幕的手指向上离开屏幕的动作。

touchup trigger
抬起
移动

触发属性

手指数
同时执行触发动作的手指数, 最多支持5只手指。

长按

手指向下点击屏幕 保持一段时间后离开的动作。

longpress trigger
长按
移动

触发属性

手指数
同时执行触发动作的手指数, 最多支持5只手指。
按压时长(秒)
手指持续按住屏幕同一位置的时间。

快掷

手指按照在属性栏设置的方向,快速滑动图层,达到一定速度以上时就会触发相应的反应动作。

fling trigger
快掷
大小

触发属性

方向
手指移动的方向

推拉

推拉触发是一种含有成功和失败概念的触发方式。图层被拖动超过一定距离或一定速度时,则认为拖动成功。成功时图层将按照用户指定的距离发生移动,失败时图层回到原来的坐标。

pull trigger
推拉
大小

触发属性

方向
手指移动的方向
距离
图层移动到指定位置的距离。
超过指定位置时
手指滑动超过图层指定停止位置时,对图层的处理方式。
动画效果
图层移动时的加速度变化。

拖拽

手指触摸屏幕的同时滑动的动作。

drag trigger
拖拽
移动

触发属性

手指数
同时执行触发动作的手指数, 最多支持5只手指。

拖拽触发下的反应动作属性

方向
图层移动的方向。
限制
对反应动作的限制。
比率
可用来设定图层被拖拽距离和手指移动距离的比例。比率设置为100时,图层和手指以1:1的比例移动,数值越大,图层移动距离比手指移动距离越大。

夹捏

双手指在屏幕上合拢或分开的动作。

pinch trigger
夹捏
大小

夹捏触发下的反应动作属性

方向
图层移动的方向。
限制
对反应动作的限制。
比率
可用来设定图层被拖拽距离和手指移动距离的比例。比率设置为100时,图层和手指以1:1的比例移动,数值越大,图层移动距离比手指移动距离越大。

旋转

双手指在屏幕上向同一方向旋转的动作。

rotate trigger
旋转
旋转

旋转触发下的反应动作属性

中心点
图层大小或位置等变化时的基准点。

条件性触发

运行原型、接收特定信号ID、图层属性达到特定值等满足特定条件时,可触发交互的发生。

联动

图层属性的变化影响另外一个属性发生变化的动作关系。

chain trigger
拖拽
移动
联动
大小

触发属性

属性
某一图层的指定属性作为基准值影响其他属性的变化。

联动触发下的反应动作属性

对应范围-触发图层 1
输入联动图层的动作范围。
对应范围-反应图层 2
输入被联动图层的动作范围。

范围

‘范围’是指当图层的变化满足某一条件时交互才会被触发的一种逻辑方式。‘范围’和‘联动’的不同之处是,‘联动’是让两个以上的图层持续保持相互影响的关系,是一种连续性交互(continuous interaction);而 ‘范围’是当一个图层的某个属性满足某个指定条件时,指定的交互动作才会发生。

range trigger
拖拽
移动
范围
大小

触发属性

大于等于 1
特定图层的属性值大于或等于某一数值时,发生反应动作。
小于等于 2
特定图层的属性值小于或等于某一数值时,发生反应动作。
之间 3
特定图层的属性值在某两个数值之间时,发生反应动作。
排除 4
特定图层的属性值不在某两个值之间时,发生反应动作。

自动加载

当开始运行原型或跳转到某一场景时会自动被触发的触发动作

onload trigger
自动加载
移动

触发属性

跳转后启动
当跳转反应已经完成后,自动加载将被触发
跳转时启动
当跳转反应发生时,自动加载将被触发
重新加载
当每次跳转到某一场景时,自动加载都将被触发

监听

图层的属性值或者变量发生变化时,就会触发相应的反应动作。

range trigger
拖拽
移动
监听
大小

鼠标类触发

通过电脑上的鼠标触发交互动作。有鼠标悬浮、鼠标移出两种触发方式。

鼠标悬浮

使用鼠标可触发的动作。鼠标停留在目标对象上方时会触发一系列反应动作。

mouse over trigger
鼠标悬浮
大小

鼠标移出

使用鼠标可触发的动作。鼠标离开目标对象上方时会触发一系列反应动作。

mouse out trigger
鼠标移出
大小

键盘类动作

按键

在模拟键盘和移动端键盘上点击指定键时,发生反应动作。

触发属性

键盘
可以使用所有字母、数字键以及Esc、Tab、空格键。
安卓
可以调用安卓的返回键、增加音量、降低音量键。

输入类触发

输入类触发是和输入图层配套使用的触发动作。

光标

光标可以在“输入图层”上显示或消失。

触发属性

光标出现
光标出现在选择的输入图层上。
光标消失
光标在选择的输入图层上消失。

回车

在模拟键盘和移动端键盘上点击回车键时,发生反应动作。

传感触发

将智能设备内部传感器的值和图层反应值相对应后,交互就可以根据传感被触发。

传感触发下的反应动作属性

平滑度
更加流畅地将传感器的值和图层变化值进行匹配。1是没有流畅匹配时普通的效果。23是流畅匹配后的效果,32的流畅度会更高。
对应范围-传感器
可触发交互发生的传感范围值。
对应范围-图层
对应传感器范围值的变化,输入图层变化的属性范围值。

倾斜

根据手机倾斜角度触发设定的反应动作。

tilt trigger
倾斜
移动
tilt image

触发属性

中心轴
旋转时的中心轴。

罗盘

根据手机指向的方向触发图层的变化。

compass trigger
罗盘
旋转
compass niddle

声音

根据声音的大小触发设定的反应动作。

sound trigger
声音
大小

3D Touch

依据点按屏幕的力度不同,图层发生不同的反应。可识别力度的最小值为0,最大值为6.7。

3dtouch trigger
3D Touch
大小

距离

可调用设备内置的距离感应器。根据和距离感应器的距离远近从而触发一系列的反应动作。

Proximity trigger
距离
透明度

触发属性

由远至近
靠近设备时会触发相关反应。
由近至远
远离设备时会触发相关反应。

接收

接收触发使设备间的交互成为可能。接收触发必需同发送反应搭配使用,无法自行调用。当一个具有接收触发的设备接收到来自另一设备通过发送反应所发送的信息时,接收后的交互动作就会被触发。接收设备上所收到的信息应与发送设备上发送的信息一致。
此外,在同一场景中,如需制作让不同的触发方式触发相同的反应效果时,使用“发送”和“接收”可以减少重复步骤的设置。

触发属性

渠道 [Component]
在组件内可以使用发送反应动作来发送消息,并在组件外使用接收触发动作来接收该消息,反之亦然。参见组件获取更多相关信息。
渠道[ProtoPie Studio]
连接上ProtoPie Studio的设备之间可以发送和接收消息。通过使用“发送”及“接收”动作,两个或两个以上的设备间可以进行交互。
渠道[Android Broadcast]
安卓上的App可以与外部硬件设备进行交互,详情请点击此处查看。
渠道[当前场景]
场景内可以收发消息。当不同的触发方式都可以触发相同的反应效果时,使用“发送”和“接收”可以减少重复步骤的设置。
信息
信息指的是被传送的字符串。当接收设备上的接收触发内所设的信息与发送反应中携带的信息一致时,设备间的交互就会发生
赋值给变量
允许在传送信息的同时传送一个值,在接收信息时该值就可以被用于给某一变量赋值。

反应动作

由触发动作引起的反应动作在ProtoPie被称为反应模块。和不同的触发模块组合时,反应模块的属性也会发生变化。 具体如下:

移动

图层位置发生移动。

移动
图层移动到的坐标位。
move response

大小

图层尺寸发生变化。

大小
调整图层大小的宽度高度。(调整容器层大小时,容器层里面图层的大小不会跟随变化。)
缩放比例
按照百分比%调整图层的大小。(调整容器层大小时,容器层里面图层的大小会跟随变化。)
scale response

旋转

图层发生平面旋转。

绝对旋转
绝对值;图层旋转到指定角度。
相对旋转
相对值;图能以当前位置为基准旋转的角度。
方向
图层移动的方向。
rotate response

3D旋转

图层发生3D立体旋转。

绝对旋转
绝对值;图层旋转到指定角度。
相对旋转
相对值;图能以当前位置为基准旋转的角度。
方向
图层移动的方向。
中心点
图层大小或位置等变化时的基准点。
透视深度
图层离屏幕的距离。
3d rotate response

透明度

图层的透明度发生变化。

改变至
图层的透明度发生变化
opacity response

颜色

图层颜色发生变化

改变至
更改图层的填充色
边框
更改图层的边框色
阴影
更改图层的阴影色
color response

阴影

向图层添加阴影并调整阴影的颜色以及其它相关值

阴影
向图层添加阴影并调整阴影的颜色以及其它相关值
shadow response

边框

向图层添加边框并调整边框位置以及颜色

边框
向图层添加边框并调整边框位置以及颜色
border response

圆角

图层圆角度发生变化。

改变至
图层圆角度发生变化
radius response

滚页

长图在水平或竖直方向上滚动。

滚页
滚动图层到指定位置。
scroll response

排序

图层的层级发生变化。

排序
改变图层的排列顺序。
reorder response

转场

从一个场景跳转到另一个场景

场景
要跳转到的某一既定场景
转场效果
当跳转到某一场景时要呈现的切换效果
重置被选场景
当跳转到所设场景时,该场景会被重置。如果未启用此选项,场景将停留在其最后的状态上。
jump response

播放

针对视频图层的交互动作。有播放、暂停、跳至指定时间等功能。

演示
播放视频
暂停
暂停视频
跳至
跳转至指定时间点。以(分钟:秒)的形式输入指定时间点即可。

文本

可使用文本反应动作更改文本属性或内容,且该反应动作没有持续时间这一概念。

改变为
文本内容发生变化。
大小
文字大小发生变化。
字重
文字粗细发生变化。
对齐
文字的上、下、左、右对齐发生变化。
间距
文字的行间距离发生变化。
text response

停止

如进度条等交互一样,动作进行途中可使动作停下来的反应方式。

发送

发送反应使设备间的交互成为可能。发送反应必需同接收触发搭配使用,无法自行调用。当一个具有接收触发的设备接收到来自另一设备通过发送反应所发送的信息时,接收后的交互动作就会被触发。两台设备上所接收发的信息应一致。
此外,在同一场景中,如需制作让不同的触发方式触发相同的反应效果时,使用“发送”和“接收”可以减少重复步骤的设置。

渠道 [Component]
在组件内可以使用发送反应动作来发送消息,并在组件外使用接收触发动作来接收该消息,反之亦然。参见组件获取更多相关信息。
渠道[ProtoPie Studio]
连接上ProtoPie Studio的设备之间可以发送和接收消息。通过使用“发送”及“接收”动作,两个或两个以上的设备间可以进行交互。
渠道[Android Broadcast]
安卓上的App可以与外部硬件设备进行交互,详情请点击此处查看。
渠道[当前场景]
场景内可以收发消息。当不同的触发方式都可以触发相同的反应效果时,使用“发送”和“接收”可以减少重复步骤的设置。
渠道
将ProtoPie Studio设为允许设备间交互的一个渠道。安卓Broading允许安卓设备上的原型与其它外部硬件通讯
信息
信息指的是被传送的字符串。当接收设备上的接收触发器内所设的信息与发送事件反应中携带的信息一致时,设备间的交互就会发生
赋值给变量
允许在传送信息的同时传送一个值,在接收信息时该值就可以被用于给某一变量赋值。

振动

可使用基本的振动及安卓、iOS中所支持的振动反馈(Haptic Feedback)功能。在谷歌的开发者文档及苹果的人机界面指南中可以找到各种振动反馈的说明和例子。

iOS
  • 默认: 基本的振动功能。
  • Notification - Success: 存款或车辆解锁等动作或任务完成时振动。
  • Notification - Warning: 存款或车辆解锁等动作或任务发生警告时振动。
  • Notification - Failure: 存款或车辆解锁等动作或任务失败时振动。
  • Impact - Light/Medium/Heavy: 为补充视觉感受而提供的物理性振动效果。例如某个对象回到原位或两个对象发生冲突时表现出类似“咚”一下的物理性振动效果。
  • Selection - Selection: 选择项发生变更时产生振动。例如使用者滚动滚轮控件时就会产生轻微振动的效果。此振动反馈并不适用于点击选择或点击确认等单次性动作,而是作为持续性滚动动作的相应振动反馈更为合适。
Android
  • 默认: 基本的振动功能。
  • Keyboard Press: 使用者按下虚拟按键或软键盘中的键时产生相应振动。
  • Keyboard Tap: 使用者按下软键盘中的键时产生相应振动。
  • Long Press: 使用者长按某对象期间关联动作完成时产生相应振动。
  • Virtual Key: 使用者在屏幕上按下虚拟按键时产生相应振动。
vibrate response

光标

光标可以在“输入图层”上显示或消失。

光标出现
光标出现在选择的输入图层上。
光标消失
光标在选择的输入图层上消失。
focus response

赋值

变量的值去覆盖一个原有的值。点击这里可以看到使用"变量"和"赋值"触发制作的案例说明。

Link

通过指定URL Schemes的方式来打开网站或app。

URL
可以通过输入网址链接以在浏览器或iOS的app内置浏览器中访问网页,如:
  • e.g. https://protopie.io
  • e.g. https://www.google.com/search?q=protopie
URL Schemes允许在iOS以及安卓设备中打开系统app或第三方app。第三方app通常有其自定义的URL Schemes,如:
  • e.g. mailto:[email protected]
  • e.g. tel:+1-212-555-1234
  • e.g. whatsapp://send?text=[[hello]]
  • e.g. fb://feed
  • e.g. slack://open?team={TEAM_ID}
表达式
可以通过输入表达式使链接反应的应用场景更广泛,如:
  • e.g. "https://www.google.com/search?q=" + `Input 1`.text
  • e.g. “https://www.amazon.com/s/field-keywords=” + `keyword`.text

相机

可操作相机图层的反应动作。

操作[开启]
启动摄像头,可选启动前置或后置摄像头。
操作[捕捉画面]
中止摄像头的运行。
相机[当前镜头]
启动上次所选择的摄像头。
相机[前置镜头]
启动前置摄像头。
相机[后置镜头]
启动后置摄像头。
相机[切换]
启动与上次所选的摄像头方向相反的摄像头。

重置反应动作

重置当前场景、图层或变量回到初始状态。选择场景时可将场景全部重置为初始状态,选择图层时可以快速制作如倒退效果的交互动作。

条件

当触发动作满足预设条件时,指定反应动作发生。‘条件’必需有触发动作的前提下,对该触发动作发生后,在哪种状态下执行哪些反应起到指示性的作用。

大于
特定图层的属性值大于某一数值时,发生反应动作。
大于等于
特定图层的属性值大于或等于某一数值时,发生反应动作。
小于
特定图层的属性值小于某一数值时,发生反应动作。
小于等于
特定图层的属性值小于或等于某一数值时,发生反应动作。
等于
特定图层的属性值等于某一数值时,发生反应动作。
不等于
特定图层的属性值不等于某一数值时,发生反应动作。
condition response

时间线 / 数值线

ProtoPie根据触发动作的种类,将反应动作的范围通过时间线和数值线的方式呈现。时间线及数值线可以直观地把握反应的时长、延迟开始、对应范围。鼠标悬浮在时间轴上时,时间轴可变为被编辑状态,然后通过拖动可以移动时间轴并改变时间轴的长短。

*依附在持续触发下的反应动作,因没有时间和对应值,所以没有时间线和数值线。

时间线

将反应动作的时间、延迟开始、反复更加视觉化的表现出来。制作由多个反应动作构成的微交互时,可以有效提高作业效率。

timeline image

数值线

对触发图层的移动范围和反应图层移动范围进行标记。

valueline image

场景

使用添加场景功能,可以制作包含多个页面的原型。设计复杂的交互效果时,也可以将每个交互细节分别制作在不同的场景上以方便存档。

scene list

转场

使用转场反应可以完成场景间的跳转。既可以使用ios提供的基本转场效果,也可以无任何效果立即完成场景的转换。

录像

在电脑预览窗口可以马上录制交互演示。
录像时间上限是5分钟,储存时将以MP4(H264)格式保存。

scene list

动效曲线

现实中的物体不会发生匀速运动。因此比起匀速人们会觉得缓入、缓出、缓入缓出的移动更加自然,合理利用缓动函数、贝兹曲线以及弹力可以制作出自然而漂亮动作效果。

渐变

普遍使用的加速度预设值。属性栏中可选取缓入、缓出、缓入缓出效果。

渐入

  • easeInSine

  • easeInCubic

  • easeInQuint

  • easeInCirc

  • easeInElastic

  • easeInQuad

  • easeInQuart

  • easeInExpo

  • easeInBack

  • easeInBounce

渐出

  • easeOutSine

  • easeOutCubic

  • easeOutQuint

  • easeOutCirc

  • easeOutElastic

  • easeOutQuad

  • easeOutQuart

  • easeOutExpo

  • easeOutBack

  • easeOutBounce

渐入渐出

  • easeInOutSine

  • easeInOutCubic

  • easeInOutQuint

  • easeInOutCirc

  • easeInOutElastic

  • easeInOutQuad

  • easeInOutQuart

  • easeInOutExpo

  • easeInOutBack

  • easeInOutBounce

贝兹曲线

组合4个数值,可自定义缓和曲线。在此网站可轻松自定义贝兹曲线值。

*计划在ProtoPie Studio内加强贝兹曲线的视觉展现,以便更直观的调整数值。

示范

  • Cubic-bezier
    ( 0.39, 0, 0.23, 1)

  • Cubic-bezier
    ( 0.71, 0.41, 0.32, 0.76)

弹力

弹力曲线可增加更丰富的图层弹跳效果。

*计划在ProtoPie Studio内加强弹力曲线的视觉展现,以便更直观的调整数值。

示范

  • 张力 600, 摩擦 16

  • 张力 250, 摩擦 19

快捷键

程序

功能 macOS Windows
隐藏ProtoPie Command + H -
隐藏其他程序 Command + Option + H -
全屏显示 Command + Control + F -
最小化 Command + M -
打开折叠图层栏 Command + Option + 1 Ctrl + Alt + 1
打开折叠交互栏 Command + Option + 2 Ctrl + Alt + 2
收起打开图层栏和交互栏 Command + Option + 3 Ctrl + Alt + 3
收起打开表达式输入窗 Command + Return Ctrl + Enter
收起打开场景栏 Command + 1 Ctrl + 1
收起打开组件栏 Command + 2 Ctrl + 2

管理原型

功能 macOS Windows
新建 Command + N Ctrl + N
打开 Command + O Ctrl + O
关闭 Command + W Ctrl + W
保存 Command + S Ctrl + S
复制文件 Command + Shift + S Ctrl + Shift + S
上传到云端 Command + U Ctrl + U
重命名 Command + R Ctrl + R
编辑文本图层 Return Enter

插入交互元素

功能 macOS Windows
图像 I I
矩形 R R
圆形 V V
容器层 N N
‘单击’触发模块 T T
‘拖拽’触发模块 D D
‘联动’触发模块 C C
‘移动’反应模块 M M
‘大小’反应模块 S S
‘透明度’反应模块 O O

编辑原型

功能 macOS Windows
撤销 Command + Z Ctrl + Z
还原 Command + Shift + Z Ctrl + Shift + Z
复制 Command + C Ctrl + C
粘贴 Command + V Ctrl + V
同时粘贴图层和交互 Command + Shift + V Ctrl + Shift + V
复制图层 Command + D Ctrl + D
删除 Delete Delete
容器层编组 Command + G Ctrl + G
解除容器层编组 Command + Shift + G Ctrl + Shift + G
折叠 Command + [ Ctrl + [
展开 Command + ] Ctrl + ]
展开所有层级 Option + Click Alt + Click
取消图层自动贴合 Command + Drag Layer Ctrl + Drag Layer
以锚点为中心调整图层大小 Option + Resize Layer Alt + Resize Layer
垂直或水平拖动图层 Shift + Drag Layer Shift + Drag Layer
增加延迟时间 (+0.01s) Right Right
减少延迟时间 (-0.01s) Left Left
增加延迟时间 (+0.1s) Shift + Right Shift + Right
减少延迟时间 (-0.01s) Shift + Left Shift + Left
增长持续时间 (+0.01s) Option + Right Alt + Right
减少持续时间 (-0.01s) Option + Left Alt + Left
增长持续时间 (+0.1s) Shift + Option + Right Shift + Alt + Right
减少持续时间 (-0.1s) Shift + Option + Left Shift + Alt + Left

演示原型

功能 macOS Windows
演示原型 Command + Shift + R Ctrl + Shift + R
预览窗 Command + P Ctrl + P

控制视图

功能 macOS Windows
放大 Command + =,
Z + click
Ctrl + =,
Z + click
缩小 Command + -,
Z + Option + click
Ctrl + -,
Z + Alt + click
还原大小 Command + 0 Ctrl + 0
回归中心视图 Command + 1 Ctrl + 1
平移 空格键 + 鼠标移动 空格键 + 鼠标移动
TOP
球探比分直播