DEV Community

Selina
Selina

Posted on

Animations in iOS: Tab Bar concepts

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?

1_yTtJ9dHsouqXC4y3B3oO5g.gif

WeChat Tab Bar Redesign by Adrian Reznicek for PLATFORM

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Animated tab bar concept by Cadabra Studio

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Camera app tab bar [iPhone X edition] concept by Oleg Frolov for Magic Unicorn

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Yoga App Menu Concept by Dannniel

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Create a New Document Tab Bar concept by Hoang Nguyen

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Fluid Tab Bar Interaction concept by Oleg Frolov

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Animated Tab Bar Icons — Interface concept by Andrew McKay

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Animated Tab Bar Icons — Interface concept by Andrew McKay

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Tab bar icons by Dimest

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Tab bar active animation by Aaron Iker, based on Valentin Tsymbaluk concept

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Animated Tab Bar Icons — Interface concept and Swift implementation by Ramotion

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Tab bar interaction concept by Boyang Zhang

1_yTtJ9dHsouqXC4y3B3oO5g.gif

Animated Tab Bar concept by Mauricio Bucardo

1_yTtJ9dHsouqXC4y3B3oO5g.gif

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)

Collapse
 
jrtibbetts profile image
Jason R Tibbetts

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.