一、前言：

指向性動(dòng)效能夠有效的描述物體之間的邏輯關(guān)系

同時(shí)通過(guò)視覺(jué)效果，可視化的描述物體當(dāng)前運(yùn)動(dòng)狀態(tài)。

通常，指向性動(dòng)效能夠讓用戶清晰的感受到物體與物體的位置關(guān)系，以及信息的層級(jí)架構(gòu)。

二、指向性動(dòng)效的分類：

1.滑動(dòng)

適用場(chǎng)合：當(dāng)用戶需要導(dǎo)航以列表方式呈現(xiàn)的信息時(shí)

運(yùn)動(dòng)描述：信息列表會(huì)跟隨用戶的滑動(dòng)交互手勢(shì)而移動(dòng)。物體會(huì)自動(dòng)移動(dòng)到適當(dāng)?shù)奈恢?，保持整齊感

一致性：屬于指向性轉(zhuǎn)場(chǎng)動(dòng)效，物體的滑動(dòng)取決于用戶滑動(dòng)手勢(shì)的指向

優(yōu)點(diǎn)：通過(guò)指向性轉(zhuǎn)場(chǎng)，有效的幫助用戶理清物體的排列狀況

用戶感受：像是在捋一條長(zhǎng)長(zhǎng)的綢帶

案例：

看點(diǎn)：

1.動(dòng)畫(huà)前半部分的滑動(dòng)附上了彈性，加深了物理感。

2.后半部分注意左右list 和calendar散開(kāi)一剎那時(shí)，輕微的放大，打造了一種鏡頭感

3.最后堆疊、展開(kāi)效果

2.彈出

適用場(chǎng)合：當(dāng)用戶與單一物體交互時(shí)

運(yùn)動(dòng)描述：物體會(huì)從縮略圖轉(zhuǎn)化為全屏視圖（一般物體的中心點(diǎn)也會(huì)同時(shí)移動(dòng)到屏幕中央）

一致性：反向動(dòng)效是對(duì)象從全屏視圖轉(zhuǎn)換為縮略圖

優(yōu)點(diǎn)：能夠清楚的告訴用戶，是哪個(gè)物體被放大了

用戶感受：物體在放大

案例：

看點(diǎn)：底部標(biāo)簽欄圖標(biāo)按三個(gè)方向上移消失，下方彈出一個(gè)X圖標(biāo)，與此同時(shí)彈出3個(gè)小圖標(biāo)。

3.最小化

適用場(chǎng)合：當(dāng)用戶想要最小化某個(gè)物體時(shí)

運(yùn)動(dòng)描述：物體縮小，同時(shí)移動(dòng)到屏幕上的相應(yīng)位置

一致性：相反的動(dòng)效就是擴(kuò)大，從縮略圖重新變?yōu)槿?/p>

優(yōu)點(diǎn)：能夠清楚的告訴用戶，最小化的物體可以在哪里被找到。

用戶感受：物體在縮小

案例：

其實(shí)放大/縮小最杰出的典范大概就是iOS7的打開(kāi)應(yīng)用程序/退回主屏幕了，這個(gè)也不錯(cuò)

這個(gè)動(dòng)效，即作為啟動(dòng)屏,一定程度上緩解了用戶焦慮，同時(shí)又是Logo，提升了品牌效應(yīng)，最后應(yīng)用啟動(dòng)后的縮小，能夠很好地聯(lián)系上下文，讓用戶不致感到突兀。

4切換對(duì)象

適用場(chǎng)合：當(dāng)用戶在對(duì)象之間切換時(shí)

運(yùn)動(dòng)描述：當(dāng)前物體移動(dòng)到后面，新的物體(應(yīng)用)移動(dòng)到前面

一致性：

優(yōu)點(diǎn)：能夠解釋清楚物體/應(yīng)用程序之間進(jìn)行了切換

用戶感受：原物體縮回，新物體出現(xiàn)

案例：

現(xiàn)在可能不太流程這種幅度太大的動(dòng)效，因?yàn)榭赡軙?huì)導(dǎo)致用戶感到突兀

5.展開(kāi)堆疊

適用場(chǎng)合：當(dāng)用戶打開(kāi)一沓物體時(shí)

運(yùn)動(dòng)描述：堆疊的一堆物體被展開(kāi)

一致性：將一群物體堆疊

優(yōu)點(diǎn)：能夠清楚的告訴用戶，物體的排列情況

用戶感受：物體似乎擴(kuò)展開(kāi)來(lái)了

6.翻頁(yè)

適用場(chǎng)合：當(dāng)用戶翻頁(yè)時(shí)

運(yùn)動(dòng)描述：當(dāng)用戶實(shí)施滑動(dòng)手勢(shì)時(shí)，出現(xiàn)生活中翻頁(yè)一般的效果

一致性：指向性動(dòng)效，翻頁(yè)的指向取決于手指滑動(dòng)的指向

優(yōu)點(diǎn)：這種動(dòng)效轉(zhuǎn)場(chǎng)能夠清晰的展現(xiàn)列表信息的信息架構(gòu)

用戶感受：似乎感覺(jué)和真實(shí)生活中的翻頁(yè)差不多

案例：

Flipboard和Paper是翻頁(yè)風(fēng)的代表，不過(guò)Steller也不錯(cuò)，（300k，圖像質(zhì)量壓縮的比較過(guò)）

7.添加到列表

適用場(chǎng)合：當(dāng)用戶需要將物體添加到已存列表中時(shí)

運(yùn)動(dòng)描述：新物體會(huì)滑動(dòng)到列表中，而列表中得舊內(nèi)容會(huì)被擠走（是主動(dòng)讓位還是被擠走，效果可以自行嘗試），從而騰出空間

一致性：相反的轉(zhuǎn)場(chǎng)動(dòng)效是刪除列表中得物體

優(yōu)點(diǎn)：這種轉(zhuǎn)場(chǎng)效果能夠清楚的展現(xiàn)列表的重新排列過(guò)程，讓用戶知道舊信息到哪兒去了，新信息在哪里

用戶感受：舊列表似乎再給新物體騰出空間

案例：

這個(gè)動(dòng)畫(huà)速度比較快，實(shí)際上下了Task的童鞋可以看到，是通過(guò)折疊把上面的列表向上“推”給新項(xiàng)目騰出空間。

8.固定標(biāo)簽

適用場(chǎng)合：當(dāng)用戶滾動(dòng)帶有標(biāo)簽的列表時(shí)（常見(jiàn)的頭部固定，可參考iOS7的電話簿列表）

運(yùn)動(dòng)描述：標(biāo)簽會(huì)始終保持在列表的頂部，兼顧了導(dǎo)航和內(nèi)容瀏覽

一致性：

優(yōu)點(diǎn)：這種動(dòng)效能夠清晰的描述出內(nèi)容與標(biāo)簽之間的關(guān)系

用戶感受：標(biāo)簽始終保持在列表的頂部

案例：

導(dǎo)航欄，現(xiàn)在不流行死板的固定不動(dòng)，而是下滑手勢(shì)出現(xiàn)，上滑手勢(shì)消失，增大可讀區(qū)域。

9.橫豎屏切換

適用場(chǎng)合：當(dāng)內(nèi)容需要根據(jù)設(shè)備的旋轉(zhuǎn)來(lái)旋轉(zhuǎn)、重新排列時(shí)

運(yùn)動(dòng)描述：內(nèi)容伴隨屏幕的旋轉(zhuǎn)而旋轉(zhuǎn)，與設(shè)備旋轉(zhuǎn)指向一致。

一致性：內(nèi)容的旋轉(zhuǎn)取決于設(shè)備的旋轉(zhuǎn)

優(yōu)點(diǎn)：能夠在設(shè)備旋轉(zhuǎn)的同時(shí)，平滑的保證內(nèi)容的過(guò)渡

用戶感受：內(nèi)容好像是液態(tài)的，伴隨屏幕旋轉(zhuǎn)

10.按鈕標(biāo)簽轉(zhuǎn)換

適用場(chǎng)合：同一層級(jí)之間的導(dǎo)航

運(yùn)動(dòng)描述：根據(jù)內(nèi)容的轉(zhuǎn)換，按鈕相應(yīng)地在視覺(jué)上轉(zhuǎn)換為標(biāo)簽

一致性：標(biāo)題隨內(nèi)容移動(dòng)、改變

優(yōu)點(diǎn)：能夠清晰的展示標(biāo)簽和內(nèi)容之間的從屬關(guān)系，讓用戶理解架構(gòu)

用戶感受：按鈕轉(zhuǎn)換為標(biāo)簽

Flickr for iOS細(xì)節(jié)之一（稍后我們會(huì)放出《Flickr for iOS的20處交互細(xì)節(jié)》）

11.分合

適用場(chǎng)合：當(dāng)用戶分離 結(jié)合物體時(shí)

運(yùn)動(dòng)描述：物體會(huì)根據(jù)用戶的交互行為而分離/結(jié)合

一致性：分離與結(jié)合

優(yōu)點(diǎn)：能夠讓用戶清晰的感受到物體之間分合關(guān)系

用戶感受：分離和結(jié)合

12.滾動(dòng)

適用場(chǎng)合：當(dāng)用戶水平或垂直的移動(dòng)物體時(shí)

運(yùn)動(dòng)描述：根據(jù)用戶手勢(shì)指向滾動(dòng)

一致性：

優(yōu)點(diǎn)：非常適用于列表信息的查看

用戶感受：

Albumatic應(yīng)用

13.平移

適用場(chǎng)合：當(dāng)用戶水平或垂直的移動(dòng)物體時(shí)

運(yùn)動(dòng)描述：

一致性：

優(yōu)點(diǎn)：非常適合地圖界面

用戶感受：

14.滾動(dòng)條

適用場(chǎng)合：滾動(dòng)列表時(shí)

運(yùn)動(dòng)描述：當(dāng)屏幕中的信息滾動(dòng)時(shí)，滾動(dòng)條也成比例的滾動(dòng)

一致性：

優(yōu)點(diǎn)：能夠告知用戶當(dāng)前所處的位置，也能讓用戶了解信息的長(zhǎng)度

用戶感受：

15.頁(yè)碼指示器

適用場(chǎng)合：當(dāng)翻頁(yè)、切換屏幕內(nèi)容時(shí)

運(yùn)動(dòng)描述：通過(guò)實(shí)心點(diǎn)得移動(dòng)來(lái)告知用戶頁(yè)面已經(jīng)切換，同時(shí)還能告知用戶頁(yè)面的數(shù)量

一致性：

優(yōu)點(diǎn)：能夠告訴用戶當(dāng)前處于哪一頁(yè)，總共多少頁(yè)

用戶感受：

16.保存指示器

適用場(chǎng)合：當(dāng)用戶添加書(shū)簽、下載、保存時(shí)

運(yùn)動(dòng)描述：用戶一旦保存、下載某個(gè)物體，物體會(huì)復(fù)制一份，同時(shí)縮小、移動(dòng)到保存指示器中

一致性：

優(yōu)點(diǎn)：能夠提示用戶下載的內(nèi)容能在哪里找到，能夠告訴用戶對(duì)象已經(jīng)被添加

用戶感受：所下載的物體飛到了下載文件夾中了

source:UI.CN