Embed Size (px)
Citation preview
Apple Watch
www.letsnurture.com
www.letsnurture.com
Apple Watch embodies the following themes:
Personal
Because Apple Watch is designed to be worn, its UI is attuned to the wearer’s presence.
A raise of the wrist shows the time and new alerts. Digital Touch —particularly its Heartbeat and Sketch features —enables new types of personal communication.
An accelerometer and a heart rate sensor provide personalized information about the wearer’s activity from day to day.
No other Apple device has ever been so connected to the wearer. Be mindful of this connection as you design apps for Apple Watch.
www.letsnurture.com
Holistic
Apple Watch blurs the boundaries between physical object and software.
The Digital Crown is a finely tuned hardware control that enables nuanced software navigation.
The Taptic Engine produces subtle, physical feedback associated with alerts and onscreen interaction.
www.letsnurture.com
Force Touch—a physical gesture interpreted by hardware reveals a new dimension of contextual software controls.
Even the physical border of the Retina display has been considered, resulting in edge-to-edge UI design that effectively renders that border invisible.
Thoughtful app design should contribute to this experience of hardware and software feeling indistinguishable.
www.letsnurture.com
Lightweight
Apps on Apple Watch are designed for quick, lightweight interactions that make the most of the display size and the watch’s position on the wrist.
Information is accessible and dismissible quickly and easily, for both privacy and usability.
The short-look notification, for example, is a minimal alert, revealing more information only if the wearer remains engaged.
Glances provide information from apps in an easy-to-access, swipeable interface.
Apps designed for Apple Watch should respect the context in which the wearer experiences them: briefly, frequently, and on a small display.
www.letsnurture.com
A WatchKit app complements its containing iOS app; it does not replace it.
If you measure interactions with your iOS app in minutes, you can expect interactions with your WatchKit app to be measured in seconds.
So keep interactions brief and interfaces simple.
www.letsnurture.com
App AnatomyApple Watch must be paired with the user’s iPhone for your app to run.
www.letsnurture.com
Interface Navigation Styles
WatchKit apps support two navigation methods: Hierarchical
This style matches the navigation style in iOS and is best suited for apps with hierarchical information. In a hierarchical app, users navigate by making one choice per screen until they reach their destination.
To navigate to another destination, users must retrace some or all of their steps and make different choices.
A hierarchical model is typically better than a flat, paginated navigation model for more complex app interactions.
www.letsnurture.com
www.letsnurture.com
Page-based
A paginated interface lets the user navigate between pages of content by swiping horizontally. A page-based interface is best suited for apps with simple data models where the data on each page is not directly tied to the data on the other pages.
A dot indicator at the bottom of each page shows the user’s place in the set. Keep the total number of pages as small as possible to simplify navigation.
www.letsnurture.com
You cannot combine hierarchical and page-based interface styles.
At design time, you must choose the style that best suits your app’s content and design for that style.
Apps using either interface style can present content modally.
Modal interfaces give the user a way to complete a task or get information without distractions, but in a way that temporarily prevents them from interacting with the rest of the app.
www.letsnurture.com
User Interactions Action-based events
Taps indicate selection or interaction. The single tap gesture is the primary way that users interact with your app. Table rows, buttons, switches, and other controls are all operated by tapping on them. These taps are then reported to the code in your WatchKit extension.
Apple Watch does not support multifinger gestures such as pinches.
www.letsnurture.com
Gestures.
The system handles all gestures on your behalf, using them to implement standard behaviors:
− Vertical swipes scroll the current screen.
− Horizontal swipes display the previous or next page in a page-based interface.
− Left edge swipes navigate back to the parent interface.
https://zippy.gfycat.com/SorrowfulImmenseGoat.mp4
www.letsnurture.com
Force Touch
As well as sensing touch, the Retina display also detects the amount of force applied by the user’s finger. When this combination of touch and force is detected, the system displays the context menu (if any) associated with the current screen. Apps use this menu to display actions relevant to the current content.
The Digital Crown. Designed for finely tuned, accelerated scrolling—without obstructing the Apple Watch display—the Digital Crown makes it easy for the user to scroll through longer pages. Third-party apps use the crown only to enable scrolling.
www.letsnurture.com
Viewed together, glances are a browsable collection of timely and contextually relevant moments from the wearer’s favorite apps.
Individually, a glance is a quick view of your app’s most important content. The area at the bottom of the glance is reserved for the page indicator dots.
Glances
www.letsnurture.com
Glances are: Template-based
− There are separate templates for the upper and lower portions of the glance screen. Use Xcode to pick the templates you want and then design your content accordingly.
Not scrollable
− All content must fit on a single screen.
Associated with a single action.
− Tapping anywhere on a glance opens the app to the appropriate screen.
Optional
− Not all apps need a glance, and users select which glances to display.
www.letsnurture.com
Glances are:Configure the glance based on the user’s current context
− Stale or irrelevant information makes a glance less useful. Use time and location to reflect what is relevant to the user right now.
Leverage Handoff for deep links into the WatchKit app
− Glances use Handoff to tell their app what the glance was displaying when the user tapped it. The WatchKit extension can then use this information to configure the app interface accordingly.
Provide useful content to the user
− Do not create a glance simply to facilitate the launching of your app.
www.letsnurture.com
Notifications on Apple Watch facilitate quick, lightweight interactions for local and remote notifications.
These interactions occur in two stages, which are managed by the short-look and long-look interfaces.
The short-look interface appears when a local or remote notification first arrives.
A short look presents a discreet, minimal amount of information to the user—preserving a degree of privacy. If the wearer’s wrist is lowered, the short-look interface disappears.
The long-look interface appears when the wearer’s wrist remains raised or when the wearer taps the short-look interface. It provides more detailed information and more functionality—and it must be actively dismissed by the wearer.
Notifications
www.letsnurture.com
Be sensitive to the frequency with which you send notifications to users.
Users might perceive frequent notifications as annoying and disable notifications for your app on Apple Watch. Always make sure notifications are relevant to what the user wants.
Short-Look Notifications
Short looks let the user know which app received a notification and are visible only briefly.
The short-look interface is template-based and contains the app name, app icon, and the title string from the accompanying notification. The system displays the app name using the app’s key color.
www.letsnurture.com
Keep titles short and focused. The space available for displaying titles is minimal, so keep them brief and to the point.Titles do not provide detail about the notification. They provide only a brief hint.
www.letsnurture.com
Custom Long-Look Notifications
Long looks provide more detail about an incoming notification. The system provides a default long-look appearance, but you can customize the long-look interface to incorporate custom graphics and branding.
The structure of the long-look interface is the same for all apps. At the top of the interface is the system-provided sash, which displays the app icon and app name.
At the bottom of the interface is a Dismiss button. In between is your custom content and any app-specific action buttons.
www.letsnurture.com
www.letsnurture.com
Provide a static interface and, optionally, provide a dynamic interface.
− The dynamic interface is more configurable than the static interface, but both display the same notification type with your graphics and branding. The static interface is a fallback in cases where the dynamic interface is unavailable.
Add up to four custom action buttons.
− Apple Watch leverages the interactive notifications registered by your iOS app to display action buttons in the long-look interface. These action buttons are displayed automatically based on the notification’s category and are in addition to the Dismiss button provided by the system.
Configure the sash color to match your branding.
− The color and opacity of the sash area are configurable in your custom interfaces.
www.letsnurture.com
Modal sheets give users a way to complete a task, to get information without distractions, or to continue a choice that was made initially in the Menu control. A modal sheet achieves this by temporarily preventing the user from interacting with the rest of the app.
It’s best to minimize the number of modal experiences in your app. In general, consider using a modal context only when:
− It is critical to get the user’s attention.
− A self-contained task must be completed—or explicitly abandoned—to avoid leaving the user’s data in an ambiguous state.
Modal Sheets
www.letsnurture.com
Modal interfaces contain a single screen or multiple screens displayed in a page-based layout.
The only difference between the two interfaces is the addition of dot indicators at the bottom of the page-based interface.
The top-left corner of a modal interface is reserved for the close button. When the user taps this button (or performs a left-edge swipe), the system dismisses the modal interface without any further actions.
www.letsnurture.com
Do not add a separate close button in the body of your content.
− The system-provided close button is mandatory, but you can change its text to convey meaning. Typical titles for the close button are Close and Cancel. The color of the close button is always white.
Provide an accept button for tasks that require acceptance.
− Use a standard button for acceptance actions. Tapping the button should perform the appropriate action and then dismiss the modal interface.
Keep modal tasks simple.
− Avoid displaying a second modal interface from your initial modal interface.
www.letsnurture.com
General Guidelines - Layout Apps display the same interface on all sizes of Apple
Watch. Relative positioning lets items expand as needed to fill the available space.
Limit the number of side-by-side controls in your interface.
– When placing buttons side by side, use icons instead of text for buttons. Never place more than three items side by side. Including more items makes the tap targets too small for the user.
Use the full width of the screen
– Because the bezel on Apple Watch adds visual padding around your content, you do not need to include margins between the screen edge and your content. (Note that this padding is not present in iOS Simulator.)
www.letsnurture.com
www.letsnurture.com
Make text buttons full width.
− Buttons that display a text label should be full width so that the entire button label is always visible.
www.letsnurture.com
Use the context menu to present secondary actions.
− Rather than adding buttons to your interface, use the context menu for actions that are used less frequently.
www.letsnurture.com
Screen Sizes Provide the same content across different screen sizes.
− When designing your layout, use relative sizing and spacing options so that items expand or contract naturally to fill the available space.
www.letsnurture.com
Provide image assets for different screen sizes only as needed
− Use the same image resource file if it looks good on both screen sizes; otherwise, provide separate image resource files (with the same image content) for each screen size.
www.letsnurture.com
Color and Typography
Legibility is the guiding principle for the use of color and typography in your app.
www.letsnurture.com
Color
Color helps provide visual continuity and branding for your app.
www.letsnurture.com
Use black for your app’s background color.
− A black background blends seamlessly with the device bezel and maintains the illusion of no screen edges. Avoid bright background colors in your interface.
Use your app’s key color for branding or status.
− Every app defines a key color. The system uses this key color for the title in the top-left corner of the screen and in notification interfaces to highlight your app name or other important information. Similarly use the key color as part of the branding of your app.
www.letsnurture.com
Use high contrast colors for text.
− High contrast colors make text more legible.
Avoid using color as the only way to show interactivity.
− Apply color as appropriate for your branding, but do not use color solely to indicate interactivity for buttons and other controls.
www.letsnurture.com
Be aware of color blindness.
− Most color-blind people have difficulty distinguishing red from green. Test your app to make sure that there are no places where you use red and green as the only way to distinguish between two states or values (some image-editing software includes tools that can help you proof for color-blindness).
Research how your use of color might be perceived in other countries and cultures.
− Everyone sees color differently, and many cultures differ in how they assign meanings to colors. As much as possible, make sure that the colors in your app send the appropriate message.
www.letsnurture.com
Typography
Above all, text must be legible. If users can’t read the words in your app, it doesn’t matter how beautiful the typography is.
The system font was designed specifically for legibility on Apple Watch.
At large sizes, the font’s slightly condensed letters are set tight to take up less horizontal space. But at small sizes, they are spaced more loosely and have bigger apertures in glyphs like a and e to make these easier to read at a glance.
Punctuation is also proportionally larger when the font gets smaller. And as text size changes, Apple Watch dynamically switches between fonts to maintain clarity and legibility at all times.
www.letsnurture.com
www.letsnurture.com
Always use Dynamic Type. Dynamic Type gives your app:
− Automatic adjustments to letter spacing and line height for every font size
− The ability to specify different text styles for semantically distinct blocks of text, such as Body, Footnote, or Headline
− Text that responds appropriately to changes the user makes to text size settings (including accessibility text sizes)
www.letsnurture.com
Use the built-in text styles whenever possible.
− The built-in styles automatically support Dynamic Type and were designed to look good on Apple Watch.
www.letsnurture.com
Use a single font throughout your app
− Mixing many different fonts can make your app seem fragmented and sloppy.
When you specify system font sizes manually, choose the font based on the point size.
− Choose the San Francisco Text font for text that is 19 points or smaller. Choose the San Francisco Display font for text that is 20 points or larger.
www.letsnurture.com
Beautiful, subtle animation pervades Apple Watch and makes the experience more engaging and dynamic for the user. Appropriate animation:
− Communicates status and provides feedback
− Helps people visualize the results of their actions
Animations
www.letsnurture.com
Create prerendered animations using a sequence of static images.
− Store canned animations in your WatchKit app bundle so that they can be presented quickly to the user. Canned animations also let you deliver high frame rates and smoother animations. Creating animations dynamically from your WatchKit extension and transferring them to Apple Watch adds a delay before playback can begin.
www.letsnurture.com
Use image or group objects when you want playback control for animations.
− Most interface objects display animated image sequences in an endless loop. Only image and group objects offer a way to start and stop animations programmatically.
www.letsnurture.com
There are many ways to brand your app, including icons, colors, custom buttons, custom fonts, and the text you use for your copy.
As you design your app’s graphical elements, remember that each custom element should look good and function well by itself, but it should also look like it belongs with the other elements in the app, whether they’re custom or standard.
Branding
www.letsnurture.com
Incorporate a brand’s assets in a refined, unobtrusive way.
− People use your app to get things done or to be entertained; they don’t want to feel as if they’re being forced to watch an advertisement. For the best user experience, quietly remind users of the brand identity through your choice of font, color, and imagery.
www.letsnurture.com
Resist the temptation to display your logo in your app or glance.
− Space on Apple Watch is at a premium, and every occurrence of a logo takes space away from the content that users want to see. What’s more, displaying a logo in an app doesn’t serve the same purpose as displaying it in a webpage: It’s common for users to arrive on a webpage without knowing its owner, but users will usually see your app icon before opening the app.
www.letsnurture.com
A label:
− Can display any amount of static text
− Does not allow direct user interaction
− Can be updated programmatically
− Can span multiple lines
Labels
www.letsnurture.com
Use labels to display short messages to the user.
− Labels are one of the most common elements in your app. Although labels can display any amount of text, they are best suited for displaying relatively small amounts.
Make your labels legible.
− Use high contrast colors for your label text, and use Dynamic Type to ensure that the label text is sized appropriately for the user. The system fonts offer the best legibility for Apple Watch and are recommended. If you choose to use custom fonts, do not sacrifice clarity for fancy lettering or showy colors.
Use the built-in styles whenever possible.
− The built-in styles automatically support Dynamic Type and are designed to be easy to use.
www.letsnurture.com
ImagesAn image object displays one image or an animated
sequence of images.
An image object:
− Has no appearance of its own; it only displays its image
− Does not support user interactivity
− Provides programmatic controls for starting and stopping animations
www.letsnurture.com
Size images appropriately for each Apple Watch display size.
– Use a single image resource where you can, but do not stretch or compress images to accommodate different screen sizes if doing so looks bad. Instead, provide image assets that are the correct pixel size for the underlying device.
Create all image assets as @2x resources.
– There is no need to create non-Retina images.
www.letsnurture.com
Groups
Groups are an important tool for laying out the content in your interface. Groups are containers for other objects. A group has no default appearance of its own but can be configured with a custom background color or image. Groups also have attributes for specifying position, size, margins, and other layout-related properties.
www.letsnurture.com
A group object:
Can lay out items horizontally or vertically
Contains one or more other interface elements
Has attributes for specifying margins and spacing among group elements
Can display an image or a solid color as a background
Has a configurable corner radius for its background and content
www.letsnurture.com
Groups are primarily tools for managing layout. However, because a group can have a background color or an image, you can also use it as a visual element.
Nest groups inside other groups to create sophisticated layouts.
You might nest groups to lay out some items vertically and others horizontally. You might also nest groups to take advantage of the outer group’s margins or spacing options.
www.letsnurture.com
Size background images appropriately for each Apple Watch display size.
Use a single image resource where you can, but do not stretch or compress images to accommodate different screen sizes if doing so looks bad. Instead, provide image assets that are the correct pixel size for the underlying device.
www.letsnurture.com
Tables
A table presents rows of data in a single column. Use a table to present content that can change dynamically.
A table object:
Supports multiple row types
Is scrollable
Can have a background color or image
Supports user interactions with rows
www.letsnurture.com
Use row types consistently.
You might create different row types for content, headers, and footers. If you do, do not use a content row to display header information or vice versa. Use each row type for its designed purpose.
Avoid mixing rows with dramatically different types of content.
When displaying content, be consistent with the row type you use to display that content. Use other row types only as section breaks or to organize content rows. Using the same row type for content ensures that rows are sized more consistently and are easier to navigate.
www.letsnurture.com
Limit the number of table rows displayed at one time.
Tables with more than 20 rows of content become cumbersome to scroll through. Display only the subset of rows that are immediately relevant, and give the user the option to load more rows.
Do not embed tables inside groups.
Tables resize dynamically based on the number of rows they contain. As a result, tables ignore any height restrictions placed on them by groups.
www.letsnurture.com
Buttons A button performs an app-specific action.
A button:
Has a background that can be customized
Has rounded corners to distinguish it from other elements
Can contain a label or group object
The background of a button is known as the platter. You can change the custom color or image displayed in a button’s platter at runtime.
www.letsnurture.com
Create buttons that span the width of the screen.
Full-width buttons are strongly encouraged. If you must put more than one button in the same horizontal space, limit the total number of buttons to two.
Match button heights whenever possible.
If you have multiple buttons onscreen together, use the same height for each.
Use the default corner radius.
The standard corner radius for buttons is 6 points.
www.letsnurture.com
SwitchesA switch presents two mutually exclusive choices or states.
A switch:
Indicates the binary state of an item
Always includes a label
Use a switch to give users a way to specify one of two options, such as yes/no or on/off.
www.letsnurture.com
Sliders
A slider lets users make adjustments to a value throughout a range of discrete values. The user changes the value by
tapping the images at either end of the slider bar.
www.letsnurture.com
A slider: Consists of a horizontal track with images at either end for
manipulating the slider value
Can display the current value as a set of discrete steps or as a continuous bar
Always increments and decrements its value by a predetermined amount
Does not display its numerical value to the user
www.letsnurture.com
Use custom images to make it obvious what the slider does.
If you do not provide custom images, the system displays plus and minus images.
www.letsnurture.com
MapsUse maps to present a geographic location to the
user. Maps are static snapshots and not
interactive within your app. Tapping the map takes the
user to the Maps app.
www.letsnurture.com
Configure the map region to be the smallest area that encompasses the relevant locations.
The WatchKit extension sets the map region programmatically prior to display. Choose a region that encompasses all required points-of-interest but that is small enough to be useful to the user.
Do not create a map object that is larger than the available content area.
Size the map appropriately for the current Apple Watch screen, so that the user can see the entire map without additional scrolling.
www.letsnurture.com
Use annotations to highlight locations on the map.
Annotations are images that are displayed on top of the map and are used to mark locations or call out information. Limit the total number of annotations to five.
Maps provide built-in support for displaying green, red, and purple pins.
www.letsnurture.com
Dates and Timers
Date and timer objects are specialized labels that display time-related
values on Apple Watch.
www.letsnurture.com
Date Labels
A date label: Displays the date, time, or a combination of the two
Can be configured to display the date and time using a variety of formats, calendars, and time zones
Does not need to be updated by your WatchKit extension
Use a date object whenever you want to display the current day or time.
www.letsnurture.com
Timer Labels
A timer label: Counts down to a specified time or counts up from a specified
time
Can be configured to display its count value in a variety of formats
Does not need to be updated by your WatchKit extension
Always use a timer label to implement a precise countdown or countup timer.
www.letsnurture.com
Menus
A force touch gesture on the Retina display of Apple Watch displays the current screen’s context menu, if any.
Menus store relevant actions for the current screen without taking away space from your interface.
www.letsnurture.com
Menus: Display between one and four actions that apply to the current
screen
Display actions top to bottom and left to right, in the order that they are added to the menu
Are not hierarchical and do not scroll
Can be configured at design time or programmatically
www.letsnurture.com
Include a menu only if the current screen has relevant actions.
Menus are optional. If no menu is present, the system displays an appropriate animation when the user performs a force touch gesture on the display.
Do not create an action that affects only the selected item or only a portion of your interface.
Actions apply to the entire screen
.
www.letsnurture.com
Give each action an image and a label string.
Menu images are system-styled line art applied to a standard background. Label strings are limited to two lines and should be short. Both the image and string are required.
www.letsnurture.com
Icon and Image Sizes
Every app needs a beautiful, memorable home screen icon that uniquely identifies the app to the user. Because apps on the home screen are identified solely by their icon, your
icon should be recognizable and similar to your iOS app icon while still conveying the purpose of your app.
www.letsnurture.com
Icon Sizes
Home screen icons are circular and Table lists the appropriate diameter (in pixels) and the usage for each icon. Create all of these image resources as @2x images. (Note that Xcode lists icon sizes in points.)
www.letsnurture.com
In addition to the icons used by your WatchKit app, the Apple Watch app running on the user's iPhone needs icons to represent your app. Below Table lists the sizes (in pixels) for these icon resources. Create these image resources at the indicated resolution. (Note that Xcode lists icon sizes in points.)
www.letsnurture.com
Create your icons as full-bleed square images using the given dimensions.
The system applies the circular mask automatically.
Use the PNG format for all images and icons.
Avoid using interlaced PNGs. You can use PNGs with indexed colors to save space in your image files.
www.letsnurture.com
Use the standard bit depth for icons and images.
The standard bit depth for icons and images is 24 bits—that is, 8 bits each for red, green, and blue. Icons must not include an alpha channel.
www.letsnurture.com
Home Screen Icon
The Home screen on Apple Watch is unique, yet familiar. Home screen icons echo those of iOS, but without any accompanying text. At such a small size, these icons must clearly identify the apps they represent. When the functionality of a WatchKit app is very similar to its sibling iOS app, the icon remains virtually the same. But when the WatchKit app acts as a complement to or controller for an iOS app, the icon design differs accordingly.
www.letsnurture.com
For the best results, enlist the help of a professional graphic designer.
An experienced graphic designer can help you develop an overall visual style for your app and apply that style to all the icons and images in it.
Use universal imagery that people will easily recognize.
In general, avoid focusing on a secondary or obscure aspect of an element. For example, the Mail icon uses an envelope, not a rural mailbox, a mail carrier’s bag, or a post office symbol.
www.letsnurture.com
Embrace simplicity.
In particular, avoid cramming lots of different images into your icon. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can become confusing and may appear muddy at smaller sizes.
Create an abstract interpretation of your app’s main idea.
Typically, it’s better to interpret reality in an artistic way, because doing so lets you emphasize the aspects of the subject that you want users to notice.
www.letsnurture.com
Make your icon similar to the icon for your iOS app.
Maintaining a similar appearance helps the user associate your WatchKit app with the corresponding iOS app.
Create different sizes of the Home Screen icon for both Apple Watch display sizes.
Make sure that your icon looks great on both Apple Watch device sizes.
www.letsnurture.com
Menu ImagesIcons in the Force Touch menu are template images, where
the alpha channel of the image defines the resulting shape. Color information in the image is ignored.
www.letsnurture.com
With menu images, the canvas size of the image is larger than the content, as shown in Table. The extra space around your content ensures that a sufficient border exists between the edge of the menu icon and your content.
www.letsnurture.com
Use line weights that are appropriate for the device size and the complexity of the glyph.
Keep line weights for your glyphs at a minimum of four pixels to prevent them from being illegible.
Use the PNG format for menu images. Avoid using interlaced PNGs.
www.letsnurture.com
www.letsnurture.com
Follow us on https://www.facebook.com/LetsNurture
https://twitter.com/letsnurture
http://www.linkedin.com/company/letsnurture
Mail Us [email protected]
www.letsnurture.com | www.letsnurture.co.uk
