4 ways to help you quickly complete the Apple Watch project with 0 basics

When a designer has never been in touch with a project, and the project gives you the time is very urgent, such as only give you a week two weeks of design time, this time how should deal with this sudden situation? Today NetEase's Zengsu-chai students to their own experience of the Apple Watch design project to do case, Talk to your classmates about how to design a product quickly on a 0 basis.

This can be without panic, we first give ourselves a day or a half time to understand it, the quickest way is to start everyone's brain hole, and then use their own brain to find ways to heads, the top of a Zhuge Liang, contact you know the design group connections, asked to do similar project designers, finally there will always be a surprise harvest. I remember Rough said, in this era, we should be good at using My network chain, I was from friends in a short one hours to learn about the watch project (although people do not do the Apple Watch), he outlined the characteristics of the watch and I have a few watch-related sites to browse. To my site can be recommended to you, here, of course, including Apple's official website, you can see on the Apple website mature online product appearance, another site relative concept, you can refer to a number of simple operation and dynamic effect.

http://www.apple.com/Watch/apps/

Http://watchaware.com/watch-apps

In the face of an unfamiliar product we can start with a product specification and a simple understanding of its interaction structure.

　　1. Standard

Size: The design of the Apple Watch is divided into two dimensions, 38mm:272*340 and 42mm:312*390 pixels respectively.

Font: The Apple Watch uses the default Los Angeles font.

The color of the font: with bright colors, auxiliary gray text can not be too dark, you will not see unclear.

The first is to find the specifications of the Apple Watch, this figure seems difficult to understand, but there is no relationship, in the actual operation encountered problems after the interpretation of these specifications can be solved. Do not understand when you can ask how the front end of these diagrams are how to interpret.

Different devices have different properties, such as the Web end and the mobile phone will have different restrictions, the specification of the watch is much more restrictive, for example, it is divided into pieces in some pages, so you can't use a complete background to fill it with background, here is the first draft of the design I did, I made a circular progress bar ... But the front end tells me that it can't be achieved because the progress bar is too big, then refer to the above specification diagram, my progress bar can only be placed in the red area of the design, so the progress bar to do very small, but in this case, the progress bar inside the arrival time of the aircraft and so the text information will have no place to put, So we can interpret the above specification against this question.

The following is the applicable specification structure of the above ... Because of the limitations of the norms, such as designers love such a high performance of the progress bar style may have to give up, depending on the content of different products characteristics, the Apple Watch can be common progress bar style mainly appear in the sports category, health-type app-oriented.

White for the text block, red area can put the picture class material, basically divided into upper and lower structure, design time to find suitable for your design of the structure according to the standard design.

The following picture to note is the upper right corner of the red area block, text no matter how the layout, you have to give this area block leave position, this is a fixed place loading, text can empty out the height of the area, can also be left at the end of a certain position.

The image below is the one I made for the above image, and I directly emptied the height of the red area to cater.

As a feature of the Apple Watch, we try to use less color blocks or pictures to limit the size of your interface, because the watch in addition to the fixed design size, its external also contains a black, as long as you do not use the limitations of the block surface to limit it, these external black background will naturally be incorporated into your screen, So it looks like your interface will look more stretched and more atmospheric ...

Again, the Apple Watch is a black background, in the use of color techniques, most apps use highly saturated, vibrant colors that are not only visually attractive, but also have the ability to see what's on the screen at a distance, and here are some of the app's visual screenshots ...

　　2. Simple Interactive Action

The IPhone watch is mainly divided into three major sections, respectively, App,notification,glance.

APP: This is the home page of our mobile phone, it can be clicked to enter through the homepage icon of the Watch, also can through notification click Enter.

Notification: It's a reminder, like my plane takes off in a couple of days, it's going to be in the notification, and the reminders for each app are parallel, slide to the left to navigate through all the important reminders.

Glance: It's an emergency push, and if my plane takes off in one hours, it pops up on the page and clicks on it to see the details.

　　3, how and the front-end efficient cooperation

Since the iphone watch has fewer interfaces, its main function is as a reminder that its pages do not appear as many interfaces as the phone. So it gives everyone a very efficient way to develop, when the front end of all the structure is made to enter the visual adjustment, you can spend one or two nights with him to work overtime for visual adjustment and fitness, if you are still a cute girl with high value of the matter will be more smooth, You can use your pixel eye to visually adjust the arrangement of the content in front of you, this is more efficient than the front end according to your mark to do several times, after all, you can save him to send you a picture of the gap, you and his communication time. Coherent, the front end will also be very happy.

Adaptation of the technique or adjust the small interface to fit the large interface. If you have the time, the individual development size than the appropriate size to make more granular, but will increase the workload of development ...

　　4. Global Thinking

Before the design of the best to remember the interactive manuscript, on the global has a control, priority to do a number of important interface for style settings, and then color, font, control the overall unity, the proposed design process to organize their own interactive manuscript, you can draw a flowchart. This can avoid the problem of the style is not unified ...