816
edits
Gaia/Design/Patterns: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 7: | Line 7: | ||
---- | ---- | ||
= | = BUILDING BLOCKS = | ||
| Line 83: | Line 84: | ||
[[Image:Gaia_BB_DialoguePopup_2.png|Dialogue: Popup 2]] | [[Image:Gaia_BB_DialoguePopup_2.png|Dialogue: Popup 2]] | ||
[[Image:Gaia_BB_DialoguePopup_3.png|Dialogue: Popup 3]] | [[Image:Gaia_BB_DialoguePopup_3.png|Dialogue: Popup 3]] | ||
| Line 106: | Line 108: | ||
[[Image:Gaia_BB_Filters.png|Filters 1]] | [[Image:Gaia_BB_Filters.png|Filters 1]] | ||
| Line 124: | Line 127: | ||
[[Image:Gaia_BB_Header_1.png|Header 1]] | [[Image:Gaia_BB_Header_1.png|Header 1]] | ||
| Line 164: | Line 148: | ||
[[Image:Gaia_BB_Lists_1.jpg|Lists 1]] | [[Image:Gaia_BB_Lists_1.jpg|Lists 1]] | ||
| Line 212: | Line 167: | ||
[[Image:Gaia_BB_Progress&Activity_1.png|Progress & Activity 1]] | [[Image:Gaia_BB_Progress&Activity_1.png|Progress & Activity 1]] | ||
==Scrolling== | ==Scrolling== | ||
| Line 226: | Line 183: | ||
[[Image:Gaia_BB_Scrolling_1.jpg|Scrolling 1]] | [[Image:Gaia_BB_Scrolling_1.jpg|Scrolling 1]] | ||
| Line 307: | Line 265: | ||
[[Image:Gaia_BB_Toolbars_1.png|Toolbars 1]] | [[Image:Gaia_BB_Toolbars_1.png|Toolbars 1]] | ||
[[Image:Gaia_BB_Toolbars_2.png|Toolbars 2]] | [[Image:Gaia_BB_Toolbars_2.png|Toolbars 2]] | ||
==Value Selectors== | ==Value Selectors== | ||
| Line 329: | Line 289: | ||
= | = PATTERNS = | ||
| Line 432: | Line 392: | ||
[[Image:Gaia_BB_Drawer.png|Drawer 1]] | [[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]] | |||
==Multi-Select== | |||
'''Used for:''' | |||
* Enables user to perform “bulk actions”, such as deleting 6 emails from a roll of 20, or selecting 3 photos to email to a friend. | |||
* Is used on lists of items (eg: vertical list of emails in Inbox, or grid of photos in Gallery) | |||
'''Characteristics:''' | |||
* Is entered by... | |||
* Is a “mode”, not a section. Animation and visual design should give user the impression that they are in a temporary mode within the original view, not that there are in a differerent view. | |||
Can be called “Edit” or “Select” mode, depending on the use case. | |||
Header text should indicate action being taken (eg: “Select photos”). Once an item has been selected, text should update to “X selected”, where X = quantity of selected items. | |||
* Closes once the user: | |||
** ...completes one of the available actions (eg: “Delete”). | |||
** ...or taps “Cancel” button. | |||
* Closing resturns user to the previous view. | |||
* If user has taken action (eg: delete 3 message threads), a Toast should appear, confirming the action. | |||
'''States''' | |||
* Normal | |||
* Focused | |||
* Disabled | |||
[[Image:Gaia_BB_MultiSelect_1.png|MultiSelect 1]] | |||