国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

本篇文章對交互設(shè)計中的圖標動效（iM）的設(shè)計進行了詳細地介紹。

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

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

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

一、什么是iM？

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

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

iM，也稱為圖標動效，簡而言之，即帶有MG動畫的圖標。

iM簡單來說，包括了圖標的起始與終止兩個靜止狀態(tài)以及兩種狀態(tài)之間的變化過程。

二、iM的形式

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

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

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

2）iM前后狀態(tài)一致，即起始狀態(tài)與終止狀態(tài)為同一個圖標。如刷新按鈕。

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

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

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

三種形式

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

三、設(shè)計原則

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

1）形式簡單

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

2）彈性時長

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

3）節(jié)奏合適

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

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

四、iM的作用

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

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

1）引導(dǎo)

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

2）提示

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

3）反饋

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

4）升華用戶體驗

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

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

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

五、iM的分類

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

1）導(dǎo)航類

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

導(dǎo)航類

2）體驗類

體驗類iM包括加載類以及特殊頁面的iM，一方面作為頁面動效的補充，用以銜接操作，潤滑操作流程，另一方面對不友好反饋做出弱化處理，緩解用戶的焦躁、不悅。

體驗類

3）提示類

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

提示類

4）狀態(tài)類

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

狀態(tài)類

六、創(chuàng)作方式

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

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

1）元素變換與重組

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

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

元素變換與重組

2）路徑勾畫

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

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

路徑勾畫

3）模擬現(xiàn)實

模擬現(xiàn)實即對圖標含義的場景表現(xiàn)，賦予現(xiàn)實生活中的表現(xiàn)形式，將圖標的起始與終止狀態(tài)聯(lián)系起來。

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

模擬現(xiàn)實

4）景深變換

景深變換是通過圖標的縮放、透明度的變化，營造出視覺景深的前進與后退，從而實現(xiàn)圖標起始與終止狀態(tài)的切換。

景深變換

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

5）共點法

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

物理共點法

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

邏輯共點法

6）路徑填充

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

路徑填充

路徑填充（簡書）

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

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

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

圖標與控件

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

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

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

總結(jié)

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

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

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

相關(guān)閱讀

交互設(shè)計的最后一公里（一）——動效設(shè)計

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

#專欄作家#

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

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

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