Ultra-detailed Google Glass interface design Guide

Editor's note: This article is definitely worth collecting, Google Glass Interface Design Guide by the user interface, design principles, design patterns and visual style of 4 components, said to be a hands-on design tutorial is not too, especially Baidu classmate professional translation, to ensure the quality of the original article. Feel it for the designers who are in the future!

　First, the user interface

This chapter describes the main UI components of glass, their usage scenarios, and how users interact with them.

1.1 Timeline Concept is the main body of Glass user experience

The main user interface of Google glass is the timeline of 640x360px cards with a resolution. It provides a variety of functions, such as the standard mode of presenting dynamic and static cards, system-level voice commands, and the general starting mode of glass applications.

The user toggles the display of history, current, and future cards in different regions by scrolling the timeline. The newly generated cards appear closest to the home page card, which is the first interface that the user wakes up when glass.

In addition to managing cards, the timeline handles user input, such as locating the timeline through the touch area, and starting glass applications via voice. Most cards have menu items that allow the user to operate, such as replying to text messages or sharing photos.

1.2 Timeline organized according to the area

The cards in the timeline appear in the following areas according to their provisional degree and type:

Home area

The default home card is the glass clock, which is in the middle of the timeline. The user wakes up glass most of the time to show the interface.

It provides system-level voice and touch commands for users to start other glass applications. The glass clock card provides the portal for the entire glass system, so it will always be on the timeline's home page.

Historical District

The right side of the Glass clock is the history area, where only static cards are displayed. Because the dynamic card is always considered to be currently in progress, it will not appear here.

Static cards Naturally "decay" in the historical area. When the new card enters the history area, it is in the nearest position to the clock. The sooner the card user is used, the Glass system will be pushed to the right in turn, Glass will automatically remove the card that the user has not used within 7 days, or the card that exceeds the 200 upper limit.

Current and future districts

The left side of the glass clock is the current and future area, where both static and dynamic cards are displayed.

The dynamic card displays information about the current moment of the user, and this card is always in this area. If the system goes into hibernation when the focus is on a dynamic card, the dynamic card will be displayed as the default card when Glass is awakened again.

Static cards that have a future timestamp or a fixed position are also displayed in the current and future areas. The Google Now card, which is based on geography, status, or other types of user information, is an example of a fixed position.

Set up a zone

On the left side of the timeline is the glass system-level setting, where you can set system options such as volume and Wi-Fi networking.

1.3 Dynamic card contains rich, real-time content

Dynamic cards can display real-time information to users by updating their custom images frequently. This feature is ideal for user interfaces that need to be constantly updated based on user data.

Dynamic cards also have access to Glass's underlying hardware sensor data, such as accelerometers and GPS, which are new forms of interaction and functionality that cannot be implemented by static cards.

In addition, when a dynamic card is running in the timeline, the user can swipe around to view other cards and interact with them. This allows the user to perform multiple tasks and seamlessly keep the dynamic cards running in the background in real time.

1.4 Static card display text, image and video content

A static card is a simple set of information that is built using HTML, text, images, and video. They are not refreshed in real time, but are used to show quick notifications.

1.5 Share the content to the contact through glass application (glassware)

The static card has a sharing function that allows the user to share current card content with other people or glass applications (glassware). You can set your application (glassware) timeline card to be shared and define a contact for your glass application (glassware) so that he can accept the timeline entries you share.

1.6 Immersion mode provides a fully customizable experience

When you need to fully control the user experience, you can use immersion mode, which can run outside the timeline. Immersion mode allows you to render your own interface and process all user input. Immersion mode is ideal for glass applications (glassware) that are not working properly under the constraints of the timeline.

1.7 menu items allow users to perform actions

Both card and immersion modes can host menu items such as sharing, replying, and removing operations (not limited to this).

Ii. Principles

Glass and existing mobile platforms are fundamentally different in design and use. Developing glass applications with the following guidelines will provide users with the best experience.

2.1 Designed for Glass

Under different usage scenarios, users use different devices to store and display information. Glass is best suited for simple, real-time, closely related information.

Don't try to transplant unique features designed for smartphones, tablets or desktop computers to glass, and don't try to replace them with glass. Instead, focus on how glass and how your services complement those devices and convey a unique experience to your users.

2.2 Do not hinder users

Glass is designed to appear when needed and disappear when it is not needed. The same idea is used to design glass applications--to provide users with the pleasurable features that complement the user's life, rather than getting them out of life.

Glass display just above the natural view, users can feel the world, and can access glass when needed. Google search will help you find specific information in the current situation.

2.3 Closely related to user scenarios

To push information to the user at the right time and place. The more relevant users feel the more magical, thus increasing the user's use of time and satisfaction.

When a user arrives at a favorite grocery store and pushes the shopping list, it is an experience that is closely related to the user scene and is well applied on the glass.

2.4 Avoid "surprises"

Because it is very close to the user's senses, glass does not meet the user's expected function or bad experience will make users feel worse than on other devices.

Don't send content to the user too often or inappropriately. Let the user know clearly the intent of glass application, do not disguise as not your things.

Sending notifications when users don't want to see a hint is a bad experience. Note the time, frequency, and location of the push information.

2.5 Around people to design

Design a graphical interface that can be used to interact with voice and natural gestures. Focus on out-of-the-way usage patterns that allow users to move quickly and continue to do what they are doing.

Glass on the display of information to portrait first, so that users in peacetime to speak the way to reply, after the speech will be automatically sent.