Firefox OS Tab Bar, Toolbar and Filters

Basics

Tab Bars, Toolbars and Filters are main navigation elements affecting the contents of the screen they are used on. By design they are as neutral and simple as possible assuring both clarity and legibility. The background of Tab Bars and Filters are opaque as they change the content view of the screen. In contrast, Toolbars employ a slightly transparent background allowing the content to subtly be seen underneath. Action icons are used on Toolbars which affect that content on screen.

Tab Bar

The Tab Bar is a solid black rectangle that is 4 rem in height and sits at the bottom of the screen. Action icons appear within the Tab Bar allowing the user to navigate between different sections of certain apps.

The maximum amount of action icons on a normal screen device is 5. There are two variations of icon distribution: Equal and Alternate. Equal distribution is used when the Tab Bar contains similar actions, while the alternate groups icons with similar actions together.

Toolbar

The Toolbar is a black rectangle (set to 85% opacity) that is 4.5 rem in height and sits at the bottom of the screen. Action icons are used on the Toolbar to represent a variety of actions that have the ability to affect the state of the particular screen they are found on.

Similar to Tab Bars, the maximum amount of icons to be used on a normal screen device is 5. There are two kinds of icon distribution, equal and alternate. Equal distribution is used when the Toolbar contains similar actions, while the alternate groups icons with similar actions together.

Equal Icon Distribution (5 Items)
Idle
Equal Icon Distribution (4 Items)
Idle
Equal Icon Distribution (3 Items)
Idle
Pressed
Pressed
Pressed
Alternate Icon Distribution: Example 1
Idle
Alternate Icon Distribution: Example 2
Idle
Pressed
Pressed
Toolbar Structure for Alternate Distribution

When distributing the icon unevenly, the bar splits into 5 columns and icons are grouped together by type of action.

Filters

Filters can be placed on the top or bottom of the screen, depending on the scenario for use. The selected filter is white and connects with the content on screen. Unselected filters are light grey and appear to sit behind the selected tab.

Top Filters
Bottom Filters (Maximum Amount)

Usage Examples

Tab Bar with 3 action icons
Tab Bar with 5 action icons
Top filters
Bottom filters
Toolbar normal distribution

Download

You can download the Firefox OS Stencil PSD here.