Firefox OS UX building blocks

Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.


 Dettagli
Esempi e guide

Il menu delle azioni presenta una lista di azioni,relative all'app in uso, tra cui l'utente può scegliere. Leggi la Guida allo sviluppo per i dettagli su come aggiungere il menu delle azioni alla tua app.

Characteristics

Bottoni

Dettagli
Esempi e guide

Characteristics

  • Buttons have two components: a visual target and a hit target. The hit target is always larger, in order to reduce targeting errors by making the button easier to tap.
  • Buttons have two states: normal and pressed.
  • Buttons can also be disabled, which means they can't be activated by the user, and are displayed dimmed to indicate that they're disabled.

There are several types of buttons:

Action buttons
Used when there are only a few actions and a list isn't needed. The main action button uses a special highlight color to indicate that it's the primary option.
List buttons
Used when displaying a list of actions, or to trigger the display of a value selector.
Input field buttons
Used to perform actions with input fields.
Special/custom buttons
These are used to provide specific actions including recording, dialing, and the like.

Conferme

Dettagli
Esempi e guide

Characteristics

  • Confirmation prompts are modal; they occupy the entire screen, and require user input to close them.
  • Confirmation prompts consist of:
    • Title (optional)
    • Body
    • Icon (optional)
    • A Confirmation input button, whose label can be customized
    • An optional Cancel input button, whose label can be customized

Filtri

Dettagli
Esempi e guide

Characteristics

  • Filters are presented as a horizontal sequence of buttons.
  • Only one button is focused at a time.
  • The best practice is to place filters within toolbars, so that they don't flow with content.
  • Left, middle, and right buttons can be styled uniquely. This lets you make, for example, the left and right ends of your bar take on a "sheen," or to make the bar rounded on the ends.
  • Filter buttons' widths vary depending on the number of filters in a single set.
  • You must have at least two and no more than five filters in a set.
  • A given set of filters may be labeled with either text or icons, but not both. Because filters' heights are relatively small compared to tabs, text is typically the best practice.

Titoli

Dettagli
Esempi e guide

Characteristics

  • A header is a horizontal bar the full width of the screen, which appears at the top of the screen in most apps.
  • Headers float above content, with the option of flowing with content in special instances, such as in the Browser app.
  • The heading's text provides the name of the current view.
  • The heading may optionally include additional text; for example, in an email app, the number of unread messages may be displayed.
  • Headers may include inputs for navigating and manipulating the current view.
  • Most apps (full-screen games being an obvious exception) have a header.

Aree di input

Dettagli
Esempi e guide

Characteristics

Details coming soon.

Liste

Dettagli
Esempi e guide

Characteristics

  • List items may vary in height (from one to three rows in a single item).
  • List items may be as simple as just a text string, to including images, text, and buttons.
  • Lists are comprised of rows, with optional section headers.

There are several types of list rows:

Action row
An action row is one in which a tap anywhere in the row triggers the row.
Status indicator row
Need details.
Button row
Need details.
Link row
Need details.

Dettagli
Esempi e guide

Characteristics

  • Object menus are accessed using a "press-and-hold" gesture on a selectable object, such as a list row, phone number, URL, or the like.
  • An object menu contains one or more items.
  • Object menus expand in height to accomodate their contents, to a maximum of the height of the screen; at that point, the contents of the menu scroll. As a rule of thumb, you should try to avoid having more than five items in the menu.
  • Unlike action menus, object menus do not have titles.
  • You implement object menus using the same code and style as for action menus.

Indicatori di attività e barre di progresso

Dettagli
Esempi e guide

Characteristics

  • May include an animated visual element, a text label, or both.
  • Progress and activity indicators may be used in modal windows, or inline either with content or adjacent to content.
  • An activity indicator is used to show that an activity is ongoing without indicating how long the task is expected to take; these can be "barberpole" style indicators, or spinners.
  • A progress indicator is used to show how much out of 100% of an activity has been completed.

Scrolling

Dettagli
Esempi e guide

Characteristics

There are two types of scrolling areas: scrollbars and index scrolling.

Seek bar

Dettagli
Esempi e guide

Characteristics

  • A seek bar consists of a track with a knob that indicates the current playback position.
  • The knob has both normal and "pressed" states.
  • The values for the ends of the seek bar can be specified as either text or images.
  • Seek bars may be oriented either horizontally or vertically.

Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.


 Dettagli
Esempi e guide

Il menu delle azioni presenta una lista di azioni,relative all'app in uso, tra cui l'utente può scegliere. Leggi la Guida allo sviluppo per i dettagli su come aggiungere il menu delle azioni alla tua app.

Characteristics

Button

Dettagli
Esempi e guide

Characteristics

  • Buttons have two components: a visual target and a hit target. The hit target is always larger, in order to reduce targeting errors by making the button easier to tap.
  • Buttons have two states: normal and pressed.
  • Buttons can also be disabled, which means they can't be activated by the user, and are displayed dimmed to indicate that they're disabled.

There are several types of buttons:

Action buttons
Used when there are only a few actions and a list isn't needed. The main action button uses a special highlight color to indicate that it's the primary option.
List buttons
Used when displaying a list of actions, or to trigger the display of a value selector.
Input field buttons
Used to perform actions with input fields.
Special/custom buttons
These are used to provide specific actions including recording, dialing, and the like.

Conferme

Dettagli
Esempi e guide

Characteristics

  • Confirmation prompts are modal; they occupy the entire screen, and require user input to close them.
  • Confirmation prompts consist of:
    • Title (optional)
    • Body
    • Icon (optional)
    • A Confirmation input button, whose label can be customized
    • An optional Cancel input button, whose label can be customized

Filtri

Dettagli
Esempi e guide

Characteristics

  • Filters are presented as a horizontal sequence of buttons.
  • Only one button is focused at a time.
  • The best practice is to place filters within toolbars, so that they don't flow with content.
  • Left, middle, and right buttons can be styled uniquely. This lets you make, for example, the left and right ends of your bar take on a "sheen," or to make the bar rounded on the ends.
  • Filter buttons' widths vary depending on the number of filters in a single set.
  • You must have at least two and no more than five filters in a set.
  • A given set of filters may be labeled with either text or icons, but not both. Because filters' heights are relatively small compared to tabs, text is typically the best practice.

Titoli

Dettagli
Esempi e guide

Characteristics

  • A header is a horizontal bar the full width of the screen, which appears at the top of the screen in most apps.
  • Headers float above content, with the option of flowing with content in special instances, such as in the Browser app.
  • The heading's text provides the name of the current view.
  • The heading may optionally include additional text; for example, in an email app, the number of unread messages may be displayed.
  • Headers may include inputs for navigating and manipulating the current view.
  • Most apps (full-screen games being an obvious exception) have a header.

Aree di input

Dettagli
Esempi e guide

Characteristics

Details coming soon.

Liste

Dettagli
Esempi e guide

Characteristics

  • List items may vary in height (from one to three rows in a single item).
  • List items may be as simple as just a text string, to including images, text, and buttons.
  • Lists are comprised of rows, with optional section headers.

There are several types of list rows:

Action row
An action row is one in which a tap anywhere in the row triggers the row.
Status indicator row
Need details.
Button row
Need details.
Link row
Need details.

Dettagli
Esempi e guide

Characteristics

  • Object menus are accessed using a "press-and-hold" gesture on a selectable object, such as a list row, phone number, URL, or the like.
  • An object menu contains one or more items.
  • Object menus expand in height to accomodate their contents, to a maximum of the height of the screen; at that point, the contents of the menu scroll. As a rule of thumb, you should try to avoid having more than five items in the menu.
  • Unlike action menus, object menus do not have titles.
  • You implement object menus using the same code and style as for action menus.

Indicatori di attività e barre di progresso

Dettagli
Esempi e guide

Characteristics

  • May include an animated visual element, a text label, or both.
  • Progress and activity indicators may be used in modal windows, or inline either with content or adjacent to content.
  • An activity indicator is used to show that an activity is ongoing without indicating how long the task is expected to take; these can be "barberpole" style indicators, or spinners.
  • A progress indicator is used to show how much out of 100% of an activity has been completed.

Scrolling

Dettagli
Esempi e guide

Characteristics

There are two types of scrolling areas: scrollbars and index scrolling.

Seek bar

Dettagli
Esempi e guide

Characteristics

  • A seek bar consists of a track with a knob that indicates the current playback position.
  • The knob has both normal and "pressed" states.
  • The values for the ends of the seek bar can be specified as either text or images.
  • Seek bars may be oriented either horizontally or vertically.

Stati


Dettagli
Esempi e guide

Characteristics

  • Examples include deleting multiple photos in Gallery, or deleting or moving multiple emails.
  • Positioned at the bottom of the screen, covering underlying content.
  • Closing: Status bars automatically disappear, typically after a few seconds for short messages. This can be longer, though, depending on the message and context.
  • Can include an input, such as an "Undo" option; this is optional.
  • Can optionally include an image.
  • Can either be part of an app (such as a "Photos deleted" banner in the Gallery app) or in the System (such as a "Low battery" alert).
  • Avoid displaying more than one status bar at the same time. If two status bars appear at the same time, the newer status bar replaces the older one.

Bottoni

Dettagli
Esempi e guide

Characteristics

  • A switch presents two mutually exclusive choices or states.
  • There are three types of switch:
    • On/Off toggle switches
    • Checkboxes
    • Radio buttons

Schede

Dettagli
Esempi e guide

Characteristics

  • Tab bars always fill the full horizontal width of the screen.
  • You may have up to (but no more than) five tabs in a tab bar.
  • Tab bars should be positioned at the very bottom of the screen, unless doing so would result in excessive clutter due to multiple bars of controls at the bottom of the screen.
  • Tabs can contain a variety of elements, such as buttons, filters, indicators, and the like.
  • Tabs' labels may be text, text with an icon, or just an icon.

Barra degli strumenti

Dettagli
Esempi e guide

Characteristics

  • Toolbars are always the full width of the screen, and are always the same height.
  • Toolbars never scroll with content; instead, they float above content.
  • Toolbars should always be positioned at the very bottom edge of the screen unless tabs are also present, in which case the toolbar is positioned at the top of the screen instead.
  • Toolbars may contain a wide variety of elements, including buttons, filters, progress/activity indicators, and so forth.

Dettagli

Characteristics

  • Value selectors may have an optional title.
  • The following types of value selectors are provided:
    • Date
    • Time
    • SIngle-select list
    • Multiple-select list

 

Stati


Dettagli
Esempi e guide

Characteristics

  • Examples include deleting multiple photos in Gallery, or deleting or moving multiple emails.
  • Positioned at the bottom of the screen, covering underlying content.
  • Closing: Status bars automatically disappear, typically after a few seconds for short messages. This can be longer, though, depending on the message and context.
  • Can include an input, such as an "Undo" option; this is optional.
  • Can optionally include an image.
  • Can either be part of an app (such as a "Photos deleted" banner in the Gallery app) or in the System (such as a "Low battery" alert).
  • Avoid displaying more than one status bar at the same time. If two status bars appear at the same time, the newer status bar replaces the older one.

Bottoni

Dettagli
Esempi e guide

Characteristics

  • A switch presents two mutually exclusive choices or states.
  • There are three types of switch:
    • On/Off toggle switches
    • Checkboxes
    • Radio buttons

Schede

Dettagli
Esempi e guide

Characteristics

  • Tab bars always fill the full horizontal width of the screen.
  • You may have up to (but no more than) five tabs in a tab bar.
  • Tab bars should be positioned at the very bottom of the screen, unless doing so would result in excessive clutter due to multiple bars of controls at the bottom of the screen.
  • Tabs can contain a variety of elements, such as buttons, filters, indicators, and the like.
  • Tabs' labels may be text, text with an icon, or just an icon.

Barra degli strumenti

Dettagli
Esempi e guide

Characteristics

  • Toolbars are always the full width of the screen, and are always the same height.
  • Toolbars never scroll with content; instead, they float above content.
  • Toolbars should always be positioned at the very bottom edge of the screen unless tabs are also present, in which case the toolbar is positioned at the top of the screen instead.
  • Toolbars may contain a wide variety of elements, including buttons, filters, progress/activity indicators, and so forth.

Dettagli

Characteristics

  • Value selectors may have an optional title.
  • The following types of value selectors are provided:
    • Date
    • Time
    • SIngle-select list
    • Multiple-select list

 

Attachments

File Size Date Attached by
action menu example
85905 bytes 2013-02-21 09:25:44 Sheppy
banner example
123405 bytes 2013-02-21 11:31:09 Sheppy
secondary buttons example
3584 bytes 2013-02-21 11:34:57 Sheppy
confirmation panel example
116906 bytes 2013-02-23 14:09:49 Sheppy
header: default
3208 bytes 2013-02-24 07:21:43 Sheppy
input area example
34902 bytes 2013-02-24 08:00:06 Sheppy
object menu: idle
79820 bytes 2013-02-24 09:38:31 Sheppy
progress example
100587 bytes 2013-02-24 10:07:29 Sheppy
scrolling: index - dark background
133035 bytes 2013-02-24 11:18:40 Sheppy
seekbar: sample
87826 bytes 2013-02-24 11:36:33 Sheppy
switch: settings
50956 bytes 2013-02-24 11:49:27 Sheppy
tab: screenshot
52951 bytes 2013-02-24 14:06:48 Sheppy
toolbar: sample - inbox
35090 bytes 2013-02-24 14:38:35 Sheppy
selector: nested
113391 bytes 2013-02-24 16:34:19 Sheppy

Document Tags and Contributors

Contributors to this page: EdoPut
Last updated by: EdoPut,