Five techniques learned for Soundwave design watch applications

Soundwave has been on the iOS and Android platforms for nearly two years. I recently had the opportunity to make UI and interactive design for the Apple Watch version of Soundwave, making it one of the first third-party applications on the watch platform after April 24.

Designing apps for new platforms such as Apple Watch is an excellent learning opportunity for our design and development teams. As a designer, I learned some key things in the process.

　　I. Learning Design Code

The official Apple watch HMI design code is very strict. The same is true of the iOS version, but over the years, as the iOS device and app market matures, designers often have to spend a lot of time exploring more unique and customized design patterns beyond the norm. And now, in the new platform just out of the stage, we do not need, and can not carry out a wide range of exploration – may wish to take advantage of the savings of time to carefully study and understand the official design specifications, see as a designer, under the constraints of the new platform framework can be used to implement what kind And what iOS design ideas can't be applied to watch – otherwise, you'll find yourself spending a lot of time reworking the program to get it developed.

The good news is that with the content of the design specification, Apple has provided a very comprehensive set of design resources (which require a developer account to download), including a large number of PSD and sketch templates, providing detailed information on areas such as layouts, buttons, font sizes, lists, etc. that are worth your time to learn.

　　Second, simplified human-computer interaction

Starting around 2013, in the UI design field, the mutation visual style of iOS has long tended to be concise and flat, and the use of elements such as fonts, color, spacing, and materials began to be content-centered, communicating and supporting, rather than playing the role of decorations in the past. Designers are beginning to focus on the use of dynamic and transition, and strive to make the experience more natural and smooth.

Apple Watch is no exception, even more fully focused on the simplified interface elements and subtle interaction, the goal is to enable users within a few seconds to complete the common simple tasks, without any unnecessary interface elements interference. At the same time, the limitations of the current watch technology and design framework make it less of a space to try highly customizable and transition effects – on the one hand, this situation is bound to change as the equipment matures and, on the other hand, it is good to have the necessary constraints in the first generation for new types of equipment, This allows designers to focus on the simplest and most direct experience patterns when facing new platforms such as watch, allowing users to quickly complete the typical tasks in watch usage scenarios by giving them the minimum cost.

When designing Soundwave, we always remember this and make sure that each task can be done with two or three clicks.

　　Third, effective use of dynamic effect

Reasonable dynamic effect can reflect the interactive characteristics of UI elements, make the function of the product more obvious, help users to complete the task effectively.

Unique and subtle dynamic effects can also bring a certain degree of pleasure in the product. Recently, I've found myself more and more clicking on the "Favourite" button on Twitter. In retrospect, they started after they redesigned the button. Unlike the simple state switch of the past, the star icon is now clicked with a small bounce effect. Although from a functional point of view, this does not have any practical significance, but it does in the details of the promotion of product pleasure, so that the function more emotional affinity.

Unlike the design for iOS, designers are now not only designed to be dynamic but also responsible for implementation – unless Apple Watch open coreanimation for the future, developers will only be able to build the dynamic using a complete set of image sequences provided by the designer as they currently do. Personally, I still use after effects to design animations, and then frame out a set of PNG images, which ultimately makes up 30 frames per second.

Here is a brief introduction to how I used after effects to export static picture footage.

First select "Add to Render Queue" in Composition:

Select "Lossless" to call out "Output Module Settings":

Change the format from "Quicktime" to "PNG Sequence":

Change the channel from "RGB" to "RGB + Alpha":

Finally, make sure that the "Use Comp Frame number" is unchecked so that the exported PNG picture can be automatically named after the 0-based ordinal, not the name they display on the timeline. The final picture file name should resemble "Filename_0" and "Finename_1".

　　Iv. content is the key

This headline can be seen everywhere, indeed. But when designing for Apple Watch, these words are simply gospel. Take a look at the current watch applications of both the official and the third parties, all of which have a common feature, which is to display only the most important and critical information in the context of the present situation, so that the user can simply glance at it to get a glimpse. Even Instagram and Twitter, which contain a wealth of content, are condensed into the simplest and most basic graphics and text format on the watch.

We used the same approach in designing Soundwave, only on the timeline display album cover, musicians and song name, and the most important CTA (call to Action) is to click on a song to see where it is being played, with two operations, one is to play one is like, it is so simple.

　　Five, to create a seamless experience

We all know that the current watch applications are not independent. WatchKit is an extended model for iOS applications, and the nature of current watch applications is still an extension of iOS apps. We've done some basic, watch-watch tasks on the ground and left the iphone with more complex content and features that require more attention and time from users. With a thorough understanding of the collaboration mechanisms and eco-forms of Watch and the iphone, create features that are "enhanced" and "watch" in nature, and do not copy the iphone version of the functionality to watch.

The notice on the watch (notifications) is a good example. In our product, when a user receives a song from a friend, watch pushes notification to the user, and the long look mode contains two features: A reply (by dictation) and "Like the song", and of course the dismiss provided by the system. More features, such as complex content responses, or sharing a song with a friend as feedback, are done on the iphone via the handoff feature. The user can see the Soundwave handoff icon in the lower left corner of the iphone lock screen, slide up and go directly to the app for related operation.

　　Summary

The process of designing applications for Apple Watch is a very interesting experience for us. Soon, with the user actually using the watch version of the Soundwave, we will be able to understand more real feedback, so that more targeted iterations, validation, iterative, and then verification.