B2G OS

Componentes básicos de UX de Firefox OS

Aquí encontrarás una descripción de los elementos de la interfaz de usuario comunes en las aplicaciones de Firefox  OS, además de ejemplos de cómo debe verse y funcionar.

Menú de acciones


 Detalles
Guía del programador

Characteristics

Botón

Detalles
Guía del programador

Characteristics

Confirmación

Detalles
Guía del programador
 

Characteristics

Filtro

Detalles
Guía del programador

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.

Cabecera

Detalles
Guía del programador

Characteristics

Área de entrada

Detalles
Guía del programador

Characteristics

Lista

Detalles
Guía del programador

Characteristics

Menú de objetos

Detalles
Guía del programador

Characteristics

Indicador de progreso y actividad

Detalles
Guía del prgramador

Characteristics

Desplazamiento por letras

Detalles
Guía del programador

Characteristics

Barra de búsqueda

Detalles
Guía del programador

Characteristics

Estado


Detalles
Guía del programador

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.

Interruptor

Detalles
Guía del programador

Characteristics

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

Pestañas

Detalles
Guía del programador

Tabs are used as a navigational widget that let the user switch among sets of views. This way, a window may contain multiple views. See the Coding guide for details on how to implement tabs in your apps.

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 de herramientas

Detalles
Guía del programador

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.

Selector de valor

Detalles
Guía del programador

Value selectors let the user choose one of a number of possible values, and are typically used from a form interface. For example, value selectors could be used to choose the month or day for a calendar event. These are presented automatically for the values of the <input> element's type attribute.

Characteristics

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

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: chrisdavidmills, Luis_Calvo, fitojb, htrellez
 Última actualización por: chrisdavidmills,