起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識【分分鐘制作Demo】Mac交互工具Principle使用教程
最近正在做移動端產品的交互設計，最常用的工具是Axure，但總覺著不夠快捷，有些效果在實現上也是不盡人意。恰巧朋友推薦了一款適用于移動端的Demo制作工具，我試用后感覺非常好，學習成本極低，制作效率也大有提升。近期總結了一下，分享給大家～
本次分享主要有以下幾點內容：
- 初識界面
- 兩個關鍵操作
- 案例一：滑動
- 案例二：點擊跳轉
- 案例三：跟隨動畫（抽屜效果）
一．初識界面
Principle的界面與Sketch基本一致，如下圖：
a.屬性區：
在這個區域，你可以對選中的圖層進行各個屬性的調節。如位置、大小、透明度等等
開啟軟件后，首先要選擇你要演示Demo的環境，點擊“Size Presets”即可在彈出的菜單中選擇
b.圖層區：
一個“Artoard”即一個畫布，或者理解為一個頁面。畫布中的圖層按其列表中的上下順序相互交疊
“Artoard”可直接復制粘貼，以此來快速實現頁面間的跳轉效果
c.主舞臺：
繪制或直接導入圖片至面板中即可
d.演示區：
直接在這個區域演示頁面效果，并可進行交互預覽，其中還有“一鍵初始”與“錄制”的功能
e.功能區：
Drivers：做交互動畫的神器，使用方式類似“設置關鍵幀”
Animate：主要用它來調整轉場動畫的效果
Group：打組工具
Fonward/Backward：調整圖層交疊的上下關系
二．兩個關鍵操作
1.交互怎么實現？
- 點選可交互控件
- 在彈出的菜單中，選擇你需要的交互方式
- 按住選項并拖動至要目標頁面中（系統會用紫色給予用戶反饋）
2.轉場動效怎么設置？
- 選中你要設置的轉場動畫
- 在彈出的列表中，調整其變化的屬性（包括大小、位置、透明度等）。若直接點擊前面的“綠塊”，即可停止這個屬性的效果
- 點擊后面的“Default”可轉場動畫效果（Linear不推薦，有個小哭臉）
三．案例一
滑動Principle畫圖并不方便，所以我還是配合Axure畫線框圖，之后貼入Principle。
1.把“固定圖層”導入到Principle中，如圖中的title模塊
2.頁面可縱向滑動，那么把“只縱向滑動”的圖層單獨導入
3.某些模塊也可進行橫向滑動，則單獨將其導入（如下圖，導入了四個部分：固定的title、縱向一張圖、橫向兩張圖）
4.把“可滑動”圖層打組
5.整組設置“垂直可拖動”
6.選中橫滑圖層，設置“水平可拖動”
效果鏈接如下：
http://v.qq.com/page/a/0/z/a01846swc2z.html
四．案例二：點擊跳轉（浮卡效果）
1.首先導入一個“菜單”圖層，貼在頁面上方
2.復制整個“Artoard”，并把菜單移動到跳轉后的位置 （一定要保證移動的圖層，在兩個Artoard中命名一致）
3.設置動畫（做一個透明的矩形作為觸控點）
效果鏈接如下：
http://v.qq.com/boke/page/m/0/j/m0184jthunj.html
五．案例三：跟隨動畫（漸變的抽屜）
1.導入需要的圖層，打組后設置其可橫滑
2.導入“抽屜圖層”（不跟隨滑動）
3.打開“Drivers”，選擇“可橫滑組”，在0點創建“X”的起始關鍵幀（點Group后面的＋號）
4.拖動手柄以移動“可橫滑組”，至抽屜可完整呈現時，創建結束關鍵幀（再次點擊＋號）
5.選中“抽屜圖層”，點選起始關鍵幀，創建透明度關鍵幀。并設置起始幀的透明度為0
6.同理，移動手柄至“可橫滑組”結束幀的位置，設置結束關鍵幀的透明度為100％
7.復制整個“Artoard”，在新的畫布中，調整圖層至抽屜打開的效果
8.在前一個畫布中，設置“滑動結束”即跳轉的交互
效果鏈接如下：
http://v.qq.com/boke/page/k/0/a/k0184en72sa.html
以上就是Principle中比較常用的一些操作，很好理解也非常容易上手，可以極大提高設計師的工作效率。
另外要注意的是，Principle比較適合做“大流程”演示，當你要梳理整體的產品架構或操作流程時，可幫助你快速創建交互原型，發現其中問題或不足。若你想做一些精準的動畫效果，它則無法滿足你的需求，建議使用Origami等其他原型制作工具。
作者：柴火妞，來自樂視用戶體驗中心（LeUX）。這是一個專注設計、交互、用戶研究的交流平臺，探索互聯網最前沿UX案例，從實戰出發解讀行業趨勢。微信ID：LetvUX
本文由 @柴火妞 原創發布于人人都是產品經理?，未經許可，禁止轉載。
很好~
這個軟件只能在蘋果設備上使用吧
是的，只能在蘋果系統中使用。