Deep Chat Material Design trends

FAI: Two months ago, the Google I/O conference released the Android L and launched material design, reunified Google's language and established the direction of Google's design in the future. So, what is material design? I simply translated it into "intrinsically designed". As the name suggests, this is a design that considers the nature of things, and sees the UI elements in the electronic screen as a new material that does not exist in the real world and gives it physical properties. Therefore, material design is not intended to be materialized. Many designers put the flat and the materialization of opposites, in fact, the two are not antagonistic relationship. But I'd rather call Google's new design language abstract.

Whether it's Apple's design language, Google's design language, even windows ' modern UI and Facebook's paper design language, the general direction is the same, but the details are separate. Apple and Google have almost monopolized the operating system of mobile devices, so let's talk about the design trends of wireless devices in the newly released material.

　　The morphological simulation of paper

The preface has already mentioned that material design is not a kind of object-designing, nor is it an emphasis on fitting design. We know that the electronic screen is completely flat, unlike the reality of the object is 3D,. The spatial relationship between each page of a book is clear, but the electronic screens are all on one plane. Although the electronic screen does not have the spatial sense, but the information content has the spatial level relations. and material design solution is to the real world the characteristics of the paper into the electronic screen, the content of the information presented in the virtual paper, paper (information content) and paper between the upper and lower levels of relationship with the projection simulation of the space sense of the paper. Material design projection is not used to use pictures or style code to achieve the projection, but the system according to the position of the paper level in real time rendering, the projection will change with the paper's spatial relationship and size.

The card design that Google introduced a few years ago is a way to simulate the physical form of paper, but the material design promotes it to the level of the System Information architecture.

In addition, the blurry effect of iOS is essentially the same as the problem with the material design paper. The hierarchical relationship of content information is expressed by simulating the effect of depth of scene.

　　Ii. Animation of the transitions

In the past our page only X and Y axis, open a new page is blunt jump directly to the new page, and did not point out the space level of the page relationship. While iOS7 and material emphasize the z-axis, that is, the spatial level relationship between pages. Open an app in iOS, the page will spread out from the app icon you clicked, and the same design can be found everywhere on Android. Animation of transitions tells us where the page comes from, where it goes, what the space is in the entire app or system. In addition, not only the page-level animation transitions, object operations with the animation transition, from the animation can feel the process of operation changes. For example, when deleting, the trash can has a dumping animation, or it tells you the removal process by rotating the indicator bar. On the other hand, the transition animation gives the interface control a physical characteristic that mimics the physical properties of the rubber band when the space is stretched and bounced back. It is worth mentioning that in the transition animation design, Facebooke paper very prominent.

　　Three, icon animation

Interactive animations are already on the way in some apps, especially Facebook's paper animations are impressive. In the future, interactive animation will become standard, followed by more designers to move the target to the icon. Icon mainly divides into the entrance function and the operation function, the Operation function's icon after completes the click operation, usually turns to the corresponding another form. Switch between the "Back" and "menu", "select" and "Not selected", "Favorites" and "collection", "point to praise" and "Cancel Point". Now in the design, icon in the two states between the switch is usually blunt, icon animation will make the feedback after the click of a better strong, and let the interface alive, sexy up.

　　Four, large area color block action Bar

Material design language makes people's eyes bright in addition to the rich interactive animation, there are large areas of use of bright color block. In the past, Android has made people feel cold and technological, giving them a sense of distance. And the new design using the contrary to the past, in the system to use a large area of color, with color blocks to highlight the main content and title, so that the primary and secondary sense of the interface better prominent, but also let the original gray-black interface has a fashion and vitality. Color swatch selection of the use of high saturation, moderate color, the overall has a relatively strong visual impact, but not too dazzling. The Action bar is also changed from the gray-black color of the past to color, and the status bar is merged with it, which is very similar to the iOS7 design.

　　V. FAB button (Fixed Action button)

In Google's promotional film, the most eye-catching new gadget, is this naughty round small button. From the promotional film, the function of this button is not limited to "new" "Play" "Collection" "More" and other functions. It in the overall interface of the color formation of a relatively large contrast, so it will make this button in the interface is very dazzling, from such a design, this button will be burdened with the task of the main operation of the interface. Although somewhat similar to the "+" button in the path, because the iOS system itself does not have such a design, this will become the most different from iOS interactive design, for interaction designers and product managers can be a challenge.

　　Six, no Border button

In the design of iOS7, we have seen such a shadow. The most typical is the "back" button only the arrow and copy, remove the original button texture. The Material Design Action Bar is also designed to use the icon to express the function of the button. In particular, material's keyboard design style, the first minimalist keyboard style is designed by Microsoft's Windows Phone,android and iOS followed up successively. And this time material go more extreme, the keyboard button border all removed, only the English letter button. We can not say that such a design must be good, such a design may allow users to click accuracy can not be judged more quickly, lack of security. The advantage is that on a mobile phone with a small screen, the sense of crowding out of the frame gives the letter much more space.

In addition, the design of the borderless button is also reflected on the button on the Cue box.

How to make a button without a border different from the content text, which requires the designer in addition to consider color, but also need to consider the scene of the button, the designer's interpretation of the application scene is also a challenge.

　　Seven, focus on the big picture

A screen and so wide, vertical direction occupies half the screen about the big picture, remove Action Bar, only the return button design, in a year or two ago very popular summly application has been very hot. Follow-up also has some application to follow such design (such as Taobao), but not a large area popular. The Material design is bold enough to use it. Under Google's guidance, this style of design is likely to be popular.