【分分鐘制作Demo】Mac交互工具Principle使用教程

3 評論 38791 瀏覽 379 收藏 9 分鐘

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

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

  1. 初識界面
  2. 兩個關(guān)鍵操作
  3. 案例一:滑動
  4. 案例二:點擊跳轉(zhuǎn)
  5. 案例三:跟隨動畫(抽屜效果)

一.初識界面

Principle的界面與Sketch基本一致,如下圖:

1

a.屬性區(qū):

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

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

1

b.圖層區(qū):

一個“Artoard”即一個畫布,或者理解為一個頁面。畫布中的圖層按其列表中的上下順序相互交疊

“Artoard”可直接復(fù)制粘貼,以此來快速實現(xiàn)頁面間的跳轉(zhuǎn)效果

1

c.主舞臺:

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

d.演示區(qū):

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

e.功能區(qū):

Drivers:做交互動畫的神器,使用方式類似“設(shè)置關(guān)鍵幀”

1

Animate:主要用它來調(diào)整轉(zhuǎn)場動畫的效果

2

Group:打組工具

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

二.兩個關(guān)鍵操作

1.交互怎么實現(xiàn)?

3

  1. 點選可交互控件
  2. 在彈出的菜單中,選擇你需要的交互方式
  3. 按住選項并拖動至要目標頁面中(系統(tǒng)會用紫色給予用戶反饋)

2.轉(zhuǎn)場動效怎么設(shè)置?

4

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

三.案例一

滑動Principle畫圖并不方便,所以我還是配合Axure畫線框圖,之后貼入Principle。

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

5

2.頁面可縱向滑動,那么把“只縱向滑動”的圖層單獨導(dǎo)入

3.某些模塊也可進行橫向滑動,則單獨將其導(dǎo)入(如下圖,導(dǎo)入了四個部分:固定的title、縱向一張圖、橫向兩張圖)

6

4.把“可滑動”圖層打組

7

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

8

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

補

效果鏈接如下:

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

四.案例二:點擊跳轉(zhuǎn)(浮卡效果)

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

11

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

12

3.設(shè)置動畫(做一個透明的矩形作為觸控點)

13

效果鏈接如下:

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

五.案例三:跟隨動畫(漸變的抽屜)

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

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

15

3.打開“Drivers”,選擇“可橫滑組”,在0點創(chuàng)建“X”的起始關(guān)鍵幀(點Group后面的+號)

16

4.拖動手柄以移動“可橫滑組”,至抽屜可完整呈現(xiàn)時,創(chuàng)建結(jié)束關(guān)鍵幀(再次點擊+號)

17

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

18

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

19

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

20

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

21

效果鏈接如下:

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

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

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

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 很好~

    來自上海 回復(fù)
  2. 這個軟件只能在蘋果設(shè)備上使用吧

    來自廣東 回復(fù)
    1. 是的,只能在蘋果系統(tǒng)中使用。

      來自四川 回復(fù)