01 前言

你有沒(méi)有注意過(guò)，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過(guò)渡），來(lái)完成狀態(tài)切換。

當(dāng)我看完上百個(gè)動(dòng)態(tài)后，找到了更有趣的方式...



02 App底部導(dǎo)航構(gòu)成

通常由圖標(biāo)、文字/點(diǎn)線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計(jì)師在進(jìn)行動(dòng)態(tài)設(shè)計(jì)時(shí)則是針對(duì)這3部分。

03 Tab Bar動(dòng)態(tài)類型

• 圖標(biāo)動(dòng)態(tài)
• 裝飾元素動(dòng)態(tài)
• 底板卡片動(dòng)態(tài)

動(dòng)態(tài)效果由弱到強(qiáng)，視覺(jué)層級(jí)由低到高依次排序：圖標(biāo)動(dòng)態(tài) — 裝飾元素動(dòng)態(tài) — 底板卡片動(dòng)態(tài)。（根據(jù)本文案例效果來(lái)排序，但效果不同會(huì)有所差異）

▍圖標(biāo)動(dòng)態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡(jiǎn)單的分為：線性、面性還有線面。在這基礎(chǔ)上通過(guò)修改顏色或造型，又能延展出更多風(fēng)格。

• 在底部導(dǎo)航中，假如圖標(biāo)選中前后都是線性風(fēng)格

最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過(guò)調(diào)整百分百參數(shù)來(lái)控制線條生長(zhǎng)。

但只是單色修剪，看起來(lái)很單調(diào)。我們可以在這個(gè)動(dòng)畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺(jué)看起來(lái)更豐富。

也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。

如果你覺(jué)得這些太浮夸，那么單個(gè)圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。

• 假如選中圖標(biāo)是面型風(fēng)格

通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會(huì)過(guò)多吸引用戶注意力。但對(duì)于帶有娛樂(lè)類屬性的產(chǎn)品來(lái)說(shuō)，可能會(huì)顯得有些普通。

我們可以考慮使用遮罩來(lái)制作動(dòng)態(tài)，首先在圖標(biāo)周圍繪制幾個(gè)圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來(lái)控制其顯示范圍，最后調(diào)整圓的縮放即可。

在一些特殊的時(shí)間，設(shè)計(jì)師們可能會(huì)技癢，而將圖標(biāo)繪制的更加豐富，來(lái)營(yíng)造氛圍。

對(duì)于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴(kuò)張的原則來(lái)調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場(chǎng)動(dòng)畫。

（物理狀態(tài)：該物體在現(xiàn)實(shí)場(chǎng)景下的狀態(tài)，上圖獎(jiǎng)杯真實(shí)世界狀態(tài)通常是放置地面，所以出場(chǎng)方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場(chǎng)方向是從上到下）

當(dāng)然如果去掉高光和投影，在制作一些動(dòng)態(tài)時(shí)會(huì)更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個(gè)獎(jiǎng)杯的距離，并記錄關(guān)鍵幀，然后整體再移動(dòng)一個(gè)獎(jiǎng)杯距離。耳朵則調(diào)整路徑來(lái)完成移動(dòng)和變形，這樣便能營(yíng)造出3d旋轉(zhuǎn)的錯(cuò)覺(jué)。

• 假如選中圖標(biāo)是線面風(fēng)格

對(duì)于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點(diǎn)方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。

▍裝飾元素動(dòng)態(tài)?
如果你覺(jué)得前面這些方案不夠新穎，那我們可以對(duì)裝飾元素下手。（當(dāng)然這類方案很少見(jiàn)，原因在于商業(yè)價(jià)值不足，實(shí)現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計(jì)師可能會(huì)用線或點(diǎn)來(lái)替代文字，讓整體更簡(jiǎn)潔。
國(guó)外設(shè)計(jì)師Tubik，通過(guò)讓點(diǎn)元素在移動(dòng)時(shí)呈現(xiàn)心電圖樣式，讓人眼前一亮。

通過(guò)動(dòng)態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。

• 基于這種思路，我們同樣讓裝飾元素放在下方

嘗試修改軌跡樣式，然后為元素不透明度和位置添加動(dòng)畫，你能猜出這是什么類型的產(chǎn)品嗎？

又或者再夸張些，將軌跡設(shè)計(jì)成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點(diǎn)沿路徑運(yùn)動(dòng)。最后通過(guò)蒙版來(lái)控制整體動(dòng)畫顯示范圍，這個(gè)方案看起來(lái)適合科技或游戲類產(chǎn)品。

• 裝飾元素還可以放在上方

通過(guò)調(diào)整元素路徑來(lái)改變其造型，模擬液體滴落，再通過(guò)蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。

• 裝飾元素還可以放在中間

假如你的圖標(biāo)設(shè)計(jì)的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運(yùn)動(dòng)軌跡，便能通過(guò)修剪這條軌跡來(lái)完成筆畫的移動(dòng)。

▍底板卡片動(dòng)態(tài)?
這類動(dòng)態(tài)少見(jiàn)的原因在于其動(dòng)態(tài)效果面積大，視覺(jué)層級(jí)高，容易過(guò)度吸引用戶注意力。目前也只是在個(gè)別產(chǎn)品中看過(guò)卡片凸起效果。

• 當(dāng)選中圖標(biāo)時(shí)，讓卡片凸起

在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時(shí)非常麻煩。

我們有更簡(jiǎn)單的方法，先多畫出一個(gè)圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡(jiǎn)單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個(gè)缺點(diǎn)：會(huì)收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大小）

完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。

目前能記起的只有美團(tuán)外賣看過(guò)這效果。但為了降低視覺(jué)干擾，其弱化了彈性次數(shù)。

• 除了凸起，還可以凹陷

這個(gè)效果靈感來(lái)源于Dribbble設(shè)計(jì)師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運(yùn)算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。

此方案目前還沒(méi)有在其他產(chǎn)品中看過(guò)，究其原因還是效果太過(guò)搶眼。

看了這么多，其實(shí)不難發(fā)現(xiàn)。同一個(gè)圖標(biāo)，只需要改變不同屬性或元素的運(yùn)動(dòng)方式，便能帶來(lái)不一樣的感受。

或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來(lái)。
正是它們之間這種奇妙的融合，給我們帶來(lái)了新鮮感，或許這就是我們要的創(chuàng)意。

最后再說(shuō)兩句：

每個(gè)產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動(dòng)態(tài)效果也有強(qiáng)有弱。好的動(dòng)態(tài)應(yīng)該是能與其進(jìn)行匹配，而不是根據(jù)某個(gè)產(chǎn)品得出一個(gè)絕對(duì)的答案。
本文演示了不同類型圖標(biāo)用什么動(dòng)態(tài)，并不代表只能這樣用。動(dòng)態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見(jiàn)的動(dòng)態(tài)屬性組合方式，所以請(qǐng)不要局限你的想法。