編輯導(dǎo)讀：在很多產(chǎn)品的首頁，動態(tài)icon是一個常見的設(shè)計。動態(tài)icon設(shè)計，本質(zhì)上是對流動信息的感知設(shè)計。本文作者對一些產(chǎn)品的動態(tài)icon設(shè)計展開分析，希望對你有幫助。

在很多APP首頁的金剛區(qū)，動態(tài)icon是一個常見的設(shè)計。由于幾百像素的二維空間所能承載的靜態(tài)圖像信息實在有限，因此不得不借助時間這一維度，使二維靜態(tài)icon化身為“三維”動態(tài)icon。

所以動態(tài)icon設(shè)計，本質(zhì)上是對流動信息的感知設(shè)計。

有別于我們在做PPT時給各種元素添加的動態(tài)效果，PPT的動效往往是為了配合演講的節(jié)奏而強(qiáng)調(diào)元素的存在和變化，因為運動的事物總是更容易吸引視線。

而動態(tài)icon除了比靜態(tài)icon更容易引起注意以外，它本身還要具有自敘故事的能力。

講故事是考驗品牌拓展能力的一個硬技能，故事講得好，就能快速占領(lǐng)用戶心智。

這需要我們在設(shè)計前就規(guī)劃好故事腳本，也就是信息流動的秩序。

梳理信息秩序并不難，按照常用的腳本可以分為幾種類型：視覺引導(dǎo)、情感共鳴、品牌背書、利益點曝光、任務(wù)引導(dǎo)等。

在實際的項目中通常會結(jié)合以上的一類或兩類。超過兩類會對信息秩序和動態(tài)時長都造成不小的挑戰(zhàn)，盡量避免。

來看幾個簡單的例子。

01 隨申辦 · 考拉海購

動態(tài)類型：情感共鳴 + 視覺引導(dǎo)

上海的朋友應(yīng)該對這個小籠包印象深刻，它就存在于我們每天都要出示健康碼的APP-隨申辦首頁。

設(shè)計一方面選擇了上海的經(jīng)典美食小籠包作為情感傳遞的視覺載體，增強(qiáng)用戶啟動首頁后的情感歸屬和心理認(rèn)同，賦予一個工具類APP以有趣的性格，拉近與用戶的距離。

另一方面小籠包本身發(fā)揮了“播報員”的職能：在有新消息的時候會彈出提示紅點，引導(dǎo)用戶點擊查看；沒有新消息的時候，也作為一個動態(tài)視覺引導(dǎo)元素，實時提供天氣預(yù)報等日常信息。

與此類似的還有考拉海購在首頁推出的考拉樂園?？祭瓨穲@是一個類似之前美團(tuán)“袋鼠快跑”的促活養(yǎ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)形式。

用戶啟動生活消費類的APP，往往不會漫無目標(biāo)，因此啟動以后在首頁的停留通常只有短短幾秒。

這幾秒的時間內(nèi)用戶會尋找原本主線任務(wù)的入口，同時會被一些碎片化信息（比如首焦banner、運營文案、消息提示等）分散注意力，從而被動發(fā)生支線任務(wù)。

買菜icon要做的就是在這幾秒的時間內(nèi)迅速抓住眼球，告訴用戶“可以在我們這買菜了”。不管達(dá)成的目的是“用戶真的在當(dāng)下點擊查看”，還是“知道了下次再來”。除此以外不能傳遞任何冗余的信息。

這一類屬于純視覺引導(dǎo)。在商業(yè)化熾熱的環(huán)境下，大家都盡可能地將這幾秒內(nèi)的幾十幀圖形塞的滿滿當(dāng)當(dāng)，盡可能利用它承載更多的商業(yè)功能。而單純的視覺引導(dǎo)icon，最主要的功能是傳遞出新功能上線的信息。

再比如有道翻譯首頁的“單詞本”功能，看得出設(shè)計是為了避免對用戶原本的任務(wù)路徑帶來打擾，所以很克制圖形運動的表達(dá)。與我們?nèi)粘Ｒ姷降膭討B(tài)icon相比，這里的動效十分輕微。

03 美團(tuán) · 京東

動態(tài)類型：品牌背書 +利益點曝光

美團(tuán)買藥這個icon結(jié)合了品牌名人背書和利益點曝光兩個維度的信息，算是設(shè)計難度較高的一類。畢竟人物肖像的辨識度對像素要求較高，且不同元素之間轉(zhuǎn)場的流暢性和易讀性對時長的要求也很高。

這一類icon的設(shè)計要點是信息的進(jìn)出節(jié)奏，和單幀的信噪比。用戶不會為此停留而中斷原本任務(wù)，所以轉(zhuǎn)場次數(shù)不宜超過3次（保證每個分鏡有1秒）、人像必須放大（保證不同分辨率設(shè)備都能識別）、利益點描述必須精簡（1秒內(nèi)讀完可以理解）。

最壞的情況是“買藥”這個icon并沒有從繁雜的首頁中跳脫，而用戶的視線劃過它只用了0.2秒。

在這0.2秒里，哪怕用戶只瞥見一個分鏡，這個分鏡的內(nèi)容對于“美團(tuán)買藥”功能的營銷傳播也是有效的。

然后看一個不那么有效的例子。

京東這個icon應(yīng)該說是想表達(dá)的內(nèi)容太多了，典型的填鴨式文案，也亂了秩序。靜態(tài)下的“充值繳費服務(wù)”icon在疊加了幾層贅述和利益點以后，用戶有點不明所以。究竟是服務(wù)打折還是爆款打折，是低至5折還是低至9塊9。

也有可能設(shè)計換了一種思維，正因為考慮到用戶停留時間短暫，才選擇這種邏輯性不強(qiáng)的“閃回式”方案。不管你在零點幾秒里看到了什么，也不管看懂與否，總之讓你知道我這在打折，你進(jìn)來看看就是了。

要是這個思路，勉強(qiáng)也能接受。

04 網(wǎng)易嚴(yán)選 · 有道翻譯 · 淘寶

動態(tài)類型：任務(wù)引導(dǎo)+利益點曝光

“簽到領(lǐng)福利”算是這一類動態(tài)icon最典型的體現(xiàn)了。設(shè)計要點除了動效好看之外，圖標(biāo)必須附注說明：“簽到”字樣和利益點元素，保證在最短時間同步用戶認(rèn)知。

左圖是有道翻譯，簽到領(lǐng)取的學(xué)習(xí)幣為非現(xiàn)金獎勵，因而icon中利益點文案以“福利”二字概括，抽象但有一定吸引力。

右圖是淘寶，其充值中心有一個“簽到薅羊毛”返還充值金的活動，可以直接抵現(xiàn)，文案“紅包”則更直截了當(dāng)。在合規(guī)允許的條件下，將用戶利益驅(qū)動心理撐到了最大化。

這一類案例在信息秩序的表達(dá)上相對簡單，邏輯清晰，設(shè)計可以著重發(fā)力在視覺創(chuàng)新上，結(jié)合品牌符號創(chuàng)造有記憶點的設(shè)計。

05 支付寶

動態(tài)類型：任務(wù)引導(dǎo) + 情感共鳴

說到視覺創(chuàng)新和品牌符號，不得不提這個我們每天都會刷的螞蟻森林。

已經(jīng)忘了曾幾何時，螞蟻森林待收能量開始通過這個會動的小樹苗來提醒用戶。我每天收能量之前都會把它完整地看一遍。

這的確是一個很輕量但很有記憶點的設(shè)計，icon在原本廓形的基礎(chǔ)上進(jìn)行生長動畫的疊加，而能量球出現(xiàn)在剛剛好的時間點。不但不會造成視覺干擾，反而加深了“螞蟻森林”這個品牌標(biāo)識的留存印象。

正是那句話，好的設(shè)計不是做加法，是做減法。Less is more。

06 總結(jié)

看完上述這些案例，關(guān)于如何做好一個動態(tài)icon并且讓它真正有效地服務(wù)于業(yè)務(wù)增長，其實已經(jīng)有了一個大致框架。

用幾個維度來概括，可以是以下三點：

1）定義動態(tài)類型

充分理解業(yè)務(wù)場景的訴求，分析該動態(tài)icon的底層需求，產(chǎn)品是要通過這個icon達(dá)成什么目標(biāo)、解決什么問題。

隨后通過視覺引導(dǎo)、情感共鳴、品牌背書、利益點曝光、任務(wù)引導(dǎo)中的一類或兩類來歸納和定義需求。如超過兩類，可以考慮梳理信息的優(yōu)先級，分期上線展示。

2）規(guī)劃信息秩序

圖形比文字更有視覺感染力，也能承載更多的信息。不同于我們用語言表達(dá)一句話，比如“點擊紅包可以獲得大量金幣”這句話念出來需要2秒，但用一個紅包圖形，抖動一下同時撒出漫天金幣只需要0.5秒，就能get到相同的意思。

因此規(guī)劃好信息的入場出場順序和運動節(jié)奏很重要，能圖形化絕不文字化，能用2個字絕不用3個字。

3）做點不一樣的

對于大部分靜態(tài)場景來說，動態(tài)icon除了功能之外，它的存在還是一個小驚喜。像Google首頁的doodle一樣，增加頁面的趣味性，提升用戶的好感度。

所以設(shè)計在滿足易懂的基礎(chǔ)上，要盡可能發(fā)揮創(chuàng)意帶來新穎的視覺傳達(dá)體驗，獲得數(shù)據(jù)和口碑的雙贏。

以上，一點小思考，歡迎在評論區(qū)補(bǔ)充。

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

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