在日常的設(shè)計(jì)工作中，難免會(huì)遇到一些制作可交互原型的工作?？山换サ脑蛯?duì)比于靜態(tài)原型來(lái)說(shuō)，直觀是最大的優(yōu)點(diǎn)。其次，在研究一些動(dòng)效的時(shí)候，直接調(diào)好參數(shù)給工程師，會(huì)比口述來(lái)得更加簡(jiǎn)單粗暴，效率更好。

前言

通常在項(xiàng)目中，對(duì)于一些交互演示，動(dòng)態(tài)演示會(huì)比口頭描述更具像化。

而移動(dòng)端通常借助Principle來(lái)制作演示效果。

掌握Principle的必要性

1. 簡(jiǎn)單易學(xué)

大概16個(gè)課時(shí)，每個(gè)課時(shí)半個(gè)小時(shí)（包含練習(xí)時(shí)間），大約抽2周的晚上就可以學(xué)完。

教程推薦：BiliBili-靳浩 Principle教程。

2. 提高還原

交互說(shuō)明演示+規(guī)范的動(dòng)效說(shuō)明，交互演示清晰地將用戶交互傳達(dá)給整個(gè)項(xiàng)目團(tuán)隊(duì)，動(dòng)效說(shuō)明則讓開(kāi)發(fā)能夠盡可能地還原交互需求。

3. 推動(dòng)落地

對(duì)于某些用戶交互，演示比口頭表達(dá)更有落地性。

4. 體驗(yàn)順暢

讓用戶體驗(yàn)更具有“舒適感”(用戶交互與反饋出現(xiàn)的時(shí)機(jī)，動(dòng)效反饋時(shí)長(zhǎng)和速率等)。

在一些項(xiàng)目交互演示中，常常會(huì)用到數(shù)字變化和環(huán)形加載，接下來(lái)我將分享如何通過(guò)Principle來(lái)實(shí)現(xiàn)數(shù)字變化和環(huán)形加載。

技巧一、數(shù)字變化

應(yīng)用場(chǎng)景：

1. 頁(yè)面進(jìn)場(chǎng)，數(shù)字變化
2. 數(shù)字響應(yīng)用戶操作變化，比如:主動(dòng)領(lǐng)取獎(jiǎng)勵(lì)金后余額增加

下面介紹兩種數(shù)字變化實(shí)操案例，分別是「數(shù)字遞增」和「數(shù)字滾動(dòng)」。

實(shí)操：數(shù)字遞增

第1步

新建組件，在組件中復(fù)制出幾組數(shù)字，數(shù)字之間創(chuàng)建Auto自動(dòng)動(dòng)畫，此時(shí)預(yù)覽效果是從第1位數(shù)字到最后1位，無(wú)過(guò)渡動(dòng)畫。

第2步

為了讓動(dòng)畫不跳過(guò)中間的數(shù)字變化，可以在每個(gè)數(shù)字面板上復(fù)制一個(gè)相同名稱的矩形b，錯(cuò)開(kāi)奇數(shù)面板和偶數(shù)面板中b的位置，再設(shè)置b每次位移動(dòng)畫的時(shí)長(zhǎng)，比如0.5s。

第3步

b的位移設(shè)置使得數(shù)字的過(guò)渡呈現(xiàn)出來(lái)，可以通過(guò)更改b每次位移動(dòng)畫的時(shí)長(zhǎng)來(lái)控制數(shù)字之間的過(guò)渡時(shí)長(zhǎng)，最后將所有矩形b的透明度改為0。

??動(dòng)畫完成。

實(shí)操：數(shù)字滾動(dòng)

第1步

新建組件，在組件面板1中創(chuàng)建一個(gè)文本，輸入數(shù)字串(比如從0到9)，給面板1創(chuàng)建Auto自動(dòng)動(dòng)畫，生成面板2。

第2步

移動(dòng)面板2中數(shù)字串的位置，然后設(shè)置位移動(dòng)畫的時(shí)長(zhǎng)，比如0.8s。

第3步

將2個(gè)面板都勾上“Clip Sublayers”，只展示顯示在面板上的內(nèi)容。

動(dòng)畫完成。

擴(kuò)展案例

可以嘗試還原以上擴(kuò)展案例。

技巧二、環(huán)形加載

應(yīng)用場(chǎng)景：

1. 圓環(huán)加載，例：正在加載中動(dòng)畫作為頁(yè)面過(guò)渡
2. 圓環(huán)進(jìn)度條，比如表示頁(yè)面數(shù)據(jù)讀取過(guò)程或?qū)徍诉^(guò)程

實(shí)操：加載圓環(huán)「半圈」

第1步

準(zhǔn)備素材，畫2個(gè)圓形成一個(gè)圓環(huán)，準(zhǔn)備2個(gè)直徑和圓環(huán)寬度相等的圓點(diǎn)。（ps：你也可以在Sketch畫好素材后命名為“圓環(huán)”然后導(dǎo)入Principle中，通過(guò)這種方式Principle中的圓環(huán)就是位圖了，不能再修改顏色。如果直接在Principle畫圓環(huán)的畫可以隨意更改顏色。）

第2步

理解原理，參照對(duì)素材進(jìn)行打組、調(diào)整大小、以及命名（名稱帶有旋轉(zhuǎn)的是要設(shè)置旋轉(zhuǎn)的，便于理解）。

第3步

面板1選擇Auto動(dòng)畫，自動(dòng)復(fù)制出面板2，面板2中將“旋轉(zhuǎn)點(diǎn)、旋轉(zhuǎn)環(huán)”設(shè)置為180度，設(shè)置旋轉(zhuǎn)時(shí)長(zhǎng)比如1s，完成圓環(huán)前進(jìn)180度動(dòng)畫。

動(dòng)畫完成。

思考：如何完成加載1圈？

法1：改變加載半圈的起點(diǎn)

通過(guò)上圖可知，我們可以通過(guò)將“半弧形”和“遮罩“圖層范圍的調(diào)整（原來(lái)是右半邊的矩形范圍調(diào)整為左半邊，原來(lái)是左半邊的矩形范圍調(diào)整為右半邊）來(lái)改變加載半圈的起點(diǎn)。

你可以這樣理解：

• 上圖第1種圖層范圍結(jié)構(gòu)是遮住了弧形的右半邊只顯示左半邊（看“半弧形”），限制顯示范圍為右半邊（看“遮罩”），通過(guò)順時(shí)針旋轉(zhuǎn)，讓左半邊弧形在右半邊逐漸顯示，從而達(dá)到0～180度的加載效果
• 同理，上圖第2種圖層范圍結(jié)構(gòu)像“半弧形”和“遮罩”的范圍進(jìn)行了對(duì)調(diào)，即可以讓右半邊弧形在左半邊逐漸顯示，因?yàn)槭琼槙r(shí)針旋轉(zhuǎn)，故達(dá)到180～360度的加載效果

起點(diǎn)：0度、終點(diǎn)：180度

起點(diǎn)：180度、終點(diǎn)：360度

那么，我們將“起點(diǎn)0度、終點(diǎn)180度”和“起點(diǎn)180度、終點(diǎn)360度”組合起來(lái)，前者的旋轉(zhuǎn)完成后，后者開(kāi)始旋轉(zhuǎn)，銜接起來(lái)，就看到一個(gè)完整的旋轉(zhuǎn)360度的動(dòng)畫了。

局限性：若2個(gè)動(dòng)畫的速度（貝塞爾曲線）設(shè)置成非Linear（勻速），那么看起來(lái)像是兩段動(dòng)畫，要都設(shè)置成Linear才行。（因?yàn)?段的速度非Linear的話，中間銜接處的速度也不一樣，造成銜接處有卡頓感，這樣看起來(lái)顯然不是一段連貫的動(dòng)畫了）

實(shí)操演示：加載完成「1圈」-法1（不提供實(shí)操演示，當(dāng)作作業(yè)。）

法2：加載環(huán)形的同時(shí)進(jìn)行旋轉(zhuǎn)

先理解下原理——

將上述視頻中的環(huán)形顏色進(jìn)行統(tǒng)一，從而完成“環(huán)形1圈加載”。

同樣是通過(guò)“2段動(dòng)畫”組合在一起達(dá)到加載1圈的效果，不同的是這2段動(dòng)畫是同時(shí)開(kāi)始與結(jié)束的。2段動(dòng)畫分別是“加載環(huán)形「半圈」的同時(shí)繞中心旋轉(zhuǎn)180度”（簡(jiǎn)稱“加載+旋轉(zhuǎn)”）和“加載環(huán)形「半圈」”（簡(jiǎn)稱“加載”）。

那是否存在同法1一樣的問(wèn)題，速度（貝塞爾曲線）一定都要調(diào)整為L(zhǎng)inear（勻速）呢？我們先看下下段分析——

2段加載動(dòng)畫分別是“加載”和“加載+旋轉(zhuǎn)”動(dòng)畫。將2段動(dòng)畫的起止時(shí)間設(shè)為一致，速度也設(shè)為一致，此時(shí)：

當(dāng)“加載”動(dòng)畫加載x度時(shí)，“加載+旋轉(zhuǎn)”動(dòng)畫也加載了x度，同時(shí)整體也旋轉(zhuǎn)了x度（“加載+旋轉(zhuǎn)”動(dòng)畫的加載是通過(guò)旋轉(zhuǎn)“旋轉(zhuǎn)環(huán)”180度完成，同時(shí)自身再旋轉(zhuǎn)180度，全程旋轉(zhuǎn)角度相同，旋轉(zhuǎn)時(shí)間相同，因此某時(shí)刻旋轉(zhuǎn)的角度也是相同的）。

因此在全程動(dòng)畫的任意時(shí)刻，“加載”動(dòng)畫的環(huán)形實(shí)際上是一直緊貼“加載+旋轉(zhuǎn)”的環(huán)形后面在前進(jìn)的。

故2段動(dòng)畫的速度（貝塞爾曲線）可以隨意自定義（除了Spring），但是要用相同的貝塞爾曲線（這樣才能保證加載和旋轉(zhuǎn)的速度一致，保證加載和旋轉(zhuǎn)的角度相同，從而不會(huì)使2段動(dòng)畫不銜接）。

實(shí)操演示：加載完成「1圈」-法2

前提：先理解「加載完成半圈」動(dòng)畫的原理。

第1步

根據(jù)「加載完成半圈」完成前2步之后，復(fù)制一個(gè)“180”文件，為了便于理解，重新調(diào)整下命名，原“180”命名為“180 加載”（指完成圓環(huán)右半圈的加載），新“180”命名為“180 加載+旋轉(zhuǎn)”（指完成圓環(huán)右半圈的加載的同時(shí)整體再旋轉(zhuǎn)180度）。

（ps：命名其實(shí)也有技巧了，比如我將需要旋轉(zhuǎn)的素材加入了“旋轉(zhuǎn)”字樣，不容易搞混，不對(duì)名稱進(jìn)行一定的標(biāo)記的話很容易忘記哪個(gè)素材是要進(jìn)行旋轉(zhuǎn)操作的）

為了便于區(qū)分，再對(duì)“180 加載+旋轉(zhuǎn)”的組內(nèi)元素進(jìn)行重命名，統(tǒng)一命名為“xxx +”。

第2步

面板1選擇Auto動(dòng)畫，自動(dòng)復(fù)制出面板2，面板2中將“旋轉(zhuǎn)點(diǎn)”設(shè)置為360度，“旋轉(zhuǎn)環(huán)、旋轉(zhuǎn)環(huán) +、180 加載+旋轉(zhuǎn)”設(shè)置為180度，設(shè)置旋轉(zhuǎn)時(shí)長(zhǎng)比如2s，最終完成圓環(huán)前進(jìn)360度動(dòng)畫。

思考：數(shù)字變化和環(huán)形加載的花式玩法

實(shí)操：倒計(jì)時(shí)

動(dòng)畫概述：完成一個(gè)倒計(jì)時(shí)3秒的動(dòng)畫。

第1步

復(fù)制「數(shù)字遞增」動(dòng)畫和「加載1圈」動(dòng)畫。

第2步

將「數(shù)字遞增」動(dòng)畫調(diào)整為「數(shù)字遞減」動(dòng)畫，比如原來(lái)是從數(shù)字0遞增到9，現(xiàn)在設(shè)置為從數(shù)字4遞減到1，每次遞減時(shí)長(zhǎng)為1s，保證總時(shí)長(zhǎng)為3s，然后4到3的透明度調(diào)整為0～100%，避免看到4數(shù)字的出現(xiàn)。

第3步

將「加載1圈」動(dòng)畫總時(shí)長(zhǎng)統(tǒng)一調(diào)整為3s。

動(dòng)畫完成。

實(shí)操：loading動(dòng)畫

動(dòng)畫概述：轉(zhuǎn)圈動(dòng)畫重復(fù)循環(huán)。

第1步

準(zhǔn)備素材3個(gè)“旋轉(zhuǎn)環(huán)”和1個(gè)“背景環(huán)”，并重新命名，具體參看源文件與實(shí)操視頻。

第2步

Auto復(fù)制面板1，在面板2中設(shè)置“旋轉(zhuǎn)環(huán)1”的旋轉(zhuǎn)360度，時(shí)長(zhǎng)1s；設(shè)置“旋轉(zhuǎn)環(huán)2”的旋轉(zhuǎn)360度，時(shí)長(zhǎng)0.9s；設(shè)置“旋轉(zhuǎn)環(huán)3”的旋轉(zhuǎn)360度，時(shí)長(zhǎng)0.8s。（3個(gè)旋轉(zhuǎn)環(huán)的起始時(shí)間是相同的）

第3步

面板2反向Auto指向面板1，并將動(dòng)畫取消（即設(shè)置為“no animation”）。

動(dòng)畫完成。

實(shí)操：進(jìn)度加載+數(shù)字出場(chǎng)

動(dòng)畫概述：實(shí)現(xiàn)數(shù)字滾動(dòng)+環(huán)形加載出場(chǎng)。

第1步

準(zhǔn)備素材（該案例有4個(gè)環(huán)形），并重新命名，具體參看源文件與實(shí)操視頻。

第2步

根據(jù)「數(shù)字滾動(dòng)」動(dòng)畫調(diào)整每位數(shù)字動(dòng)畫開(kāi)始的順序，間隔100ms。比如：十萬(wàn)位上的數(shù)字最先開(kāi)始動(dòng)畫，從數(shù)字5位移到7；間隔100ms后萬(wàn)位上的數(shù)字開(kāi)始動(dòng)畫，從數(shù)字1位移到3；以此類推。

第3步

根據(jù)「環(huán)形加載」動(dòng)畫調(diào)整旋轉(zhuǎn)的角度，分別完成“加載20度”、“加載70度”、“加載240度”和“加載360”的環(huán)形動(dòng)畫。該案例無(wú)實(shí)操演示，當(dāng)作作業(yè)。

你還可以嘗試還原以下案例——

From dribble,by Gleb Kuznetsov

From dribble,by Laura M

From dribble,by Oleg Frolov

From dribble,by Oleg Frolov

From dribble,by Teaya

我的動(dòng)效說(shuō)明文檔

1. 基本結(jié)構(gòu)

文檔結(jié)構(gòu)

清晰簡(jiǎn)明的動(dòng)效說(shuō)明文檔可以讓開(kāi)發(fā)更好地還原效果，動(dòng)效說(shuō)明文檔主要有以下原則：

• 包含”觸發(fā)條件”，比如是通過(guò)點(diǎn)擊、滑動(dòng)等操作還是頁(yè)面進(jìn)出場(chǎng)觸發(fā)
• 包含“對(duì)象”，截圖表明哪部分元素對(duì)應(yīng)的名稱是什么，和下表中的對(duì)象名稱進(jìn)行對(duì)應(yīng)
• 包含“動(dòng)效描述”，有“變化屬性、貝塞爾曲線、持續(xù)的時(shí)長(zhǎng)”，通常我會(huì)在變化持續(xù)時(shí)長(zhǎng)那條直線上表明對(duì)應(yīng)屬性的變化值

如有其他重要內(nèi)容，可以在備注中進(jìn)行說(shuō)明。

屬性顏色對(duì)照

不同的屬性，可以通過(guò)不同的顏色做區(qū)分。

實(shí)操：貝塞爾曲線

常用的速度曲線（貝塞爾曲線）如下：

• Default：速度越來(lái)越快，然后越來(lái)越慢
• Spring：最后有彈跳效果
• Linear：勻速
• Ease in：速度從0開(kāi)始加速
• Ease out：速度慢慢減速到0
• Ease Both：速度從0開(kāi)始加速，然后慢慢減速到0

2. 文檔示例

給一個(gè)文檔示例。

作者：辛小仲；一名正在成長(zhǎng)的交互設(shè)計(jì)師，公眾號(hào)：辛小仲。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議