mozilla
Ihre Suchergebnisse

    Patterns

    Draft
    This page is not complete.

    Patterns are methods of interaction with your app. Unlike the building blocks, which describe particular user interface elements, patterns are ways those building blocks are presented.

    Zeichnerer


     Details
    Coding guide

    Characteristics

    • Drawers provide access to top-level navigation links that are usually user-configurable. For example, these are used for accessing accounts in the Email and Calendar apps, and for the list of open tabs in the Browser app.
    • Drawers can also be used to provide access to secondary or "power-user" features.
    • Drawers should be positioned on the left side of the screen.
    • To open a drawer, the user taps the standard "drawer" button. The drawer then slides in from the left side of the display, pushing aside the content below.
    • The drawer is closed when the user either taps the "drawer" button again, or anywhere on the visible area of the underlying primary interface. The drawer then slides off the screen to the left, pulling the primary content back into its usual position behind it.
    • Drawers are usually depicted as being one layer behind the primary interface.
    • Drawers are of variable width; however, enough room must be left for the drawer button on the primary interface to remain fully visible.

    Entry sheet


     Details
    Coding guide

    Characteristics

    • Occupies the entire screen.
    • The user should be given the impression that they're on the same page as whatever user interface element that caused the entry sheet to open; the entry sheet should be perceived as a temporary modal overlay. The user hasn't navigated deeper into a hierarchy of interface pages. To reinforce this impression:
      • Valid animations when opening an entry sheet include things like sliding in from the top or bottom, a cross-fade, scaling in, and the like.
      • "Cancel" buttons should be used instead of "Back" buttons.
    • Every element in the entry sheet must be related to adjusting a single setting, and there should not be links to other pages, lists, or dialog boxes.
    • The user will typically have two options to close an entry sheet: a Cancel button, and a button that accepts the user's data (this may be labeled "Done", "Send", "Join", or the like—it should be a verb describing what action will occur when the sheet is closed).

    Multi select (Edit mode or Select mode)


     Details
    Coding guide

    Characteristics

    • It's important to note that this is a mode, not a context switch. Animation and visual design should give the user the impression that they're in a temporary mode within the original view, not in a new view.
    • Multi-select mode may also be known as "edit mode" or "select mode" depending on the use case.
    • The header text should indicate the action the user is preparing to take, such as "Select photos" or "Select messages." When an item is selected, the header should be changed to indicate how many messages have been selected.
    • The view should exit multi select mode when the user either selects a button that performs an action (such as a "Delete" button) or taps a cancel button.
    • If the user has taken action (such as deleting three message threads), a status bar should appear to confirm the action.

    Suchen


     Details
    Coding guide

    Characteristics

    • When the user taps on the search input box, the virtual keyboard is activated.
    • The user can tap on the icon at the right end of the search box to clear the input box but keep the virtual keyboard active.
    • When using the search bar to filter lists of items, it's typically displayed at the top of the list, and should scroll with the list's items.

     

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: Olivers
    Zuletzt aktualisiert von: Olivers,