Take care of the five key points of app redesign

Material design of the east wind blew a wave, but the market based on Material designed products are still very few, today not easy to capture a @teambition, surprise, design and product team in the process of redesign summed up five key points, Pro-Test are very practical, want to keep up with the trend of the designers to learn from it!

Lead

@Teambition: The Material design advocates a real-world interactive experience that applies to interface designs so that the user's experience can migrate and get used to the new system faster. Teambition has redesigned all of its Android client products under the Material design. In the process of practice, the design and product team summed up some of the key points that deserve to be analyzed and shared with you.

　　First, use the new elements correctly.

Welcome the arrival of the new "drawer navigation"

Yes, as with "drawer navigation," the earliest interactive elements that have been used in the Android design code will be widely used for the rest of the time and spread to iOS and desktops. The two elements, which are also the most representative and potential, should be the hot floating button (fab,floating Action button) and the card.

Floating button

At present, Google along with Lolipop released a full range of products are brought on the global floating button, visual color Matching high-profile, concise design, the main role is to the most important action plus eye-catching entrance (such as Google calendar Add the agenda, Gmail to write new mail, etc.).

The "float" is said to be because the design guide for Material this time focused on the existence of the z axis (perpendicular to the axis of our mobile phone plane). The buttons are divided according to the z-axis position, there are three types, flattened (Flat), uplifted (raised), floating (floating).

The first two buttons move with the interface content, and the general buttons are flattened and need to be highlighted with the uplift style. The floating button is the highest on the z axis, adding elements such as the shadow below, hovering over the interface and not moving with the content.

According to the teambition background usage statistics, the most common uses of teambition mobile end are as follows:

1. Response to the item in the Inbox progress

2. Add tasks and assign

3. View the corresponding item arrangement when Todo list.

Teambition the original version of the product line, only the inbox got the first-level entrance, a variety of content to add the need to manually point to the corresponding level of each project, and then click New from the navigation bar, extreme cases need 4, 5 clicks to complete the task.

Naturally, teambition on the mobile version, assigning this new entry to the Add feature. We also have two additional details to look at:

1. Global Add button with Environment compatibility (context aware), for example, in addition to tasks, sharing, documents, calendar four fixed items, in different interfaces, there will be additional options, such as the Project list interface will be added "new Item" option, in specific tasks, you can choose to add notes, Executor, Deadline, etc...

2. Floating button because the relative position fixed, to consider to avoid occlusion related content, the next screen pull in the end, the button should be automatically hidden.

Card interface

Card Presentation Information practice has always been, get material design emphasis should soon be ushered in a wave of outbreaks. From the perspective of community discussion, the desire to use the card directly is also quite strong, but according to the advice of the official guidance of material design, there should be a clear distinction between the application of the card and the list, not the blind substitution, the scene with the list view, or the use of the list to avoid fragmentation of the browsing experience.

Excerpt some of the more important card-using scenes from official guidance:

1. A large number of different data (text, pictures) of the collection, or rendered very long (more than three lines) of text

2. Have a large number of interactions (such as + 1, comments, sharing buttons), such as three or more

3. There is no need to compare the contents between different cards

4. Usually as a whole can be removed as in the Google Now slide

Conversely, a single (such as Picture library), mainly for browsing, there is not much of the corresponding action of the list of content, and design can not be removed by sliding the flow of information, make a list will be more appropriate, the card will interrupt reading, causing confusion, damage experience.

In summary, we still present the list of items and tasks in the listing view.

A card is a good presentation, but instead of being encouraged to be a card, it is encouraged by the aggregation of multiple types of rich information that the card can carry.

Finally, an interesting example: micro-bo New revision of the process of using cards received a lot of spit, in fact, is also a very helpless thing, in theory, each micro-blog has a turn praise behavior, but if most people's use behavior is only browsing, then the action-oriented card will cause interruption.

In contrast, Twitter handles action buttons with relative restraint.

　Second, let material, cascade and animation effect embodies information logic

The new Material design Guide wants to try to present the hierarchy of information in a way that is closer to the user's life experience, drawing on the real-world paper cascading lighting effects, and the strong color contrasts common in posters.

There are generally these first principles:

Cascade Relationships

Between the interface (such as navigation bar, the independence of the toolbar and the content portion (for example, whether it will move together) is best reflected at the height level of the z axis, while the seams is connected to two common moving interfaces, as if a piece of paper pushes another piece of paper to move.

It is best to form a cascade (steps) When the interface is not moved together, and the transition boundary is separated by a shadow, just like a static paper with another moving paper.

The official design Guide focuses on the application of the navigation bar, toolbars and content in a variety of different relative movements should be used in different boundary cascade mode, paper clips (clips), waterfall (waterfalls), pan-style, overlay and so on.

Teambition each line of products used mainly paper clip type.

　　Third, interface switching and other occasions, to pay attention to animation quality

Material design emphasizes the actual life of the accumulation of interactive expectations to the digital space transplant, so the designer on the one hand requires that the form of animation must have the actual movement of the key features, but also required in the interface conversion, as in real space, accompanied by the occurrence of animation.

Switching animations should be as realistic as they are, with these key features:

1. have quality and inertia

Motion under the influence of gravity, not uniform motion, but similar to the upward parabolic and whereabouts, and then--2. Enter and leave the field of vision is on the speed should be the highest speed, the case is as follows:

The official guidance also specially gives the animation case which does not conform to this rule, as the contrast, this kind of sports meeting which does not coincide with the nature condition extra traction our unnecessary attention, increases the user's cognition burden, the bad case is as follows, enters the picture to accelerate, before leaving slows down:

In the same vein, consider reducing the user's cognitive burden, the official guidance also requires all interface switches should have to take the interface, relevant, meaningful animation as a transition.

For example, click on an item in the list after the expansion, the screen should not suddenly switch, the relevant content slide into the screen, will be a better way, if the support gesture operation, the user in the opposite direction slide screen can be directly back to the list, more sour!

Teambition events in "Today" in the Smart timeline:

　　Iv. making the information consistent and responsive to user expectations

Application icon and feature icon rendering should be consistent and clear, including:

Apply icon Aspect

1. The elements on the application icon do not exceed two layers of the cascade

2. When applying the z-axis distribution on the icon, do not exceed 1dp thick (1 pixels on 160dpi screen), as if the paper is folded, you can introduce shadow to strengthen the hierarchical relationship

3. Head-up, not perspective, not distorted (this is in the face of the full range of mobile products)

function icon on

1. The line is concise, the line end does not have rounded corner adornment, do not appear too thin line,

2. Basic elements consistent (can be disassembled into a square, circle and other basic graphics of the stack envelope)

3. Simple symmetry, highly correlated action

In addition, the official guidance gives a large number of system function icons in line with various application scenarios. If the entire application of the ecology is a language, a variety of meaningful icons should be the words, the emergence of a dictionary in fact, to unify the rules of communication is very helpful.

Teambition's full range of products, on the one hand, the participants, deadlines, changes, and other concepts all turned to the standardized icon. A comprehensive innovation in the application icon, with a new appearance.

Five, the flat style embellishment, brings out the bright spot

Button New effect

Under the new guidance, although the button is flat, but highly sensitive to focus and touch, there will be various ripple effects.

1. Even if the interface will be switched within 0.5 seconds, the effect is very helpful for slowing down the waiting psychological time and feedback the user to the operation result.

2. This is more intuitive than the feedback from previous button bulges

3. Most of the work 5.0 system can be completed, no better reason not to cover it both

The little details of knowing a smile

The official guide has taken a section to encourage developers to add a little bit of delightful details to the app, based on the current interface status change icon, such as the seamless transformation of the digital cool, such as the player in the playback and stop the logo seamless switch.

We have also buried a lot of such small eggs and so we dig. For example, "Today", return to the top button, as you go back or look forward to the schedule, will be like the compass to point to today's events should be in place, a certain distance after the smooth rotation, changed the traditional "back to the top" button.

Did you see that sentence?

Do me a favor! You said that micro-trust public number attention up to 200,000 have year-end award →youshege╭ (･ㅂ･) و