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.
Developers can make use of the many UI components available in SDK 3.x in combination with the 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.
||Show many items in a list, allow scrolling between them, and choose an option.|
||Display the time at the top of the Window, optionally extended with additional data.|
||Allow the user to specify one choice out of a list.|
||Allow the user to choose multiple different options from a list.|
||Provide a hint to help the user choose from a list of options.|
||Show an important message using a bold fullscreen alert.|
||Present the user with an important choice, using the action bar and icons to speed up decision making.|
||Enable the user to input integer data.|
||Example animation to highlight a change in a text field.|
||Example progress bar implementation on top of a
||Example implementation of the system progress bar layer.|
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.
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.