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

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

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

Dettagli
Esempi e guide

Characteristics

Indicatori di attività e barre di progresso

Dettagli
Esempi e guide

Characteristics

Scrolling

Dettagli
Esempi e guide

Characteristics

Seek bar

Dettagli
Esempi e guide

Characteristics

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

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

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

Dettagli
Esempi e guide

Characteristics

Indicatori di attività e barre di progresso

Dettagli
Esempi e guide

Characteristics

Scrolling

Dettagli
Esempi e guide

Characteristics

Seek bar

Dettagli
Esempi e guide

Characteristics

Stati


Dettagli
Esempi e guide

Characteristics

Bottoni

Dettagli
Esempi e guide

Characteristics

Schede

Dettagli
Esempi e guide

Characteristics

Barra degli strumenti

Dettagli
Esempi e guide

Characteristics

Dettagli

Characteristics

 

Stati


Dettagli
Esempi e guide

Characteristics

Bottoni

Dettagli
Esempi e guide

Characteristics

Schede

Dettagli
Esempi e guide

Characteristics

Barra degli strumenti

Dettagli
Esempi e guide

Characteristics

Dettagli

Characteristics

 

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: chrisdavidmills, EdoPut
 Ultima modifica di: chrisdavidmills,