There are 3 variations of headers, and 1 bottom navigation. The header is a distinctive rounded shape that always overlays the page background color. Text on headers are white (#FFFFFF) on a dark blue background pattern (#003961) and (#00426E).
The header is a distinctive rounded shape that always overlays the page background color.
2. Header with subhead
The maximum character count for H1 in the header is 16 characters per line, with a two line maximum. The maximum character count for the subhead in the header is 20 characters. The subhead should not exceed one line.
3. Header with contextual navigation
The header with contextual navigation is used on plan detail pages. When a user taps the green button, a contextual menu expands from the header.
1. Bottom navigation
The bottom navigation bar allows constant access to top-level destinations in the app.
Headers do not have pressed states as they are not actionable alone. Styles used within headers should inherit their styles' rules. (For ex. normal link styles apply within a header.) In the scrolled state, the rounded shape of the header animates to a straight line and the font size is reduced.
When scrolling, the rounded shape animates to a straight line and the font size is reduced to transition into the default header.
Header with subhead
The extended heaader can have a subhead, but when scrolling, the subhead fades out and the header transitions to the default header.
Header with card
Extended header with a card. As a user scrolls, cards go under the scrolled header, unless the card is sticky.
Default with sticky card
Default header with a sticky card when scrolled.
Header with contextual navigation
Default header with contextual nav button. When scrolling from extended header, button shrinks as it moves up with the header, and stays fixed below the header text. Any page content passes behind the header and contextual nav button.
Extended header with contextual nav button. Button is MetLife Green (#A4CE4E) and chevron is MetLife Darkest Gray (#333333).
Expanded contextual navigation.
The bottom navigation items are MetLife Darkest Gray (#333333) by default.
The selected state of a bottom nav bar item is MetLife Blue 2 (#007ABC).
The header provides high-level context for the page and orients the user in the app. Actions for page navigation may live in this location. The bottom navigation bar allow a user to access the most important features of the app at all times. It is only temporarily unaccessible within transactional processes.
Space between top of screen and overlaid card – 190px
Space between Subhead 1 container bottom and overliad card – 10px
Space between H3 container top and overlaid card – 10px
Space between data row container top and line – 25px
Space between dropdown and header row – 25px
Space between header row container bottom and subhead container top – 5px
Space between header row with subhead container bottom and line - 10px
Space between data row with subhead container top and line - 15px
Space between dialog box header container bottom and line – 10px
Space between dialog box body text container top and line – 15px
1. Header Scrolling
As a user scrolls, the rounded shape of the header animates to a straight line and the font size is reduced. Fixed items remain on the header as it resizes, but other items, like cards, will scroll behind the header, once it reaches its small, straight state.
2. Contextual navigation
Refer to Navigation: Transitions for contextual navigation animation.
1. Bottom Nav Transition
Bottom nav items live in the persistent navigation bar at the bottom of the screen and are hierarchically on the same level. Bottom nav transitions use native transitions.
For iOS, use the Navigation UITabBarController (https://developer.apple.com/documentation/uikit/uitabbarcontroller).
For Android, use the “Top-level transition" (https://material.io/design/navigation/navigation-transitions.html#peer-transitions).
2. Content Transition
Content items live within a top level nav item, for example, a specific auto plan lives and is accessible within Plans. Content items transition horizontally, bringing the deeper level views on top of the current view. For example, tapping an auto policy will trigger a plan detail view to fade and slide in from the right over the fixed position Plans view. Going back to the Plans view reverses that transition, moving the auto policy detail view to the right, revealing the Plans view behind it.
3. Transactional transition
Transactional items can be accessible from top and second level views. Therefore, they transition up from the bottom of the screen, on top of the fixed position curent view including the bottom nav. This should be the only case when the bottom nav is not present. Closing a transactional item reverses that transition, sending the view down past the bottom of the screen, revealing the past view behind it.
4. Contextual Menu Transition
The Contextual Menu lives on second level views such as a home plan. It provides access to deeper views within and related to the second level view. For example, coverage, payments and claims specific to the home plan.
To open the Contextual Menu, the green circular button can be tapped or dragged. Upon open the header expands downward, on top of the fixed position view behind it. As the header expands, the page title, subhead and if there are icons in the top bar, they all fade out (there should not be any actionable items in the open state of the contextual menu aside from the contextual menu items and the close arrow). The open/close arrow rotates 180 degrees as the green circle fades out. The menu items fade in progressively from top to bottom.
To close the menu, the arrow can be tapped or dragged upward. Upon close, all of the above transition are reversed.