5.3 KiB
| title | description | guide_group | menu | permalink | generate_toc | order |
|---|---|---|---|---|---|---|
| Example Implementations | Resources and code samples to implement common design and UI patterns. | design-and-interaction | true | /guides/design-and-interaction/implementation/ | true | 4 |
This guide contains resources and links to code examples that may help developers implement UI designs and interaction patterns recommended in the other guides in this section.
UI Components and Patterns
Developers can make use of the many UI components available in SDK 3.x in combination with the {% guide_link design-and-interaction/recommended#common-design-styles "Common Design Styles" %} to ensure the user experience is consistent and intuitive. The following components and patterns are used in the Pebble experience, and listed in the table below. Some are components available for developers to use in the SDK, or are example implementations designed for adaptation and re-use.
| Pattern | Screenshot | Description |
|---|---|---|
Menu Layer |
 |
Show many items in a list, allow scrolling between them, and choose an option. |
Status Bar |
 |
Display the time at the top of the Window, optionally extended with additional data. |
Radio Button List |
 |
Allow the user to specify one choice out of a list. |
Checkbox List |
 |
Allow the user to choose multiple different options from a list. |
List Message |
 |
Provide a hint to help the user choose from a list of options. |
Message Dialog |
 |
Show an important message using a bold fullscreen alert. |
Choice Dialog |
 |
Present the user with an important choice, using the action bar and icons to speed up decision making. |
PIN Entry |
 |
Enable the user to input integer data. |
Text Animation |
 |
Example animation to highlight a change in a text field. |
Progress Bar |
 |
Example progress bar implementation on top of a StatusBarLayer. |
Progress Layer |
 |
Example implementation of the system progress bar layer. |
Example Apps
Developers can look at existing apps to begin to design (or improve) their user interface and interaction design. Many of these apps can be found on the appstore with links to their source code, and can be used as inspiration.
Cards Example (Weather)
The weather cards-example
embodies the 'card' design pattern. Consisting of a single layout, it displays
all the crucial weather-related data in summary without the need for further
layers of navigation. Instead, the buttons are reserved for scrolling between
whole sets of data pertaining to different cities. The number of 'cards' is
shown in the top-right hand corner to let the user know that there is more data
present to be scrolled through, using the pre-existing Up and Down button action
affordances the user has already learned. This helps avoid implementing a novel
navigation pattern, which saves time for both the user and the developer.
When the user presses the appropriate buttons to scroll through sets of data, the changing information is animated with fast, snappy, and highly visible animations to reinforce the idea of old data moving out of the layout and being physically replaced by new data.