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

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

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

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

一、什么是iM？

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

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

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

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

二、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)以及兩者之間的變化過程。

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

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

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

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

三種形式

因此，iM往往是成對出現(xiàn)的，或是同一圖標(biāo)點(diǎn)擊前后的狀態(tài)，或是關(guān)聯(lián)性圖標(biāo)的組合，抑或是有無的組合。網(wǎng)絡(luò)上關(guān)于圖標(biāo)繪制的文章已經(jīng)很多了，因此，本文僅對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ì)的基本原則。因依存于使用場景，顧也有著自己的特殊之處。

1）形式簡單

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

2）彈性時(shí)長

在不同的場景中，iM的時(shí)長是不一樣，同時(shí)也沒有統(tǒng)一的標(biāo)準(zhǔn)。比如，loading動(dòng)效中，其動(dòng)效的時(shí)長，與設(shè)備的反饋時(shí)間息息相關(guān)；而導(dǎo)航類的iM動(dòng)效，其持續(xù)時(shí)長應(yīng)該在0.5秒以內(nèi)，符合用戶對設(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ù)具體使用場景來確定的，很難統(tǒng)一、嚴(yán)格的原則現(xiàn)在IM設(shè)計(jì)。

四、iM的作用

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

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

1）引導(dǎo)

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

2）提示

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

3）反饋

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

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)用戶對產(chǎn)品的操作，緩解用戶在特殊頁面下出現(xiàn)的焦躁、與困惑，從而提升用戶體驗(yàn)，增加用戶粘性。

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

五、iM的分類

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

1）導(dǎo)航類

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

導(dǎo)航類

2）體驗(yàn)類

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

體驗(yàn)類

3）提示類

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

提示類

4）狀態(tài)類

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

狀態(tài)類

六、創(chuàng)作方式

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

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

1）元素變換與重組

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

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

元素變換與重組

2）路徑勾畫

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

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

路徑勾畫

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

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

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

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

4）景深變換

景深變換是通過圖標(biāo)的縮放、透明度的變化，營造出視覺景深的前進(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)通過屬性的變化到達(dá)一個(gè)點(diǎn)，再由該點(diǎn)進(jìn)行反向變化，到達(dá)終止坐標(biāo)狀態(tài)，完成iM的全過程。其中，中心點(diǎn)并不僅僅只是物理意義上的點(diǎn)，也可以是線或者面，還可以是邏輯上的轉(zhuǎn)折點(diǎn)來實(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)。

路徑填充

路徑填充（簡書）

七、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)與頁面之間。

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

圖標(biāo)與控件

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

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

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

總結(jié)

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

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

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

相關(guān)閱讀

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

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

#專欄作家#

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

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

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