簡介

ProtoPie是一款移動端交互原型設計軟件。 它幫助設計師無需編寫代碼就可以簡單快速地制作出高保真交互原型,還能實時在手機上演示,使原型能夠在更多的場景下被使用。

探索設計解決方案

沒有開發者的幫助仍可以獨自探索豐富的交互效果。

設計交流

復雜的交互理念也可以向團隊輕松說明。

用戶反饋調查

開發前就可以收到用戶反饋。

基本概念

interaction concept model

ProtoPie的概念模型是基于淺顯易懂的交互原理所創建,以此可以替換復雜的編程語言。 自然界物體間的交互是由動作的對象,引起交互發生的觸發動作,受觸發動作影響而產生的反應動作,這三者組成。

ProtoPie就是利用將對象、觸發動作、反應動作組合成交互的原理,制作出一個個完整的交互原型。如上圖所展示的,圖層就是交互對象,點擊圖層的動作就是觸發動作,點擊后圖層發生的變化就是反應動作。

interaction piece table

如同在自然界中有限的元素可以組合出世界萬物一樣,復雜的交互效果也是由有限的觸發動作和反應動作拼接出來的。上表左側是觸發模塊,右側是反應模塊。

為什么選擇ProtoPie

我們選擇了最主要的4個使用ProtoPie的理由:

1. 低學習成本

ProtoPie的操作原理直觀易懂,并具有和其他圖像編輯軟件相似的用戶界面,只要是有過一點使用圖像編輯軟件經驗的朋友,都可以快速掌握ProtoPie。

2. 無代碼

ProtoPie無需用戶編寫任何代碼就可以輕松制作精益原型。擺脫復雜的代碼和函數運算,輕輕松松拼接交互模塊,就可以制作出豐富多樣的交互效果。

3. 多點觸摸手勢&傳感器

ProtoPie支持多點觸摸手勢。因此無論是雙指還是三指,都可以成為你交互原型的一部分。除此以外,智能手機內置的傳感器也可以作為觸發動作被使用。交互不再限于屏幕上的點擊動作,聲音觸發、傾斜觸發、甚至智能設備間的通信等都可以被添加到交互原型中,使原型擴展到更多的服務設計領域。

4. 支持手機演示

ProtoPie支持在真實的手機上演示原型,并且可以向多部手機同時發送。無論是多人會議還是用戶調查,ProtoPie可以使你在多種場景下展現自己的設計。

圖層

ProtoPie上圖層的編輯方法同其他設計工具十分相似。添加矩形、橢圓等矢量圖層后,可以調整其尺寸和位置,因此用戶可以很快上手使用此部分功能。

圖層屬性

位置
屏幕上圖層的橫縱坐標。
大小
圖層的寬度和高度。
旋轉
圖層按順時針方向旋轉的角度。
錨點
圖層的位置、大小、角度等發生變化時的基準點。
圓角
矩形圖層各角的圓弧度。
透明度
圖層的透明度。
填充度
圖層填充色的透明度。
邊框
向圖層添加邊框并調整邊框位置以及顏色
陰影
向圖層添加陰影并調整陰影的顏色以及其它相關值
觸發區域
可以將被點觸的范圍設置為超過圖層本身的大小。
可觸碰低層級圖層
對于觸屏上的觸發動作不做反應,觸發動作會穿透給被遮擋的圖層。
用做遮罩層
矢量圖層獨有的屬性,其他圖層只顯示和遮罩圖層重疊的部分。

SVG圖層

導入基于矢量圖形格式的SVG文件可使圖像實現無損放大/縮小。
將SVG轉換為形狀圖層(Shape layer)后,顏色、邊框、陰影等屬性即可改變。

  • 不支持漸變等由兩個或更多顏色構成的SVG。
  • 如果SVG文件中帶有 ProtoPie尚未支持的屬性,則“轉換為形狀”按鈕有可能被禁用。(當前支持SVG的屬性有path、ellipse、polyline、polygon、rect、circle、line等。)
convert to shaplayer

粘貼SVG代碼

從Sketch、Figma、Adobe XD、Zeplin等工具中復制SVG代碼后粘貼到ProtoPie中也是一種可行的方式。以下是一段SVG代碼的例子。

SVG代碼范例

                    <svg width="175px" height="166px" viewBox="0 0 175 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <polygon id="Star" fill="#2212D4" points="87.5 137.25 33.7176494 165.525055 43.9891644 105.637527 0.478328759 63.224945 60.6088247 54.4874725 87.5 0 114.391175 54.4874725 174.521671 63.224945 131.010836 105.637527 141.282351 165.525055"></polygon>
  </g>
</svg>
                    
convert to shaplayer
convert to shaplayer

視頻圖層

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

自動播放
在原型運行時自動播放一個視頻文件
循環
使播放的視頻文件得以循環播放

Lottie 圖層

使用Lottie將Adobe After Effects文件渲染成JSON屬性文件后可被導入原型。關于Lottie的詳細介紹請參考Lottie官網

自動播放
在原型運行時自動播放一個Lottie文件
循環
使演示的Lottie文件得以循環播放

音頻圖層

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個參數可以自定義彈性曲線。使用可視化調節工具可以在調整參數后預覽動畫效果。

示范

  • 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
Display distance between other layers Option + Hover Alt + Hover
容器層編組 Command + G Ctrl + G
解除容器層編組 Command + Shift + G Ctrl + Shift + G
觸發動作編組 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
哪个软件上能炒白银