From 23efef3ca9218c601322149957f3c3d5f8963dba Mon Sep 17 00:00:00 2001 From: Ricardo Cervera Date: Wed, 19 Nov 2014 13:10:15 -0800 Subject: docs: Design guidelines for watch faces draft. Bug: 18338418 Change-Id: Ibf699ee48b7d4ac2800a435e4d95c2b15278861f --- docs/html/design/design_toc.cs | 1 + docs/html/design/downloads/index.jd | 77 +++++ .../media/downloads_wear_DesignSpec_Icon.png | Bin 0 -> 36793 bytes .../design/media/downloads_wear_Slide_Ai_Icon.png | Bin 0 -> 101333 bytes .../media/downloads_wear_Slide_IconExample.png | Bin 0 -> 96134 bytes .../design/media/downloads_wear_Slide_Psd_Icon.png | Bin 0 -> 97034 bytes docs/html/design/media/wear/CardsRender_Build.png | Bin 0 -> 16369 bytes docs/html/design/media/wear/CompanionApp_Build.png | Bin 0 -> 47014 bytes .../design/media/wear/DeviceSettings_Build.png | Bin 0 -> 20341 bytes docs/html/design/media/wear/Hotword_Cropped.png | Bin 0 -> 20247 bytes docs/html/design/media/wear/Indicators_Cropped.png | Bin 0 -> 15688 bytes docs/html/design/media/wear/Render_1Bit.png | Bin 0 -> 15012 bytes docs/html/design/media/wear/Render_Albumem.png | Bin 0 -> 25312 bytes docs/html/design/media/wear/Render_Ambient.png | Bin 0 -> 27035 bytes docs/html/design/media/wear/Render_Episode.png | Bin 0 -> 26167 bytes docs/html/design/media/wear/Render_Interactive.png | Bin 0 -> 45302 bytes docs/html/design/media/wear/Render_LowBit.png | Bin 0 -> 12506 bytes docs/html/design/media/wear/Render_Next.png | Bin 0 -> 27280 bytes docs/html/design/media/wear/Render_Saturn.png | Bin 0 -> 27578 bytes .../html/design/media/wear/ScreenShapes_Invert.png | Bin 0 -> 33652 bytes .../design/media/wear/ScreenShapes_Pyramids.png | Bin 0 -> 77061 bytes docs/html/design/media/wear/ScreenShapes_Rift.png | Bin 0 -> 82927 bytes docs/html/design/wear/style.jd | 2 +- docs/html/design/wear/watchfaces.jd | 338 +++++++++++++++++++++ 24 files changed, 417 insertions(+), 1 deletion(-) create mode 100644 docs/html/design/media/downloads_wear_DesignSpec_Icon.png create mode 100644 docs/html/design/media/downloads_wear_Slide_Ai_Icon.png create mode 100644 docs/html/design/media/downloads_wear_Slide_IconExample.png create mode 100644 docs/html/design/media/downloads_wear_Slide_Psd_Icon.png create mode 100644 docs/html/design/media/wear/CardsRender_Build.png create mode 100644 docs/html/design/media/wear/CompanionApp_Build.png create mode 100644 docs/html/design/media/wear/DeviceSettings_Build.png create mode 100644 docs/html/design/media/wear/Hotword_Cropped.png create mode 100644 docs/html/design/media/wear/Indicators_Cropped.png create mode 100644 docs/html/design/media/wear/Render_1Bit.png create mode 100644 docs/html/design/media/wear/Render_Albumem.png create mode 100644 docs/html/design/media/wear/Render_Ambient.png create mode 100644 docs/html/design/media/wear/Render_Episode.png create mode 100644 docs/html/design/media/wear/Render_Interactive.png create mode 100644 docs/html/design/media/wear/Render_LowBit.png create mode 100644 docs/html/design/media/wear/Render_Next.png create mode 100644 docs/html/design/media/wear/Render_Saturn.png create mode 100644 docs/html/design/media/wear/ScreenShapes_Invert.png create mode 100644 docs/html/design/media/wear/ScreenShapes_Pyramids.png create mode 100644 docs/html/design/media/wear/ScreenShapes_Rift.png create mode 100644 docs/html/design/wear/watchfaces.jd diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs index 416a93d16a2b..23d844d8a55d 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -25,6 +25,7 @@
  • App Structure
  • UI Patterns
  • Style
    • +
  • Watch Faces
  • diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd index a0734282a7a6..16d61e7e5499 100644 --- a/docs/html/design/downloads/index.jd +++ b/docs/html/design/downloads/index.jd @@ -137,7 +137,84 @@ modify to match your theme, plus source files.

    +
    +
    +

    Watch faces UI toolkit

    +

    Detailed specifications and measurements for the the background canvas, notification cards, and +system indicators. +

    + +
    +
    + + + +
    +
    + PDF Toolkit +
    +
    + + +
    +
    +

    Slide watch face

    +

    Example of a watch face design in AI format. +

    + +
    +
    + + + +
    +
    + Adobe® Illustrator® Design +
    +
    + +
    +
    +

    Slide watch face specifications

    +

    Design specifications for the Slide watch face in PSD format. +

    + +
    +
    + + + +
    +
    + Adobe® Photoshop® Specifications +
    +
    + + +
    +
    +

    Watch face icon example

    +

    Template for creating watch face icons for the carousel on Android Wear devices. +

    + +
    +
    + + + +
    +
    + Adobe® Photoshop® Icon +
    +
    diff --git a/docs/html/design/media/downloads_wear_DesignSpec_Icon.png b/docs/html/design/media/downloads_wear_DesignSpec_Icon.png new file mode 100644 index 000000000000..c3d161337624 Binary files /dev/null and b/docs/html/design/media/downloads_wear_DesignSpec_Icon.png differ diff --git a/docs/html/design/media/downloads_wear_Slide_Ai_Icon.png b/docs/html/design/media/downloads_wear_Slide_Ai_Icon.png new file mode 100644 index 000000000000..69291b935013 Binary files /dev/null and b/docs/html/design/media/downloads_wear_Slide_Ai_Icon.png differ diff --git a/docs/html/design/media/downloads_wear_Slide_IconExample.png b/docs/html/design/media/downloads_wear_Slide_IconExample.png new file mode 100644 index 000000000000..227bd9238b37 Binary files /dev/null and b/docs/html/design/media/downloads_wear_Slide_IconExample.png differ diff --git a/docs/html/design/media/downloads_wear_Slide_Psd_Icon.png b/docs/html/design/media/downloads_wear_Slide_Psd_Icon.png new file mode 100644 index 000000000000..7b7d2ab018a7 Binary files /dev/null and b/docs/html/design/media/downloads_wear_Slide_Psd_Icon.png differ diff --git a/docs/html/design/media/wear/CardsRender_Build.png b/docs/html/design/media/wear/CardsRender_Build.png new file mode 100644 index 000000000000..cf1fbb838bc7 Binary files /dev/null and b/docs/html/design/media/wear/CardsRender_Build.png differ diff --git a/docs/html/design/media/wear/CompanionApp_Build.png b/docs/html/design/media/wear/CompanionApp_Build.png new file mode 100644 index 000000000000..ecf17ba25368 Binary files /dev/null and b/docs/html/design/media/wear/CompanionApp_Build.png differ diff --git a/docs/html/design/media/wear/DeviceSettings_Build.png b/docs/html/design/media/wear/DeviceSettings_Build.png new file mode 100644 index 000000000000..4bbf4b7405ac Binary files /dev/null and b/docs/html/design/media/wear/DeviceSettings_Build.png differ diff --git a/docs/html/design/media/wear/Hotword_Cropped.png b/docs/html/design/media/wear/Hotword_Cropped.png new file mode 100644 index 000000000000..a947e1ff48d4 Binary files /dev/null and b/docs/html/design/media/wear/Hotword_Cropped.png differ diff --git a/docs/html/design/media/wear/Indicators_Cropped.png b/docs/html/design/media/wear/Indicators_Cropped.png new file mode 100644 index 000000000000..9449c02c74a0 Binary files /dev/null and b/docs/html/design/media/wear/Indicators_Cropped.png differ diff --git a/docs/html/design/media/wear/Render_1Bit.png b/docs/html/design/media/wear/Render_1Bit.png new file mode 100644 index 000000000000..53cbc07b440d Binary files /dev/null and b/docs/html/design/media/wear/Render_1Bit.png differ diff --git a/docs/html/design/media/wear/Render_Albumem.png b/docs/html/design/media/wear/Render_Albumem.png new file mode 100644 index 000000000000..054fe6b0a902 Binary files /dev/null and b/docs/html/design/media/wear/Render_Albumem.png differ diff --git a/docs/html/design/media/wear/Render_Ambient.png b/docs/html/design/media/wear/Render_Ambient.png new file mode 100644 index 000000000000..07e8c589436c Binary files /dev/null and b/docs/html/design/media/wear/Render_Ambient.png differ diff --git a/docs/html/design/media/wear/Render_Episode.png b/docs/html/design/media/wear/Render_Episode.png new file mode 100644 index 000000000000..2d545bbda1cd Binary files /dev/null and b/docs/html/design/media/wear/Render_Episode.png differ diff --git a/docs/html/design/media/wear/Render_Interactive.png b/docs/html/design/media/wear/Render_Interactive.png new file mode 100644 index 000000000000..a1e260bd5a7a Binary files /dev/null and b/docs/html/design/media/wear/Render_Interactive.png differ diff --git a/docs/html/design/media/wear/Render_LowBit.png b/docs/html/design/media/wear/Render_LowBit.png new file mode 100644 index 000000000000..83ac3658a296 Binary files /dev/null and b/docs/html/design/media/wear/Render_LowBit.png differ diff --git a/docs/html/design/media/wear/Render_Next.png b/docs/html/design/media/wear/Render_Next.png new file mode 100644 index 000000000000..e08094391190 Binary files /dev/null and b/docs/html/design/media/wear/Render_Next.png differ diff --git a/docs/html/design/media/wear/Render_Saturn.png b/docs/html/design/media/wear/Render_Saturn.png new file mode 100644 index 000000000000..500018c52a3f Binary files /dev/null and b/docs/html/design/media/wear/Render_Saturn.png differ diff --git a/docs/html/design/media/wear/ScreenShapes_Invert.png b/docs/html/design/media/wear/ScreenShapes_Invert.png new file mode 100644 index 000000000000..bc6c1352505d Binary files /dev/null and b/docs/html/design/media/wear/ScreenShapes_Invert.png differ diff --git a/docs/html/design/media/wear/ScreenShapes_Pyramids.png b/docs/html/design/media/wear/ScreenShapes_Pyramids.png new file mode 100644 index 000000000000..7d907ce80522 Binary files /dev/null and b/docs/html/design/media/wear/ScreenShapes_Pyramids.png differ diff --git a/docs/html/design/media/wear/ScreenShapes_Rift.png b/docs/html/design/media/wear/ScreenShapes_Rift.png new file mode 100644 index 000000000000..9d3291621044 Binary files /dev/null and b/docs/html/design/media/wear/ScreenShapes_Rift.png differ diff --git a/docs/html/design/wear/style.jd b/docs/html/design/wear/style.jd index bb2e17fa846f..abd3a9a3d6e2 100644 --- a/docs/html/design/wear/style.jd +++ b/docs/html/design/wear/style.jd @@ -68,7 +68,7 @@ href="{@docRoot}design/wear/patterns.html#Continuing">Continuing activities on p

    Keep Notifications to a Minimum

    -

    Don’t abuse the user’s attention. Active notifications (that is, those that cause the device to vibrate) should only be used in cases that are both timely and involve a contact, for example receiving a message from a friend. Non-urgent notifications should be silently added to the Context Stream. See also the general Android Notifications Guidelines.

    +

    Don’t abuse the user’s attention. Active notifications (that is, those that cause the device to vibrate) should only be used in cases that are both timely and involve a contact, for example receiving a message from a friend. Non-urgent notifications should be silently added to the Context Stream. See also the general Android Notifications Guidelines.

    diff --git a/docs/html/design/wear/watchfaces.jd b/docs/html/design/wear/watchfaces.jd new file mode 100644 index 000000000000..ef700ee68798 --- /dev/null +++ b/docs/html/design/wear/watchfaces.jd @@ -0,0 +1,338 @@ +page.title=Watch Faces for Android Wear +@jd:body + + + + +
    +

    Developer Docs

    +

    Creating Custom Watch Faces

    +
    +     + +

    Android Wear supports custom watch faces with designs that can show contextually relevant +information to users. Designing a watch face requires a careful blending of data and visual +elements that informs users without requiring close attention. Simple, attractive layouts that +can adjust to different screen shapes and sizes, provide options for color and presentation, let +users create a deeply personalized experience with the Wear device that fits them best. Watch +faces exist as part of the Wear user interface, so it is important to provide interactive and +ambient modes, and consider how system user interface elements will interact with your design.

    + +

    Follow the guidelines in this page to design your custom watch faces.

    + + +
    +
    + +
    +

    Creative Vision

    + +

    Creating a watch face for Android Wear is an exercise centered around visualizing time clearly. +Android Wear devices provide a unique digital canvas to reimagine the ways in which we tell time. +Android Wear also lets you integrate data on watch faces for a higher level of personalization and +contextual relevance.

    + +

    These powerful new tools to create watch faces run the risk of overcomplicating a design. The +most successful watch face designs leverage these advanced capabilities while delivering a +singular, elegant expression of information.

    + +

    Glanceability is the single most important principle to consider when creating a watch face +design. Your watch face designs should deliver a singular expression of time and related data. +Experiment with bold, minimal, and expressive design directions that are highly readable at a +distance.

    + + + +

    Plan for Square and Round Devices

    + +

    Android Wear devices come in different shapes and sizes. You will need to consider both +square and round faces as well as different resolutions. Some concepts work better in a certain +format, but a little planning will allow users to enjoy your watch face regardless of screen +format.

    + +

    These guidelines help your concepts align across devices:

    + +
    +
    +

    Create flexible concepts

    +

    Ideally, the visual functionality of the watch face works for both round and square + formats. In this example, the visual functionality of the watch face is flexible enough + to work well in either format without any adjustment. However, other design concepts require + different executions for square and round screens.

    +
    +
    + +
    +
    + +
    +
    +

    Use a common design language

    +

    Try using a common set of colors, line weights, shading, and other design elements + to draw a visual connection between your square and round versions. By using similar color + palettes and a few consistent visual elements, the overall appearance of square and round + can be appropriately customized while still feeling like part of the same visual system.

    +
    +
    + +
    +
    + +
    +
    +

    Adjust for analog concepts

    +

    Some of your concepts will naturally take the shape of an analog clock, like a center + dial with hour and minute hands. In this case, consider the corner areas that are exposed + when translating to a square format. Try extending and exploring this extra space.

    +
    +
    + +
    +
    + + + + +
    +
    + +
    +

    Plan for All Display Modes

    + +

    Android Wear devices operate in two main modes: ambient and interactive. Your watch face +designs should take these modes into account. Generally, if your watch face design looks great +in ambient mode, it will look even better in interactive mode. The opposite is not always +true.

    + +

    In ambient mode, the screen is only updated once every minute. Only show hours and minutes +in ambient mode; do not show seconds in this mode.

    + +

    Interactive mode

    +

    When the user moves their wrist to glance at their watch, the screen goes into interactive +mode. Your design can use full color with fluid animation in this mode.

    + +

    Ambient mode

    +

    Ambient mode helps the device conserve power. In this mode, the screen only displays shades +of grey, black, and white. Your watch face is notified when the device switches to ambient mode, +and you should thoughtfully design for it.

    + + + + +

    Optimize for Special Screens

    + +

    Android Wear devices feature a variety of screen technologies, each with their own advantages +and considerations. One important consideration when designing the ambient mode display for your +watch face is how it affects battery life and screen burn-in on some screens.

    + +

    You can configure your watch face to display different ambient designs depending on the kind +of screen available on the device. Consider the best design for your watch faces on all +screens.

    + +
    +
    +

    Low bit

    +

    Pixels on some screens (including OLED and transflective LED) in ambient mode are either + "on" or "off", also known as "low-bit". When designing for low-bit ambient mode, use only black + and white, avoid grayscale colors, and disable antialiasing in your paint styles. Make sure to + test your design on devices with low-bit ambient mode.

    +
    +
    + +
    +
    + +
    +
    +

    Burn protection techniques

    +

    When designing for OLED screens, you should consider power efficiency and the screen + burn-in effect. When these screens are in ambient mode, the system shifts the contents of + the screen periodically by a few pixels to avoid pixel burn-in. Do not use large blocks of + pixels in your ambient mode designs and keep 95% of the pixels black. Replace solid shapes in + your regular ambient mode designs with outlined shapes in burn-protected ambient mode. Replace + also filled images with pixel patterns. For analog watch face designs, hollow out the center + where the hands meet to avoid pixel burn-in in this mode.

    +
    +
    + +
    +
    + + + +

    Accomodate System UI Elements

    + +

    Your watch face designs should accommodate Android Wear UI elements. These elements give the +user the status of the wearable and show notifications from services on the user's phone. Try +to keep critical elements in your watch face designs from being obscured by the UI elements.

    + +
    +
    +

    Cards

    +

    Cards are the notification system that bridges information between the wearable and a +mobile device. Cards are also how most applications communicate with users. The user will be +notified on the wearable about items such as emails and messages. As a watch face developer, +you need to accommodate both large and small cards in your design. Your watch face can specify a +preference for the card size, but users may override this setting. Users can also temporarily +hide cards by swiping down on them.

    +

    The peek card is the top card in the stream that is partially visible at the bottom of the +screen. A variable peek card has a height that is determined by the amount of text within a given +notification. A small peek card leaves more room for your design. Round faces with analog hands +should have a small peek card. If the time signature is clearly visible above the maximum height +of the variable peek card, you may choose to include the variable peek card. The benefit of a +variable peek card is that it displays more notification information. Faces with information on +the bottom half of the face should leverage the small peek card instead.

    +

    The system notifies your watch face when the bounds of a peek card change, so you can +rearrange the elements in your design if necessary.

    +
    +
    + +
    +
    + +
    +
    +

    Indicators

    +

    Indicators tell the user the status of the wearable, such as charging and airplane mode. +When designing a watch face, consider how the indicator will fall over the watch face.

    +

    The indicators can be placed in several fixed locations on the wearable. If you have a +large peek card, the indicators should go on the top or on the center of the screen. When you +position the status icons or the hotword on the bottom of the screen, the system forces small +peek cards. If the edge of the watch face contains strong visual elements, such as +ticks or numbers, place the indicators on the center of the screen.

    +
    +
    + +
    +
    + +
    +
    +

    The hotword

    +

    The hotword is the phrase "OK Google", which tells the user that they can interact with +the watch using voice commands. When a user turns on the wearable, the hotword appears on +the screen for a few seconds.

    +

    The hotword no longer appears after the user says "OK Google" five times, so the placement of +this element is not as critical. You should still avoid covering up elements of your +watch face. Finally, background protection for the hotword and the indicators should be +turned on unless your design is tailored to have these elements appear on top of them, for example +using dark solid colors with no patterns.

    +
    +
    + +
    +
    + +

    For more information about measurements and positioning of system UI elements, see +Specifications and Assets.

    + + + +

    Design Data-Integrated Watch Faces

    + +

    Your watch face can show users contextually relevant data and react to it by changing styles +and colors in your design.

    + +
    +
    +

    What do you want your user to know?

    +

    The first step in designing a data-integrated watch face is to define a conceptual user +outcome based on available data. First, generate a strong concept or outcome you believe is +supported by real user needs. What do you want your users to know after they have glanced +at your design? Once you have identified your outcome, you need to determine how to obtain +the required data.

    +
    +
    + +
    +
    + +
    +
    +

    A watch dial is a timeline; add data to it

    +

    Your watch face concept may include use of data beyond time, such as weather, calendar +and fitness data. Consider the inclusion of data integration creatively. Avoid simply +overlaying a time-based watch face with extra data. Rather, think about how the data can +be expressed through the lens of time. For example, instead of designing a weather-related +watch face as a clock with an indication of the current temperature in degrees overlayed, +you might design a watch face that describes how the temperature will change over the +course of the day.

    +
    +
    + +
    +
    + +
    +
    +

    Stick to one message

    +

    Once you have solidified your conceptual direction or desired outcome, you will need to +begin visualizing your watch face. The strongest watch face designs are highly glanceable +and deliver a singular expression of data. In order to identify your singular message, you +must identify the most important supporting data point. For instance, instead of displaying +an entire month of calendar events, you might decide to display only the next +upcoming event. By a process of reduction, you should arrive at a powerful singular +expression of data to include in your design.

    +
    +
    + +
    +
    + +

    Begin with some insight and test as you go

    +

    Make sure your approach begins with insight into the needs and expectations of your users. +Test your designs with users to check any assumptions you might have made about your design along +the way. Try making a rough sketch on paper and asking a friend to tell you what it means. +Try your concept out with lots of different types of data and scenarios. Test your designs +with an actual watch screen before you start coding.

    + + + +

    Support the Android Wear Companion App

    + +

    The Android Wear companion app gives the user access to all installed watch faces and their +settings.

    + +
    + + +
    + +

    Don't use a launcher icon

    +

    All available watch faces are accessible from the Android Wear companion app or from your +bundled third party app. There is no need for a stand-alone launcher icon for Android Wear +watch faces.

    + +

    Settings

    +

    Each watch face that has useful settings can have a Settings panel, accessible from the +watch itself and from the companion app on the phone. Standard UI components work in most cases, +but you can explore other creative executions once you have built a foundation designing watch +faces.

    +

    Settings on the watch should be limited to binary selections or scrollable lists. Settings +on the phone may include any complex configuration items in addition to the settings +available on the watch.

    + + + +

    Specifications and Assets

    + +

    To obtain watch face design examples and detailed measurements for the system UI elements, see +the Design Downloads for Android Wear.

    -- cgit v1.2.3-59-g8ed1b