最近正在做移動(dòng)端產(chǎn)品的交互設(shè)計(jì)，最常用的工具是Axure，但總覺(jué)著不夠快捷，有些效果在實(shí)現(xiàn)上也是不盡人意。恰巧朋友推薦了一款適用于移動(dòng)端的Demo制作工具，我試用后感覺(jué)非常好，學(xué)習(xí)成本極低，制作效率也大有提升。近期總結(jié)了一下，分享給大家～

本次分享主要有以下幾點(diǎn)內(nèi)容：

1. 初識(shí)界面
2. 兩個(gè)關(guān)鍵操作
3. 案例一：滑動(dòng)
4. 案例二：點(diǎn)擊跳轉(zhuǎn)
5. 案例三：跟隨動(dòng)畫(huà)（抽屜效果）

一．初識(shí)界面

Principle的界面與Sketch基本一致，如下圖：

a.屬性區(qū)：

在這個(gè)區(qū)域，你可以對(duì)選中的圖層進(jìn)行各個(gè)屬性的調(diào)節(jié)。如位置、大小、透明度等等

開(kāi)啟軟件后，首先要選擇你要演示Demo的環(huán)境，點(diǎn)擊“Size Presets”即可在彈出的菜單中選擇

b.圖層區(qū)：

一個(gè)“Artoard”即一個(gè)畫(huà)布，或者理解為一個(gè)頁(yè)面。畫(huà)布中的圖層按其列表中的上下順序相互交疊

“Artoard”可直接復(fù)制粘貼，以此來(lái)快速實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)效果

c.主舞臺(tái)：

繪制或直接導(dǎo)入圖片至面板中即可

d.演示區(qū)：

直接在這個(gè)區(qū)域演示頁(yè)面效果，并可進(jìn)行交互預(yù)覽，其中還有“一鍵初始”與“錄制”的功能

e.功能區(qū)：

Drivers：做交互動(dòng)畫(huà)的神器，使用方式類似“設(shè)置關(guān)鍵幀”

Animate：主要用它來(lái)調(diào)整轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的效果

Group：打組工具

Fonward/Backward：調(diào)整圖層交疊的上下關(guān)系

二．兩個(gè)關(guān)鍵操作

1.交互怎么實(shí)現(xiàn)？

1. 點(diǎn)選可交互控件
2. 在彈出的菜單中，選擇你需要的交互方式
3. 按住選項(xiàng)并拖動(dòng)至要目標(biāo)頁(yè)面中（系統(tǒng)會(huì)用紫色給予用戶反饋）

2.轉(zhuǎn)場(chǎng)動(dòng)效怎么設(shè)置？

1. 選中你要設(shè)置的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
2. 在彈出的列表中，調(diào)整其變化的屬性（包括大小、位置、透明度等）。若直接點(diǎn)擊前面的“綠塊”，即可停止這個(gè)屬性的效果
3. 點(diǎn)擊后面的“Default”可轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果（Linear不推薦，有個(gè)小哭臉）

三．案例一

滑動(dòng)Principle畫(huà)圖并不方便，所以我還是配合Axure畫(huà)線框圖，之后貼入Principle。

1.把“固定圖層”導(dǎo)入到Principle中，如圖中的title模塊

2.頁(yè)面可縱向滑動(dòng)，那么把“只縱向滑動(dòng)”的圖層單獨(dú)導(dǎo)入

3.某些模塊也可進(jìn)行橫向滑動(dòng)，則單獨(dú)將其導(dǎo)入（如下圖，導(dǎo)入了四個(gè)部分：固定的title、縱向一張圖、橫向兩張圖）

4.把“可滑動(dòng)”圖層打組

5.整組設(shè)置“垂直可拖動(dòng)”

6.選中橫滑圖層，設(shè)置“水平可拖動(dòng)”

效果鏈接如下：

http://v.qq.com/page/a/0/z/a01846swc2z.html

四．案例二：點(diǎn)擊跳轉(zhuǎn)（浮卡效果）

1.首先導(dǎo)入一個(gè)“菜單”圖層，貼在頁(yè)面上方

2.復(fù)制整個(gè)“Artoard”，并把菜單移動(dòng)到跳轉(zhuǎn)后的位置 （一定要保證移動(dòng)的圖層，在兩個(gè)Artoard中命名一致）

3.設(shè)置動(dòng)畫(huà)（做一個(gè)透明的矩形作為觸控點(diǎn)）

效果鏈接如下：

http://v.qq.com/boke/page/m/0/j/m0184jthunj.html

五．案例三：跟隨動(dòng)畫(huà)（漸變的抽屜）

1.導(dǎo)入需要的圖層，打組后設(shè)置其可橫滑

2.導(dǎo)入“抽屜圖層”（不跟隨滑動(dòng)）

3.打開(kāi)“Drivers”，選擇“可橫滑組”，在0點(diǎn)創(chuàng)建“X”的起始關(guān)鍵幀（點(diǎn)Group后面的＋號(hào)）

4.拖動(dòng)手柄以移動(dòng)“可橫滑組”，至抽屜可完整呈現(xiàn)時(shí)，創(chuàng)建結(jié)束關(guān)鍵幀（再次點(diǎn)擊＋號(hào)）

5.選中“抽屜圖層”，點(diǎn)選起始關(guān)鍵幀，創(chuàng)建透明度關(guān)鍵幀。并設(shè)置起始幀的透明度為0

6.同理，移動(dòng)手柄至“可橫滑組”結(jié)束幀的位置，設(shè)置結(jié)束關(guān)鍵幀的透明度為100％

7.復(fù)制整個(gè)“Artoard”，在新的畫(huà)布中，調(diào)整圖層至抽屜打開(kāi)的效果

8.在前一個(gè)畫(huà)布中，設(shè)置“滑動(dòng)結(jié)束”即跳轉(zhuǎn)的交互

效果鏈接如下：

http://v.qq.com/boke/page/k/0/a/k0184en72sa.html

以上就是Principle中比較常用的一些操作，很好理解也非常容易上手，可以極大提高設(shè)計(jì)師的工作效率。

另外要注意的是，Principle比較適合做“大流程”演示，當(dāng)你要梳理整體的產(chǎn)品架構(gòu)或操作流程時(shí)，可幫助你快速創(chuàng)建交互原型，發(fā)現(xiàn)其中問(wèn)題或不足。若你想做一些精準(zhǔn)的動(dòng)畫(huà)效果，它則無(wú)法滿足你的需求，建議使用Origami等其他原型制作工具。

作者：柴火妞，來(lái)自樂(lè)視用戶體驗(yàn)中心（LeUX）。這是一個(gè)專注設(shè)計(jì)、交互、用戶研究的交流平臺(tái)，探索互聯(lián)網(wǎng)最前沿UX案例，從實(shí)戰(zhàn)出發(fā)解讀行業(yè)趨勢(shì)。微信ID：LetvUX

本文由 @柴火妞 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。