简介

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以下且编解码器为H264的MP4视频。

自动播放
运行原型时,视频自动开始播放。
循环
使视频反复播放。

Text Layer

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

大小
可调节文本大小。
字重
可调节字体粗细。
对齐
可调节字体左、右、上、下对齐。
间距
可调节字行间的距离。

容器层

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

相对坐标位

一般情况下,图层的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
快掷
大小

触发属性

方向
手指移动的方向

鼠标悬浮

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

mouse over trigger
鼠标悬浮
大小

鼠标移出

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

mouse out trigger
鼠标移出
大小

持续触发

持续触发的反应动作不具有持续时间。根据触发时手指的移动,发生相应交互反应。

拖拽

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

drag trigger
拖拽
移动

触发属性

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

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

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

夹捏

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

pinch trigger
夹捏
大小

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

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

旋转

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

rotate trigger
旋转
旋转

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

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

传感触发

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

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

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

倾斜

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

tilt trigger
倾斜
移动
tilt image

触发属性

中心轴
旋转时的中心轴。

罗盘

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

compass trigger
罗盘
旋转
compass niddle

声音

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

sound trigger
声音
大小

3D Touch

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

3dtouch trigger
3D Touch
大小

距离

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

Proximity trigger
距离
透明度

触发属性

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

条件性触发

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

联动

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

chain trigger
拖拽
移动
联动
大小

触发属性

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

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

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

范围

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

range trigger
拖拽
移动
范围
大小

触发属性

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

推拉

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

pull trigger
推拉
大小

触发属性

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

自动加载

运行原型或场景转换时,无需其他触发动作就可自动执行反应。

onload trigger
自动加载
移动

接收

‘接收’可实现设备间交互,但不可独立使用,必须和‘发送’反应配套使用。发送反应发送出的信息ID和接收反应里设定的信号ID一致时,便可触发反应动作。

触发属性

频道
选择通信的频道。设定ProtoPie Studio可以完成设备间通讯交互。 Android Broadcasting是用于一个安卓设备上的多个应用间的通讯使用。
信息ID
定义发送的文字序列.‘发送’和‘接收’中定义的各文字序列一致时,将会触发设备间的交互发生。

反应动作

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

移动

图层位置发生移动。

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

大小

图层尺寸发生变化。

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

旋转

图层发生平面旋转。

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

3D旋转

图层发生3D立体旋转。

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

透明度

图层的透明度发生变化。

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

颜色

图层颜色发生变化

改变至
图层颜色发生变化
color response

圆角

图层圆角度发生变化。

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

滚页

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

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

排序

图层的层级发生变化。

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

转场

场景的转换。

转场至
跳转到指定的场景。
转场效果
转场效果。
jump response

播放

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

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

文本

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

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

发送

‘发送’可实现设备间交互,但不可独立使用,必须和‘接收’触发配套使用。接收触发中的信息ID和发送反应里设定的信号ID一致时,便可触发反应动作。

振动

‘可使设备发生振动。

条件

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

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

时间线 / 数值线

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

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

时间线

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

timeline image

数值线

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

valueline image

场景

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

scene list

管理场景

在场景窗口可以调整场景顺序并复制场景。

manage scene modal

转场

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

动效曲线

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

渐变

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

渐入

  • 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

管理原型

功能 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
编辑文本图层 Command + Return Ctrl + 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
删除 Delete Delete
容器层编组 Command + G Ctrl + G
解除容器层编组 Command + Shift + G Ctrl + Shift + G
折叠 Command + [ Ctrl + [
展开 Command + ] Ctrl + ]

演示原型

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

控制视图

功能 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