動態(tài)icon設(shè)計記住這三點(diǎn)

1、在很多APP首頁的金剛區(qū)，動態(tài)icon是一個常見的設(shè)計。由于幾百像素的二維空間所能承載的靜態(tài)圖像信息實(shí)在有限，因此不得不借助時間這一維度，使二維靜態(tài)icon化身為“三維”動態(tài)icon。所以動態(tài)icon設(shè)計，本質(zhì)上是對流動信息的感知設(shè)計。有別于我們在做PPT時給各種元素添加的動態(tài)效果，PPT的動效往往是為了配合演講的節(jié)奏而強(qiáng)調(diào)元素的存在和變化，因?yàn)檫\(yùn)動的事物總是更容易吸引視線。而動態(tài)icon除了比靜態(tài)icon更容易引起注意以外，它本身還要具有自敘故事的能力。講故事是考驗(yàn)品牌拓展能力的一個硬技能，故事講得好，就能快速占領(lǐng)用戶心智。這需要我們在設(shè)計前就規(guī)劃好故事腳本，也就是信息流動的秩序。梳理信息秩

2、序并不難，按照常用的腳本可以分為幾種類型：視覺引導(dǎo)、情感共鳴、品牌背書、利益點(diǎn)曝光、任務(wù)引導(dǎo)等。在實(shí)際的項(xiàng)目中通常會結(jié)合以上的一類或兩類。超過兩類會對信息秩序和動態(tài)時長都造成不小的挑戰(zhàn)，盡量避免。來看幾個簡單的例子。01/隨申辦考拉海購動態(tài)類型：情感共鳴 + 視覺引導(dǎo)上海的朋友應(yīng)該對這個小籠包印象深刻，它就存在于我們每天都要出示健康碼的APP-隨申辦首頁。設(shè)計一方面選擇了上海的經(jīng)典美食小籠包作為情感傳遞的視覺載體，增強(qiáng)用戶啟動首頁后的情感歸屬和心理認(rèn)同，賦予一個工具類APP以有趣的性格，拉近與用戶的距離。另一方面小籠包本身發(fā)揮了“播報員”的職能：在有新消息的時候會彈出提示紅點(diǎn)，引導(dǎo)用戶點(diǎn)擊查看

3、；沒有新消息的時候，也作為一個動態(tài)視覺引導(dǎo)元素，實(shí)時提供天氣預(yù)報等日常信息。與此類似的還有考拉海購在首頁推出的考拉樂園?？祭瓨穲@是一個類似之前美團(tuán)“袋鼠快跑”的促活養(yǎng)成型小游戲，通過合并同類項(xiàng)完成升級。視覺元素十分簡要，一只考拉抱著裝滿商品的禮盒，是一個有溫度的icon設(shè)計，但卻并不能很精準(zhǔn)地傳遞出其小游戲的屬性。在3秒時間內(nèi)，通過重新編排信息流動的秩序，相信一定能有比這更好的方案。02/餓了么有道翻譯動態(tài)類型：視覺引導(dǎo)2020年疫情嚴(yán)重期間，線上買菜的需求爆棚，餓了么在首頁金剛區(qū)添加了買菜功能的入口。為了在一定時期內(nèi)強(qiáng)化該垂類業(yè)務(wù)引導(dǎo)，功能圖標(biāo)很自然地采用了動態(tài)形式。用戶啟動生活消費(fèi)類的AP

4、P，往往不會漫無目標(biāo)，因此啟動以后在首頁的停留通常只有短短幾秒。這幾秒的時間內(nèi)用戶會尋找原本主線任務(wù)的入口，同時會被一些碎片化信息（比如首焦banner、運(yùn)營文案、消息提示等）分散注意力，從而被動發(fā)生支線任務(wù)。買菜icon要做的就是在這幾秒的時間內(nèi)迅速抓住眼球，告訴用戶“可以在我們這買菜了”。不管達(dá)成的目的是“用戶真的在當(dāng)下點(diǎn)擊查看”，還是“知道了下次再來”。除此以外不能傳遞任何冗余的信息。這一類屬于純視覺引導(dǎo)。在商業(yè)化熾熱的環(huán)境下，大家都盡可能地將這幾秒內(nèi)的幾十幀圖形塞的滿滿當(dāng)當(dāng)，盡可能利用它承載更多的商業(yè)功能。而單純的視覺引導(dǎo)icon，最主要的功能是傳遞出新功能上線的信息。再比如有道翻譯首

5、頁的“單詞本”功能，看得出設(shè)計是為了避免對用戶原本的任務(wù)路徑帶來打擾，所以很克制圖形運(yùn)動的表達(dá)。與我們?nèi)粘Ｒ姷降膭討B(tài)icon相比，這里的動效十分輕微。03/美團(tuán)京東動態(tài)類型：品牌背書 +利益點(diǎn)曝光美團(tuán)買藥這個icon結(jié)合了品牌名人背書和利益點(diǎn)曝光兩個維度的信息，算是設(shè)計難度較高的一類。畢竟人物肖像的辨識度對像素要求較高，且不同元素之間轉(zhuǎn)場的流暢性和易讀性對時長的要求也很高。這一類icon的設(shè)計要點(diǎn)是信息的進(jìn)出節(jié)奏，和單幀的信噪比。用戶不會為此停留而中斷原本任務(wù)，所以轉(zhuǎn)場次數(shù)不宜超過3次（保證每個分鏡有1秒）、人像必須放大（保證不同分辨率設(shè)備都能識別）、利益點(diǎn)描述必須精簡（1秒內(nèi)讀完可以理解）。

6、最壞的情況是“買藥”這個icon并沒有從繁雜的首頁中跳脫，而用戶的視線劃過它只用了0.2秒。在這0.2秒里，哪怕用戶只瞥見一個分鏡，這個分鏡的內(nèi)容對于“美團(tuán)買藥”功能的營銷傳播也是有效的。然后看一個不那么有效的例子。京東這個icon應(yīng)該說是想表達(dá)的內(nèi)容太多了，典型的填鴨式文案，也亂了秩序。靜態(tài)下的“充值繳費(fèi)服務(wù)”icon在疊加了幾層贅述和利益點(diǎn)以后，用戶有點(diǎn)不明所以。究竟是服務(wù)打折還是爆款打折，是低至5折還是低至9塊9。也有可能設(shè)計換了一種思維，正因?yàn)榭紤]到用戶停留時間短暫，才選擇這種邏輯性不強(qiáng)的“閃回式”方案。不管你在零點(diǎn)幾秒里看到了什么，也不管看懂與否，總之讓你知道我這在打折，你進(jìn)來看看就

7、是了。要是這個思路，勉強(qiáng)也能接受。04/網(wǎng)易嚴(yán)選有道翻譯淘寶動態(tài)類型：任務(wù)引導(dǎo)+利益點(diǎn)曝光“簽到領(lǐng)福利”算是這一類動態(tài)icon最典型的體現(xiàn)了。設(shè)計要點(diǎn)除了動效好看之外，圖標(biāo)必須附注說明：“簽到”字樣和利益點(diǎn)元素，保證在最短時間同步用戶認(rèn)知。左圖是有道翻譯，簽到領(lǐng)取的學(xué)習(xí)幣為非現(xiàn)金獎勵，因而icon中利益點(diǎn)文案以“福利”二字概括，抽象但有一定吸引力。右圖是淘寶，其充值中心有一個“簽到薅羊毛”返還充值金的活動，可以直接抵現(xiàn)，文案“紅包”則更直截了當(dāng)。在合規(guī)允許的條件下，將用戶利益驅(qū)動心理撐到了最大化。這一類案例在信息秩序的表達(dá)上相對簡單，邏輯清晰，設(shè)計可以著重發(fā)力在視覺創(chuàng)新上，結(jié)合品牌符號創(chuàng)造有記

8、憶點(diǎn)的設(shè)計。05/ 支付寶動態(tài)類型：任務(wù)引導(dǎo) + 情感共鳴說到視覺創(chuàng)新和品牌符號，不得不提這個我們每天都會刷的螞蟻森林。已經(jīng)忘了曾幾何時，螞蟻森林待收能量開始通過這個會動的小樹苗來提醒用戶。我每天收能量之前都會把它完整地看一遍。這的確是一個很輕量但很有記憶點(diǎn)的設(shè)計，icon在原本廓形的基礎(chǔ)上進(jìn)行生長動畫的疊加，而能量球出現(xiàn)在剛剛好的時間點(diǎn)。不但不會造成視覺干擾，反而加深了“螞蟻森林”這個品牌標(biāo)識的留存印象。正是那句話，好的設(shè)計不是做加法，是做減法。Less is more?？偨Y(jié)看完上述這些案例，關(guān)于如何做好一個動態(tài)icon并且讓它真正有效地服務(wù)于業(yè)務(wù)增長，其實(shí)已經(jīng)有了一個大致框架。用幾個維度來概括，可以是以下三點(diǎn)：定義動態(tài)類型充分理解業(yè)務(wù)場景的訴求，分析該動態(tài)icon的底層需求，產(chǎn)品是要通過這個icon達(dá)成什么目標(biāo)、解決什么問題。隨后通過視覺引導(dǎo)、情感共鳴、品牌背書、利益點(diǎn)曝光、任務(wù)引導(dǎo)中的一類或兩類來歸納和定義需求。如超過兩類，可以考慮梳理信息的優(yōu)先級，分期上線展示。 規(guī)劃信息秩序圖形比文字更有視覺感染力，也能承載更多的信息。不同于我們用語言表達(dá)一句話，比如“點(diǎn)擊紅包可以獲得大量金幣”這句話念出來需要2秒，但用一個紅包圖形，抖動一下同時撒出漫天金幣只需要0.5秒，就能get到相同的意思。因此規(guī)劃好信息的入場出場順序和運(yùn)動節(jié)奏很重要，能圖形化絕不文