Rules:
- Use a tab bar only to enable navigation, not help people perform actions. If you want perform action then you should use toolbar.
- Make sure the tab bar is visible when people navigate to different areas in your app.
N.B: The exception only for Modal View because it's gives user separate experience that they dismiss when they're finished, hiding the view's tab bar dosen't affect app navigations. - Use the minimum number of tabs required to help people navigate your app. In general, use 3 to 5 tabs in iOS. Use short title and icon for avoid crowding.
- Keep tabs visible even when their content is unavailable. Necessarily explain why content not available. Suppose if now music or video founded then offer or suggestions the user for downloading it.
- Use Concrete nouns or verbs as tab titles. Consider noun fro category titles like Music, Movies, Sports etc. Because it helps people navigate by clearly describing the type of content people find when they select the tab.
- Be cautious of overcrowding tabs with functionality.
- A tab bar hides when a keyboard is onscreen.
- Avoid overflow tabs whenever possible. When horizontal space limits the number of visible tabs, the trailing tab becomes a More tab. And revealing the remaining items in a list on a separate screen.
- Ensure that tabs affect the view that's attached to the tab bar, not views elsewhere onscreen. For example, make sure selecting a tab on the left side of a split view dosen't cause the right side of the split view to change.
- Consider using SF Symbols to provide scalable, visually consistent tab bar items. When you use SF Symbols, tab bar items automatically adapt to different contexts. For example, the tab bar can be regular or compact, depending on the current device and orientation. Also, tab bar icons can appear above tab titles in portrait orientation, whereas in landscape, the icons and titles can appear side by side. Prefer filled symbols or icons for consistency with the platform. If your app uses a sidebar instead of a tab bar when it runs on iPad, switch the filled symbols or icons to the outlined variant in the sidebar. If you need to create custom tab bar icons using bitmaps, create each icon in two sizes so that the tab bar looks good in both regular and compact environments. Use the following metrics when creating tab bar icons in different shapes.
Target width and height (circular icons):
Regular tab bars:
25x25 pt (75x75 px @3x)
25x25 pt (50x50 px @2x)
Compact tab bars:
18x18 pt (54x54 px @3x)
18x18 pt (36x36 px @2x)
Target width and height (square icons):
Regular tab bars:
23x23 pt (69x69 px @3x)
23x23 pt (46x46 px @2x)
Compact tab bars:
17x17 pt (51x51 px @3x)
17x17 pt (34x34 px @2x)
Target width (wide icons):
Regular tab bars:
21pt (93px @3x)
31pt (62px @2x)
Compact tab bars:
23pt (69px @3x)
23pt (46px @2x)
Target height (tall icons):
Regular tab bars:
28pt (84px @3x)
228pt (56px @2x)
Compact tab bars:
20pt (60px @3x)
20pt (40px @2x)
References: https://developer.apple.com/design/human-interface-guidelines/components/navigation-and-search/tab-bars/
0 Comments
Leave a Comment