動效設計-互動設計的最後一公里（三）
本篇文章對互動設計中的圖示動效（iM）的設計進行了詳細地介紹。
在《動效設計-互動設計的最後一公里（一）》中已經將動效的型別劃分為四種：品牌類動效、引導類動效、轉場類動效、反饋類動效。
互動動效在圖示中的體現，可以延伸出微觀層面的iM（圖示動效）。
相較於產品頁面的巨集觀動效（如轉場動效、品牌動效）而言，iM有特殊的使用場景，創作思路、實現方式與巨集觀的頁面動效有較大差異，特在此獨立章節詳細闡述。
一、什麼是iM？
圖示（Icon）是世界範圍內的通用語言，具備象徵意義或隱喻，它跨越了國籍、種族、年齡和性別而存在。
圖示的產生是經歷了漫長的時間，人類在很早以前就靠圖示來表達自己並且與他人溝通，象形文字與甲骨文就可以理解為廣泛意義上的圖示。
iM，也稱為圖示動效，簡而言之，即帶有MG動畫的圖示。
iM簡單來說，包括了圖示的起始與終止兩個靜止狀態以及兩種狀態之間的變化過程。
二、iM的形式
iM的形式多種多樣，但是大體上可歸納為三種。
1）iM前後狀態不一致，即起始狀態與終止狀態為兩個圖示。如新增與關閉按鈕。
該種iM是較為常態的圖示動效，同時也是應用創作技巧最為廣泛的形式，包括了起始與終止狀態以及兩者之間的變化過程。
2）iM前後狀態一致，即起始狀態與終止狀態為同一個圖示。如重新整理按鈕。
該種iM常出現在無限迴圈的loading頁面、提示頁面等，其表現形式較為單一，多為圖示屬性自身的變化，如旋轉、縮放等。
3）iM只具有前後狀態中的一種，即圖示經過變化出現或消失。
該種圖示多出現在頁面跳轉前後頁面中，與頁面之間的轉場動效配合使用。
三種形式
因此，iM往往是成對出現的，或是同一圖示點選前後的狀態，或是關聯性圖示的組合，抑或是有無的組合。網路上關於圖示繪製的文章已經很多了，因此，本文僅對iM的起始與終止狀態之間的動態關聯進行探討。
三、設計原則
歸屬於微觀動效範疇的iM，它的設計原則遵循著動效設計的基本原則。因依存於使用場景，顧也有著自己的特殊之處。
1）形式簡單
iM作為動效設計在圖示領域的延伸，因此，多數iM的形式要足夠簡單，避免過於酷炫，影響使用者對頁面內容的關注度，從而對使用者的操作造成干擾。
2）彈性時長
在不同的場景中，iM的時長是不一樣，同時也沒有統一的標準。比如，loading動效中，其動效的時長，與裝置的反饋時間息息相關；而導航類的iM動效，其持續時長應該在0.5秒以內，符合使用者對裝置反應的認知，達到最佳的操作體驗。
3）節奏合適
此處的節奏指的iM的運動形式，多數情況下，緩動效果的iM的體驗較為合適，但是，一些情況下，如科技感的iM中（掃一掃），直線運動更能體現出科技感。
IM設計更多的是根據具體使用場景來確定的，很難統一、嚴格的原則現在IM設計。
四、iM的作用
在移動端的應用中，裝置的顯示區域較為有限，採用具有廣泛認同意義的圖示，一方面可以節省頁面空間，突出頁面重心，讓頁面更有層次感；另一方面，圖示含義豐富，也更容易讓使用者識記。同時，圖示能夠有效的避免多語言情況下的適配問題。
作為頁面動效的重要組成部分，iM除了圖示本身所具有的意義與作用外，其在頁面產品中的作用與頁面動效大致相同，主要體現在以下四個方面：
1）引導
相較於靜態頁面元素，動態的頁面元素更加引人注意。iM的引導作用主要是圖示本身的指引意義，告知使用者圖示可以點選，背後有頁面以及是什麼頁面，可以指引使用者接下來的操作，以及操作完以後，如何回到前一個頁面等。
2）提示
提示是使用者操作前，頁面對當前頁面的變化（如新訊息等）對使用者的提示。提示是產品目標的重要載體，能夠引導使用者去關注需要使用者關注的內容。因此，iM可以根據需要使用者分配的關注度進行相應的設計。
3）反饋
反饋是裝置對使用者操作的迴應，作為觸控類的裝置，頁面展示元素有限，使用者需要不停的在頁面之間跳轉，這就需要手指與裝置之間的互動存在較多的互動。作為智慧裝置，對使用者的操作做出適時的反饋是產品足夠聰明的體現。反饋詩對頁面進行重新整理、載入等操作之後出現的資訊的銜接，緩解使用者等待時的心理煩躁感，或者帶來某種程度上的小驚喜。
4）昇華使用者體驗
好的使用者體驗是產品生存的基礎，也是產品脫穎而出的必備條件。提升產品使用者體驗的方式有很多，在圖示方面，除了在圖示形式與釋義上的精心雕琢外，引入動效圖示也是產品演進的重要方面。
適當的iM能夠有效的提升產品氣質，引導使用者對產品的操作，緩解使用者在特殊頁面下出現的焦躁、與困惑，從而提升使用者體驗，增加使用者粘性。
iM是產品動效在icon層面的滲透與表現，將單點頁面在時間與空間上進行拓展，同時在展示產品氣質與提升產品體驗方面發揮著潛移默化的作用。
五、iM的分類
iM的分類有相當多一部分是根據圖示的分類而定的，有個別圖示的分類方式則受到產品型別、平臺、行業等的影響較大。若根據圖示在產品中與使用者之間的互動過程來分類，作者將iM大致分為四類：
1）導航類
導航類iM主要包括底部選單欄圖示、選單、返回等，是移動端產品中最常見最普通的動效圖示，其作用主要是引導使用者操作並對操作的目標進行說明，或說明頁面之間的關係，體現了頁面的邏輯以及操作關係。
導航類
2）體驗類
體驗類iM包括載入類以及特殊頁面的iM，一方面作為頁面動效的補充，用以銜接操作，潤滑操作流程，另一方面對不友好反饋做出弱化處理，緩解使用者的焦躁、不悅。
體驗類
3）提示類
提示類iM也能引導使用者操作，但是其強調的是時效性，一般發生在操作之前。該型別的iM不需要手動觸發，一般是裝置（產品）本身觸發的、需要使用者關注並進行處理。如新訊息通知、產品更新提醒等。
提示類
4）狀態類
狀態類iM一般是操作後的裝置（頁面）的延續動作。該型別的圖示應用在持續性的操作中，與載入類的iM類似，但是載入類的iM是動作銜接中出現的新的圖示，而狀態類的iM是操作的延續，如WiFi、掃一掃等。
狀態類
六、創作方式
iM的創作需要充分考慮圖示起始與終止圖示的狀態，以便找出較為合理的轉換方式。也就是說iM設計就是對起始與終止圖示之間變化形式的設計。
目前，iM設計有多種方式可以採用，主要包括以下幾種：
1）元素變換與重組
元素重組就是將起始圖示中的原始狀態進行重新組合，產生終止圖示的形式。該方式應用較為廣泛，比較適合一些抽象意義的圖示，通過線性的位置、角度等的變化重新組成圖示的終止形式，完成圖示之間的變化。
同時，元素的路徑、面積也可以進行相應的變化形成起始圖示與終止圖示之間的聯絡。
元素變換與重組
2）路徑勾畫
對於線性的符號化圖示或抽象圖示，路徑勾畫也是常用的一種。即從一起點，沿著圖示路徑勾畫出圖示形態，而起點就是連線起始圖示與終止圖示的橋樑。在兩種圖示狀態之間，採用逆向路徑與正向路徑之間完成轉換。
一般情況下，路徑勾畫用時較長，會超出使用者最佳的等待時長。因此，勾畫路徑的方式一般很少用到，通常出現在loading的iM中。
路徑勾畫
3）模擬現實
模擬現實即對圖示含義的場景表現，賦予現實生活中的表現形式，將圖示的起始與終止狀態聯絡起來。
模擬現實是iM創作的主要思路，該方法將圖示的顯示意義與動效相結合，既能更好的對圖示釋義，同時能夠讓圖示的動效更加生動。
模擬現實
4）景深變換
景深變換是通過圖示的縮放、透明度的變化，營造出視覺景深的前進與後退，從而實現圖示起始與終止狀態的切換。
景深變換
景深的變化不僅可以實現元素的消失與出現，同時也可以實現形狀的變換。
5）共點法
共點法是指，起始圖示通過屬性的變化到達一個點，再由該點進行反向變化，到達終止座標狀態，完成iM的全過程。其中，中心點並不僅僅只是物理意義上的點，也可以是線或者面，還可以是邏輯上的轉折點來實現圖示的切換。
物理共點法
如該方案中，其中心點就是邏輯意義上的點——透明度的變化，在起始圖示與終止圖示的透明度相向變化，完成圖示之間的切換。
邏輯共點法
6）路徑填充
路徑填充發通常應用在底部導航中，iM的起始狀態為線性圖示，而終止狀態則切換成面性圖示，同時為圖示的線框填充顏色，顯示當前圖示為選中狀態。
路徑填充
路徑填充（簡書）
七、iM的拓展應用
隨著手機效能的逐漸強悍，動效設計成為了產品使用者體驗提升的重要途徑。在圖示設計方面，iM除了應用在圖示與圖示之間，還可以用到圖示與控制元件、圖示與頁面之間。
通過圖示的屬性變化，實現與控制元件之間的切換，如下圖，通過搜尋按鈕的屬性變化，完成了圖示與搜尋控制元件之間的轉化，拓展了iM的應用空間。
圖示與控制元件
來源網路1
網路來源2
iM的拓展應用，使得頁面的展示更加立體，頁面之間的切換更加流暢，富有情趣，同時可以在感官上降低頁面結構的複雜度。
總結
iM是基於圖示進行展示的微動效方案，在不同產品中的表現方式各不相同。特別是在智慧手機的應用中，裝置的硬體條件較為理想，同時對動效資源的限制較少，對於動效設計的發揮是比較有利的。
iM的設計方式不一而足，很難完整的歸納總結。本文只是對圖示動效的初步探索，尚有較多不足、不全之處，請大家多指教。
注：文中出現的動效案例（網路來源以及簡書選單除外），僅有路徑勾畫以及iM拓展應用中的iM是AE製作的，其餘均為Principle製作完成。