Tab Bar 圖標(biāo)動(dòng)畫設(shè)計(jì)
Tab bar 作為整個(gè)APP的第一觸點(diǎn),給用戶傳遞的理念及信息在整個(gè)APP中具有不可替代的重要性。我們的第一感受是粗糙或是精致,都會(huì)通過這個(gè)簡單的操作切換而得到。因此,tab bar 的設(shè)計(jì),往往也檢驗(yàn)著著整個(gè)APP設(shè)計(jì)是否精致的標(biāo)準(zhǔn)。
Tab bar設(shè)計(jì)中,有一個(gè)很重要但卻常常會(huì)被設(shè)計(jì)師們遺漏的關(guān)鍵點(diǎn)——tab切換時(shí)的“圖標(biāo)動(dòng)畫設(shè)計(jì)”。
如這些APP的底部tab設(shè)計(jì)時(shí)都使用了這一種方式(以下視頻):
Tab bars圖標(biāo)動(dòng)畫的作用
精彩的圖標(biāo)動(dòng)畫,對整體的設(shè)計(jì)具有畫龍點(diǎn)睛的作用,降低tab切換時(shí)的枯燥感,提升操作的愉悅度和期待感。甚至可以通過tab的動(dòng)畫設(shè)計(jì)給用戶傳達(dá)出整個(gè)APP設(shè)計(jì)的品牌及理念。
1. 動(dòng)靜對比
動(dòng)態(tài)的設(shè)計(jì)豐富了圖標(biāo)更多可能性的表達(dá),結(jié)合不同的動(dòng)態(tài)效果表達(dá)出不同的情緒或情感。而除了情感的表達(dá)之外,最基礎(chǔ)的作用在于動(dòng)態(tài)比靜態(tài)更加吸引眼球、增加視覺關(guān)注度。因此,在切換tab時(shí)具有更強(qiáng)的視覺沖擊力。
2. 柔和與生硬
緩動(dòng)的動(dòng)效過度,相比于無動(dòng)效的設(shè)計(jì),在tab切換時(shí)整體的視覺感受會(huì)更加柔和、輕量。過度直接的反饋,容易造成過度生硬而不具美感。
3. 趣味的表達(dá)
由于動(dòng)效的加入,我們在設(shè)計(jì)tab切換時(shí)會(huì)變得更加多元化,而不是單純的只是設(shè)計(jì)一個(gè)動(dòng)作的反饋。在過度的時(shí)間差中,可以進(jìn)行很多趣味的表達(dá)。
4. 情緒代入
圖標(biāo)結(jié)合表情的設(shè)計(jì),運(yùn)用動(dòng)效的設(shè)計(jì),讓整體的情緒感受更加直觀。
如下圖案例,默認(rèn)態(tài)與選中態(tài)通過前后的差異對比,點(diǎn)擊后出現(xiàn)的表情驚喜,具有不一樣的情緒變化。
Tab bar圖標(biāo)動(dòng)畫的基礎(chǔ)類型
動(dòng)畫的設(shè)計(jì)是多樣化的,Tab bar 圖標(biāo)動(dòng)畫的類型實(shí)際上并沒有明確的劃分,這里主要列舉的是自己在日常瀏覽設(shè)計(jì)網(wǎng)站時(shí)的收集,以及個(gè)人認(rèn)為比較常見的一些類型。我們可以基于這些常見類型的設(shè)計(jì),對我們的設(shè)計(jì)進(jìn)行再升華,從而提高整體設(shè)計(jì)的質(zhì)感和趣味。
1. 縮放動(dòng)畫
點(diǎn)擊后通過一定的比例的“縮放”反饋,突出tab之前的變化,從而強(qiáng)化了tab操作的感知,提升對于操作區(qū)域的視覺聚焦。結(jié)合不同的縮放效果,可以呈現(xiàn)出不同的視覺感知,縮放動(dòng)畫大致分為線性和彈性兩種類型。
1)線性縮放:
圖標(biāo)在放大或縮小的過程中,使用了勻速的動(dòng)畫效果,整體動(dòng)畫一步到位、干凈利落。整體視覺感知較為柔和。
2)彈性縮放:
帶有彈性縮放的tab反饋,讓整體的設(shè)計(jì)更加具有趣味性,相比線性縮放也更有視覺沖擊力。圖標(biāo)的運(yùn)動(dòng)規(guī)則:先從0放大到最大(數(shù)值根據(jù)實(shí)際情況設(shè)定),然後再回彈至正常大小。
2. 透明度自然過度
讓tab切換之間的過度更加自然、柔和。相比于純靜態(tài)切換只多了一層透明度變化,但卻具有完全不一樣的操作視覺感受。
3. 位移
位移出現(xiàn)的圖標(biāo)會(huì)產(chǎn)生一定的速度感,但需要控制位移的速度,過快容易忽略中間的運(yùn)動(dòng)軌跡,而影響自然過度的效果。
4. 抖動(dòng)
通過圖標(biāo)的左右、上下快速位移或旋轉(zhuǎn)形成,整體的動(dòng)畫效果節(jié)奏較快,具有一定的速度感。情緒表達(dá)上較為俏皮。
1)左右抖動(dòng)
點(diǎn)擊后,圖標(biāo)反饋進(jìn)行上下快速位移。建議來回位移次數(shù)不太太多,控制在1-2次左右,次數(shù)太多容易顯得拖沓。
2)跳動(dòng)的圖標(biāo)
點(diǎn)擊切換后,圖標(biāo)從底部彈起再回到初始位置,整體視覺感受具有跳動(dòng)的韻律感。
3)晃動(dòng)的圖標(biāo)
旋轉(zhuǎn)抖動(dòng)的圖標(biāo)比上下或左右會(huì)更加具有趣味感。設(shè)定圖標(biāo)的中心點(diǎn)或角點(diǎn)為旋轉(zhuǎn)軸,通過來回晃動(dòng)而形成的效果。
5. 填充
切換時(shí),默認(rèn)tab由線形向面形的轉(zhuǎn)變。填充類型的動(dòng)畫效果整體簡單、直接,直觀的表達(dá)出圖標(biāo)切換前后的對應(yīng)關(guān)系。關(guān)鍵點(diǎn)在于處理好線形與面形的圖標(biāo)的細(xì)節(jié)轉(zhuǎn)換。
1)中心填充
使用某種幾何圖形(可以是圓形或其他)通過發(fā)散放大的設(shè)計(jì)方式,結(jié)合一定的節(jié)奏韻律擴(kuò)展至填滿整個(gè)圖標(biāo)。
2)掃描填充
動(dòng)畫效果從圖標(biāo)的一側(cè),通過劃動(dòng)變化至填滿。
6. 畫線-線形軌跡
以線性圖標(biāo)或線面圖標(biāo)中的線運(yùn)動(dòng)為主,在設(shè)計(jì)整套圖標(biāo)是,在運(yùn)動(dòng)軌跡的上需要保持統(tǒng)一(線的初始與結(jié)束的位置/方向等)。軌跡不一致,容易導(dǎo)致圖標(biāo)的一致性被破壞。
1)局部細(xì)節(jié)畫線
選擇圖標(biāo)的關(guān)鍵細(xì)節(jié)或圖標(biāo)的特征進(jìn)行畫設(shè)計(jì),增強(qiáng)圖標(biāo)的特征細(xì)節(jié),提高圖標(biāo)的記憶點(diǎn)。
2)整體畫線
與局部細(xì)節(jié)畫線基本一致,差別的點(diǎn)在于表達(dá)了不同的視覺感受。整體畫線從視覺感受上會(huì)相對更加飽滿。但需要根據(jù)圖標(biāo)的復(fù)雜程度而定,圖標(biāo)過度復(fù)雜,可能容易造成拖沓的動(dòng)畫效果。
6. 結(jié)合容器
結(jié)合不同的幾何形作為選中圖標(biāo)的當(dāng)前態(tài)的背景,在背景上設(shè)計(jì)出現(xiàn)的動(dòng)畫效果。既強(qiáng)化了選中當(dāng)前態(tài),整體的tab切換的一致性也較高。
7. 元素介質(zhì)
設(shè)計(jì)上結(jié)合某種圖形元素作為當(dāng)前選中態(tài),在切換時(shí)通過元素的位移、跳動(dòng)等方式來達(dá)到tab切換的動(dòng)畫效果。
Tab圖標(biāo)動(dòng)畫的組合形
除了以上單種類型的動(dòng)畫方式外,還可以嘗試多種方式結(jié)合。通過不同的方式結(jié)合可以產(chǎn)生出更多的可能性,讓你的設(shè)計(jì)更加具有創(chuàng)意和打破常規(guī)的設(shè)計(jì)。
1. 填充+畫線
2. 填充+抖動(dòng)
3. 彈性縮放+填充
4. 元素介質(zhì)+抖動(dòng)
位移+透明度
更多案例(來自dribbble)
總結(jié)
tabbar的圖標(biāo)動(dòng)畫最大的作用在于解決切換時(shí)的枯燥與單調(diào),我們在設(shè)計(jì)時(shí)除了單純追求動(dòng)畫的變化及多樣性之外,更多需要思考的是什么樣的動(dòng)畫更符合我們的設(shè)計(jì)。
本文的主旨主要是分享自己日常看到的一些動(dòng)畫效果,以及對收集的內(nèi)容進(jìn)行一個(gè)分享。實(shí)際的動(dòng)畫樣式或者效果肯定遠(yuǎn)遠(yuǎn)不只這些,我們可以通過基礎(chǔ)的方法再結(jié)合自己的創(chuàng)意發(fā)揮出更多滿足自我設(shè)計(jì)的表達(dá)方式。
謝謝品鑒!
作者:IDfor,公眾號(hào):IDfor(ID:IDfor_all)
本文由 @IDfor 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載
本文部分截圖來自dribbble.com和APP截圖
題圖來自Unsplash,基于CC0協(xié)議
寫的不錯(cuò)
感謝支持 ??
漲姿勢
哈哈,歡迎一起學(xué)習(xí)
小程序能實(shí)現(xiàn)tab動(dòng)畫嗎?
目前還沒有看過
axure畫不出來,其實(shí)可以原型備注或者需求文檔說明。這樣更快速和技術(shù)對接吧。get到很多tab點(diǎn)擊變化,產(chǎn)品小白長知識(shí)了哈哈哈
demo原型我首選principle
這個(gè)axurep做不了
得用ae或別的demo軟件
哈哈 看著還挺好玩的。
喜歡就好