|
|
| Line 1: |
Line 1: |
| ==Buttons==
| |
|
| |
|
| '''Characteristics:'''
| |
|
| |
| * Have two components: visual target and hit target.
| |
| * Later is always larger. Has minimum sizes.
| |
| * Types:
| |
| ** Icon + text
| |
| ** Icon only
| |
| ** Text only
| |
|
| |
|
| |
|
| |
| == Dialogue: Prompt ==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * Alerting users to important events, notifications, etc.
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * Modal: occupies the screen and requires user input to clear.
| |
| * Consist of
| |
| ** Title
| |
| ** Body (optional)
| |
| ** Dismissal button (eg: “Cancel”)
| |
| ** Confirmation button (eg: “Delete”)
| |
|
| |
| [[Image:Gaia_BB_DialogueAlerts_1.png|Dialogue: Alerts 1]]
| |
|
| |
|
| |
|
| |
| == Dialogue: Action Menu ==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * Presenting a list of items, usually actions or links (eg: Edit, Delete, etc).
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * Menus are spawned from buttons, often positioned within Toolbars.
| |
| * Present 1 or more items.
| |
| * Vary in height, to a maximum of Keyboard component height.
| |
| * Titles are optional.
| |
| * Are closed by:
| |
| ** Selecting one of the items
| |
| ** Pressing "Cancel" button (wording may be different)
| |
| ** Pressing “OK” button, if available (label may be different)
| |
|
| |
| [[Image:Gaia_BB_DialogueMenus_1.png|Dialogue: Menus 1]]
| |
|
| |
|
| |
|
| |
| == Dialogue: Object Menu ==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * Enabling optional shortcuts to contextual actions that might otherwise require stepping one level deeper into the hierarchy. For example, deleting a photo via it's thumbnail, instead of having to open the full image.
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * User presses-and-holds a selectable item (can be a list row, a phone number, a browser link, etc)
| |
| * Menu displaying one of more options pops up after X seconds.
| |
| * Priority 1:
| |
| ** Reused the Menu pattern interface to present the options.
| |
| * Priority 2:
| |
| ** Menu positions itself immediately above or below the parent object (depending on the amount of available screen space)
| |
| ** The parent object element is visually highlighted (e.g.: darken surrounding content, or draw border, etc)
| |
| ** User can press anywhere else on screen to change the focus and close the popup.
| |
|
| |
| [[Image:Gaia_BB_DialoguePopup_1.png|Dialogue: Popup 1]]
| |
| [[Image:Gaia_BB_DialoguePopup_2.png|Dialogue: Popup 2]]
| |
| [[Image:Gaia_BB_DialoguePopup_3.png|Dialogue: Popup 3]]
| |
|
| |
|
| |
|
| |
| == Dialogue: Banner ==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * Banners confirm a user action, and optionally provide a follow up action (eg: Undo).
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * Typically appear after a multi-select edit. eg:
| |
| ** Deleting multiple photos from (Gallery)
| |
| ** Deleting multiple emails (Email)
| |
| ** Moving multiple emails (Email)
| |
| * Toasts are positioned at the bottom of—and layered on top of—their associated content view.
| |
| * Toasts should be non-intrusive, and never cover up other UI elements (eg: toolbar, tabs, etc).
| |
| * Optionally provide opportunity to take related secondary action via button (eg: Undo).
| |
|
| |
| [[Image:Gaia_BB_DialogueToasts.png|Dialogue: Toast 1]]
| |
| [[Image:Gaia_BB_DialogueToasts_2.png|Dialogue: Toast 2]]
| |
|
| |
|
| |
|
| |
| == 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.
| |
|
| |
| [[Image:Gaia_BB_Filters.png|Filters 1]]
| |
|
| |
|
| |
|
| |
| ==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
| |
|
| |
| [[Image:Gaia_BB_Header_1.png|Header 1]]
| |
|
| |
|
| |
|
| |
| ==Lists==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * ...
| |
|
| |
| '''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
| |
|
| |
| [[Image:Gaia_BB_Lists_1.jpg|Lists 1]]
| |
|
| |
|
| |
|
| |
| ==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.
| |
| * Types:
| |
| ** Progress
| |
| *** Displays a loading animation that goes from 0 to 100 percent, communicating the current process status.
| |
| ** Activity
| |
| *** Displays a looping animation, communicating to the user that the process is active.
| |
|
| |
| [[Image:Gaia_BB_Progress&Activity_1.png|Progress & Activity 1]]
| |
|
| |
|
| |
|
| |
| ==Scrolling==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * ...
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * Types:
| |
| ** Scrollbar
| |
| ** Index scrolling
| |
|
| |
| [[Image:Gaia_BB_Scrolling_1.jpg|Scrolling 1]]
| |
|
| |
|
| |
|
| |
| ==Seek Bars==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * ...
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * Consists of track and knob (button w/ normal and pressed states)
| |
| * Optional images for left and right values
| |
| * Can be horizontal or vertical
| |
|
| |
| [[Image:Gaia_BB_SeekBars_1.jpg|Seek Bars 1]]
| |
|
| |
|
| |
|
| |
| ==Switches==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * ...
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * Presents two mutually exclusive choices or states (used in table views only).
| |
| * Types:
| |
| ** On/Off toggle
| |
| ** Radio
| |
| ** Checkbox
| |
|
| |
| [[Image:Gaia_BB_Switches_1.jpg|Switches 1]]
| |
|
| |
|
| |
|
| |
| ==Tabs==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * ...
| |
|
| |
| '''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
| |
| * Focused
| |
| * Disabled
| |
|
| |
| [[Image:Gaia_BB_Tabs_1.jpg|Tabs 1]]
| |
|
| |
|
| |
|
| |
| ==Tool Bars==
| |
|
| |
| '''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).
| |
|
| |
| [[Image:Gaia_BB_Toolbars_1.png|Toolbars 1]]
| |
| [[Image:Gaia_BB_Toolbars_2.png|Toolbars 2]]
| |
|
| |
|
| |
|
| |
| ==Value Selectors==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * Provides a way for the user to select one of more values.
| |
| * Most commonly associated with forms, but also used elsewhere.
| |
| * Interface conventions are flexible, and new Types can be added to the list below.
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * Types:
| |
| ** Date
| |
| ** Time
| |
| ** Single-select list
| |
| ** Multiple-select list
| |
|
| |
| [[Image:Gaia_BB_ValueSelectors_1.png|Value Selectors 1]]
| |
| [[Image:Gaia_BB_ValueSelectors_2.png|Value Selectors 2]]
| |