The UI design basics of the APPLE watch human-Computer Interaction Guide

Long-awaited started out! As the days of Apple Watch are on the way, we are finally waiting for the official document of Apple Watch (HIG)! At the press conference, many users were skeptical about the design of the fruit God-taught smart watch. The answer is hidden in the official design guide.

1, for Apple Watch design

Important: This is a preliminary document for the API or technology. Apple provides this information to help you plan the Apple technical and programming interfaces described in this article. This information may be modified at any time, and the software and interface designed according to this document should be tested through the final version of the operating system and software. The latest version of the documentation may provide more beta APIs and techniques.

Apple Watch's design focuses on the following three areas:

Personal Since Apple Watch is designed to be wearable, its UI design should be adapted to the presence of the wearer. When the user lifts the wrist, the (Apple Watch) should display the time and reminder. Digital Touch features-especially heart rate and sketch-provide a more personal, new way of communicating. The built-in accelerometer and heart rate sensor provide personalized activity information for each user. No Apple device has ever been able to connect with the wearer like Apple Watch. While you're designing the app for Apple Watch, it's important to keep that awareness in your head all the time.

Overall Apple Watch is designed to blur the convenience between physical devices and software. The side knob of Apple Watch, the digital Crown, is a tiny hardware control mechanism that allows meticulous navigation of the software. The built-in taptic engine can produce fine-grained physical feedback for reminders and screen interactions. Force Touch technology, which uses hardware to control physical gestures, makes Apple Watch's software control rise to a new level. The retina screen used by Apple Watch also makes the physical boundaries of UI design no longer present. The thoughtful app design makes hardware and software experience difficult to discern.

Lightweight The app on Apple Watch should have a quick, lightweight interaction that maximizes the strength of the screen on the wrist. Information access, operations should be quick and easy to ensure privacy and availability. Short looks are designed to provide users with a minimal reminder that users need to click to see more information. Glances provides users with an easy-to-use, sliding interface from the app. The app designed for Apple Watch should follow the wearer's usage: simple, quick, and small screen display.

The app on Apple Watch should be a complement to the iOS app, not a replacement. If you take a few minutes to do an operation on an iOS device, you can do it in just a few seconds on Apple Watch. Therefore, the interaction must be brief and the interface must be simple.

2, APP analysis

Interface style

Apple Watch's app supports two navigation modes:

• Layered mode (hierarchical). This style is the same as the iOS navigation model, and is best suited for apps with layered information. In layered mode app, users navigate through each screen to find the target they are looking for by making a choice. When a user wants to find another target, they need to backtrack some pages, or backtrack all, and then select again. For relatively complex app interactions, this layered pattern is better than a flat, page-numbering pattern.

• Page mode (page-based). The page pattern interface, which is identified by the page number, enables the user to navigate between pages only. Page patterns are suitable for apps that contain simple data models, and each page's data is not directly associated with data on other pages. The dots at the bottom of each page indicate where the user is located. Minimize the number of pages, so you can simplify navigation.

You can't use layered patterns and page patterns at the same time in your interface design. At design time, you need to choose the model that fits the app and design it for this pattern.

Regardless of which interface style is used, the presentation of the content is patterned. The model interface allows the user to complete tasks or get information without interruption, but this will temporarily prevent users from interacting with other parts of the app, please refer to modalsheets for more information.

User interaction

• Event based on action (action-based events). Single point gestures are the primary way for users to interact with the app in Apple Watch. tables, buttons, switches, and other controls need to be clicked. These clicks are then fed back into the watchkit extension in the form of code.

• Gestures (gestures). You cannot add gesture recognition to your app, instead, the system handles all gestures for you and uses gestures to perform standard actions:

• Slide in vertical direction to scroll the screen.

• In page mode, slide horizontally to switch to the previous or next page.

• Sliding to the left edge to guide the parent interface Controller

• Click action to indicate selection or interaction. The system handles the click and feeds back into the watchkit expansion.

Apple Watch does not support multiple gesture gestures, such as double finger scaling (pinch).

• Press Touch (Force touches). The small size screen can hold a very limited number of controls, which is why the new interactive mode of Force touch is introduced into Apple Watch. Just as the screen can sense touch, the retina screen of Apple Watch can also feel the pressure. When the action of pressing the screen appears, the screen will display a menu related to the current screen, which the app can use to show the actions related to the current content.

Digital Crown, which is the side knob. The Digital crown is designed for finer operations and accelerated scrolling without affecting the on-screen display. It can be more simple to scroll long pages.

3, Glances

On Apple Watch, glance allows you to quickly preview the core content of an app. Ideally, the glance is instantaneous and relevant to environmental information. When you focus on it, Glance is a collection of meaningful moments for your favorite app. Unlike the system's unsolicited reminders, glance is more like the information you actively get, so it is usually the wearer who decides whether or not to access them.

Characteristics of Glance:

• Template-based (template-based). Glance has a separate template for the upper and lower parts of the screen. You can use Xcode to select the template you need and design what you want according to the specifications.

• Non-scrolling (not scrollable). This means that all of the content needs to be in the screen.

• Read-only (read-only). In the Glance state, click on the screen anywhere to open the corresponding app.

• Optional (Optional). Not all apps need glance, and users can choose which glance to show.

The bottom area of the glance is reserved for the page indicating the dot.

Configure glance based on the user's current environment. Outdated or irrelevant information can reduce the effectiveness of glance, using time and location information to reflect current user-related content.

Glance can be deeply linked to the associated app. Glance can use handoff to notify the app of what will be displayed when the user clicks on the glance. The app can then use this notification information to show a different interface, or to configure the existing interface accordingly.

Glance need to provide users with useful information. Do not provide users with a glance interface that simply directs the user to open an app.

4. Notice (Notifications)

The notification on Apple's watch is a quick and lightweight interaction, which is mainly embodied in two forms: short look and long look. When a local or remote notification needs to be presented to the user, the short look appears. Shorter look provides less information and is more cautious-or more intimate. When the wearer puts down his wrist, the message of short look will automatically disappear. The notice turns to long look when the wearer lifts his wrist for a long time to view the notice, or clicks on the short looking information. In long look, the notification will show more information and provide more functionality, which requires the wearer to manually close or operate.

Therefore, be careful to control how often you push notifications to the user. If the notification frequency is too high, users will feel annoyed and disable the push of your app. Make sure that the push notification is what the user wants.

Short look Notice

A short look notice will let the user know what app push notification is, and the content will be very brief. The short look interface is template-based and contains the name, icon, and caption of the corresponding app. The name of the app that the system displays will use the key color of the app.

Please keep the title short and focused. Because the space of the display text content is very limited, so the content must be short and vigorous, do not plug in the excessive details of the notice, including a short hint of the good.

Custom Long Look Notice

Long look notices will bring more details to the user. The system provides a default appearance for the default long look notice, but the app can also customize the graphics and branding. All long look notices have the same structure. The top of the interface can overlay the app's icon and name, at the bottom is the system default Cancel button, the space between the two can be customized content.

The content of the app can overlap with the top space, or it can be placed underneath it. For text-oriented notifications, you can use the direct notification content option in Xcode to display the content directly under the top section.

For the custom long look interface, the app must provide a static interface and optionally provide a dynamic interface. The dynamic interface has a larger configuration space than the static interface, but there are as many pictures and branding content as they can display. The static interface provides an alternate location to prevent the dynamic interface from displaying properly.

A Long look notice allows you to hold up to 4 custom buttons. The Watch button shown in Apple's long look notice is primarily influenced by the corresponding iOS app. The button that is displayed automatically invokes the app's Notification bar button.

The Cancel button is always present and is not counted among the 4 buttons.

For specific information about static and dynamic interfaces, as well as button actions and configuration information, refer to the WatchKit Programming Guide.