All right, the top bar that thing at the bottom of your screen that's which is between the main views between the main sections of your app. Let's mention the regular things. top bar is by default translucent and lowers the content underneath it. In practice, keep it consistent with other bars that you have. It always appears at the bottom edge of the screen of you, and it maintains the same height in all orientations. A quick of this note, don't use the top bar to give users controls that act on elements in the current stream.
That's a toolbar stroke. You can display a maximum of five tabs on an iPhone and a maximum of seven on iPads. You're supposed to keep the same amount of tabs in landscape orientation as you do have in the portrait, one Because it's best when you can give users a sense of visual stability by providing the same types in every area datian. Apple tells us, you know, our addition does not matter. In a horizontal orientation, center the tops. Now here's an interesting part.
Tab bar becomes a left pane in the landscape orientation of the horizontal, irregular environments. These are more tabs. And you can see the last tab becomes a more tab. And that tab reveals the additional tabs in the list, just as we see in this example from the Facebook app. guidelines say in the horizontal irregular environment, avoid creating a more tab because in the horizontal irregular environment, a stream devoted solely to all these additional tabs is a poor user space. But look at the features Again, they use the more tab on iPads just as they do on iPhones.
And guess what? no one died. And it actually has a benefit of consistency between the iPhone and the iPad versions. So it's up to you to decide how to do this, move tabs to the left pane, or just have the same bottom place tab bar on iPads as well. My advice is that both ways are working. Consider that if you're using tabs and the more tab on mobiles probably makes sense to the same on iPads.
And if yours in the sidebar UI element on mobiles instead of the tabs. It makes sense to use left navigation pane and horizontal irregular environments like iPads and iPhone six plus. If you have up to seven types only, just go ahead and introduce all seven tabs in horizontal irregular environments. Don't remove a tab when it's functional is unavailable. If you remove a tab in Some cases but not in others, you make your apps UI unstable and unpredictable, which is not a good thing. The best solution is to ensure that all tabs are enabled, but explain why it apps content is unavailable.
Like you see in this example here, dashboard empty, you can add dashboard items from health data. A note from beyond the official guidelines, you can fade out a tabs icon and the title is the content of the tab is disabled and unavailable yet to give users a hint about that fact. A badge is the red oval with a number or an exclamation point. You can display it on a top bar icon to indicate that there's something new and earthy in that top. Note that nothing changes on that top, it keeps the same color just the Red Badge appears. In horizontally irregular environments according to Apple, you can use a tab bar in the Secondary pain of a split view controller.
I have honestly never seen such example in real life. But to have come up with illustrations for this, my advice stay away from doing this. On the other hand, using tabs in primary view of the split view controller is not specified anywhere. But as you can see, the Facebook Messenger does it quite successfully. And it feels natural lift band for all the navigation purposes. And it looks like the one on the phone and right view is for the content.
Guidelines also state that it's possible to use tabs in the popover in horizontal irregular environments. But then they said that it's better to use segmented control there instead. And I agree with that. avoid having too many tabs. each additional tap reduces the topical area for selecting the tap and increases the company complexity of your app, making it harder to locate information. Although a more tab can display extra tabs, this requires additional tabs and is a poor use of space.
Include essential tabs only, and use the minimum tabs necessary for your information hierarchy. Too few tabs can be a problem too, as you can make your interface feel disconnected. In general, use between three and five tabs on iPhone a few more acceptable on iPad. Always switch contexts in that touched view only. To keep your interface predictable. Selecting a tab should always affect the view that's directly attached to the top bar, not another view elsewhere on the screen.
For example, selecting a tab on the left side of a split view shouldn't cause the right side of the split view to suddenly change. Selecting the top in a popover shouldn't go to the View behind the popover to change Kinda stayed at the top bars and toolbars never appeared together in the same view. Here's an example of them appearing together in the same view. And guess what? It's perfectly fine in my opinion. I also wanted to point out that when you go deeper in the hierarchy of the app, the top bar always remains visible, and the current top you were originally on keeps being highlighted as an active one.