UI element Design for the APPLE Watch human-Computer Interaction Guide

1, label

The label renders static text.

-Renders any number of static text

-Direct user interaction is not allowed

-Can be upgraded by program

-Can span multiple lines

Tags are the most common element in your application. Use a label to present a brief message to the user. Labels are best suited to render relatively small amounts of text.

Make your labels clear and easy to read

Use a high-contrast color for your label text and use dynamic type to ensure that the size of the label text fits the user.

Apple Watch's built-in system fonts provide the best readability, and we recommend using it. If you choose to use the user font, do not use the flower body letters or gorgeous colors. (For instructions on using text in the app, including the use of dynamic type information, see [Colors and Fonts], follow up on the translations, wait a minute.)

Use built-in styles whenever possible

The built-in styles are designed to be readable and easy to use.

2, image

An Image object displays a single static image or multiple dynamic images.

Image objects:

-No appearance on its own; it only renders images

-User interaction is not supported

-Provider to control animation start/stop

Set the appropriate size for the image to apply to the display size of each Apple Watch.

Do not attempt to stretch or compress images for different screen sizes. Ensure that the pixel dimensions of the image resources are correct for their underlying devices.

Set all image resources to @2x.

It is not necessary to establish a retina image.

3. Group

A group is an important tool for correctly arranging content in your interface. Groups are like containers for other objects. The group itself has no default appearance, but the user can customize the background color or image. The group also has properties that define the location, dimensions, margins, and other layout-related attributes.

Group:

-You can arrange the components horizontally or vertically

-Contains one or more other interface elements

-a property that defines the spacing between margins and group elements

-You can set an image or a solid color as a background

-can set fillet radius for its background or content

The group is the main tool for you to implement the design in Xcode. However, given the fact that a group can have its own background color or image, you can also use it as a visual element.

Do not place groups in groups to create complex layouts

You can arrange some content horizontally while others are arranged vertically. You can also nest groups to take advantage of the margins or spacing of the outer groups.

Create a different background image for different Apple Watch actual display sizes

Do not attempt to stretch or compress images for different screen sizes. Ensure that the pixel dimensions of the image resources are correct for their underlying devices.

4. Form

The table shows the data in a single column. Use tables to render dynamically changing content.

Table objects:

-Multiple line types are supported

-Is scrollable

-can have background color or image

You want to define the layout for your table row type at design time. All rows are designed in advance. At run time, you can select the type of row you actually want to use.

Use a consistent row type

You can create different line types to implement your content, headers, and footers. Keep consistent when using those lines.

Avoid mixing content from distinctly different classes in

When the content is rendered, the content is rendered using a consistent row type. Use other row types only when you need to do section breaks or organize content rows. Using the same row type for the content ensures that the row dimensions are consistent and easy to navigate.

Limit the number of rows in a table that is rendered simultaneously

Tables with more than 20 lines of content will become difficult to scroll through. Renders only a subset of the directly related rows and provides the user with the option to load more rows.

Do not embed tables in a group

The table is dynamically resized based on the number of rows it contains. As a result, tables ignore the high restrictions that all groups have on them.

5, Button

button to perform an application-defined action.

Button

-Customizable background

-With rounded corners

-Can contain labels or group objects

The background of the button is the so-called disk (platter). You can change the color or image defined in the button disk at run time.

Create a button that spans the width of the screen

Full width buttons are strongly recommended. If you have to place more than one button in a horizontal direction, limit the number of buttons to two.

Try to match the height of the button whenever possible

If you have more than one button on the screen, use the same height for all the buttons.

The button has rounded corners to distinguish it from other elements

The standard fillet radius of the button is 6 points.

6, switch

The switch provides two mutually exclusive choices or states.

Switch

-Represents a two-dollar state of an item

-Always include a label

Use switching to provide users with a choice of two options, such as yes/no or On/off.

7. Slide block

The slider allows the user to adjust values within the range of a series of discontinuous values. The user changes the value by tapping the image on either side of the slider bar.

Sliding block

-Contains a horizontal bar with one image on each side to manipulate the slider value

-can display the current value in a series of discrete bars or a continuous bar

-Always increase or decrease by predetermined amount

-Do not display current values to users

Use a custom image to make the slider easier to understand

If you do not provide a custom image, the system displays a plus sign and a minus sign.

8, Map

A map presents information to a user about a geographic goal. Use a map to show destinations or places of interest. The map is a static snapshot and cannot generate interaction in the application. Clicking the map will allow the user to move to the map application.

Set the map area to the minimum area that contains the surrounding location

Map the area before displaying it through your WatchKit plugin settings. The area you select should contain all the locations you need, but it is also small enough to make it easy for users to use.

Do not create a map object that exceeds the size of the available content area

The map size should apply to the current Apple Watch screen, and users should be able to see the entire map without scrolling through the scroll bar.

Use annotations to highlight sites on the map

A callout is an image that appears above a map to mark a place or exhale information. Do not display more than five annotations at the same time.

The map provides a built-in green, red and purple pushpin. Use the green Pushpin to mark the start point, the red Pushpin marks the focus, the purple pushpin marks the place of interest.

You can also use custom images to define annotations. The image is placed as follows, with the lower edge at the target coordinates.

9, date and time

Date and event objects are private labels used to display time-related values on the Apple Watch.

Date Label:

-Displays the date, time, or both

-You can display dates and times, calendars, and time zones in a variety of formats

-No need to update via WatchKit plugin

Use date objects when you want to display the current date or time.

Clock Label:

-Countdown to a specified time or timing from a specified time

-can display timing values using multiple formatting settings

-No need to update via WatchKit plugin

Be sure to use the clock tag to achieve accurate countdown or timing

10, Menu

A hand-click gesture on the Apple Watch Retina screen can exhale the context menu for the current screen. The menu contains the actions of the current screen without having to occupy the space of your interface.

Menu show one to four actions

Actions are displayed in the order in which they are added, from upper left to lower right. The menu cannot be scrolled without a rating. You can define menu actions at design time or in a planned way.

Menu actions apply to the current screen

Each screen can have its own menu or no menu at all. The operation is not appropriate for the current screen of the scrolling interface or for tasks currently selected.

Each operation needs to have a picture and a label string

The menu image is a system-style line pattern applied to the standard background. The label string must fit between one and two rows.

menu is optional

Menus are included only if the current screen has related actions. When there is no menu to show, the system will display a suitable animation.

For information about the icons used in creating menus, see [Menu image], we'll finish it as soon as possible. ^_^