本篇文章對(duì)交互設(shè)計(jì)中的圖標(biāo)動(dòng)效（iM）的設(shè)計(jì)進(jìn)行了詳細(xì)地介紹。

在《動(dòng)效設(shè)計(jì)-交互設(shè)計(jì)的最后一公里（一）》中已經(jīng)將動(dòng)效的類(lèi)型劃分為四種：品牌類(lèi)動(dòng)效、引導(dǎo)類(lèi)動(dòng)效、轉(zhuǎn)場(chǎng)類(lèi)動(dòng)效、反饋類(lèi)動(dòng)效。

交互動(dòng)效在圖標(biāo)中的體現(xiàn)，可以延伸出微觀層面的iM（圖標(biāo)動(dòng)效）。

相較于產(chǎn)品頁(yè)面的宏觀動(dòng)效（如轉(zhuǎn)場(chǎng)動(dòng)效、品牌動(dòng)效）而言，iM有特殊的使用場(chǎng)景，創(chuàng)作思路、實(shí)現(xiàn)方式與宏觀的頁(yè)面動(dòng)效有較大差異，特在此獨(dú)立章節(jié)詳細(xì)闡述。

一、什么是iM？

圖標(biāo)（Icon）是世界范圍內(nèi)的通用語(yǔ)言，具備象征意義或隱喻，它跨越了國(guó)籍、種族、年齡和性別而存在。

圖標(biāo)的產(chǎn)生是經(jīng)歷了漫長(zhǎng)的時(shí)間，人類(lèi)在很早以前就靠圖標(biāo)來(lái)表達(dá)自己并且與他人溝通，象形文字與甲骨文就可以理解為廣泛意義上的圖標(biāo)。

iM，也稱為圖標(biāo)動(dòng)效，簡(jiǎn)而言之，即帶有MG動(dòng)畫(huà)的圖標(biāo)。

iM簡(jiǎn)單來(lái)說(shuō)，包括了圖標(biāo)的起始與終止兩個(gè)靜止?fàn)顟B(tài)以及兩種狀態(tài)之間的變化過(guò)程。

二、iM的形式

iM的形式多種多樣，但是大體上可歸納為三種。

1）iM前后狀態(tài)不一致，即起始狀態(tài)與終止?fàn)顟B(tài)為兩個(gè)圖標(biāo)。如添加與關(guān)閉按鈕。

該種iM是較為常態(tài)的圖標(biāo)動(dòng)效，同時(shí)也是應(yīng)用創(chuàng)作技巧最為廣泛的形式，包括了起始與終止?fàn)顟B(tài)以及兩者之間的變化過(guò)程。

2）iM前后狀態(tài)一致，即起始狀態(tài)與終止?fàn)顟B(tài)為同一個(gè)圖標(biāo)。如刷新按鈕。

該種iM常出現(xiàn)在無(wú)限循環(huán)的loading頁(yè)面、提示頁(yè)面等，其表現(xiàn)形式較為單一，多為圖標(biāo)屬性自身的變化，如旋轉(zhuǎn)、縮放等。

3）iM只具有前后狀態(tài)中的一種，即圖標(biāo)經(jīng)過(guò)變化出現(xiàn)或消失。

該種圖標(biāo)多出現(xiàn)在頁(yè)面跳轉(zhuǎn)前后頁(yè)面中，與頁(yè)面之間的轉(zhuǎn)場(chǎng)動(dòng)效配合使用。

三種形式

因此，iM往往是成對(duì)出現(xiàn)的，或是同一圖標(biāo)點(diǎn)擊前后的狀態(tài)，或是關(guān)聯(lián)性圖標(biāo)的組合，抑或是有無(wú)的組合。網(wǎng)絡(luò)上關(guān)于圖標(biāo)繪制的文章已經(jīng)很多了，因此，本文僅對(duì)iM的起始與終止?fàn)顟B(tài)之間的動(dòng)態(tài)關(guān)聯(lián)進(jìn)行探討。

三、設(shè)計(jì)原則

歸屬于微觀動(dòng)效范疇的iM，它的設(shè)計(jì)原則遵循著動(dòng)效設(shè)計(jì)的基本原則。因依存于使用場(chǎng)景，顧也有著自己的特殊之處。

1）形式簡(jiǎn)單

iM作為動(dòng)效設(shè)計(jì)在圖標(biāo)領(lǐng)域的延伸，因此，多數(shù)iM的形式要足夠簡(jiǎn)單，避免過(guò)于酷炫，影響用戶對(duì)頁(yè)面內(nèi)容的關(guān)注度，從而對(duì)用戶的操作造成干擾。

2）彈性時(shí)長(zhǎng)

在不同的場(chǎng)景中，iM的時(shí)長(zhǎng)是不一樣，同時(shí)也沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)。比如，loading動(dòng)效中，其動(dòng)效的時(shí)長(zhǎng)，與設(shè)備的反饋時(shí)間息息相關(guān)；而導(dǎo)航類(lèi)的iM動(dòng)效，其持續(xù)時(shí)長(zhǎng)應(yīng)該在0.5秒以內(nèi)，符合用戶對(duì)設(shè)備反應(yīng)的認(rèn)知，達(dá)到最佳的操作體驗(yàn)。

3）節(jié)奏合適

此處的節(jié)奏指的iM的運(yùn)動(dòng)形式，多數(shù)情況下，緩動(dòng)效果的iM的體驗(yàn)較為合適，但是，一些情況下，如科技感的iM中（掃一掃），直線運(yùn)動(dòng)更能體現(xiàn)出科技感。

IM設(shè)計(jì)更多的是根據(jù)具體使用場(chǎng)景來(lái)確定的，很難統(tǒng)一、嚴(yán)格的原則現(xiàn)在IM設(shè)計(jì)。

四、iM的作用

在移動(dòng)端的應(yīng)用中，設(shè)備的顯示區(qū)域較為有限，采用具有廣泛認(rèn)同意義的圖標(biāo)，一方面可以節(jié)省頁(yè)面空間，突出頁(yè)面重心，讓頁(yè)面更有層次感；另一方面，圖標(biāo)含義豐富，也更容易讓用戶識(shí)記。同時(shí)，圖標(biāo)能夠有效的避免多語(yǔ)言情況下的適配問(wèn)題。

作為頁(yè)面動(dòng)效的重要組成部分，iM除了圖標(biāo)本身所具有的意義與作用外，其在頁(yè)面產(chǎn)品中的作用與頁(yè)面動(dòng)效大致相同，主要體現(xiàn)在以下四個(gè)方面：

1）引導(dǎo)

相較于靜態(tài)頁(yè)面元素，動(dòng)態(tài)的頁(yè)面元素更加引人注意。iM的引導(dǎo)作用主要是圖標(biāo)本身的指引意義，告知用戶圖標(biāo)可以點(diǎn)擊，背后有頁(yè)面以及是什么頁(yè)面，可以指引用戶接下來(lái)的操作，以及操作完以后，如何回到前一個(gè)頁(yè)面等。

2）提示

提示是用戶操作前，頁(yè)面對(duì)當(dāng)前頁(yè)面的變化（如新消息等）對(duì)用戶的提示。提示是產(chǎn)品目標(biāo)的重要載體，能夠引導(dǎo)用戶去關(guān)注需要用戶關(guān)注的內(nèi)容。因此，iM可以根據(jù)需要用戶分配的關(guān)注度進(jìn)行相應(yīng)的設(shè)計(jì)。

3）反饋

反饋是設(shè)備對(duì)用戶操作的回應(yīng)，作為觸控類(lèi)的設(shè)備，頁(yè)面展示元素有限，用戶需要不停的在頁(yè)面之間跳轉(zhuǎn)，這就需要手指與設(shè)備之間的交互存在較多的交互。作為智能設(shè)備，對(duì)用戶的操作做出適時(shí)的反饋是產(chǎn)品足夠聰明的體現(xiàn)。反饋詩(shī)對(duì)頁(yè)面進(jìn)行刷新、加載等操作之后出現(xiàn)的信息的銜接，緩解用戶等待時(shí)的心理煩躁感，或者帶來(lái)某種程度上的小驚喜。

4）升華用戶體驗(yàn)

好的用戶體驗(yàn)是產(chǎn)品生存的基礎(chǔ)，也是產(chǎn)品脫穎而出的必備條件。提升產(chǎn)品用戶體驗(yàn)的方式有很多，在圖標(biāo)方面，除了在圖標(biāo)形式與釋義上的精心雕琢外，引入動(dòng)效圖標(biāo)也是產(chǎn)品演進(jìn)的重要方面。

適當(dāng)?shù)膇M能夠有效的提升產(chǎn)品氣質(zhì)，引導(dǎo)用戶對(duì)產(chǎn)品的操作，緩解用戶在特殊頁(yè)面下出現(xiàn)的焦躁、與困惑，從而提升用戶體驗(yàn)，增加用戶粘性。

iM是產(chǎn)品動(dòng)效在icon層面的滲透與表現(xiàn)，將單點(diǎn)頁(yè)面在時(shí)間與空間上進(jìn)行拓展，同時(shí)在展示產(chǎn)品氣質(zhì)與提升產(chǎn)品體驗(yàn)方面發(fā)揮著潛移默化的作用。

五、iM的分類(lèi)

iM的分類(lèi)有相當(dāng)多一部分是根據(jù)圖標(biāo)的分類(lèi)而定的，有個(gè)別圖標(biāo)的分類(lèi)方式則受到產(chǎn)品類(lèi)型、平臺(tái)、行業(yè)等的影響較大。若根據(jù)圖標(biāo)在產(chǎn)品中與用戶之間的交互過(guò)程來(lái)分類(lèi)，作者將iM大致分為四類(lèi)：

1）導(dǎo)航類(lèi)

導(dǎo)航類(lèi)iM主要包括底部菜單欄圖標(biāo)、菜單、返回等，是移動(dòng)端產(chǎn)品中最常見(jiàn)最普通的動(dòng)效圖標(biāo)，其作用主要是引導(dǎo)用戶操作并對(duì)操作的目標(biāo)進(jìn)行說(shuō)明，或說(shuō)明頁(yè)面之間的關(guān)系，體現(xiàn)了頁(yè)面的邏輯以及操作關(guān)系。

導(dǎo)航類(lèi)

2）體驗(yàn)類(lèi)

體驗(yàn)類(lèi)iM包括加載類(lèi)以及特殊頁(yè)面的iM，一方面作為頁(yè)面動(dòng)效的補(bǔ)充，用以銜接操作，潤(rùn)滑操作流程，另一方面對(duì)不友好反饋?zhàn)龀鋈趸幚?，緩解用戶的焦躁、不悅?/p>

體驗(yàn)類(lèi)

3）提示類(lèi)

提示類(lèi)iM也能引導(dǎo)用戶操作，但是其強(qiáng)調(diào)的是時(shí)效性，一般發(fā)生在操作之前。該類(lèi)型的iM不需要手動(dòng)觸發(fā)，一般是設(shè)備（產(chǎn)品）本身觸發(fā)的、需要用戶關(guān)注并進(jìn)行處理。如新消息通知、產(chǎn)品更新提醒等。

提示類(lèi)

4）狀態(tài)類(lèi)

狀態(tài)類(lèi)iM一般是操作后的設(shè)備（頁(yè)面）的延續(xù)動(dòng)作。該類(lèi)型的圖標(biāo)應(yīng)用在持續(xù)性的操作中，與加載類(lèi)的iM類(lèi)似，但是加載類(lèi)的iM是動(dòng)作銜接中出現(xiàn)的新的圖標(biāo)，而狀態(tài)類(lèi)的iM是操作的延續(xù)，如WiFi、掃一掃等。

狀態(tài)類(lèi)

六、創(chuàng)作方式

iM的創(chuàng)作需要充分考慮圖標(biāo)起始與終止圖標(biāo)的狀態(tài)，以便找出較為合理的轉(zhuǎn)換方式。也就是說(shuō)iM設(shè)計(jì)就是對(duì)起始與終止圖標(biāo)之間變化形式的設(shè)計(jì)。

目前，iM設(shè)計(jì)有多種方式可以采用，主要包括以下幾種：

1）元素變換與重組

元素重組就是將起始圖標(biāo)中的原始狀態(tài)進(jìn)行重新組合，產(chǎn)生終止圖標(biāo)的形式。該方式應(yīng)用較為廣泛，比較適合一些抽象意義的圖標(biāo)，通過(guò)線性的位置、角度等的變化重新組成圖標(biāo)的終止形式，完成圖標(biāo)之間的變化。

同時(shí)，元素的路徑、面積也可以進(jìn)行相應(yīng)的變化形成起始圖標(biāo)與終止圖標(biāo)之間的聯(lián)系。

元素變換與重組

2）路徑勾畫(huà)

對(duì)于線性的符號(hào)化圖標(biāo)或抽象圖標(biāo)，路徑勾畫(huà)也是常用的一種。即從一起點(diǎn)，沿著圖標(biāo)路徑勾畫(huà)出圖標(biāo)形態(tài)，而起點(diǎn)就是連接起始圖標(biāo)與終止圖標(biāo)的橋梁。在兩種圖標(biāo)狀態(tài)之間，采用逆向路徑與正向路徑之間完成轉(zhuǎn)換。

一般情況下，路徑勾畫(huà)用時(shí)較長(zhǎng)，會(huì)超出用戶最佳的等待時(shí)長(zhǎng)。因此，勾畫(huà)路徑的方式一般很少用到，通常出現(xiàn)在loading的iM中。

路徑勾畫(huà)

3）模擬現(xiàn)實(shí)

模擬現(xiàn)實(shí)即對(duì)圖標(biāo)含義的場(chǎng)景表現(xiàn)，賦予現(xiàn)實(shí)生活中的表現(xiàn)形式，將圖標(biāo)的起始與終止?fàn)顟B(tài)聯(lián)系起來(lái)。

模擬現(xiàn)實(shí)是iM創(chuàng)作的主要思路，該方法將圖標(biāo)的顯示意義與動(dòng)效相結(jié)合，既能更好的對(duì)圖標(biāo)釋義，同時(shí)能夠讓圖標(biāo)的動(dòng)效更加生動(dòng)。

模擬現(xiàn)實(shí)

4）景深變換

景深變換是通過(guò)圖標(biāo)的縮放、透明度的變化，營(yíng)造出視覺(jué)景深的前進(jìn)與后退，從而實(shí)現(xiàn)圖標(biāo)起始與終止?fàn)顟B(tài)的切換。

景深變換

景深的變化不僅可以實(shí)現(xiàn)元素的消失與出現(xiàn)，同時(shí)也可以實(shí)現(xiàn)形狀的變換。

5）共點(diǎn)法

共點(diǎn)法是指，起始圖標(biāo)通過(guò)屬性的變化到達(dá)一個(gè)點(diǎn)，再由該點(diǎn)進(jìn)行反向變化，到達(dá)終止坐標(biāo)狀態(tài)，完成iM的全過(guò)程。其中，中心點(diǎn)并不僅僅只是物理意義上的點(diǎn)，也可以是線或者面，還可以是邏輯上的轉(zhuǎn)折點(diǎn)來(lái)實(shí)現(xiàn)圖標(biāo)的切換。

物理共點(diǎn)法

如該方案中，其中心點(diǎn)就是邏輯意義上的點(diǎn)——透明度的變化，在起始圖標(biāo)與終止圖標(biāo)的透明度相向變化，完成圖標(biāo)之間的切換。

邏輯共點(diǎn)法

6）路徑填充

路徑填充發(fā)通常應(yīng)用在底部導(dǎo)航中，iM的起始狀態(tài)為線性圖標(biāo)，而終止?fàn)顟B(tài)則切換成面性圖標(biāo)，同時(shí)為圖標(biāo)的線框填充顏色，顯示當(dāng)前圖標(biāo)為選中狀態(tài)。

路徑填充

路徑填充（簡(jiǎn)書(shū)）

七、iM的拓展應(yīng)用

隨著手機(jī)性能的逐漸強(qiáng)悍，動(dòng)效設(shè)計(jì)成為了產(chǎn)品用戶體驗(yàn)提升的重要途徑。在圖標(biāo)設(shè)計(jì)方面，iM除了應(yīng)用在圖標(biāo)與圖標(biāo)之間，還可以用到圖標(biāo)與控件、圖標(biāo)與頁(yè)面之間。

通過(guò)圖標(biāo)的屬性變化，實(shí)現(xiàn)與控件之間的切換，如下圖，通過(guò)搜索按鈕的屬性變化，完成了圖標(biāo)與搜索控件之間的轉(zhuǎn)化，拓展了iM的應(yīng)用空間。

圖標(biāo)與控件

來(lái)源網(wǎng)絡(luò)1

網(wǎng)絡(luò)來(lái)源2

iM的拓展應(yīng)用，使得頁(yè)面的展示更加立體，頁(yè)面之間的切換更加流暢，富有情趣，同時(shí)可以在感官上降低頁(yè)面結(jié)構(gòu)的復(fù)雜度。

總結(jié)

iM是基于圖標(biāo)進(jìn)行展示的微動(dòng)效方案，在不同產(chǎn)品中的表現(xiàn)方式各不相同。特別是在智能手機(jī)的應(yīng)用中，設(shè)備的硬件條件較為理想，同時(shí)對(duì)動(dòng)效資源的限制較少，對(duì)于動(dòng)效設(shè)計(jì)的發(fā)揮是比較有利的。

iM的設(shè)計(jì)方式不一而足，很難完整的歸納總結(jié)。本文只是對(duì)圖標(biāo)動(dòng)效的初步探索，尚有較多不足、不全之處，請(qǐng)大家多指教。

注：文中出現(xiàn)的動(dòng)效案例（網(wǎng)絡(luò)來(lái)源以及簡(jiǎn)書(shū)菜單除外），僅有路徑勾畫(huà)以及iM拓展應(yīng)用中的iM是AE制作的，其余均為Principle制作完成。

相關(guān)閱讀

交互設(shè)計(jì)的最后一公里（一）——?jiǎng)有гO(shè)計(jì)

動(dòng)效設(shè)計(jì)-交互設(shè)計(jì)的最后一公里（二）

#專欄作家#

弘毅道，公眾號(hào)：UIUX設(shè)計(jì)工作坊，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注to B業(yè)務(wù)，尤其擅長(zhǎng)后臺(tái)程序界面設(shè)計(jì)，包括需求溝通，原型設(shè)計(jì)以及后期的設(shè)計(jì)評(píng)審等。

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

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