Drawing the Blueprints
chevron down
 

Drawing the Blueprints

Overview

In this chapter, we cover the foundation or clock face design and discuss the basics of architecting your app.

Clock Faces

Clock faces can be interactive, customizable, and intelligent. Digital clocks should be compatible with 12-hour and 24-hour time format. Consider designing a clock face that users can customize using the Settings API.

Apps

Create apps that extend your existing mobile application, or stand alone on Fitbit OS. We have two basic categories of apps you should use to architect the information in your apps: Minimal or Complex.

Minimal Apps

This category of apps best displays simple summaries of read-only content. Minimal Apps are flat, meaning they don't navigate to other screens. Two types of minimal app models are available: Simple Lists and Multi-Panel Lists.

Simple List

This model best displays lightweight content. Simple Lists consist of a single screen, scrolling or non-scrolling, filled with Tiles or other UI Components. Hitting the back button exits the app. An example of a simple list app is the Today app.

Simple List

Multi-Panel List

A multi-panel list contains a horizontal navigator that connects multiple vertical lists of similar datasets. Hitting the back button from any screen exits the app. The Weather app is an examples of a multi-panel list.

Multi-Panel List

Complex Apps

This category of apps requires the use of hierarchy. We recommend a maximum of 3 levels of hierarchy.

Two types of complex app models are available: hub-and-spoke and activity.

Hub-and-Spoke

This model consists of a Hub, or top-level navigation, that leads to a series of Spokes, or nested screens. Users can quickly preview content and then dive into detailed screens. A user will need to navigate back up to the top level Hub to go into other Spokes. The Settings app is an examples of a hub-and-spoke.

  1. To begin, choose a hub based on your navigation needs:

    • Vertical list hub: Good for choosing a series of similar items, like a list of settings.
    • Horizontal list hub: Good for focused, differentiated menu options, like a list of exercise options.
  2. Then add Spokes based on your list type:

    • Single screen
    • Vertical list
    • Horizontal list
    • An Activity app

Hub and Spoke Horizontal

Hub and Spoke Vertical

Activity

Activity apps are linear flows that start and finish an activity or task. Exercise and Relax are examples of activity apps.

  1. To begin, choose a navigation model:

    • Single activity: For apps that consist of one activity, begin with the Start screen
    • Multi-Activity: For apps with several options, use the hub-and-spoke model as navigation. Users see the Start screen after selecting an activity.
  2. Create a flow of screens. These screens should use the Combo Button to start and stop an activity or task.

    • Landing screen: Provides an option to begin an activity.
    • Activity screen: Shows an activity is in progress. We recommend using our Stats pattern to format progress metrics. Note that the user must be able to pause and restart or finish the activity.
    • Summary screen (optional): Displays a summary of the activity's performance. This screen allows users to reflect on the activity and create meaning from the data.

Activity