Apple Watch UI Animation Analysis

After watching the keynote of Apple Watch, we were surprised by the large number of dynamic effects included in its UI experience. Perhaps due to considerations such as rendering efficiency and power consumption, the UI of Apple Watch itself is quite simple and does not have too many visual elements; this also makes the various transition dynamic effects included in it one of the key factors to improve the user experience.

In addition, we will find that Apple shows us not only a few so-called "standard animations", but in fact, the animations in almost every interface are designed for its specific content form; this also reflects the effort Apple has put into its interactive design.

In order to study these complex motion effects, we have captured some typical motion effects shown in the demonstration video and analyzed them in this article. First of all, we must make a disclaimer: before the official release of Apple Watch in 2015, we cannot be sure what their final form will be; everything is subject to the official demonstration given so far.

Opening and exiting apps

The zooming effect when opening an app is similar to that of iOS7. What is worth noting is that during the cross-gradient process between the app icon and the interface itself, the rectangular area of ​​the interface always keeps in line with the circular area of ​​the icon and zooms in synchronously. During this process, the other icons gradually move away from each other, which is very similar to the visual effect of superluminal propulsion in the Star Wars movie; it reminds me of the concept of "app galaxy" mentioned by Apple.

What we don't know yet is what happens if you tap an app icon that's not in the center of the screen. Does the tapped icon first move to the center of the screen and then scale up? Or does it scale up right from where it is?

The exit animation is the opposite of opening. The interface shrinks and fades out, and the application's own icon and the surrounding "neighbors" gradually gather together.

Answering a call

The downward panning effect comes from the keynote presentation itself and is not included in the UI animation.

The process of answering a call is simple, but it contains quite a few motion elements: after clicking, the green answer button shrinks, the mute button enlarges in the same position, the volume control appears at the top of the interface, the "incoming call" prompt changes to the call timer, and the pull-up prompt bar at the bottom moves down and disappears. Perhaps you have noticed that all the motion effects in this process are different, and each element appears or disappears in its own way.

Reply to a message

The upward translation effect comes from the keynote presentation itself and is not included in the UI animation.

When a message is received, the original watch face will fade back; at the same time, a prompt with a short message icon, the sender's name and the title "messages" will slide into the interface from bottom to top, with a slight bounce effect before it stops. After a period of time (or after a click?), the text content in the prompt moves up and fades out, the short message icon shrinks and moves to the upper left corner, and the message body and the "Reply" button slide into the interface from bottom to top.

After the "Reply" button is clicked, it will shrink and fade out slightly. Note that there is no rebound effect. Then the entire message will zoom in and fade out, and the dial interface that was previously hidden in the back will flip backwards along the y-axis, and the interface containing various reply options will flip to the front.

Conceptually, this set of animations is indeed complex. Why does the dial interface fade away after receiving a message (similar to the use of frosted glass in iOS7 to show the hierarchical relationship between content and context?), and why does it need to be flipped when calling out the reply interface? Perhaps it is because the first two prompt interfaces do not belong to a specific application environment, and only when replying can it be considered to enter the official application. It is a very interesting combination of applications, and I look forward to seeing more examples like this.

View Calendar

The transition method of opening a specific date in the calendar is quite similar to that of Android. Click the current date, the rounded rectangular indicator will shrink slightly and fade out, then return to its original state, and then the interface will start to switch, the calendar interface will slide out to the left, and the to-do interface will zoom in. During the switching process, the current time in the upper right corner will not change.

I don't know what the response style will be reflected in the date number if I click on a non-current date (no current day indicator).

Delete a message

The left pan effect comes from the keynote presentation itself and is not included in the UI animation.

Swipe left on an email to bring up the context menu. Clicking on the trash can icon highlights it and shrinks it, then bounces back to its original state. The highlighting process seems to contradict the "tap to push away" feeling, but this may be because the icons here are already quite dark.

After clicking the trash can icon, the email will move right back to its original state, then fade out, and the email list below will cover it. Maybe this mode will become the standard behavior on the content list in the future?

Choice of health apps

The left pan effect comes from the keynote presentation itself and is not included in the UI animation.

Selecting running in the health app, the following transition is divided into two stages. First, the selected running button will shrink slightly and flash once in response to the click; at the same time, the other buttons will fade out and disappear one by one. Then the running button slides down to the bottom, while changing color, enlarging, and changing the title to "Start". During this process, other content elements fade in one by one; the number is an exception, which will slide into the interface from the bottom up from behind a hidden layer.

in conclusion

Assuming that what we have seen so far is what Apple Watch will bring us when it is officially released, then the conclusion we can draw is that there are really a lot of animations used here. Any interface element is always accompanied by animations such as sliding, zooming in and out, fading in or out when its state changes.

It can be said that the current style is a kind of compromise design decision, in which each animation is targeted at a specific time, interface space and contextual environment, striving to most accurately reflect the interaction process in a specific situation. "Contextualization" is the key here: by optimizing the interactive experience in each interface and each link, to make up for the defects brought by the extremely limited screen size; sacrificing global unity in exchange for providing the most appropriate interaction mode in any specific interface environment. If we compare Apple Watch and Android Wear, we will find that their strategies in this regard are quite different; the latter strives for the most universally applicable global unified interaction mode, but at the cost of more steps and clicks.

Let's summarize the key points of interaction in Apple Watch:

1. Interface elements respond to clicks in a variety of ways. Usually they shrink, as if they were pressed, but whether they return to their original state depends on the specific situation.

2. The form of motion effects is "targeted and inconsistent". Similarly, different elements in the same interface will have their own movement patterns.

3. Do not emphasize "symmetry". For example, in some types of content, the way new elements enter the interface is different from the way old elements leave; however, in some cases, new and old elements are replaced by simple cross-fades.

4. The time in the upper right corner seems to be the most "static" information. It appears in the same position on many interfaces and remains unchanged when the interface changes. However, there seems to be no clear rule as to which interfaces need to display the time and which do not.

5. The design principles of the navigation system are not very strict at present. For example, the way to navigate to the next level in different interfaces may be different. If it is an interface with page number indicators (dots) at the bottom, it is usually browsed by swiping left and right; and some interfaces will place a link to return to the previous interface in the upper left corner; again, these are not 100% certain rules at present.

6. Acceleration effects during sliding and zooming in/out look like sine curves and usually include a bounce effect before ending.

All in all, Apple Watch breaks a lot of conventions in terms of application interface design, and it seems that there will be many challenges in the future; their focus on motion effects is so strong that you can't ignore it at all. It seems that in the future, when designing applications, the strategy of adding only "a little bit" of motion effects will hardly work, such as the most basic sliding or fading in and out; you may need to bet all your chips to do this well. This is not easy, because there may not be many designers in the industry who have really done in-depth research in this area. You can't just make some decorations here or there; motion effects need to have a clear purpose and need to be designed for specific applications and interface environments. To find the most suitable mode, you may need to do a lot of trials and iterations through prototypes.

One of the challenges Apple faces is how to maintain the high quality standards of the ecosystem. On the one hand, they cannot allow apps running on Apple Watch in the future to bring users a bad and confusing experience, but on the other hand, they do need to convey the value of Watch through some excellent apps. Among 100,000 apps, there are 5,000 Twitter clients and hundreds of bad apps - this is not what Apple needs - they need 1,000 good apps with excellent quality, rich creativity, and unique needs. So I personally feel that the future application review standards will be much stricter than the current iOS, and the review conditions may include rules such as "need to provide exquisite animations to provide a superior experience." Of course, this is pure speculation, and we still need to wait at least a few months to see the official design and development specifications.