About the 10 design tips that Apple Watch officially mentions

Today this is a foreign experience of a WWDC 2015 of the designer wrote, he put the official website video mentioned in the small skills are refined into graphic sharing, especially practical, recommended learning >>>

Welcome to the translator's micro-signal: Design translation of the words yo.

For designers, Apple Watch is a brand new gadget. The design of Apple Watch introduces many new limitations compared to the design of Web pages, desktop clients, and mobile applications, but it also offers endless possibilities.

I recently went to San Francisco to join Apple's WWDC and learn how to design apps for Apple Watch. I am happy to share these tips with you to help you make better products.

Most of the things mentioned in this article can be found in these two WWDC 2015 videos:

Tips for Apple Watch design & Apple Watch design. You can also look at Apple's official Watch HMI guide.

Always keep in mind that your design should consider performance

By analyzing Apple's official presentation on WWDC, see the average time spent in 2-5 seconds between users interacting with Watch. If you can only remember one thing from this article, it should be-as fast as possible to provide information to users. This is really very, very important for Watch.

　1. Optimize JPG Images

Apple Watch users typically glance at a 4-centimeter screen during a walk. So what they need is a faster loading speed, not a high-definition image.

Reduce the quality of JPG

Use a picture of the right size

2. Optimize PNG pictures

Use PNG-8 instead of PNG-24

Using PNG-8 instead of PNG-24 can significantly reduce picture size.

In addition, you can use a black background to replace the transparent background. I don't do this on Web pages and mobile devices, but on Watch we have more control over the display of pictures. And in the case of 90%, these images will be shown in a black background.

Use Imageoptim to compress the picture, the effect is tension pile.

Imageoptim screenshot

　3. Using step-by-Step loading

If you need to load something big, like a photo or map, show the user other information at the same time. Don't let the user silly wait.

Show the user other information while loading

　4. Make sure the default picture placeholder is the same size as the picture

Otherwise, the moment the image is loaded, the rest of the content jumps down, which interferes with the user's current operation, especially when the user is sliding down the screen.

Default picture Placeholder

After the picture is loaded, the right side because the picture is higher than the default picture placeholder, the content is squeezed below

　5. The content sorts has the fastidious

Given that the user has only a short interaction time with the Watch, it is important to show the information as quickly as possible.

Information sort there are exquisite