Gaia/Design/Patterns: Difference between revisions
Jump to navigation
Jump to search
(Added sample search pattern) |
m (created thumbnails for large graphics) |
||
| Line 18: | Line 18: | ||
* Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible. | * 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]] | [[Image:Gaia_BB_Drawer.png|thumb|left|650px|Drawer 1]] | ||
| Line 42: | Line 42: | ||
** Varies: “Done”, “Join”, “Send”, etc. | ** Varies: “Done”, “Join”, “Send”, etc. | ||
[[Image:Gaia_BB_DialogueEntrySheets.png|Dialogue: Entry Sheet 1]] | [[Image:Gaia_BB_DialogueEntrySheets.png|thumb|left|650px|Dialogue: Entry Sheet 1]] | ||
[[Image:Gaia_BB_ContactsBrowser_1.png|Contacts Browser 1]] | [[Image:Gaia_BB_ContactsBrowser_1.png|thumb|left|650px|Contacts Browser 1]] | ||
== Input Areas == | == Input Areas == | ||
| Line 55: | Line 55: | ||
* ... | * ... | ||
[[Image:Gaia_BB_InputAreas_1.png|Input Areas 1]] | [[Image:Gaia_BB_InputAreas_1.png|thumb|left|650px|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_2.png|thumb|left|650px|Input Areas 2]] | ||
[[Image:Gaia_BB_InputAreas_4.png|Input Areas 4]] | |||
[[Image:Gaia_BB_InputAreas_5.png|Input Areas 5]] | [[Image:Gaia_BB_InputAreas_3.png|thumb|left|650px|Input Areas 3]] | ||
[[Image:Gaia_BB_InputAreas_6.png|Input Areas 6]] | |||
[[Image:Gaia_BB_InputAreas_4.png|thumb|left|650px|Input Areas 4]] | |||
[[Image:Gaia_BB_InputAreas_5.png|thumb|left|650px|Input Areas 5]] | |||
[[Image:Gaia_BB_InputAreas_6.png|thumb|left|650px|Input Areas 6]] | |||
| Line 89: | Line 94: | ||
* Disabled | * Disabled | ||
[[Image:Gaia_BB_MultiSelect_1.png|MultiSelect 1]] | [[Image:Gaia_BB_MultiSelect_1.png|thumb|left|650px|MultiSelect 1]] | ||
| Line 95: | Line 100: | ||
== Search == | == Search == | ||
[[Image:Gaia_search1.png|Search in Contacts app | [[Image:Gaia_search1.png|thumb|left|650px|Search in Contacts app]] | ||
==Settings== | ==Settings== | ||
Revision as of 17:37, 24 January 2013
Design Patterns are core sets of interactions that are used repeatedly throughout the UX.
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.
Entry Sheet
Used for:
- Editing a single setting that:
- Contains a large number of possible values. eg: Text entry forms, long lists,
- [or] Requires multipe inputs or selections eg: WiFi network connection process.
Characteristics:
- Occupies the full screen
- User should be given impression that they are on the same page, and that the Entry Sheet is merely a temporary modal overlay. They have not navigated one level deeper in the hierarchy.
- To reinforce this...
- Valid animations could include slide in from top, from bottom, cross fade, scale in, etc.
- “Cancel” buttons are used instead of “Back”.
- Every element within the Entry Sheet must be related to adjusting the single setting; Settings Panels should not contain links to other pages or lists.
- Closing:
- “Cancel”
- Varies: “Done”, “Join”, “Send”, etc.
Input Areas
Used for:
- ...
Characteristics:
- ...
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
Search
Settings
Used for:
- ...
Characteristics:
- ...
System Overlays
Used for:
- ...
Characteristics:
- ...