Principle如何製作動效設計？簡單易學的Principle動效設計教程

Principle for Mac是一款新開發的互動設計軟體。相比 Pixate 更容易上手，介面類似 Sketch 等做圖軟體，思路有點像用 Keynote 做動畫，更「視覺化」一些。如果您還沒有合適的或者喜歡的互動原型設計軟體，可以考慮一下這一款Principle for Mac！

Principle for Mac(動畫互動設計軟體) v5.14 漢化版

一、背景

1、為何要做動效？做動效的好處！

做動效有以下顯而易見的優勢和使用場景：

【檢測】驗證年頭效果和可行性:“原來我設想的效果行不通/行得通！”

【溝通】說服相關方接納/放棄某方案:“這樣做真的合適/不合適，老闆您請看這個Demo”

【直觀】提供開發/測試同事參考:“我們想要的效果是這樣的”

2、Principle 介紹

Principle  是由 Apple 前設計工程師 Daniel Hooper 開發的動效製作軟體，具有輕便，高效和學習曲線平緩等眾多優點，一面世便廣受設計師好評。

（一款真正由設計師開發，而非工程師開發的設計軟體；讓廣大設計師們感受到了設計同行的好心… 咳，『快速上手做動效』的魅力）

業內比擬：要是說 sketch 是簡潔版的PS，那 Principle 即是簡潔版的AE

3、 為何用 Principle 做動效？

一個字：快

目前市面上已經有種種原型製作軟體和動效製作軟體，AE, Framer.js, Form, Oragami, Flinto等等，從每個軟體的產出作品來看，似乎每一個都能生成種種擬真的原型。

然而，做動效普通具有『耗時』，『方案修改慢』，『開發無法複用』，『分享不方便』等缺點，與當下急迅迭代的望相牴觸。因此除非分外需求，很少設計師會主動做動效。Principle 的出現，改變了這個現狀。

優勢環節詞：快速搭建，sketch 聯動，及時預覽，可互動

二、基本操作

1、初識 Principle

問：『 平時專案都忙不過來，哪有心情和時間重新學一款軟體？』

解：『以 Principle 貼地的學習曲線，完全可以找一個做動效的需求，邊做邊學 』

預設介面裡，Principle 有『主選單』，『元素屬性』，『及時預覽』『圖層』和『操縱區』五個片面。現實操縱中，還會視現實情況開啟底部的『時間軸』皮膚和頂部『傳動器（drivers）』皮膚。

從佈局來看，sketch老槍們應該發現，他的介面和佈局和sketch具有極高的相似度，乃至連快捷鍵都高度重合

（來來來，讓我們 A 一個畫板，R 一個矩形，T 一段文字…）

Principle 支援種種匯入姿勢： 從 Finder 拖拽匯入， sketch 工程檔案匯入，乃至支援『sketch內複製』，『在principle內貼上』的逆天聯動，直接省去了『匯出切圖』的繁瑣過程。

2、多頁動效

Principle 基本道理（敲黑板）：『多頁面+觸發節點』實現動效。

1>『開始頁』：繪製動畫開始前的狀況

2>『結束頁』：繪製動畫結束時的狀況

3>『觸發連線』：透過選中元素附近的“動作”按鈕，選定觸發動畫的操縱，連線開始頁和結束頁。

和flash的補間動畫的概念有一定的相似，在Principle中，畫板（artboard）即是頁面的不同狀況，軟體會識別畫板間元素的差異，生成過場動畫。而設計師要做的，即是畫好這些狀況，並透過觸發效果來連線它們。

注：同一個元素在兩個畫板的圖層命名要相像，軟體才會實現動畫。

一個簡單例子：

 在畫板一預覽窗點選『Layer』，即可看到圖層放大的過程。反向連線道理同上。

除了動效時長和順序外，Timeline視窗還支援運動速度曲線的設定，同時有方便的預置曲線可供選定。要是前端開發GG對實現速度變更的貝塞爾函式有疑問的話，可以嘗試提供緩動函式速查表  並附實現道理，以贊助實現Demo效果。

進一步複雜的效果，則可以由多個開始頁和結束頁，以及他們之間的觸發而逐步連線而成。

3、單頁動效

單頁動效，即在單頁內發生的動效，如頁面可滾動，或元素可拖拽等。需要實現這類動效時，可選中元素，並在左側選定『水平方向』(Horizontal)或『垂直方向』（Vertical）的下拉窗，並選定『靜止/拖拽/滾動/分頁滾動』四種效果的一個。

以下是實戰中最常見的，列表區域可縱向滾動的實現案例。

注：1、需要透過改變資料夾區域來定義滾動區域的大小；2、須要時，可選中 “clip sublayers” 來隱藏滾動區域外的內容

4、傳動動效

傳動動效是基於單頁動效的頁面效果，可初步理解為某『元素』隨著『單頁動效』運動而發生運動。當頁面內有單頁動效時，我們可以透過 傳動器（drivers）來產生傳動動效。

開啟drivers皮膚，拖動傳動針，即可看到『單頁動效』的不同狀況。此時我們可以選中任一元素，增加屬性到環節幀裡，來設定該元素在不同動靜下狀況。

接上一個案例，當實現頁面的滾動效果後，若我們想做一個『滾動指示條』，可以跟隨頁面滾動而進行相應滑動，即可運用到傳動動效。 

5、及時預覽和分享

同步：Principle 有可以及時預覽的 ios 應用，且操縱非常便捷，只需在手機上下載並開啟 Principle，用usb連線mac，電腦中當前開啟的principle專案即登時同步得手機中，且可以及時互動。

分享：除此以外，mac 上儲存的 .prd 工程檔案也能夠透過qq或微信傳送得手機，手機端即可開啟並互動。

錄製：要是僅僅用於展示或分享，Principle支援快捷錄製影片或gif，滿足基本的分享操縱；乃至可以匯出為特地用於在mac上展示的『應用程式』檔案，可在mac 操縱系統內實現可互動的演示。

三、進階知識

1、影片層（Video Layer）的引入

在Principle 1.2 版本中，Daniel 讓軟體支援了『影片』圖層和『音訊』圖層，讓原型的製作增加了更多可能。設計師們可以將原有在AE中實現的動效影片匯入到 Principle工程檔案中，作為其中之一的元素，也增加了principle 效果的想象空間。

該工程專案的是為了實驗彈幕的不同效果。看似包含了很多動效，其實背景為錄製的某直播app的影片，節省了用軟體做動效的時間，也極大地增加了Demo的模擬度（fidelity）。

2、元件（Components）的引入

在Principle 2.0 版本中，原型支援了『元件』的功效，即工程檔案中的一片面動效可以生成『元件』，複用到該工程的其餘地方。對該『元件』的修改，會影響到同一個工程檔案內所有相像的元件。

Sketch老槍們應該又雙叒叕發現了，Principle元件對齊的是sketch 的元件（symbols）功效。有了這個功效，便可以將某些複雜的動效做成元件，複用到工程的其餘地方，乃至備用到未來的專案中。

建立元件的要領很簡單，選中元素後，點選頂部主選單皮膚中的『建立元件』(create component)即可。你將在一個新的 principle 皮膚中編輯元素和效果，並可以隨時透過頂部的『返回上一級』（back to parent）返回。

請無視本案例試驗的偽3D動效，聚焦在宇航員身上。在loading頁面的宇航員和在動效結束頁的宇航員，運用了同一個元件。當對任逐一個進行修改後，另一個宇航員也會進行相應調整。

除此以外，2.0的這次重要晉級，還允許 prd檔案多層巢狀prd檔案，讓『協同設計動效』和積累『動效控制元件庫』成為了可能。 

動效模組化設計：要實現一個較繁瑣的動效專案時，主設計師可以將動效事情拆分給多個設計師實現，在實現後負責整合所有動效。Daniel 在他的component  教學影片  中也對這種事情模式進行了初步的構想。

3、其餘在現實中的一些tips

- 可以設定透明度為1的方塊來作為觸發熱區（透明度為0的元素不可互動）

- 需要設計以本身為軸心的旋轉時，可行使和隱藏物體建組，改變整組的 angle 來實現。

- 希望改變某圖片內容時，可以選中該元素，點選左側的media來更換。Principle會自動識別相似元素，並扣問是否批次更換。

- 設定auto轉場時，若想在頁面內停留一段時間，可設定透明度為0的物體，並在兩個頁面產生位移。透過控制位移的時間，來自定義某頁面停留時間。

- 目前還不能實現跨元件的動效關聯

- 目前還不支援畫曲線的路徑動畫

總結

Principle旨在讓設計師能更輕鬆，高效地設計可互動的介面，從而產出超越靜態介面、可表白一定情感的動靜介面。辯證地來看，做 Demo 快的另一個好處是，你不會過度地眷戀某一個Demo。當你意識到這並不是你想要的結果時，你可以更容易地放下她，去嘗試更好的方案。