如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

Tab bar 作為整個 APP 的第一觸點(diǎn)，給用戶傳遞的理念及信息在整個 APP 中具有不可替代的重要性。我們的第一感受是粗糙或是精致，都會通過這個簡單的操作切換而感知。因此 tab bar 的設(shè)計(jì)，往往也是檢驗(yàn)整個 APP 設(shè)計(jì)是否精致的標(biāo)準(zhǔn)。

Tab bar 設(shè)計(jì)中，有一個很重要但卻常常會被設(shè)計(jì)師們遺漏的關(guān)鍵點(diǎn)──tab 切換時的 「圖標(biāo)動畫設(shè)計(jì)」。如這些 APP 的底部 tab 設(shè)計(jì)都使用了這一種方式（以下視頻）：

Tab bars圖標(biāo)動畫的作用

精彩的圖標(biāo)動畫，對整體的設(shè)計(jì)具有畫龍點(diǎn)睛的作用，降低 tab 切換時的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動畫設(shè)計(jì)給用戶傳達(dá)出整個 APP 設(shè)計(jì)的品牌及理念。

1. 動靜對比

動態(tài)的設(shè)計(jì)豐富了圖標(biāo)更多可能性的表達(dá)，結(jié)合不同的動態(tài)效果表達(dá)出不同的情緒或情感。而除了情感的表達(dá)之外，最基礎(chǔ)的作用在于動態(tài)比靜態(tài)更加吸引眼球，增加視覺關(guān)注度，因此在切換 tab 時具有更強(qiáng)的視覺沖擊力。

2. 柔和與生硬

緩動的動效過渡，相比于無動效的設(shè)計(jì)，在 tab 切換時整體的視覺感受會更加柔和、輕量。過渡直接的反饋，容易造成生硬而不具美感。

3. 趣味的表達(dá)

由于動效的加入，我們在設(shè)計(jì) tab 切換時會變得更加多元化，而不是單純的設(shè)計(jì)一個動作的反饋。在過渡的時間差中，可以進(jìn)行很多趣味的表達(dá)。

3. 情緒代入

圖標(biāo)結(jié)合表情的設(shè)計(jì)，運(yùn)用動效的設(shè)計(jì)，讓整體的情緒感受更加直觀。如下圖案例，默認(rèn)態(tài)與選中態(tài)通過前后的差異對比，點(diǎn)擊后出現(xiàn)的表情驚喜，具有不一樣的情緒變化。

Tab bar圖標(biāo)動畫的基礎(chǔ)類型

動畫的設(shè)計(jì)是多樣化的，Tab bar 圖標(biāo)動畫的類型實(shí)際上并沒有明確的劃分，這里主要列舉的是自己在日常瀏覽設(shè)計(jì)網(wǎng)站時的收集，以及個人認(rèn)為比較常見的一些類型。我們可以基于這些常見類型的設(shè)計(jì)，對我們的設(shè)計(jì)進(jìn)行再升華，從而提高整體設(shè)計(jì)的質(zhì)感和趣味。

1. 縮放動畫

點(diǎn)擊后通過一定的比例 「縮放」 反饋，突出 tab 之前的變化，從而強(qiáng)化了 tab 操作的感知，提升對于操作區(qū)域的視覺聚焦。結(jié)合不同的縮放效果，可以呈現(xiàn)出不同的視覺感知，縮放動畫大致分為線性和彈性兩種類型。

線性縮放

圖標(biāo)在放大或縮小的過程中，使用了勻速的動畫效果，整體動畫一步到位、干凈利落。整體視覺感知較為柔和。

彈性縮放

帶有彈性縮放的 tab 反饋，讓整體的設(shè)計(jì)更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標(biāo)的運(yùn)動規(guī)則：先從 0 放大到最大（數(shù)值根據(jù)實(shí)際情況設(shè)定），然后再回彈至正常大小。

2. 透明度自然過渡

讓 tab 切換之間的過渡更加自然、柔和。相比于純靜態(tài)切換只多了一層透明度變化，但卻具有完全不一樣的視覺感受。

3. 位移

位移出現(xiàn)的圖標(biāo)會產(chǎn)生一定的速度感，但需要控制位移的速度，過快容易忽略中間的運(yùn)動軌跡，而影響自然過渡的效果。

4. 抖動

通過圖標(biāo)的左右、上下快速位移或旋轉(zhuǎn)形成，整體的動畫效果節(jié)奏較快，具有一定的速度感。情緒表達(dá)上較為俏皮。

左右抖動

點(diǎn)擊后，圖標(biāo)反饋進(jìn)行上下快速位移。建議來回位移次數(shù)不宜太多，控制在 1-2 次左右，次數(shù)太多容易顯得拖沓。

跳動的圖標(biāo)

點(diǎn)擊切換后，圖標(biāo)從底部彈起再回到初始位置，整體視覺感受具有跳動的韻律感。

晃動的圖標(biāo)

旋轉(zhuǎn)抖動的圖標(biāo)比上下或左右會更加具有趣味感。設(shè)定圖標(biāo)的中心點(diǎn)或角點(diǎn)為旋轉(zhuǎn)軸，通過來回晃動而形成的效果。

5. 填充

切換時，默認(rèn) tab 由線性向面性的轉(zhuǎn)變。填充類型的動畫效果整體簡單、直接，直觀地表達(dá)出圖標(biāo)切換前后的對應(yīng)關(guān)系。關(guān)鍵點(diǎn)在于處理好線性與面性圖標(biāo)的細(xì)節(jié)轉(zhuǎn)換。

中心填充

使用某種幾何圖形（可以是圓形或其他）通過發(fā)散放大的設(shè)計(jì)方式，結(jié)合一定的節(jié)奏韻律擴(kuò)展至填滿整個圖標(biāo)。

掃描填充

動畫效果從圖標(biāo)的一側(cè)，通過劃動變化至填滿。

6. 畫線-線性軌跡

以線性圖標(biāo)或線面圖標(biāo)中的線運(yùn)動為主，在設(shè)計(jì)整套圖標(biāo)時，運(yùn)動軌跡需要保持統(tǒng)一（線的初始與結(jié)束的位置/方向等）。軌跡不一致，容易導(dǎo)致圖標(biāo)的一致性被破壞。

局部細(xì)節(jié)畫線

選擇圖標(biāo)的關(guān)鍵細(xì)節(jié)或圖標(biāo)的特征進(jìn)行畫線設(shè)計(jì)，增強(qiáng)圖標(biāo)的特征細(xì)節(jié)，提高圖標(biāo)的記憶點(diǎn)。

整體畫線

與局部細(xì)節(jié)畫線基本一致，差別的點(diǎn)在于表達(dá)了不同的視覺感受。整體畫線從視覺感受上會相對更加飽滿。但需要根據(jù)圖標(biāo)的復(fù)雜程度而定，圖標(biāo)過渡復(fù)雜，可能容易造成拖沓的動畫效果。

7. 結(jié)合容器

結(jié)合不同的幾何形作為選中圖標(biāo)的當(dāng)前態(tài)的背景，在背景上設(shè)計(jì)出現(xiàn)的動畫效果。既強(qiáng)化了選中當(dāng)前態(tài)，整體的 tab 切換的一致性也較高。

8. 元素介質(zhì)

設(shè)計(jì)上結(jié)合某種圖形元素作為當(dāng)前選中態(tài)，在切換時通過元素的位移、跳動等方式來達(dá)到 tab 切換的動畫效果。

Tab圖標(biāo)動畫的組合形

除了以上單種類型的動畫方式外，還可以嘗試多種方式結(jié)合。通過不同的方式結(jié)合可以產(chǎn)生出更多的可能性，讓你的設(shè)計(jì)更加具有創(chuàng)意和打破常規(guī)。

1. 填充+畫線

2. 填充+抖動

3. 彈性縮放+填充

4. 元素介質(zhì)+抖動

5. 位移+透明度

更多案例（來自dribbble）

總結(jié)

tab bar 的圖標(biāo)動畫最大的作用在于解決切換時的枯燥與單調(diào)，我們在設(shè)計(jì)時除了單純追求動畫的變化及多樣性之外，更多需要思考的是什么樣的動畫更符合我們的設(shè)計(jì)。

本文的主旨是分享自己日常看到的一些動畫效果，以及對收集的內(nèi)容進(jìn)行的分析。實(shí)際的動畫樣式或者效果肯定遠(yuǎn)遠(yuǎn)不只這些，我們可以通過基礎(chǔ)的方法再結(jié)合自己的創(chuàng)意發(fā)揮出更多滿足自我設(shè)計(jì)的表達(dá)方式。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。