|
|
| Line 1: |
Line 1: |
| Design Patterns are core sets of interactions that are used repeatedly throughout the UX. | | Design Patterns are core sets of interactions that are used repeatedly throughout the UX. |
|
| |
|
| ==Contacts Browser== | | == Drawer == |
|
| |
|
| '''Used for:''' | | '''Used for:''' |
|
| |
|
| * Adding a contact to a correspondence (eg: Email, SMS) | | * Providing access to top level navigation links that may be too numerous for a Tabs pattern, or user-generated, (eg: Tabs, user accounts etc). |
|
| |
|
| '''Characteristics:''' | | '''Characteristics:''' |
|
| |
|
| * Is an example of an [[#Dialogues:_Entry_Sheet|Entry Sheet]] dialogue. | | * Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser). |
| * Opens when user selects “Add” button. | | * Is also a great place to tuck secondary or power-user features, such as links to app Settings. |
| * Presents complete list of contacts. | | * Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser). |
| * “Cancel” closes the Browser without making a select. | | * Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser). |
| * Tapping a contact closes the Browser and adds the selected contact to the selected field. | | * Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel. |
| * Uses index scrolling [ADD LINK]
| | * Traditionally visually depicted as being one layer below the primary interface, and sliding in from the side via animation. |
| | * Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible. |
|
| |
|
| [[Image:Gaia_BB_ContactsBrowser_1.png|Contacts Browser 1]] | | [[Image:Gaia_BB_Drawer.png|Drawer 1]] |
|
| |
|
| ==Contacts Quick Select==
| |
|
| |
|
| '''Used for:'''
| |
|
| |
|
| * Selecting a known contact quickly, without leaving the current view.
| | == Entry Sheet == |
| | |
| '''Characteristics:'''
| |
| | |
| * The user highlights an entry field (eg: To), and the keyboard appears.
| |
| * As the user types, the system attempts to draw matches from the contacts.
| |
| * If one or matches are found, a small list appears, highlighting the matching contacts.
| |
| * To make a selection, the user can tap one of the rows, closing the list and adding that contact to the highlighted field.
| |
| ** Alternatively, if the user wishes to clear the list, they can type Backspace until the field is clear, and there are therefore no more matches. The list then disappears.
| |
| | |
| [[Image:Gaia_BB_ContactsQuickSelect_1.png|Contacts Quick Select 1]]
| |
| | |
| | |
| | |
| == Dialogues: Entry Sheet == | |
|
| |
|
| '''Used for:''' | | '''Used for:''' |
| Line 57: |
Line 42: |
|
| |
|
| [[Image:Gaia_BB_DialogueEntrySheets.png|Dialogue: Entry Sheet 1]] | | [[Image:Gaia_BB_DialogueEntrySheets.png|Dialogue: Entry Sheet 1]] |
|
| |
|
| |
|
| |
| == Dialogues: Toasts ==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * Toasts 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]]
| |
|
| |
|
| |
|
| |
| == Drawer ==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * Providing access to top level navigation links that may be too numerous for a Tabs pattern, or user-generated, (eg: Tabs, user accounts etc).
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser).
| |
| * Is also a great place to tuck secondary or power-user features, such as links to app Settings.
| |
| * Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser).
| |
| * Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser).
| |
| * Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel.
| |
| * Traditionally visually depicted as being one layer below the primary interface, and sliding in from the side via animation.
| |
| * Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible.
| |
|
| |
| [[Image:Gaia_BB_Drawer.png|Drawer 1]]
| |
|
| |
|
| |
|
| |
| == Input Areas ==
| |
|
| |
| '''Used for:'''
| |
|
| |
| * ...
| |
|
| |
| '''Characteristics:'''
| |
|
| |
| * ...
| |
|
| |
| [[Image:Gaia_BB_InputAreas_1.png|Input Areas 1]]
| |
| [[Image:Gaia_BB_InputAreas_2.png|Input Areas 2]]
| |
| [[Image:Gaia_BB_InputAreas_3.png|Input Areas 3]]
| |
| [[Image:Gaia_BB_InputAreas_4.png|Input Areas 4]]
| |
| [[Image:Gaia_BB_InputAreas_5.png|Input Areas 5]]
| |
| [[Image:Gaia_BB_InputAreas_6.png|Input Areas 6]]
| |
|
| |
|
|
| |
|
| Line 146: |
Line 71: |
|
| |
|
| [[Image:Gaia_BB_MultiSelect_1.png|MultiSelect 1]] | | [[Image:Gaia_BB_MultiSelect_1.png|MultiSelect 1]] |
| | |
| | |
| | |
| | == Search & Filter == |
| | |
| | * ... |
|
| |
|
|
| |
|
| Line 158: |
Line 89: |
|
| |
|
| * ... | | * ... |
| | |
| | |
| | |
| | == Text Input == |
| | |
| | '''Used for:''' |
| | |
| | * ... |
| | |
| | '''Characteristics:''' |
| | |
| | * ... |
| | |
| | [[Image:Gaia_BB_InputAreas_1.png|Input Areas 1]] |
| | [[Image:Gaia_BB_InputAreas_2.png|Input Areas 2]] |
| | [[Image:Gaia_BB_InputAreas_3.png|Input Areas 3]] |
| | [[Image:Gaia_BB_InputAreas_4.png|Input Areas 4]] |
| | [[Image:Gaia_BB_InputAreas_5.png|Input Areas 5]] |
| | [[Image:Gaia_BB_InputAreas_6.png|Input Areas 6]] |