JOYNAL ABEDIN

SOFTWARE ENGINEER

APPLE HUMAN GUIDELINES 

TabBar in Apple Human Guidelines

joynal27 283 Comments , , ,

Rules:

  1. Use a tab bar only to enable navigation, not help people perform actions. If you want perform action then you should use toolbar.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Be cautious of overcrowding tabs with functionality.
  7. A tab bar hides when a keyboard is onscreen.
  8. 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.
  9. 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.
  10. 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:
25×25 pt (75×75 px @3x)
25×25 pt (50×50 px @2x)

Compact tab bars:
18×18 pt (54×54 px @3x)
18×18 pt (36×36 px @2x)

Target width and height (square icons):

Regular tab bars:
23×23 pt (69×69 px @3x)
23×23 pt (46×46 px @2x)

Compact tab bars:
17×17 pt (51×51 px @3x)
17×17 pt (34×34 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/

You May Also Like

Navigation Bar design guideline

joynal27 249

283 thoughts on “TabBar in Apple Human Guidelines”

Leave a Reply

Your email address will not be published. Required fields are marked *