起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識干貨總結：產品首頁的動態icon設計法則
編輯導讀：在很多產品的首頁，動態icon是一個常見的設計。動態icon設計，本質上是對流動信息的感知設計。本文作者對一些產品的動態icon設計展開分析，希望對你有幫助。
在很多APP首頁的金剛區，動態icon是一個常見的設計。由于幾百像素的二維空間所能承載的靜態圖像信息實在有限，因此不得不借助時間這一維度，使二維靜態icon化身為“三維”動態icon。
所以動態icon設計，本質上是對流動信息的感知設計。
有別于我們在做PPT時給各種元素添加的動態效果，PPT的動效往往是為了配合演講的節奏而強調元素的存在和變化，因為運動的事物總是更容易吸引視線。
而動態icon除了比靜態icon更容易引起注意以外，它本身還要具有自敘故事的能力。
講故事是考驗品牌拓展能力的一個硬技能，故事講得好，就能快速占領用戶心智。
這需要我們在設計前就規劃好故事腳本，也就是信息流動的秩序。
梳理信息秩序并不難，按照常用的腳本可以分為幾種類型：視覺引導、情感共鳴、品牌背書、利益點曝光、任務引導等。
在實際的項目中通常會結合以上的一類或兩類。超過兩類會對信息秩序和動態時長都造成不小的挑戰，盡量避免。
來看幾個簡單的例子。
01 隨申辦 · 考拉海購
動態類型：情感共鳴 + 視覺引導
上海的朋友應該對這個小籠包印象深刻，它就存在于我們每天都要出示健康碼的APP-隨申辦首頁。
設計一方面選擇了上海的經典美食小籠包作為情感傳遞的視覺載體，增強用戶啟動首頁后的情感歸屬和心理認同，賦予一個工具類APP以有趣的性格，拉近與用戶的距離。
另一方面小籠包本身發揮了“播報員”的職能：在有新消息的時候會彈出提示紅點，引導用戶點擊查看；沒有新消息的時候，也作為一個動態視覺引導元素，實時提供天氣預報等日常信息。
與此類似的還有考拉海購在首頁推出的考拉樂園。考拉樂園是一個類似之前美團“袋鼠快跑”的促活養成型小游戲，通過合并同類項完成升級。
視覺元素十分簡要，一只考拉抱著裝滿商品的禮盒，是一個有溫度的icon設計，但卻并不能很精準地傳遞出其小游戲的屬性。
在3秒時間內，通過重新編排信息流動的秩序，相信一定能有比這更好的方案。
02 餓了么 · 有道翻譯
動態類型：視覺引導
2020年疫情嚴重期間，線上買菜的需求爆棚，餓了么在首頁金剛區添加了買菜功能的入口。為了在一定時期內強化該垂類業務引導，功能圖標很自然地采用了動態形式。
用戶啟動生活消費類的APP，往往不會漫無目標，因此啟動以后在首頁的停留通常只有短短幾秒。
這幾秒的時間內用戶會尋找原本主線任務的入口，同時會被一些碎片化信息（比如首焦banner、運營文案、消息提示等）分散注意力，從而被動發生支線任務。
買菜icon要做的就是在這幾秒的時間內迅速抓住眼球，告訴用戶“可以在我們這買菜了”。不管達成的目的是“用戶真的在當下點擊查看”，還是“知道了下次再來”。除此以外不能傳遞任何冗余的信息。
這一類屬于純視覺引導。在商業化熾熱的環境下，大家都盡可能地將這幾秒內的幾十幀圖形塞的滿滿當當，盡可能利用它承載更多的商業功能。而單純的視覺引導icon，最主要的功能是傳遞出新功能上線的信息。
再比如有道翻譯首頁的“單詞本”功能，看得出設計是為了避免對用戶原本的任務路徑帶來打擾，所以很克制圖形運動的表達。與我們日常見到的動態icon相比，這里的動效十分輕微。
03 美團 · 京東
動態類型：品牌背書 +利益點曝光
美團買藥這個icon結合了品牌名人背書和利益點曝光兩個維度的信息，算是設計難度較高的一類。畢竟人物肖像的辨識度對像素要求較高，且不同元素之間轉場的流暢性和易讀性對時長的要求也很高。
這一類icon的設計要點是信息的進出節奏，和單幀的信噪比。用戶不會為此停留而中斷原本任務，所以轉場次數不宜超過3次（保證每個分鏡有1秒）、人像必須放大（保證不同分辨率設備都能識別）、利益點描述必須精簡（1秒內讀完可以理解）。
最壞的情況是“買藥”這個icon并沒有從繁雜的首頁中跳脫，而用戶的視線劃過它只用了0.2秒。
在這0.2秒里，哪怕用戶只瞥見一個分鏡，這個分鏡的內容對于“美團買藥”功能的營銷傳播也是有效的。
然后看一個不那么有效的例子。
京東這個icon應該說是想表達的內容太多了，典型的填鴨式文案，也亂了秩序。靜態下的“充值繳費服務”icon在疊加了幾層贅述和利益點以后，用戶有點不明所以。究竟是服務打折還是爆款打折，是低至5折還是低至9塊9。
也有可能設計換了一種思維，正因為考慮到用戶停留時間短暫，才選擇這種邏輯性不強的“閃回式”方案。不管你在零點幾秒里看到了什么，也不管看懂與否，總之讓你知道我這在打折，你進來看看就是了。
要是這個思路，勉強也能接受。
04 網易嚴選 · 有道翻譯 · 淘寶
動態類型：任務引導+利益點曝光
“簽到領福利”算是這一類動態icon最典型的體現了。設計要點除了動效好看之外，圖標必須附注說明：“簽到”字樣和利益點元素，保證在最短時間同步用戶認知。
左圖是有道翻譯，簽到領取的學習幣為非現金獎勵，因而icon中利益點文案以“福利”二字概括，抽象但有一定吸引力。
右圖是淘寶，其充值中心有一個“簽到薅羊毛”返還充值金的活動，可以直接抵現，文案“紅包”則更直截了當。在合規允許的條件下，將用戶利益驅動心理撐到了最大化。
這一類案例在信息秩序的表達上相對簡單，邏輯清晰，設計可以著重發力在視覺創新上，結合品牌符號創造有記憶點的設計。
05 支付寶
動態類型：任務引導 + 情感共鳴
說到視覺創新和品牌符號，不得不提這個我們每天都會刷的螞蟻森林。
已經忘了曾幾何時，螞蟻森林待收能量開始通過這個會動的小樹苗來提醒用戶。我每天收能量之前都會把它完整地看一遍。
這的確是一個很輕量但很有記憶點的設計，icon在原本廓形的基礎上進行生長動畫的疊加，而能量球出現在剛剛好的時間點。不但不會造成視覺干擾，反而加深了“螞蟻森林”這個品牌標識的留存印象。
正是那句話，好的設計不是做加法，是做減法。Less is more。
06 總結
看完上述這些案例，關于如何做好一個動態icon并且讓它真正有效地服務于業務增長，其實已經有了一個大致框架。
用幾個維度來概括，可以是以下三點：
1）定義動態類型
充分理解業務場景的訴求，分析該動態icon的底層需求，產品是要通過這個icon達成什么目標、解決什么問題。
隨后通過視覺引導、情感共鳴、品牌背書、利益點曝光、任務引導中的一類或兩類來歸納和定義需求。如超過兩類，可以考慮梳理信息的優先級，分期上線展示。
2）規劃信息秩序
圖形比文字更有視覺感染力，也能承載更多的信息。不同于我們用語言表達一句話，比如“點擊紅包可以獲得大量金幣”這句話念出來需要2秒，但用一個紅包圖形，抖動一下同時撒出漫天金幣只需要0.5秒，就能get到相同的意思。
因此規劃好信息的入場出場順序和運動節奏很重要，能圖形化絕不文字化，能用2個字絕不用3個字。
3）做點不一樣的
對于大部分靜態場景來說，動態icon除了功能之外，它的存在還是一個小驚喜。像Google首頁的doodle一樣，增加頁面的趣味性，提升用戶的好感度。
所以設計在滿足易懂的基礎上，要盡可能發揮創意帶來新穎的視覺傳達體驗，獲得數據和口碑的雙贏。
以上，一點小思考，歡迎在評論區補充。
本文由 @賞酒二兩 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
