?

全國統一服務熱線:18021770366

站內公告:

淮安市嘉瑞廣告有限公司主要提供廣告設計制作安裝服務以及網站制作,是一家經驗豐富的廣告設計制作公司,擁有十幾年廣告設計制作經驗!

聯系我們CONTACT

地址:淮安市翔宇大道1009號
熱線:0517-8588 1663
Q Q:34665706
郵箱:[email protected]

18021770366

新聞中心

當前位置:主頁 > 新聞中心 >

Tab Bar圖標安裝動效設計

2019-12-11 點擊量:

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

Tab Bar圖標動效設計

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

Tab Bars圖標動畫的作用

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

動靜對比

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

Tab Bar圖標動效設計

Tab Bar圖標動效設計

柔和與生硬

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

Tab Bar圖標動效設計

Tab Bar圖標動效設計

趣味的表達

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

Tab Bar圖標動效設計

情緒代入

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

Tab Bar圖標動效設計

Tab Bar 圖標動畫的基礎類型

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

縮放動畫

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

線性縮放

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

Tab Bar圖標動效設計

彈性縮放

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

Tab Bar圖標動效設計

透明度自然過度

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

Tab Bar圖標動效設計

位移

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

Tab Bar圖標動效設計

抖動

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

左右抖動

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

Tab Bar圖標動效設計

跳動的圖標

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

Tab Bar圖標動效設計

晃動的圖標

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

Tab Bar圖標動效設計

填充

?
渡劫5龙宫赚钱