We see tab bars every day.
They guide users inside the app, allowing them to quickly switch between different tabs. Apple provides a nice into in their Human Interface Guidelines:
Tab bars are translucent, may have a background tint, maintain the same height in all screen orientations, and are hidden when a keyboard is displayed. A tab bar may contain any number of tabs, but the number of visible tabs varies based on the device size and orientation. If some tabs can’t be displayed due to limited horizontal space, the final visible tab becomes a More tab, which reveals the additional tabs in a list on a separate screen
But who said mobile navigation should be boring?
Let’s explore interesting animations inside the tab bars. I focused first on the ones made for iOS platform. And mentioned several useful guides to implement animated tab bars in Swift 📚
Some of the animations are from real apps. While others — are just nice design concepts, made for inspiration.
Would you use some of them for your apps?
WeChat Tab Bar Redesign by Adrian Reznicek for PLATFORM
Animated tab bar concept by Cadabra Studio
Camera app tab bar [iPhone X edition] concept by Oleg Frolov for Magic Unicorn
Yoga App Menu Concept by Dannniel
Create a New Document Tab Bar concept by Hoang Nguyen
Fluid Tab Bar Interaction concept by Oleg Frolov
Animated Tab Bar Icons — Interface concept by Andrew McKay
Animated Tab Bar Icons — Interface concept by Andrew McKay
Tab bar icons by Dimest
Tab bar active animation by Aaron Iker, based on Valentin Tsymbaluk concept
Animated Tab Bar Icons — Interface concept and Swift implementation by Ramotion
Tab bar interaction concept by Boyang Zhang
Animated Tab Bar concept by Mauricio Bucardo
Tab bar interaction concept by Kaiseir
If you want to practice with designing or developing tab bars, these guides will help you out:
Human Interface Guidelines on Tab Bars, where you’ll learn best practices in a quick 4 min read.
Guide on “Starting an iOS Tab Bar App with UITabBarViewController”.
29 implemented examples .
Swift UI module library for adding animation to iOS tab bar.
Hope you enjoyed this small inspirational peace. You can also check 30 beautiful examples of animations for iOS and Everything you need to know about Loading Animations
Happy designing and developing!
Top comments (1)
I'm a fan of the ones with small animations that are contained within each tab. The ones that show some sort of animated transition from one tab to another are distracting.