Gaia/Design/BuildingBlocks: Difference between revisions

From MozillaWiki
< Gaia‎ | Design
Jump to navigation Jump to search
Line 1: Line 1:
===Design Stencil Kit===
===Design Stencil Kit===


  '''What's the Firefox OS Design Stencil Kit:'''  
  '''What's the Firefox OS Design Stencil Kit?'''  
* It's a PSD (Photoshop) file to create mockups of your Firefox OS apps by just making drag & drop. The layered PSD file provided contains editable effects, fonts and shapes so you can easily customize your apps from these standard Firefox OS UI components.
* It's a PSD (Photoshop) file to create mockups of your Firefox OS apps by just making drag & drop. The layered PSD file provided contains editable effects, fonts and shapes so you can easily customize your apps from these standard Firefox OS UI components.


Revision as of 14:48, 19 June 2013

Design Stencil Kit

What's the Firefox OS Design Stencil Kit?
  • It's a PSD (Photoshop) file to create mockups of your Firefox OS apps by just making drag & drop. The layered PSD file provided contains editable effects, fonts and shapes so you can easily customize your apps from these standard Firefox OS UI components.


 Downloads


Firefox OS Design Stencil Kit

Overlay Menus

Action Menu

  

Usage: The action menu presents a list of actions related to the App content.



 Characteristics
  • Are opened from buttons within App content. These buttons are often inside Toolbars (eg: Browser's "Share" button).
  • Contain 1 or more items.
  • Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
  • Title strings are optional.
  • Are closed by:
    • Selecting one of the actions.
    • Pressing "Cancel" button (verbiage TBD)


Downloads


Visuals
Interaction
Interaction

Object Menu


Usage: Directly manipulate objects without having to open them and navigate deeper into the hierarchy.
  • Deleting a photo by selecting it's thumbnail, instead of having to open the full image.
  • Flag an email by selecting it's preview, instead of having to open the full email.
  • Call a Contact by selecting their name, instead of having to open their detailed information.


 Characteristics
  • Accessed by user press-and-hold on selectable object (eg: list row, phone number, URL, etc)
  • Menu appears after X seconds.
  • Contain 1 or more items
  • Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
  • Title strings are not included (unlike Action Menus)
  • Are closed by pressing "Cancel" button.
  • Reuse the Action Menu interface.
  • Future (v2):
    • Menu will explicitly tie itself to selected element by opening immediately above or below, shifting to fit into the available screen real estate.
    • Selected object element will be highlighted (e.g.: darken surrounding content?)
    • Explicit "Cancel" input may be removed in favor of pressing on empty screen real estate to close.


 Downloads


Visuals
Interaction
Interaction

  

 Usage: Relay information to the user.
  • Confirm a user action
  • Alert to a system event


 Characteristics:
  • Most common used after Multi-Select edit, to confirm user action, and optional provide "Undo" input. eg:
    • Deleting multiple photos from (Gallery)
    • Deleting multiple emails (Email)
    • Moving multiple emails (Email)
  • Are positioned at the bottom of screen, covering underlying content.
  • Appear for X seconds then automatically disappear.
  • Can include an input, eg: "Undo" (optional)
  • Can include an image (optional)
  • Can either be part of an App (eg: a "photos deleted" Banner is associated with the Gallery app) or the System (eg: a "Low Battery" alert).
  • Ideally would be designed to prevent two Banner appearing simultaneously (eg: If two Banner appear at same time, newer replaces older).


 Downloads:


Visuals
Interaction
Interaction

Buttons

 

  • Used for:
    • Allow users to perform an action when tapped. The action is communicated using text or an icon.


  • Characteristics:
    • Have two components: visual target and hit target. The hit target is always larger to assist users in hitting the target.
    • States:
      • Normal
      • Pressed
      • Disabled


  • Types:
    • Action buttons - used when there are only a few actions and a list is not required. The main action button uses a highlight colour.
    • 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 - used for specific actions including recording, dialing, and others.




Visuals

Confirm

 

  • Used for:
    • Prompts user to take action. eg:
      • Confirm a deletion
      • Respond to a system event (eg: restart device after a SIM card swap)
      • Grant or deny a permission


  • Characteristics:
    • Modal: occupies the screen and requires user input to clear.
    • Consists: of
      • Title
      • Body (optional)
      • Icon (optional)
      • Input: Confirmation.
        • Can customize label string
      • Input: Cancel (optional).
        • Can customize label string




Visuals
Interaction
Interaction
Interaction

Drawer

 

  • Used for:
    • The navigation drawer is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options. The user can bring the navigation drawer onto the screen by touching the application icon on the action bar.




Visuals

Filters

 

  • Used for:
    • Secondary Navigation
      • Filters can provide a second set of tabs, where tabs are already present.
    • Data Filter
      • Filters can be used to enable the user to view a single set of data in a different lens.
      • eg: in Calendar, the filters they allow user to view time in different scales, from Day to Month).


  • Characteristics:
    • Horizontal sequence of buttons.
    • Only one button is Focused at a time.
    • Best practice is to place filters within Toolbars, so they do not flow with the content.
    • Left, Middle and Right buttons can be styled uniquely.
    • Width: variable, depending on number of filters required within a single set (see Numbering). Should establish a maximum width, however.
    • Numbering: minimum 2, maximum 5.
    • Can be populated with icons or text, but not both. Because of the smaller height of a filter (versus a tab), text is the best practice.




Visuals
Interaction

Headers

 

  • Used for:
    • Labeling the active view.
    • Providing top-level navigation and inputs for the active view.


  • Characteristics:
    • Horizontal full width bar that appears at top of screen in most apps
    • Floats above content, with option to flow with content in some rare cases (eg: Browser).
    • Heading text provides name of current view.
    • Optional: heading text string can include text (eg: current unread email count)
    • Present in most applications




Visuals
Interaction

Lists

 

  • Used for:
    • Displaying an enumeration of a set of items


  • Characteristics:
    • Varying heights (1—3 rows)
    • Varying contents (from text only to image + text + button)
    • Are composed of rows, and section headers
  • Types:
    • Action row (click anywhere to trigger input)
    • Status indicator row
    • Button row
    • Link row




Visuals

Progress & Activity Indicators

 

  • Used for:
    • Providing user with visual feedback that a process is active.


  • Characteristics:
    • May include an animated visual element, a text label, or some combination of the two. The progress and activity indicators may be used in modal windows or Inline, together with content or next to it.


  • Modal: They're used when the phone cannot be interrupted while loading data.
    • Activity Bar: Used when an unknown amount of data is being downloaded.
    • Progress Bar: Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
    • Spinner: Used when data is being sent.
  • Non-Modal: Displays a looping animation, communicating to the user that the process is active.
    • Activity Bar: Used when an unknown amount of data is being downloaded. Note that the activiy bas is background sensitive and there is an option for light screens and another for the dark ones.
    • Progress Bar: Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
    • Inline Spinner: Used when data is being sent.




Visual Components
Visuals - Modal
Visuals - Inline

Scrolling

 

  • Used for:
    • Vertically slides text, images and/or video across the device's display.


  • Characteristics:
    • There're two types of scrolling components:
      • Scrollbar: It's automatically displayed on the right-hand side of the screen when the user starts scrolling through content. It should be always used within the scrollable content area and should never be painted over other components like headers or tab bars.
      • Index scrolling: It's always displayed on the right-hand side of the screen and it's always visible, no matter the user is scrolling through content or not. Is always used for alphabetically ordered lists, like contacts or music. If the user starts scrolling directly over the component the system will switch to a "fast scrolling mode", making it possible to go faster to the selected letter in the alphabet.




Visuals

Seek Bars

 

  • Used for:
    • Scroll through content (i.e. a song or video)


  • Characteristics:
    • Consists of track and knob (button w/ normal and pressed states)
    • Optional images for left and right values
    • Can be horizontal or vertical




Visuals

Switches

  

 Used for
  • Activate/Deactivate an item. It's also used to select an element within a list.


 Characteristics
  • There're three different types of switches:
    • On/Off toggle: Used to activate/deactivate functions and settings. It's recommended to always use it as a default component to toggle the state of a given function, for example in settings applications.
    • Radio Button: Always used next to a list item to select it from a list of options when there's a list of 3 or less options to select from. If the list is bigger you should use a Value Selector. If the only section in a screen is a single choice list, it's also possible to use radio buttons instead of a value selector, which would involve having a screen only to display a button which would trigger the value selector.
    • Checkbox: Usually used in edit mode to mark content and to activate/deactivate a given function. It's recommended to avoid using them in long lists. If you need to use a component to let the user activate/deactivate a function it's better to use the on/off toggle. The default checkbox is blue, while the red one should only be used to mark content that will be deleted.


Important: It's recommended to avoid the use of radio buttons and checkboxes in long lists and/or the same screen. In case you need to use a component to activate/deactivate a system setting or toggle a function state, you should use the On/Off toggle. Check boxes may be used to mark items as selected (like in edit mode) or next to an input area to remember a password. 



 Downloads


Visuals

Tab Bar

  

 Used for
  • Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views.


 Characteristics
  • Fill the full horizontal width.
  • Number between 3—5.
  • Positioned at bottom of screen.
  • Can contain various elements (buttons, filters, indicators, etc).


 Versions
  • Text + icon
  • Icon-only


 States
  • Normal
  • Pressed
  • Active
  • Disabled



 Downloads


Visuals

Tool Bar

Used for:

  • Contains actions, indicators, and navigation associated with the current view. eg:
    • Delete selected items (button)
    • Refresh content (button)
    • Enter “Edit” mode (filter)
    • View “Favorite” contacts only (filter)

Characteristics:

  • 100% width. Fixed height.
  • Does not scroll with content. Floats above.
  • Should be positioned at the bottom of the screen unless Tabs are also present. In that case, should be positioned at the top.
  • Can contain various elements (buttons, filters, progress/activity indicators, etc).
Visuals
Interaction
Interaction

Value Selectors

Used for:

  • Provides a way for the user to select one of more values, usually from a Form interface.
  • Most commonly associated with forms (eg: Setting up a Calendar event).
  • Value selector is the default component that should use to display a list of items. Alternatively It would be also possible to use a regular list with radio buttons, but this option is only recommended for lists with 3 or less elements.


Characteristics:

  • There're two categories of value selectors depending on the kind of information requested:
    • Date + Time:
      • Events Picker: Used in apps like calendar to set up events.
      • Date Picker: Used to set a date.
      • Time Picker: Used to set an hour.
    • Selection Lists:
      • Single Selection List: Used to select one item from a list.
      • Multiple Selection List: Used to select one or more items from a list.


Important: You should always use the correct list button to trigger a value selector. Basically it consists of a standard list button with a gray arrow on the bottom right corner. The label used in the button should not be generic, but the currently selected option. When the user clicks the button and selects a new item in the value selector, the label used in the button will change to reflect the new selected option.

Visuals
Visuals
Interaction
Interaction
Interaction

Input Areas

Visuals
Retrieved from "https://wiki.allizom.org/index.php?title=Gaia/Design/BuildingBlocks&oldid=668401"