Tab Bar圖標淮安廣告公司動效設計

2019-12-06 點擊量：

Tab bar 作為整個APP的第一觸點，給用戶傳遞的理念及信息在整個APP中具有不可替代的重要性。我們的第一感受是粗糙或是精致，都會通過這個簡單的操作切換而得到。因此 tab bar 的設計，往往也檢驗著著整個APP設計是否精致的標準。

Tab bar設計中，有一個很重要但卻常常會被設計師們遺漏的關鍵點——tab切換時的 “圖標動畫設計” 。

Tab Bars圖標動畫的作用

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

動靜對比

動態(tài)的設計豐富了圖標更多可能性的表達，結合不同的動態(tài)效果表達出不同的情緒或情感。而除了情感的表達之外，最基礎的作用在于動態(tài)比靜態(tài)更加吸引眼球、增加視覺關注度，因此在切換tab時具有更強的視覺沖擊力。

柔和與生硬

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

趣味的表達

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

情緒代入

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

Tab Bar 圖標動畫的基礎類型

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

縮放動畫

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

線性縮放

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

彈性縮放

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

透明度自然過度

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

位移

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

抖動

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

左右抖動

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

跳動的圖標

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

晃動的圖標

旋轉抖動的圖標比上下或左右會更加具有趣味感。設定圖標的中心點或角點為旋轉軸，通過來回晃動而形成的效果。

填充