An introduction to the super Practical Apple Watch design

Later this month, the expected Apple Watch will bring tens of thousands of watch applications, impacting the application market and attracting your attention. Because the screen size is smaller, and always wear on the wrist, the way of interaction is also different. Creating a beautiful, comfortable experience on Apple's watch requires a new design approach. This article will get you started >>>

In this article, you will learn how to design applications for Apple Watch through a number of basic theories and guidelines, and to explore the design of wearable devices.

　　Application structure

Apple Watch uses 3 parts: WatchKit App, glance interface and notifications. Each has a different purpose and faces different design challenges.

　　WatchKit App

WatchKit app is the primary means of viewing or interacting with application data. It is usually entered from the main screen of the watch, but can also be entered from glance or notifications.

It is important to know that WatchKit app* has only two types of navigation--hierarchical and page-style. Although iOS apps can write custom navigation, the WatchKit app is very restrictive and is not currently supported.

The hierarchy is ideal for relatively complex applications, like many existing iphone apps, where users need to make a series of selections and then reach the end interface. Keep in mind that Apple expects users to use their watches in 10 seconds, so don't copy them on your watch, and you should sublimate them.

Page-by-slide, allowing users to travel between multiple pages. This is a better way to navigate if the page data does not depend on other pages.

When you start designing, figure out what data is most important to your users, how they relate to each other, and then choose the navigation structure that best reflects your data.

　　Glance

Glance is a series of browsable content, based on time or environment, in which the wearer picks out the favorite applications. A slide on the Apple Watch can trigger the glance and then slide horizontally. Glance is not necessary, so not all applications have, or need.

Glance is limited to a screen that can't be scrolled, so you have to display the most useful and important information on the screen, and you can visually distinguish your glance by color, different size, and picture. Clicking anywhere on the glance will open the watch application. So avoid the action items that contain buttons, sliders, and menus.

Finally, glance is based on some templates. So your design has to choose a form that best embodies the meaning of the data. Apple offers a range of templates for both the upper and lower half screens.

　　Notice

The Apple Watch application has two notification statuses, called Short-look and Long-look interface. When the user first receives the notification, the Short-look notice will appear for a short period of time. The user can reduce wrist ignore notice, also can lift wrist or click Short-look Notice, enter Long-look View details and function.

Since the watch is always on the wrist, you have to limit the notice and push only the most useful information. If you continue to be interrupted by unimportant news, it is very annoying. The best advice is to use the user's environmental information--such as location, time, or activity--to provide real-time, relevant information.

The Short-look interface contains a title for the application icon, application name, and notification. Since the title is the only thing you can control, it needs to provide a brief hint of the content of the notification.

All applications have the same Long-look interface structure. The top displays the application icon and name (you can also customize the color of this article), and the bottom is the Ignore button. The middle is custom content, up to 4 custom action buttons.

　　Interactive mode

In addition to the familiar daily gestures on the phone--click and slide--Apple Watch offers two new ways to interact:

　　Roller

The application can be scrolled through the wheel, not blocking the screen as the fingers slide. The scroll wheel is especially useful for scrolling long pages.

　　Press

The Apple watch screen can distinguish between clicks and compressions. As with the right mouse click, press to display the menu for the current interface, which contains up to 4 related content.

Double-pointing zoom such a multi-touch gesture is not on the watch.

　　Layout

Apple Watch has two sizes--33mm and 43mm. The small screen size is 340x272 pixels, and the large screen is 390x312 pixels. A big feature of the watch is the retina screen, which, like the iphone, offers twice times the resolution size of the picture.

You don't have to provide pictures of different sizes (although you can), and you don't have to design two different layouts. Because Apple uses relative size and distance, pictures and components scale up to fill free space.

When designing an application, Apple recommends using a black background to fit the outer frame. Darker and brighter colors are better than lighter colors. Because the outer box provides extra margins, it is important to fill the available space and design it in full screen width.

As for the button, Apple also recommends full screen width. However, if you have a parallel button, you should replace the text with an icon. It is not recommended to include 3 buttons or more in a row because the screen is too small. The buttons on the same screen should be the same height to maintain visual consistency.

　　Color

Because it is designed on a dark background, you have to use bright, high-contrast colors in your application. Colors can also be used as part of your branding.

Each application can define a "primary color" that is displayed in the status bar title and on the application name of the notification. You can also customize the top bar color for long-look notifications.

　　Animation

Beautiful, meticulous animation can enhance the user experience, so that the application is more attractive, more seductive, it is memorable. When designing an animation on a watch, make sure it is fast enough and has its purpose. If the animation blocks the user from obtaining the information they need, it can damage the user experience.

When creating animations on Apple Watch, you can't give an engineer a GIF, and then let him implement it dynamically. You have to provide a separate static picture of each frame to create faster and smoother animation integration. The best way to do this is to import your animated files into after effects or Photoshop to extract each frame individually.

　　Context Menu

The context menu displays up to 4 action items, which appear as a circular picture with a label. Click on an action item or anywhere on the screen, and the menu is closed. Color is not considered when designing the context menu. Like the tab bar icon applied to iOS, the icon for the context menu is a built-in picture of the template, and the color defines only the shape of the icon.

For context menu, you have to give each icon two sizes of pictures. On a 42mm watch, the line width of the icon is usually 1 pixels larger than the 38mm version.

　　Font

Apple has developed a sans-serif font, called San Francisco , that specializes in the legibility of Apple Watch, with 23 variations. Although you can also use custom fonts, Apple recommends using built-in text styles because they are designed for small screens.

Another benefit of using the Apple system font is that the text will scale automatically when the label is too long. Word spacing decreases as the font size increases. If you want to specify a font size, the San Francisco font suggests using 19 dots or less. The display font for San Francisco should be used for 20 dots or larger font sizes.

　　Apply icon

Like the iOS main screen icon, Apple Watch also needs an app icon. Unlike the iphone, the iphone uses a square display icon and name, and Apple watch is round and does not contain labels. This makes your icon more recognizable and familiar than the iOS app icon, and it also expresses its role.

For such a small screen design to apply the icon, concise first. In the dazzling ocean of application icons, icons are the first things users see before they open apps, so you have to make a good first impression with a beautiful icon design.

Design different sizes of the icons to fit two kinds of watch size and each display icon interface. The system automatically adds a circular mask to the icon, so the icon should be based on the guide provided by Apple to make a square picture.

You can download this handy Apple Watch icon template to generate an icon.

　　Beyond the Basics

Apple Watch provides users with an unobtrusive way of getting data, which is vital to them. By understanding the structure, interaction and best design principles of an application, we can create a more aesthetically pleasing experience on Apple's watch.

To get started, see the Apple Watch Human-Computer interactive guide and download the Apple Watch design resource, which has a range of models, references, templates, and fonts.

For more details, tips and resources on pleasing wearable equipment experience design, please see the design for wearable equipment. This is a free course that allows you to go through the application design of Apple Watch step-by-step.